Commit a9274b38 authored by techird's avatar techird

ui optimize

parent 02111ec9
...@@ -7,8 +7,8 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -7,8 +7,8 @@ KityMinder.LANG[ 'zh-cn' ] = {
'forecolor': '字体颜色', 'forecolor': '字体颜色',
'fontfamily': '字体', 'fontfamily': '字体',
'fontsize': '字号', 'fontsize': '字号',
'layoutstyle': '选择主题', 'layoutstyle': '主题',
'saveto': '另存为...' 'saveto': '导出'
}, },
'popupcolor': { 'popupcolor': {
'clearColor': '清空颜色', 'clearColor': '清空颜色',
......
KM.registerUI('layoutstyle fontfamily fontsize', function( name ) { KM.registerUI( 'layoutstyle fontfamily fontsize', function ( name ) {
var me = this, var me = this,
label = me.getLang('tooltips.' + name), label = me.getLang( 'tooltips.' + name ),
options = { options = {
label: label, label: label,
title: label, title: label,
comboboxName: name, comboboxName: name,
items: me.getOptions(name) || [], items: me.getOptions( name ) || [],
itemStyles: [], itemStyles: [],
value: [], value: [],
autowidthitem: [] autowidthitem: []
...@@ -14,66 +14,65 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) { ...@@ -14,66 +14,65 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) {
$combox = null, $combox = null,
comboboxWidget = null; comboboxWidget = null;
if(options.items.length == 0){ if ( options.items.length == 0 ) {
return null; return null;
} }
switch ( name ) { switch ( name ) {
case 'layoutstyle': case 'layoutstyle':
options = transForLayoutstyle( options ); options = transForLayoutstyle( options );
break; break;
case 'fontfamily': case 'fontfamily':
options = transForFontfamily( options ); options = transForFontfamily( options );
break; break;
case 'fontsize': case 'fontsize':
options = transForFontsize( options ); options = transForFontsize( options );
break; break;
} }
//实例化 //实例化
$combox = $.kmuibuttoncombobox(options).css('zIndex',me.getOptions('zIndex') + 1); $combox = $.kmuibuttoncombobox( options ).css( 'zIndex', me.getOptions( 'zIndex' ) + 1 );
comboboxWidget = $combox.kmui(); comboboxWidget = $combox.kmui();
comboboxWidget.on('comboboxselect', function( evt, res ){ comboboxWidget.on( 'comboboxselect', function ( evt, res ) {
me.execCommand( name, res.value ); me.execCommand( name, res.value );
}).on("beforeshow", function(){ } ).on( "beforeshow", function () {
if( $combox.parent().length === 0 ) { if ( $combox.parent().length === 0 ) {
$combox.appendTo( me.$container.find('.kmui-dialog-container') ); $combox.appendTo( me.$container.find( '.kmui-dialog-container' ) );
} }
}); } );
//状态反射 //状态反射
this.on('interactchange',function( ){ this.on( 'interactchange', function () {
var state = this.queryCommandState( name ), var state = this.queryCommandState( name ),
value = this.queryCommandValue( name ); value = this.queryCommandValue( name );
//设置按钮状态 //设置按钮状态
comboboxWidget.button().kmui().disabled( state == -1 ).active( state == 1 ); comboboxWidget.button().kmui().disabled( state == -1 ).active( state == 1 );
if(value){ if ( value ) {
//设置label //设置label
value = value.replace(/['"]/g, '').toLowerCase().split(/['|"]?\s*,\s*[\1]?/); value = value.replace( /['"]/g, '' ).toLowerCase().split( /['|"]?\s*,\s*[\1]?/ );
comboboxWidget.selectItemByLabel( value ); comboboxWidget.selectItemByLabel( value );
} }
}); } );
return comboboxWidget.button().addClass('kmui-combobox'); return comboboxWidget.button().addClass( 'kmui-combobox' );
function transForLayoutstyle( options ) {
function transForLayoutstyle ( options ) {
var tempItems = []; var tempItems = [];
utils.each(options.items,function(k,v){ utils.each( options.items, function ( k, v ) {
options.value.push(k); options.value.push( k );
tempItems.push(k); tempItems.push( k );
options.autowidthitem.push($.wordCountAdaptive( tempItems[ tempItems.length - 1 ] ) ); options.autowidthitem.push( $.wordCountAdaptive( tempItems[ tempItems.length - 1 ] ) );
}); } );
options.items = tempItems; options.items = tempItems;
...@@ -82,16 +81,16 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) { ...@@ -82,16 +81,16 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) {
} }
//字体参数转换 //字体参数转换
function transForFontfamily ( options ) { function transForFontfamily( options ) {
var temp = null, var temp = null,
tempItems = []; tempItems = [];
for( var i = 0, len = options.items.length; i < len; i++ ) { for ( var i = 0, len = options.items.length; i < len; i++ ) {
temp = options.items[ i ].val; temp = options.items[ i ].val;
tempItems.push( temp.split(/\s*,\s*/)[0] ); tempItems.push( temp.split( /\s*,\s*/ )[ 0 ] );
options.itemStyles.push('font-family: ' + temp); options.itemStyles.push( 'font-family: ' + temp );
options.value.push( temp ); options.value.push( temp );
options.autowidthitem.push( $.wordCountAdaptive( tempItems[ i ] ) ); options.autowidthitem.push( $.wordCountAdaptive( tempItems[ i ] ) );
...@@ -104,7 +103,7 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) { ...@@ -104,7 +103,7 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) {
} }
//字体大小参数转换 //字体大小参数转换
function transForFontsize ( options ) { function transForFontsize( options ) {
var temp = null, var temp = null,
tempItems = []; tempItems = [];
...@@ -112,11 +111,11 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) { ...@@ -112,11 +111,11 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) {
options.itemStyles = []; options.itemStyles = [];
options.value = []; options.value = [];
for( var i = 0, len = options.items.length; i < len; i++ ) { for ( var i = 0, len = options.items.length; i < len; i++ ) {
temp = options.items[ i ]; temp = options.items[ i ];
tempItems.push( temp ); tempItems.push( temp );
options.itemStyles.push('font-size: ' + temp +'px'); options.itemStyles.push( 'font-size: ' + temp + 'px' );
} }
...@@ -128,12 +127,12 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) { ...@@ -128,12 +127,12 @@ KM.registerUI('layoutstyle fontfamily fontsize', function( name ) {
} }
}); } );
KM.registerUI('forecolor', function( name ) { KM.registerUI( 'forecolor', function ( name ) {
function getCurrentColor() { function getCurrentColor() {
return $colorLabel.css('background-color'); return $colorLabel.css( 'background-color' );
} }
var me = this, var me = this,
...@@ -141,52 +140,52 @@ KM.registerUI('forecolor', function( name ) { ...@@ -141,52 +140,52 @@ KM.registerUI('forecolor', function( name ) {
$colorLabel = null, $colorLabel = null,
$btn = null; $btn = null;
this.on('interactchange', function(){ this.on( 'interactchange', function () {
var state = this.queryCommandState( name ); var state = this.queryCommandState( name );
$btn.kmui().disabled( state == -1 ).active( state == 1 ); $btn.kmui().disabled( state == -1 ).active( state == 1 );
}); } );
$btn = $.kmuicolorsplitbutton({ $btn = $.kmuicolorsplitbutton( {
icon: name, icon: name,
caret: true, caret: true,
name: name, name: name,
title: this.getLang('tooltips')[name] || '', title: this.getLang( 'tooltips' )[ name ] || '',
click: function() { click: function () {
me.execCommand( name, getCurrentColor() ); me.execCommand( name, getCurrentColor() );
} }
}); } );
$colorLabel = $btn.kmui().colorLabel(); $colorLabel = $btn.kmui().colorLabel();
$colorPickerWidget = $.kmuicolorpicker({ $colorPickerWidget = $.kmuicolorpicker( {
name: name, name: name,
lang_clearColor: me.getLang('popupcolor')['clearColor']|| '', lang_clearColor: me.getLang( 'popupcolor' )[ 'clearColor' ] || '',
lang_themeColor: me.getLang('popupcolor')['themeColor'] || '', lang_themeColor: me.getLang( 'popupcolor' )[ 'themeColor' ] || '',
lang_standardColor: me.getLang('popupcolor')['standardColor'] || '' lang_standardColor: me.getLang( 'popupcolor' )[ 'standardColor' ] || ''
}).on('pickcolor', function( evt, color ){ } ).on( 'pickcolor', function ( evt, color ) {
window.setTimeout( function(){ window.setTimeout( function () {
$colorLabel.css("backgroundColor", color); $colorLabel.css( "backgroundColor", color );
me.execCommand( name, color ); me.execCommand( name, color );
}, 0 ); }, 0 );
}).on('show',function(){ } ).on( 'show', function () {
KM.setActiveWidget( $colorPickerWidget.kmui().root() ); KM.setActiveWidget( $colorPickerWidget.kmui().root() );
}).css('zIndex',me.getOptions('zIndex') + 1); } ).css( 'zIndex', me.getOptions( 'zIndex' ) + 1 );
$btn.kmui().on('arrowclick',function(){ $btn.kmui().on( 'arrowclick', function () {
if(!$colorPickerWidget.parent().length){ if ( !$colorPickerWidget.parent().length ) {
me.$container.find('.kmui-dialog-container').append($colorPickerWidget); me.$container.find( '.kmui-dialog-container' ).append( $colorPickerWidget );
} }
$colorPickerWidget.kmui().show($btn,{ $colorPickerWidget.kmui().show( $btn, {
caretDir:"down", caretDir: "down",
offsetTop:-5, offsetTop: -5,
offsetLeft:8, offsetLeft: 8,
caretLeft:11, caretLeft: 11,
caretTop:-8 caretTop: -8
}); } );
}).register('click', $btn, function () { } ).register( 'click', $btn, function () {
$colorPickerWidget.kmui().hide() $colorPickerWidget.kmui().hide()
}); } );
return $btn; return $btn;
}); } );
\ No newline at end of file \ No newline at end of file
...@@ -90,7 +90,7 @@ KityMinder.registerModule( "fontmodule", function () { ...@@ -90,7 +90,7 @@ KityMinder.registerModule( "fontmodule", function () {
e.node.getTextShape().fill( val ); e.node.getTextShape().fill( val );
} }
if ( val = e.node.getData( 'fontsize' ) ) { if ( val = e.node.getData( 'fontsize' ) ) {
e.node.getTextShape().setSize(val); e.node.getTextShape().setSize( val );
} }
} }
} }
......
.kmui-popup{ .kmui-popup{
display: none; display: none;
background: url('../images/pop-bg.png') repeat #fff; /*background: url('../images/pop-bg.png') repeat #fff;*/
background: white;
padding: 2px; padding: 2px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
} }
.kmui-popup .kmui-popup-body{ .kmui-popup .kmui-popup-body{
border: 1px solid #bfbfbf; /*border: 1px solid #bfbfbf;*/
background-color: #fff; background-color: #fff;
} }
.kmui-popup .kmui-popup-caret{ .kmui-popup .kmui-popup-caret{
...@@ -12,9 +14,9 @@ ...@@ -12,9 +14,9 @@
height: 11px; height: 11px;
} }
.kmui-popup .kmui-popup-caret.up{ .kmui-popup .kmui-popup-caret.up{
background:url('../images/caret.png') no-repeat 0 0; /*background:url('../images/caret.png') no-repeat 0 0;*/
} }
.kmui-popup .kmui-popup-caret.down{ .kmui-popup .kmui-popup-caret.down{
background:url('../images/caret.png') no-repeat 0 0; /*background:url('../images/caret.png') no-repeat 0 0;*/
} }
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