Skip to content

K
kityminder-core
Commit 76b6779f authored by techird's avatar techird
Browse files
Options

style

parent 6212352c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 169 deletions
ui/ribbon/idea/image.js
View file @ 76b6779f
...@@ -26,9 +26,10 @@ KityMinder.registerUI('image', function(minder) { ...@@ -26,9 +26,10 @@ KityMinder.registerUI('image', function(minder) {
$imageButtonMenu.bindCommandState(minder, 'image'); $imageButtonMenu.bindCommandState(minder, 'image');
var $imageDialog = new FUI.Dialog({ var $imageDialog = new FUI.Dialog({
width: 500, width: 600,
height: 400, height: 600,
prompt: true, prompt: true,
className: 'image-dialog',
caption: minder.getLang('ui.image') caption: minder.getLang('ui.image')
}).appendTo(document.getElementById('content-wrapper')); }).appendTo(document.getElementById('content-wrapper'));
...@@ -36,7 +37,7 @@ KityMinder.registerUI('image', function(minder) { ...@@ -36,7 +37,7 @@ KityMinder.registerUI('image', function(minder) {
// writed by yangxiaohu 2014-10-20 // writed by yangxiaohu 2014-10-20
var tabs = new FUI.Tabs( { var tabs = new FUI.Tabs( {
buttons: [ " 插入图片", "图片搜索" ] buttons: [ "图片搜索", "插入图片" ]
} ); } );
$dialogBody.html([ $dialogBody.html([
...@@ -45,15 +46,16 @@ KityMinder.registerUI('image', function(minder) { ...@@ -45,15 +46,16 @@ KityMinder.registerUI('image', function(minder) {
].join('')); ].join(''));
tabs.appendButtonTo( document.getElementById( 'img_buttons') ); tabs.appendButtonTo( document.getElementById( 'img_buttons') );
tabs.appendPanelTo( document.getElementById( 'img_panels')); tabs.appendPanelTo( document.getElementById( 'img_panels'));
tabs.getPanel(0).getContentElement().innerHTML = ['<p><label>图片地址：</label><input type="url" class="image-url fui-widget fui-selectable" /></p>',
'<p><label>提示文本：</label><input type="text" class="image-title fui-widget fui-selectable" /></p>',
'<img class="image-preview" src="" style="max-height: 200px;" />'].join('');
tabs.getPanel(1).getContentElement().innerHTML = ['<div class="searchBar"><input id="img_searchTxt" type="text" placeholder="请输入搜索关键词">', tabs.getPanel(0).getContentElement().innerHTML = ['<div class="searchBar"><label>关键字：</label><input id="img_searchTxt" type="text" placeholder="请输入搜索关键词">',
'<input id="img_searchBtn" type="button" value="百度一下"></div>', '<button id="img_searchBtn">百度一下</button></div>',
'<div id="img_searchList"><ul id="img_searchListUl"></ul></div>' '<div id="img_searchList"><ul id="img_searchListUl"></ul></div>'
].join(''); ].join('');
tabs.getPanel(1).getContentElement().innerHTML = ['<p><label>图片地址：</label><input type="url" class="image-url fui-widget fui-selectable" /></p>',
'<p><label>提示文本：</label><input type="text" class="image-title fui-widget fui-selectable" /></p>',
'<img class="image-preview" src="" style="max-height: 200px;" />'].join('');
//the content below is from xujinquan's ueditor //the content below is from xujinquan's ueditor
/*搜索图片 */ /*搜索图片 */
...@@ -108,20 +110,13 @@ KityMinder.registerUI('image', function(minder) { ...@@ -108,20 +110,13 @@ KityMinder.registerUI('image', function(minder) {
$('#img_searchList').on('click', function(e){ $('#img_searchList').on('click', function(e){
var target = e.target || e.srcElement, var target = e.target || e.srcElement,
li = target.parentNode.parentNode, $li = $(target).closest('li');
curIndex = $(li).index();
_this.data.imgUrl = $(li).find('img').attr('src');
_this.data.imgTitle = $(li).find('a').attr('title');
if (li.tagName.toLowerCase() == 'li') { _this.data.imgUrl = $li.find('img').attr('src');
_this.data.imgTitle = $li.find('span').attr('title');
if ( ! $(li).hasClass('selected')) { $li.siblings('.selected').removeClass('selected');
$(li).siblings().removeClass('selected'); $li.addClass('selected');
$(li).addClass('selected');
}
}
}); });
}, },
/* 改变图片大小 */ /* 改变图片大小 */
...@@ -171,37 +166,26 @@ KityMinder.registerUI('image', function(minder) { ...@@ -171,37 +166,26 @@ KityMinder.registerUI('image', function(minder) {
}, },
/* 添加图片到列表界面上 */ /* 添加图片到列表界面上 */
setList: function (list) { setList: function (list) {
var i, item, p, img, link, _this = this, var i, item, p, img, title, _this = this,
listUl = $G('img_searchListUl'); listUl = $G('img_searchListUl');
listUl.innerHTML = ''; listUl.innerHTML = '';
if(list.length) { if(list.length) {
for (i = 0; i < list.length; i++) { for (i = 0; i < list.length; i++) {
item = document.createElement('li'); item = document.createElement('li');
p = document.createElement('p');
img = document.createElement('img'); img = document.createElement('img');
link = document.createElement('a'); title = document.createElement('span');
img.onload = function () {
_this.scale(this, 113, 113);
};
img.width = 113;
img.setAttribute('src', list[i].src); img.setAttribute('src', list[i].src);
title.innerHTML = list[i].title;
link.href = list[i].url; item.appendChild(img);
link.target = '_blank'; item.appendChild(title);
link.title = list[i].title;
link.innerHTML = list[i].title;
p.appendChild(img);
item.appendChild(p);
item.appendChild(link);
listUl.appendChild(item); listUl.appendChild(item);
img.onerror = function() { img.onerror = function() {
// $(this).parent('li').remove(); $(this).closest('li').remove();
$(this).parent().parent().remove(); };
}
} }
} else { } else {
listUl.innerHTML = _this.lang.searchRetry; listUl.innerHTML = _this.lang.searchRetry;
...@@ -241,10 +225,10 @@ KityMinder.registerUI('image', function(minder) { ...@@ -241,10 +225,10 @@ KityMinder.registerUI('image', function(minder) {
var index = tabs.getSelectedIndex(); var index = tabs.getSelectedIndex();
switch(index) { switch(index) {
case 0: case 1:
minder.execCommand('image', $url.val(), $title.val()); minder.execCommand('image', $url.val(), $title.val());
break; break;
case 1: case 0:
minder.execCommand('image', searchImage.data.imgUrl, searchImage.data.imgTitle); minder.execCommand('image', searchImage.data.imgUrl, searchImage.data.imgTitle);
break; break;
} }
......
ui/theme/default/css/_image_dialog.less
View file @ 76b6779f
#img_panels { #img_panels {
top: -1px;
margin: 0 auto; margin: 0 auto;
border: 1px solid #ccc; border: 1px solid #EEE;
width: 100%; height: 400px;
height: 240px;
position: relative; position: relative;
clear: both; clear: both;
z-index: 60; z-index: 60;
padding-left: 5px; padding: 20px 15px;
padding-top: 20px; background: white;
} }
#img_panels .fui-container { #img_panels .fui-container {
width: 450px; display: block;
} }
#img_panels .searchBar { #img_panels .searchBar {
...@@ -23,69 +23,52 @@ ...@@ -23,69 +23,52 @@
} }
#img_searchTxt { #img_searchTxt {
margin-left: 5px; width: 380px;
padding-left: 5px;
width: 300px;
height: 21px;
line-height: 21px;
padding: 3px 6px;
font-size: 14px;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
float: left;
} }
#img_searchBtn { #img_searchBtn {
color: white; margin-left: 10px;
border-color: #285e8e;
background-color: #3b97d7;
display: inline-block;
margin: 0 5px;
padding: 4px 10px;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
font-size: 14px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: top;
float: right;
} }
#img_buttons { #img_buttons {
height: 26px; height: 35px;
position: relative; position: relative;
z-index: 70; z-index: 70;
background: #fcfcfc;
overflow: visible;
} }
#img_buttons .fui-button { #img_buttons .fui-button {
padding: 0px 5px; box-sizing: border-box;
margin-right: 5px; height: 35px;
height: 24px; line-height: 35px;
border: 1px solid #ccc; padding: 0 15px;
border: 1px solid transparent;
text-align: center; text-align: center;
line-height: 30px; .fui-icon {display: none;}
cursor: pointer; .fui-label {
background: #ccc; display: block;
height: 35px;
line-height: 35px;
}
&:hover {
background: none;
text-decoration: underline;
}
} }
#img_buttons .fui-button.fui-selected { #img_buttons .fui-button.fui-selected {
height: 26px;
background: #fff; background: #fff;
border-color: #eee #eee white #eee;
height: 36px;
&:hover {
text-decoration: none;
}
} }
#img_searchList { #img_searchList {
width: 100%; height: 370px;
height: 200px;
overflow: hidden; overflow: hidden;
clear: both; clear: both;
} }
...@@ -94,7 +77,6 @@ ...@@ -94,7 +77,6 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
clear: both; clear: both;
width: 100%;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
...@@ -107,26 +89,51 @@ ...@@ -107,26 +89,51 @@
float: left; float: left;
display: block; display: block;
width: 115px; width: 115px;
margin: 5px 10px 5px 20px; height: 115px;
line-height: 115px;
margin: 6px;
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
position: relative; position: relative;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
filter: alpha(Opacity=100); border: 2px solid #fcfcfc;
-moz-opacity: 1;
opacity: 1; img {
border: 2px solid #eee; max-width: 111px;
max-height: 115px;
vertical-align: middle;
}
span {
display: block;
position: absolute;
bottom: 0;
height: 20px;
background: rgba(0, 0, 0, .5);
left: 0;
right: 0;
color: white;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
opacity: 0;
transform: translate(0, 20px);
transition: all .2s ease;
}
&:hover span {
opacity: 1;
transform: translate(0, 0);
}
} }
#img_searchListUl li.selected { #img_searchListUl li.selected {
opacity: 0.4; border: 2px solid @theme-color;
border: 2px solid #00a0e9;
} }
#img_searchListUl li p{ #img_searchListUl li p{
......
ui/theme/default/css/_widgets.less
View file @ 76b6779f
...@@ -288,7 +288,7 @@ input[type=search]::-ms-clear { ...@@ -288,7 +288,7 @@ input[type=search]::-ms-clear {
text-align: center; text-align: center;
&:hover { &:hover {
background: lighten(@ui-color, 60%); background: lighten(@ui-color, 70%);
} }
&:active { &:active {
background: lighten(@ui-color, 55%); background: lighten(@ui-color, 55%);
...@@ -297,7 +297,7 @@ input[type=search]::-ms-clear { ...@@ -297,7 +297,7 @@ input[type=search]::-ms-clear {
&.fui-xdialog-ok-btn { &.fui-xdialog-ok-btn {
background: @ui-color; background: @ui-color;
&:hover { &:hover {
background: lighten(@ui-color, 5%); background: lighten(@ui-color, 10%);
} }
&:active { &:active {
background: darken(@ui-color, 3%); background: darken(@ui-color, 3%);
......
ui/theme/default/css/default.all.css
View file @ 76b6779f
...@@ -1099,7 +1099,7 @@ input[type=search]::-ms-clear { ...@@ -1099,7 +1099,7 @@ input[type=search]::-ms-clear {
margin: 8px 8px 0 0; margin: 8px 8px 0 0;
} }
.fui-dialog .fui-dialog-foot .fui-button:hover { .fui-dialog .fui-dialog-foot .fui-button:hover {
background: #d7dbe3; background: #f5f6f8;
} }
.fui-dialog .fui-dialog-foot .fui-button:active { .fui-dialog .fui-dialog-foot .fui-button:active {
background: #c9cdd8; background: #c9cdd8;
...@@ -1109,7 +1109,7 @@ input[type=search]::-ms-clear { ...@@ -1109,7 +1109,7 @@ input[type=search]::-ms-clear {
border-color: transparent; border-color: transparent;
} }
.fui-dialog .fui-dialog-foot .fui-button.fui-xdialog-ok-btn:hover { .fui-dialog .fui-dialog-foot .fui-button.fui-xdialog-ok-btn:hover {
background: #444b5e; background: #4e576d;
} }
.fui-dialog .fui-dialog-foot .fui-button.fui-xdialog-ok-btn:active { .fui-dialog .fui-dialog-foot .fui-button.fui-xdialog-ok-btn:active {
background: #333846; background: #333846;
...@@ -3062,19 +3062,17 @@ ul.resource-list li { ...@@ -3062,19 +3062,17 @@ ul.resource-list li {
margin: 3px; margin: 3px;
} }
#img_panels { #img_panels {
top: -1px;
margin: 0 auto; margin: 0 auto;
border: 1px solid #ccc; border: 1px solid #EEE;
width: 100%; height: 400px;
height: 240px;
position: relative; position: relative;
clear: both; clear: both;
z-index: 60; z-index: 60;
padding-left: 5px; padding: 20px 15px;
padding-top: 20px; background: white;
} }
#img_panels .fui-container { #img_panels .fui-container {
width: 450px; display: block;
} }
#img_panels .searchBar { #img_panels .searchBar {
width: 100%; width: 100%;
...@@ -3083,65 +3081,49 @@ ul.resource-list li { ...@@ -3083,65 +3081,49 @@ ul.resource-list li {
padding: 0px; padding: 0px;
} }
#img_searchTxt { #img_searchTxt {
margin-left: 5px; width: 380px;
padding-left: 5px;
width: 300px;
height: 21px;
line-height: 21px;
padding: 3px 6px;
font-size: 14px;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
float: left;
} }
#img_searchBtn { #img_searchBtn {
color: white; margin-left: 10px;
border-color: #285e8e;
background-color: #3b97d7;
display: inline-block;
margin: 0 5px;
padding: 4px 10px;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
font-size: 14px;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: top;
float: right;
} }
#img_buttons { #img_buttons {
height: 26px; height: 35px;
position: relative; position: relative;
z-index: 70; z-index: 70;
background: #fcfcfc;
overflow: visible;
} }
#img_buttons .fui-button { #img_buttons .fui-button {
padding: 0px 5px; -moz-box-sizing: border-box;
margin-right: 5px; box-sizing: border-box;
height: 24px; height: 35px;
border: 1px solid #ccc; line-height: 35px;
padding: 0 15px;
border: 1px solid transparent;
text-align: center; text-align: center;
line-height: 30px; }
cursor: pointer; #img_buttons .fui-button .fui-icon {
background: #ccc; display: none;
}
#img_buttons .fui-button .fui-label {
display: block;
height: 35px;
line-height: 35px;
}
#img_buttons .fui-button:hover {
background: none;
text-decoration: underline;
} }
#img_buttons .fui-button.fui-selected { #img_buttons .fui-button.fui-selected {
height: 26px;
background: #fff; background: #fff;
border-color: #eee #eee white #eee;
height: 36px;
}
#img_buttons .fui-button.fui-selected:hover {
text-decoration: none;
} }
#img_searchList { #img_searchList {
width: 100%; height: 370px;
height: 200px;
overflow: hidden; overflow: hidden;
clear: both; clear: both;
} }
...@@ -3150,7 +3132,6 @@ ul.resource-list li { ...@@ -3150,7 +3132,6 @@ ul.resource-list li {
padding: 0; padding: 0;
list-style: none; list-style: none;
clear: both; clear: both;
width: 100%;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
...@@ -3162,25 +3143,52 @@ ul.resource-list li { ...@@ -3162,25 +3143,52 @@ ul.resource-list li {
float: left; float: left;
display: block; display: block;
width: 115px; width: 115px;
margin: 5px 10px 5px 20px; height: 115px;
line-height: 115px;
margin: 6px;
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position: relative; position: relative;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
filter: alpha(opacity=100); border: 2px solid #fcfcfc;
-moz-opacity: 1; }
#img_searchListUl li img {
max-width: 111px;
max-height: 115px;
vertical-align: middle;
}
#img_searchListUl li span {
display: block;
position: absolute;
bottom: 0;
height: 20px;
background: rgba(0, 0, 0, 0.5);
left: 0;
right: 0;
color: white;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
opacity: 0;
-webkit-transform: translate(0, 20px);
-ms-transform: translate(0, 20px);
transform: translate(0, 20px);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
#img_searchListUl li:hover span {
opacity: 1; opacity: 1;
border: 2px solid #eee; -webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
} }
#img_searchListUl li.selected { #img_searchListUl li.selected {
opacity: 0.4; border: 2px solid #fc8383;
border: 2px solid #00a0e9;
} }
#img_searchListUl li p { #img_searchListUl li p {
background-color: #eee; background-color: #eee;
......
ui/theme/default/css/default.all.css.map
View file @ 76b6779f
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment