From 245c8d66386f30f44c76ff2eb569b7d836a708af Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 28 Sep 2016 15:21:36 +0300 Subject: [PATCH] [SSE] Changed control for sparkline style, updated layout for sparkline settings. --- .../main/resources/less/combo-dataview.less | 55 +++++---------- .../main/app/template/ChartSettings.template | 40 ++++------- .../app/template/ChartSettingsDlg.template | 2 +- .../main/app/view/ChartSettings.js | 67 ++++++++++--------- .../main/app/view/ChartSettingsDlg.js | 54 +++++++-------- 5 files changed, 90 insertions(+), 128 deletions(-) diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index 04190efbf..7aad249b9 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -199,9 +199,8 @@ .combo-template(64px); } -.combo-pattern { +.combo-textart(@combo-dataview-height: 62px, @combo-dataview-item-margins: 4px) { @combo-dataview-button-width: 15px; - @combo-dataview-height: 40px; height: @combo-dataview-height; @@ -216,16 +215,8 @@ } .item { - margin: 4px 0 4px 4px; + margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins; .box-shadow(none); - - &:hover { - .box-shadow(0 0 0 1px @gray); - } - -// &.selected { -// .box-shadow(0 0 0 2px @primary); -// } } &.disabled { @@ -235,6 +226,16 @@ } } } +}; + +.combo-pattern { + .combo-textart(40px); + + .item { + &:hover { + .box-shadow(0 0 0 1px @gray); + } + } .dropdown-menu { padding-right: 2px; @@ -247,31 +248,9 @@ }; .combo-textart { - @combo-dataview-button-width: 15px; - @combo-dataview-height: 62px; + .combo-textart(); +} - height: @combo-dataview-height; - - .view { - margin-right: -@combo-dataview-button-width; - padding-right: @combo-dataview-button-width; - } - - .button { - width: @combo-dataview-button-width; - height: @combo-dataview-height; - } - - .item { - margin: 4px 0 4px 4px; - .box-shadow(none); - } - - &.disabled { - .item { - &:hover:not(.selected) { - .box-shadow(none); - } - } - } -}; +.combo-spark-style { + .combo-textart(58px, 2px); +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettings.template b/apps/spreadsheeteditor/main/app/template/ChartSettings.template index 5119e4c26..2d0d1accb 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettings.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettings.template @@ -38,9 +38,9 @@ - +
- @@ -48,26 +48,22 @@ - -
+
-
-
- - @@ -75,6 +71,8 @@
+
-
- -
-
+ 		+
-
- -
-
+
+ +
+
+
+ +
+
+ - - - - - -
@@ -104,16 +102,6 @@
-
-
- -
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index b698ee422..b0fec0a0e 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -327,7 +327,7 @@
-
+
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index 95c410e02..0600b9be7 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -1053,40 +1053,42 @@ define([ updateSparkStyles: function(styles) { var me = this; - if (!this.btnSparkStyle) { - this.btnSparkStyle = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) + if (!this.cmbSparkStyle) { + this.cmbSparkStyle = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 272, + enableKeyEvents: true, + cls: 'combo-spark-style' }); - this.btnSparkStyle.render($('#spark-button-style')); - this.lockedControls.push(this.btnSparkStyle); - this.mnuSparkStylePicker = new Common.UI.DataView({ - el: $('#id-spark-menu-style'), - style: 'max-height: 411px;', - parentMenu: this.btnSparkStyle.menu, - store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
') + this.cmbSparkStyle.render($('#spark-combo-style')); + this.cmbSparkStyle.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 }); - - if (this.btnSparkStyle.menu) { - this.btnSparkStyle.menu.on('show:after', function () { - me.mnuSparkStylePicker.scroller.update({alwaysVisibleY: true}); - }); - } - this.mnuSparkStylePicker.on('item:click', _.bind(this.onSelectSparkStyle, this, this.btnSparkStyle)); + this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this)); + this.cmbSparkStyle.openButton.menu.on('show:after', function () { + me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbSparkStyle); } - if (styles && styles.length>0){ - var stylesStore = this.mnuSparkStylePicker.store; - if (stylesStore) { - var stylearray = [], - selectedIdx = styles[styles.length-1]; + if (styles && styles.length>1){ + var stylesStore = this.cmbSparkStyle.menuPicker.store, + selectedIdx = styles[styles.length-1]; + if (stylesStore.length == styles.length-1) { + var data = stylesStore.models; + for (var i=0; i-1); } } }, @@ -1186,7 +1187,7 @@ define([ textStyle: 'Style', textAdvanced: 'Show advanced settings', strSparkType: 'Sparkline Type', - strSparkColor: 'Sparkline Color', + strSparkColor: 'Color', strLineWeight: 'Line Weight', textMarkers: 'Markers', textNewColor: 'Add New Custom Color', diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 2115452eb..37f4522af 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -838,33 +838,22 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnSparkType.render($('#spark-dlg-button-type')); this.mnuSparkTypePicker.on('item:click', _.bind(this.onSelectSparkType, this, this.btnSparkType)); - this.btnSparkStyle = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap', - menu : new Common.UI.Menu({ - additionalAlign: menuAddAlign, - items: [ - { template: _.template('
') } - ] - }) + this.cmbSparkStyle = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 272, + enableKeyEvents: true, + cls: 'combo-spark-style' }); - this.btnSparkStyle.on('render:after', function(btn) { - me.mnuSparkStylePicker = new Common.UI.DataView({ - el: $('#id-spark-dlg-menu-style'), - parentMenu: btn.menu, - style: 'max-height: 411px;', - store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
') - }); - - if (me.btnSparkStyle.menu) { - me.btnSparkStyle.menu.on('show:after', function () { - me.mnuSparkStylePicker.scroller.update({alwaysVisibleY: true}); - }); - } + this.cmbSparkStyle.render($('#spark-dlg-combo-style')); + this.cmbSparkStyle.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this)); + this.cmbSparkStyle.openButton.menu.on('show:after', function () { + me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true}); }); - this.btnSparkStyle.render($('#spark-dlg-button-style')); - this.mnuSparkStylePicker.on('item:click', _.bind(this.onSelectSparkStyle, this, this.btnSparkStyle)); this.radioGroup = new Common.UI.RadioBox({ el: $('#spark-dlg-radio-group'), @@ -1293,9 +1282,15 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' }, updateSparkStyles: function(styles) { - if (styles && styles.length>0){ - var stylesStore = this.mnuSparkStylePicker.store; - if (stylesStore) { + if (styles && styles.length>1){ + var picker = this.cmbSparkStyle.menuPicker, + stylesStore = picker.store; + if (stylesStore.length == styles.length-1) { + var data = stylesStore.models; + for (var i=0; i-1); } } },