Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Changed control for sparkline style, updated layout for sparkline settings.

Browse source
This commit is contained in:
Julia Radzhabova 2016-09-28 15:21:36 +03:00
parent 2e34d7b1f0
commit 245c8d6638
5 changed files with 90 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
apps/common/main/resources/less/combo-dataview.less
View file

@ -199,9 +199,8 @@
.combo-template(64px); .combo-template(64px);
} }
.combo-pattern { .combo-textart(@combo-dataview-height: 62px, @combo-dataview-item-margins: 4px) {
@combo-dataview-button-width: 15px; @combo-dataview-button-width: 15px;
@combo-dataview-height: 40px;
height: @combo-dataview-height; height: @combo-dataview-height;
@ -216,16 +215,8 @@
} }
.item { .item {
margin: 4px 0 4px 4px; margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
.box-shadow(none); .box-shadow(none);
&:hover {
.box-shadow(0 0 0 1px @gray);
}
// &.selected {
// .box-shadow(0 0 0 2px @primary);
// }
} }
&.disabled { &.disabled {
@ -235,6 +226,16 @@
} }
} }
} }
};
.combo-pattern {
.combo-textart(40px);
.item {
&:hover {
.box-shadow(0 0 0 1px @gray);
}
}
.dropdown-menu { .dropdown-menu {
padding-right: 2px; padding-right: 2px;
@ -247,31 +248,9 @@
}; };
.combo-textart { .combo-textart {
@combo-dataview-button-width: 15px; .combo-textart();
@combo-dataview-height: 62px; }
height: @combo-dataview-height; .combo-spark-style {
.combo-textart(58px, 2px);
.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);
}
}
}
};

40
apps/spreadsheeteditor/main/app/template/ChartSettings.template
View file

@ -38,9 +38,9 @@
</td> </td>
</tr> </tr>
</table> </table>
<table cols="2" id="spark-panel-types"> <table cols="1" id="spark-panel-types">
<tr> <tr>
<td colspan=2> <td>
<label class="header"><%= scope.strSparkType %></label> <label class="header"><%= scope.strSparkType %></label>
</td> </td>
</tr> </tr>
@ -48,26 +48,22 @@
<td class="padding-large"> <td class="padding-large">
<div id="spark-button-type" style=""></div> <div id="spark-button-type" style=""></div>
</td> </td>
<td class="padding-large">
<div id="spark-button-style" style=""></div>
</td>
</tr> </tr>
</table>
<table cols="1" id="spark-panel-points">
<tr> <tr>
<td> <td class="padding-large">
<div style="width: 100%; height: 25px;"> <div class="" id="spark-combo-style" style="width: 100%;"></div>
<label class="input-label" style="margin-top: 4px;"><%= scope.strSparkColor %></label>
<div id="spark-color-btn" style="display: inline-block; float:right;"></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div style="display:inline-block;width:100px;vertical-align: middle;"> <div style="display:inline-block;vertical-align: middle;width:55px;">
<label class="input-label" style=""><%= scope.strLineWeight %></label> <label class="input-label" style=""><%= scope.strSparkColor %></label>
<div id="spark-combo-line-type" style="width: 93px;"></div> <div id="spark-color-btn" style=""></div>
</div> </div>
<div style="display:inline-block;vertical-align: middle;">
<label class="input-label" style=""><%= scope.strLineWeight %></label>
<div id="spark-combo-line-type" style="width: 93px;"></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -75,6 +71,8 @@
<div class="separator horizontal"></div> <div class="separator horizontal"></div>
</td> </td>
</tr> </tr>
</table>
<table cols="1" id="spark-panel-points">
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<label class="header" style="margin-bottom: 8px;"><%= scope.textMarkers %></label> <label class="header" style="margin-bottom: 8px;"><%= scope.textMarkers %></label>
@ -104,16 +102,6 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<button type="button" class="btn btn-text-default" id="spark-button-edit-data" style="width:100%;"><%= scope.textEditData %></button>
</td>
</tr>
</table> </table>
<table cols="1"> <table cols="1">
<tr> <tr>

2
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -327,7 +327,7 @@
</td> </td>
<td class="padding-large"> <td class="padding-large">
<label class="header"><%= scope.textStyle %></label> <label class="header"><%= scope.textStyle %></label>
<div id="spark-dlg-button-style" style=""></div> <div id="spark-dlg-combo-style" style="width: 190px;"></div>
</td> </td>
</tr> </tr>
</table> </table>

