[SSE] Changed control for sparkline style, updated layout for sparkline settings.
This commit is contained in:
Julia Radzhabova
parent
2e34d7b1f0
commit
245c8d6638
|
|
@ -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;
|
||||
|
||||
height: @combo-dataview-height;
|
||||
|
||||
.view {
|
||||
margin-right: -@combo-dataview-button-width;
|
||||
padding-right: @combo-dataview-button-width;
|
||||
.combo-textart();
|
||||
}
|
||||
|
||||
.button {
|
||||
width: @combo-dataview-button-width;
|
||||
height: @combo-dataview-height;
|
||||
.combo-spark-style {
|
||||
.combo-textart(58px, 2px);
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px 0 4px 4px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.item {
|
||||
&:hover:not(.selected) {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="2" id="spark-panel-types">
|
||||
<table cols="1" id="spark-panel-types">
|
||||
<tr>
|
||||
<td colspan=2>
|
||||
<td>
|
||||
<label class="header"><%= scope.strSparkType %></label>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -48,23 +48,19 @@
|
|||
<td class="padding-large">
|
||||
<div id="spark-button-type" style=""></div>
|
||||
</td>
|
||||
<td class="padding-large">
|
||||
<div id="spark-button-style" style=""></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1" id="spark-panel-points">
|
||||
<tr>
|
||||
<td>
|
||||
<div style="width: 100%; height: 25px;">
|
||||
<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 class="padding-large">
|
||||
<div class="" id="spark-combo-style" style="width: 100%;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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.strSparkColor %></label>
|
||||
<div id="spark-color-btn" style=""></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>
|
||||
|
|
@ -75,6 +71,8 @@
|
|||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1" id="spark-panel-points">
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label class="header" style="margin-bottom: 8px;"><%= scope.textMarkers %></label>
|
||||
|
|
@ -104,16 +102,6 @@
|
|||
</div>
|
||||
</td>
|
||||
</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 cols="1">
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -327,7 +327,7 @@
|
|||
</td>
|
||||
<td class="padding-large">
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -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('<div id="id-spark-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
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('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
|
||||
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.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this));
|
||||
this.cmbSparkStyle.openButton.menu.on('show:after', function () {
|
||||
me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||
});
|
||||
}
|
||||
this.mnuSparkStylePicker.on('item:click', _.bind(this.onSelectSparkStyle, this, this.btnSparkStyle));
|
||||
this.lockedControls.push(this.cmbSparkStyle);
|
||||
}
|
||||
|
||||
if (styles && styles.length>0){
|
||||
var stylesStore = this.mnuSparkStylePicker.store;
|
||||
if (stylesStore) {
|
||||
var stylearray = [],
|
||||
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<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++) {
|
||||
stylearray.push({
|
||||
imageUrl: styles[i],
|
||||
|
|
@ -1094,8 +1096,7 @@ define([
|
|||
});
|
||||
}
|
||||
stylesStore.reset(stylearray, {silent: false});
|
||||
|
||||
this.mnuSparkStylePicker.selectByIndex(selectedIdx, true);
|
||||
this.cmbSparkStyle.fillComboView(stylesStore.at(selectedIdx<0 ? 0 : selectedIdx), selectedIdx>-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',
|
||||
|
|
|
|||
|
|
@ -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('<div id="id-spark-dlg-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
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('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
|
||||
this.cmbSparkStyle.render($('#spark-dlg-combo-style'));
|
||||
this.cmbSparkStyle.openButton.menu.cmpEl.css({
|
||||
'min-width': 178,
|
||||
'max-width': 178
|
||||
});
|
||||
|
||||
if (me.btnSparkStyle.menu) {
|
||||
me.btnSparkStyle.menu.on('show:after', function () {
|
||||
me.mnuSparkStylePicker.scroller.update({alwaysVisibleY: true});
|
||||
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<styles.length-1; i++) {
|
||||
data[i].set('imageUrl', styles[i]);
|
||||
}
|
||||
} else {
|
||||
var stylearray = [],
|
||||
selectedIdx = styles[styles.length-1];
|
||||
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});
|
||||
|
||||
this.mnuSparkStylePicker.selectByIndex(selectedIdx, true);
|
||||
this.cmbSparkStyle.fillComboView(stylesStore.at(selectedIdx<0 ? 0 : selectedIdx), selectedIdx>-1);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue