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) {
$imageButtonMenu.bindCommandState(minder, 'image');
var $imageDialog = new FUI.Dialog({
width: 500,
height: 400,
width: 600,
height: 600,
prompt: true,
className: 'image-dialog',
caption: minder.getLang('ui.image')
}).appendTo(document.getElementById('content-wrapper'));
......@@ -36,7 +37,7 @@ KityMinder.registerUI('image', function(minder) {
// writed by yangxiaohu 2014-10-20
var tabs = new FUI.Tabs( {
buttons: [ " 插入图片", "图片搜索" ]
buttons: [ "图片搜索", "插入图片" ]
} );
$dialogBody.html([
......@@ -45,15 +46,16 @@ KityMinder.registerUI('image', function(minder) {
].join(''));
tabs.appendButtonTo( document.getElementById( 'img_buttons') );
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="请输入搜索关键词">',
'<input id="img_searchBtn" type="button" value="百度一下"></div>',
tabs.getPanel(0).getContentElement().innerHTML = ['<div class="searchBar"><label>关键字：</label><input id="img_searchTxt" type="text" placeholder="请输入搜索关键词">',
'<button id="img_searchBtn">百度一下</button></div>',
'<div id="img_searchList"><ul id="img_searchListUl"></ul></div>'
].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
/*搜索图片 */
......@@ -108,20 +110,13 @@ KityMinder.registerUI('image', function(minder) {
$('#img_searchList').on('click', function(e){
var target = e.target || e.srcElement,
li = target.parentNode.parentNode,
curIndex = $(li).index();
_this.data.imgUrl = $(li).find('img').attr('src');
_this.data.imgTitle = $(li).find('a').attr('title');
$li = $(target).closest('li');
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().removeClass('selected');
$(li).addClass('selected');
}
}
$li.siblings('.selected').removeClass('selected');
$li.addClass('selected');
});
},
/* 改变图片大小 */
......@@ -171,37 +166,26 @@ KityMinder.registerUI('image', function(minder) {
},
/* 添加图片到列表界面上 */
setList: function (list) {
var i, item, p, img, link, _this = this,
var i, item, p, img, title, _this = this,
listUl = $G('img_searchListUl');
listUl.innerHTML = '';
if(list.length) {
for (i = 0; i < list.length; i++) {
item = document.createElement('li');
p = document.createElement('p');
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);
title.innerHTML = list[i].title;
link.href = list[i].url;
link.target = '_blank';
link.title = list[i].title;
link.innerHTML = list[i].title;
p.appendChild(img);
item.appendChild(p);
item.appendChild(link);
item.appendChild(img);
item.appendChild(title);
listUl.appendChild(item);
img.onerror = function() {
// $(this).parent('li').remove();
$(this).parent().parent().remove();
}
$(this).closest('li').remove();
};
}
} else {
listUl.innerHTML = _this.lang.searchRetry;
......@@ -241,10 +225,10 @@ KityMinder.registerUI('image', function(minder) {
var index = tabs.getSelectedIndex();
switch(index) {
case 0:
case 1:
minder.execCommand('image', $url.val(), $title.val());
break;
case 1:
case 0:
minder.execCommand('image', searchImage.data.imgUrl, searchImage.data.imgTitle);
break;
}
......
ui/theme/default/css/_image_dialog.less
View file @ 76b6779f
#img_panels {
top: -1px;
margin: 0 auto;
border: 1px solid #ccc;
width: 100%;
height: 240px;
border: 1px solid #EEE;
height: 400px;
position: relative;
clear: both;
z-index: 60;
padding-left: 5px;
padding-top: 20px;
padding: 20px 15px;
background: white;
}
#img_panels .fui-container {
width: 450px;
display: block;
}
#img_panels .searchBar {
......@@ -23,69 +23,52 @@
}
#img_searchTxt {
margin-left: 5px;
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;
width: 380px;
}
#img_searchBtn {
color: white;
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;
margin-left: 10px;
}
#img_buttons {
height: 26px;
height: 35px;
position: relative;
z-index: 70;
background: #fcfcfc;
overflow: visible;
}
#img_buttons .fui-button {
padding: 0px 5px;
margin-right: 5px;
height: 24px;
border: 1px solid #ccc;
box-sizing: border-box;
height: 35px;
line-height: 35px;
padding: 0 15px;
border: 1px solid transparent;
text-align: center;
line-height: 30px;
cursor: pointer;
background: #ccc;
.fui-icon {display: none;}
.fui-label {
display: block;
height: 35px;
line-height: 35px;
}
&:hover {
background: none;
text-decoration: underline;
}
}
#img_buttons .fui-button.fui-selected {
height: 26px;
background: #fff;
border-color: #eee #eee white #eee;
height: 36px;
&:hover {
text-decoration: none;
}
}
#img_searchList {
width: 100%;
height: 200px;
height: 370px;
overflow: hidden;
clear: both;
}
......@@ -94,7 +77,6 @@
padding: 0;
list-style: none;
clear: both;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
......@@ -107,26 +89,51 @@
float: left;
display: block;
width: 115px;
margin: 5px 10px 5px 20px;
height: 115px;
line-height: 115px;
margin: 6px;
padding: 0;
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;
vertical-align: top;
text-align: center;
overflow: hidden;
cursor: pointer;
filter: alpha(Opacity=100);
-moz-opacity: 1;
opacity: 1;
border: 2px solid #eee;
border: 2px solid #fcfcfc;
img {
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 {
opacity: 0.4;
border: 2px solid #00a0e9;
border: 2px solid @theme-color;
}
#img_searchListUl li p{
......
ui/theme/default/css/_widgets.less
View file @ 76b6779f
......@@ -288,7 +288,7 @@ input[type=search]::-ms-clear {
text-align: center;
&:hover {
background: lighten(@ui-color, 60%);
background: lighten(@ui-color, 70%);
}
&:active {
background: lighten(@ui-color, 55%);
......@@ -297,7 +297,7 @@ input[type=search]::-ms-clear {
&.fui-xdialog-ok-btn {
background: @ui-color;
&:hover {
background: lighten(@ui-color, 5%);
background: lighten(@ui-color, 10%);
}
&:active {
background: darken(@ui-color, 3%);
......
ui/theme/default/css/default.all.css
View file @ 76b6779f
......@@ -1099,7 +1099,7 @@ input[type=search]::-ms-clear {
margin: 8px 8px 0 0;
}
.fui-dialog .fui-dialog-foot .fui-button:hover {
background: #d7dbe3;
background: #f5f6f8;
}
.fui-dialog .fui-dialog-foot .fui-button:active {
background: #c9cdd8;
......@@ -1109,7 +1109,7 @@ input[type=search]::-ms-clear {
border-color: transparent;
}
.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 {
background: #333846;
......@@ -3062,19 +3062,17 @@ ul.resource-list li {
margin: 3px;
}
#img_panels {
top: -1px;
margin: 0 auto;
border: 1px solid #ccc;
width: 100%;
height: 240px;
border: 1px solid #EEE;
height: 400px;
position: relative;
clear: both;
z-index: 60;
padding-left: 5px;
padding-top: 20px;
padding: 20px 15px;
background: white;
}
#img_panels .fui-container {
width: 450px;
display: block;
}
#img_panels .searchBar {
width: 100%;
......@@ -3083,65 +3081,49 @@ ul.resource-list li {
padding: 0px;
}
#img_searchTxt {
margin-left: 5px;
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;
width: 380px;
}
#img_searchBtn {
color: white;
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;
margin-left: 10px;
}
#img_buttons {
height: 26px;
height: 35px;
position: relative;
z-index: 70;
background: #fcfcfc;
overflow: visible;
}
#img_buttons .fui-button {
padding: 0px 5px;
margin-right: 5px;
height: 24px;
border: 1px solid #ccc;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 35px;
line-height: 35px;
padding: 0 15px;
border: 1px solid transparent;
text-align: center;
line-height: 30px;
cursor: pointer;
background: #ccc;
}
#img_buttons .fui-button .fui-icon {
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 {
height: 26px;
background: #fff;
border-color: #eee #eee white #eee;
height: 36px;
}
#img_buttons .fui-button.fui-selected:hover {
text-decoration: none;
}
#img_searchList {
width: 100%;
height: 200px;
height: 370px;
overflow: hidden;
clear: both;
}
......@@ -3150,7 +3132,6 @@ ul.resource-list li {
padding: 0;
list-style: none;
clear: both;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
......@@ -3162,25 +3143,52 @@ ul.resource-list li {
float: left;
display: block;
width: 115px;
margin: 5px 10px 5px 20px;
height: 115px;
line-height: 115px;
margin: 6px;
padding: 0;
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;
vertical-align: top;
text-align: center;
overflow: hidden;
cursor: pointer;
filter: alpha(opacity=100);
-moz-opacity: 1;
border: 2px solid #fcfcfc;
}
#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;
border: 2px solid #eee;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#img_searchListUl li.selected {
opacity: 0.4;
border: 2px solid #00a0e9;
border: 2px solid #fc8383;
}
#img_searchListUl li p {
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