67
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -1053,40 +1053,42 @@ define([
updateSparkStyles: function(styles) { updateSparkStyles: function(styles) {
var me = this; var me = this;
if (!this.btnSparkStyle) { if (!this.cmbSparkStyle) {
this.btnSparkStyle = new Common.UI.Button({ this.cmbSparkStyle = new Common.UI.ComboDataView({
cls : 'btn-large-dataview', itemWidth: 50,
iconCls : 'item-wrap', itemHeight: 50,
menu : new Common.UI.Menu({ menuMaxHeight: 272,
menuAlign: 'tr-br', enableKeyEvents: true,
items: [ cls: 'combo-spark-style'
{ template: _.template('<div id="id-spark-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
}); });
this.btnSparkStyle.render($('#spark-button-style')); this.cmbSparkStyle.render($('#spark-combo-style'));
this.lockedControls.push(this.btnSparkStyle); this.cmbSparkStyle.openButton.menu.cmpEl.css({
this.mnuSparkStylePicker = new Common.UI.DataView({ 'min-width': 178,
el: $('#id-spark-menu-style'), 'max-width': 178
style: 'max-height: 411px;',
parentMenu: this.btnSparkStyle.menu,
store: new Common.UI.DataViewStore(),
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
}); });
this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this));
if (this.btnSparkStyle.menu) { this.cmbSparkStyle.openButton.menu.on('show:after', function () {
this.btnSparkStyle.menu.on('show:after', function () { me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true});
me.mnuSparkStylePicker.scroller.update({alwaysVisibleY: true}); });
}); this.lockedControls.push(this.cmbSparkStyle);
}
this.mnuSparkStylePicker.on('item:click', _.bind(this.onSelectSparkStyle, this, this.btnSparkStyle));
} }
if (styles && styles.length>0){ if (styles && styles.length>1){
var stylesStore = this.mnuSparkStylePicker.store; var stylesStore = this.cmbSparkStyle.menuPicker.store,
if (stylesStore) { selectedIdx = styles[styles.length-1];
var stylearray = [], if (stylesStore.length == styles.length-1) {
selectedIdx = styles[styles.length-1]; var data = stylesStore.models;
for (var i=0; i<styles.length-1; i++) {
data[i].set('imageUrl', styles[i]);
}
if (selectedIdx<0) {
this.cmbSparkStyle.fillComboView(stylesStore.at(0), false);
this.cmbSparkStyle.fieldPicker.deselectAll();
this.cmbSparkStyle.menuPicker.deselectAll();
} else
this.cmbSparkStyle.menuPicker.selectRecord(stylesStore.at(selectedIdx));
} else {
var stylearray = [];
for (var i=0; i<styles.length-1; i++) { for (var i=0; i<styles.length-1; i++) {
stylearray.push({ stylearray.push({
imageUrl: styles[i], imageUrl: styles[i],
@ -1094,8 +1096,7 @@ define([
}); });
} }
stylesStore.reset(stylearray, {silent: false}); stylesStore.reset(stylearray, {silent: false});
this.cmbSparkStyle.fillComboView(stylesStore.at(selectedIdx<0 ? 0 : selectedIdx), selectedIdx>-1);
this.mnuSparkStylePicker.selectByIndex(selectedIdx, true);
} }
} }
}, },
@ -1186,7 +1187,7 @@ define([
textStyle: 'Style', textStyle: 'Style',
textAdvanced: 'Show advanced settings', textAdvanced: 'Show advanced settings',
strSparkType: 'Sparkline Type', strSparkType: 'Sparkline Type',
strSparkColor: 'Sparkline Color', strSparkColor: 'Color',
strLineWeight: 'Line Weight', strLineWeight: 'Line Weight',
textMarkers: 'Markers', textMarkers: 'Markers',
textNewColor: 'Add New Custom Color', textNewColor: 'Add New Custom Color',

54
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -838,33 +838,22 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnSparkType.render($('#spark-dlg-button-type')); this.btnSparkType.render($('#spark-dlg-button-type'));
this.mnuSparkTypePicker.on('item:click', _.bind(this.onSelectSparkType, this, this.btnSparkType)); this.mnuSparkTypePicker.on('item:click', _.bind(this.onSelectSparkType, this, this.btnSparkType));
this.btnSparkStyle = new Common.UI.Button({ this.cmbSparkStyle = new Common.UI.ComboDataView({
cls : 'btn-large-dataview', itemWidth: 50,
iconCls : 'item-wrap', itemHeight: 50,
menu : new Common.UI.Menu({ menuMaxHeight: 272,
additionalAlign: menuAddAlign, enableKeyEvents: true,
items: [ cls: 'combo-spark-style'
{ template: _.template('<div id="id-spark-dlg-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
}); });
this.btnSparkStyle.on('render:after', function(btn) { this.cmbSparkStyle.render($('#spark-dlg-combo-style'));
me.mnuSparkStylePicker = new Common.UI.DataView({ this.cmbSparkStyle.openButton.menu.cmpEl.css({
el: $('#id-spark-dlg-menu-style'), 'min-width': 178,
parentMenu: btn.menu, 'max-width': 178
style: 'max-height: 411px;', });
store: new Common.UI.DataViewStore(), this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this));
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>') this.cmbSparkStyle.openButton.menu.on('show:after', function () {
}); me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true});
if (me.btnSparkStyle.menu) {
me.btnSparkStyle.menu.on('show:after', function () {
me.mnuSparkStylePicker.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({ this.radioGroup = new Common.UI.RadioBox({
el: $('#spark-dlg-radio-group'), el: $('#spark-dlg-radio-group'),
@ -1293,9 +1282,15 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}, },
updateSparkStyles: function(styles) { updateSparkStyles: function(styles) {
if (styles && styles.length>0){ if (styles && styles.length>1){
var stylesStore = this.mnuSparkStylePicker.store; var picker = this.cmbSparkStyle.menuPicker,
if (stylesStore) { stylesStore = picker.store;
if (stylesStore.length == styles.length-1) {
var data = stylesStore.models;
for (var i=0; i<styles.length-1; i++) {
data[i].set('imageUrl', styles[i]);
}
} else {
var stylearray = [], var stylearray = [],
selectedIdx = styles[styles.length-1]; selectedIdx = styles[styles.length-1];
for (var i=0; i<styles.length-1; i++) { for (var i=0; i<styles.length-1; i++) {
@ -1305,8 +1300,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}); });
} }
stylesStore.reset(stylearray, {silent: false}); stylesStore.reset(stylearray, {silent: false});
this.cmbSparkStyle.fillComboView(stylesStore.at(selectedIdx<0 ? 0 : selectedIdx), selectedIdx>-1);
this.mnuSparkStylePicker.selectByIndex(selectedIdx, true);
} }
} }
}, },