[SSE] Show setting for scale rules
This commit is contained in:
Julia Radzhabova
parent
d35cb91f2e
commit
c36f3a35cd
|
|
@ -98,6 +98,28 @@ define([
|
||||||
'</div>',
|
'</div>',
|
||||||
'</td>',
|
'</td>',
|
||||||
'</tr>',
|
'</tr>',
|
||||||
|
'<tr class="scale">',
|
||||||
|
'<td class="padding-large" style="padding-top: 8px;">',
|
||||||
|
'<div style="width:150px; display: inline-block; margin-right: 5px;">',
|
||||||
|
'<label style="display: block;">', me.textMinpoint,'</label>',
|
||||||
|
'<div id="format-rules-edit-combo-scale-1" class="input-group-nr" style="margin-bottom: 8px;"></div>',
|
||||||
|
'<div id="format-rules-edit-txt-scale-1" class="" style="height: 22px;margin-bottom: 8px;"></div>',
|
||||||
|
'<div id="format-rules-edit-color-scale-1" style=""></div>',
|
||||||
|
'</div>',
|
||||||
|
'<div style="width:150px; display: inline-block; margin-right: 5px;">',
|
||||||
|
'<label id="format-rules-edit-lbl-scale-2" style="display: block;">', me.textMidpoint,'</label>',
|
||||||
|
'<div id="format-rules-edit-combo-scale-2" class="input-group-nr" style="margin-bottom: 8px;"></div>',
|
||||||
|
'<div id="format-rules-edit-txt-scale-2" class="" style="height: 22px;margin-bottom: 8px;"></div>',
|
||||||
|
'<div id="format-rules-edit-color-scale-2" style=""></div>',
|
||||||
|
'</div>',
|
||||||
|
'<div style="width:150px; display: inline-block;">',
|
||||||
|
'<label style="display: block;">', me.textMaxpoint,'</label>',
|
||||||
|
'<div id="format-rules-edit-combo-scale-3" class="input-group-nr" style="margin-bottom: 8px;"></div>',
|
||||||
|
'<div id="format-rules-edit-txt-scale-3" class="" style="height: 22px;margin-bottom: 8px;"></div>',
|
||||||
|
'<div id="format-rules-edit-color-scale-3" style=""></div>',
|
||||||
|
'</div>',
|
||||||
|
'</td>',
|
||||||
|
'</tr>',
|
||||||
'</table>',
|
'</table>',
|
||||||
'</div></div>',
|
'</div></div>',
|
||||||
'</div>',
|
'</div>',
|
||||||
|
|
@ -463,6 +485,58 @@ define([
|
||||||
// this.btnFillColor.on('click', _.bind(this.onTextColor, this));
|
// this.btnFillColor.on('click', _.bind(this.onTextColor, this));
|
||||||
this.mnuFillColorPicker = initNewColor(this.btnFillColor, "#format-rules-menu-fillcolor");
|
this.mnuFillColorPicker = initNewColor(this.btnFillColor, "#format-rules-menu-fillcolor");
|
||||||
|
|
||||||
|
// Scale
|
||||||
|
this.scaleControls = [];
|
||||||
|
this.lblMidScale = this.$window.find('#format-rules-edit-lbl-scale-2');
|
||||||
|
|
||||||
|
var data = [
|
||||||
|
{value: Asc.c_oAscCfvoType.Number, displayValue: 'Number'},
|
||||||
|
{value: Asc.c_oAscCfvoType.Percent, displayValue: 'Percentage'},
|
||||||
|
{value: Asc.c_oAscCfvoType.Formula, displayValue: 'Formula'},
|
||||||
|
{value: Asc.c_oAscCfvoType.Percentile, displayValue: 'Percentile'}
|
||||||
|
];
|
||||||
|
for (var i=0; i<3; i++) {
|
||||||
|
var arr = data;
|
||||||
|
if (i==0)
|
||||||
|
arr = [{value: Asc.c_oAscCfvoType.Minimum, displayValue: 'Minimum'}].concat(arr);
|
||||||
|
else if (i==2)
|
||||||
|
arr = [{value: Asc.c_oAscCfvoType.Maximum, displayValue: 'Maximum'}].concat(arr);
|
||||||
|
var combo = new Common.UI.ComboBox({
|
||||||
|
el : $('#format-rules-edit-combo-scale-' + (i+1)),
|
||||||
|
style : 'width: 100%;',
|
||||||
|
menuStyle : 'min-width: 100%;max-height: 211px;',
|
||||||
|
editable : false,
|
||||||
|
cls : 'input-group-nr',
|
||||||
|
data : arr,
|
||||||
|
type : i
|
||||||
|
}).on('selected', function(combo, record) {
|
||||||
|
me.scaleControls[combo.options.type].range.setDisabled(record.value==Asc.c_oAscCfvoType.Minimum || record.value==Asc.c_oAscCfvoType.Maximum);
|
||||||
|
});
|
||||||
|
combo.setValue((i==1) ? Asc.c_oAscCfvoType.Percentile : arr[0].value);
|
||||||
|
|
||||||
|
var range = new Common.UI.InputFieldBtn({
|
||||||
|
el : $('#format-rules-edit-txt-scale-' + (i+1)),
|
||||||
|
name : 'range',
|
||||||
|
style : 'width: 100%;',
|
||||||
|
allowBlank : true,
|
||||||
|
btnHint : this.textSelectData,
|
||||||
|
validateOnChange: false,
|
||||||
|
type : i,
|
||||||
|
disabled : (i!=1)
|
||||||
|
});
|
||||||
|
range.setValue((i==1) ? 50 : '');
|
||||||
|
range.on('button:click', _.bind(this.onSelectData, this));
|
||||||
|
|
||||||
|
var color = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : true,
|
||||||
|
type : i
|
||||||
|
});
|
||||||
|
color.render( $('#format-rules-edit-color-scale-' + (i+1)));
|
||||||
|
color.setColor('000000');
|
||||||
|
this.scaleControls.push({combo: combo, range: range, color: color});
|
||||||
|
}
|
||||||
|
|
||||||
this.afterRender();
|
this.afterRender();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -520,11 +594,51 @@ define([
|
||||||
subtype = props.asc_getOperator();
|
subtype = props.asc_getOperator();
|
||||||
this.txtRange1.setValue(props.asc_getValue1() || '');
|
this.txtRange1.setValue(props.asc_getValue1() || '');
|
||||||
break;
|
break;
|
||||||
|
case Asc.c_oAscCFType.colorScale:
|
||||||
|
value = props.asc_getColorScaleOrDataBarOrIconSetRule();
|
||||||
|
var scales = value.asc_getCFVOs(),
|
||||||
|
colors = value.asc_getColors();
|
||||||
|
subtype = scales.length;
|
||||||
|
var arr = (scales.length==2) ? [this.scaleControls[0], this.scaleControls[2]] : this.scaleControls;
|
||||||
|
for (var i=0; i<scales.length; i++) {
|
||||||
|
var scaletype = scales[i].asc_getType(),
|
||||||
|
val = scales[i].asc_getVal(),
|
||||||
|
color = Common.Utils.ThemeColor.colorValue2EffectId(colors[i]),
|
||||||
|
controls = arr[i];
|
||||||
|
controls.combo.setValue(scaletype);
|
||||||
|
controls.range.setDisabled(scaletype == Asc.c_oAscCfvoType.Minimum || scaletype == Asc.c_oAscCfvoType.Maximum);
|
||||||
|
controls.range.setValue((scaletype !== Asc.c_oAscCfvoType.Minimum && scaletype !== Asc.c_oAscCfvoType.Maximum && val!==null && val!==undefined) ? val : '');
|
||||||
|
controls.color.setColor(color);
|
||||||
|
if (_.isObject(color)) {
|
||||||
|
var isselected = false;
|
||||||
|
for (var j = 0; j < 10; j++) {
|
||||||
|
if (Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue) {
|
||||||
|
controls.colorPicker.select(color, true);
|
||||||
|
isselected = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!isselected) controls.colorPicker.clearSelection();
|
||||||
|
} else {
|
||||||
|
controls.colorPicker.select(color, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscCFType.dataBar:
|
||||||
|
value = props.asc_getColorScaleOrDataBarOrIconSetRule();
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscCFType.iconSet:
|
||||||
|
value = props.asc_getColorScaleOrDataBarOrIconSetRule();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var rec = this.ruleStore.findWhere({type: type});
|
var rec = this.ruleStore.where({type: type});
|
||||||
if (!rec) {
|
if (rec.length>1) {
|
||||||
|
if (type == Asc.c_oAscCFType.colorScale) {
|
||||||
|
rec = (subtype == rec[0].get('num')) ? rec[0] : rec[1];
|
||||||
|
}
|
||||||
|
} else if (rec.length==0) {
|
||||||
var store = this.ruleStore;
|
var store = this.ruleStore;
|
||||||
for (var i=0; i<store.length; i++) {
|
for (var i=0; i<store.length; i++) {
|
||||||
var item = store.at(i),
|
var item = store.at(i),
|
||||||
|
|
@ -536,6 +650,7 @@ define([
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else { // find rule
|
} else { // find rule
|
||||||
|
rec = rec[0];
|
||||||
var rules = rec.get('rules');
|
var rules = rec.get('rules');
|
||||||
if (rules && rules.findWhere({type: type})) {
|
if (rules && rules.findWhere({type: type})) {
|
||||||
ruleType = type;
|
ruleType = type;
|
||||||
|
|
@ -587,6 +702,14 @@ define([
|
||||||
this.numRank.setVisible(category==1);
|
this.numRank.setVisible(category==1);
|
||||||
|
|
||||||
this.txtRange1.cmpEl.width(category==11 ? 305 : 150);
|
this.txtRange1.cmpEl.width(category==11 ? 305 : 150);
|
||||||
|
|
||||||
|
this.$window.find('.scale').toggleClass('hidden', category<7 || category>8);
|
||||||
|
if (category==7 || category==8) {
|
||||||
|
this.scaleControls[1].combo.setVisible(category==8);
|
||||||
|
this.scaleControls[1].range.setVisible(category==8);
|
||||||
|
this.scaleControls[1].color.setVisible(category==8);
|
||||||
|
this.lblMidScale.toggleClass('hidden', category==7);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onSelectData: function(cmp) {
|
onSelectData: function(cmp) {
|
||||||
|
|
@ -617,6 +740,25 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
updateThemeColors: function() {
|
updateThemeColors: function() {
|
||||||
|
for (var i=0; i<this.scaleControls.length; i++) {
|
||||||
|
var btn = this.scaleControls[i].color,
|
||||||
|
id = Common.UI.getId();
|
||||||
|
btn.setMenu( new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="' + id + '" style="width: 169px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
}));
|
||||||
|
var colorPicker = new Common.UI.ThemeColorPalette({
|
||||||
|
el: this.$window.find('#' + id),
|
||||||
|
transparent: false,
|
||||||
|
type: i
|
||||||
|
});
|
||||||
|
// colorPicker.on('select', _.bind(this.onColorsSelect, this));
|
||||||
|
colorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
// btn.items[1].on('click', _.bind(this.addNewColor, this, colorPicker, btn));
|
||||||
|
this.scaleControls[i].colorPicker = colorPicker;
|
||||||
|
}
|
||||||
this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.mnuTextColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.mnuFillColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.mnuFillColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
},
|
},
|
||||||
|
|
@ -688,7 +830,10 @@ define([
|
||||||
textSuperscript: 'Superscript',
|
textSuperscript: 'Superscript',
|
||||||
textSubscript: 'Subscript',
|
textSubscript: 'Subscript',
|
||||||
textColor: 'Text color',
|
textColor: 'Text color',
|
||||||
fillColor: 'Background color'
|
fillColor: 'Background color',
|
||||||
|
textMinpoint: 'Minpoint',
|
||||||
|
textMidpoint: 'Midpoint',
|
||||||
|
textMaxpoint: 'Maxpoint'
|
||||||
|
|
||||||
}, SSE.Views.FormatRulesEditDlg || {}));
|
}, SSE.Views.FormatRulesEditDlg || {}));
|
||||||
});
|
});
|
||||||
Loading…
Reference in a new issue