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

[SSE] Show cell settings in the right panel while editor is opening

Browse source
This commit is contained in:
Julia Radzhabova 2018-06-29 12:42:41 +03:00
parent 5acce4f357
commit da8ca6baac
2 changed files with 46 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -69,14 +69,16 @@ define([
this._state = { this._state = {
BackColor: undefined, BackColor: undefined,
DisabledControls: false DisabledControls: true
}; };
this.lockedControls = []; this.lockedControls = [];
this._locked = false; this._locked = true;
this.isEditCell = false; this.isEditCell = false;
this.BorderType = 1; this.BorderType = 1;
this.render(); this.render();
this.createDelayedControls();
}, },
onColorsBackSelect: function(picker, color) { onColorsBackSelect: function(picker, color) {
@ -167,7 +169,8 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: item[1], iconCls: item[1],
borderId:item[0], borderId:item[0],
hint: item[3] hint: item[3],
disabled: this._locked
}); });
_btn.render( $('#'+item[2])) ; _btn.render( $('#'+item[2])) ;
_btn.on('click', _.bind(this.onBtnBordersClick, this)); _btn.on('click', _.bind(this.onBtnBordersClick, this));
@ -179,6 +182,7 @@ define([
cls: 'cell-border-type', cls: 'cell-border-type',
style: "width: 93px;", style: "width: 93px;",
menuStyle: 'min-width: 93px;', menuStyle: 'min-width: 93px;',
disabled: this._locked,
data: [ data: [
{ value: Asc.c_oAscBorderStyles.Thin, offsety: 0}, { value: Asc.c_oAscBorderStyles.Thin, offsety: 0},
{ value: Asc.c_oAscBorderStyles.Hair, offsety: 20}, { value: Asc.c_oAscBorderStyles.Hair, offsety: 20},
@ -196,10 +200,27 @@ define([
this.BorderType = Asc.c_oAscBorderStyles.Thin; this.BorderType = Asc.c_oAscBorderStyles.Thin;
this.cmbBorderType.setValue(this.BorderType); this.cmbBorderType.setValue(this.BorderType);
this.lockedControls.push(this.cmbBorderType); this.lockedControls.push(this.cmbBorderType);
this.btnBorderColor = new Common.UI.ColorButton({
style: "width:45px;",
disabled: this._locked,
menu : true
});
this.btnBorderColor.render( $('#cell-border-color-btn'));
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.btnBackColor = new Common.UI.ColorButton({
style: "width:45px;",
disabled: this._locked,
menu : true
});
this.btnBackColor.render( $('#cell-back-color-btn'));
this.btnBackColor.setColor('transparent');
this.lockedControls.push(this.btnBackColor);
}, },
createDelayedElements: function() { createDelayedElements: function() {
this.createDelayedControls();
this.UpdateThemeColors(); this.UpdateThemeColors();
this._initSettings = false; this._initSettings = false;
}, },
@ -208,7 +229,7 @@ define([
if (this._initSettings) if (this._initSettings)
this.createDelayedElements(); this.createDelayedElements();
this.disableControls(this._locked); // need to update combodataview after disabled state this.disableControls(this._locked);
if (props ) if (props )
{ {
@ -250,38 +271,26 @@ define([
}, },
UpdateThemeColors: function() { UpdateThemeColors: function() {
if (!this.btnBackColor) { if (!this.borderColor) {
// create color buttons // create color buttons
this.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor.setMenu( new Common.UI.Menu({
style: "width:45px;", items: [
menu : new Common.UI.Menu({ { template: _.template('<div id="cell-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
items: [ { template: _.template('<a id="cell-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
{ template: _.template('<div id="cell-border-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') }, ]
{ template: _.template('<a id="cell-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } }));
]
})
});
this.btnBorderColor.render( $('#cell-border-color-btn'));
this.btnBorderColor.setColor('000000');
this.lockedControls.push(this.btnBorderColor);
this.borderColor = new Common.UI.ThemeColorPalette({ this.borderColor = new Common.UI.ThemeColorPalette({
el: $('#cell-border-color-menu') el: $('#cell-border-color-menu')
}); });
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this)); this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor)); this.btnBorderColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor.setMenu( new Common.UI.Menu({
style: "width:45px;", items: [
menu : new Common.UI.Menu({ { template: _.template('<div id="cell-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
items: [ { template: _.template('<a id="cell-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
{ template: _.template('<div id="cell-back-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') }, ]
{ template: _.template('<a id="cell-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') } }));
]
})
});
this.btnBackColor.render( $('#cell-back-color-btn'));
this.btnBackColor.setColor('transparent');
this.lockedControls.push(this.btnBackColor);
this.colorsBack = new Common.UI.ThemeColorPalette({ this.colorsBack = new Common.UI.ThemeColorPalette({
el: $('#cell-back-color-menu'), el: $('#cell-back-color-menu'),
transparent: true transparent: true

8
apps/spreadsheeteditor/main/app/view/RightMenu.js
View file

@ -161,7 +161,8 @@ define([
this.trigger('render:before', this); this.trigger('render:before', this);
el.css('width', '40px'); var open = !Common.localStorage.getBool("sse-hide-right-settings");
el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px');
el.css('z-index', 101); el.css('z-index', 101);
el.show(); el.show();
@ -232,6 +233,11 @@ define([
}); });
} }
if (open) {
$('#id-cell-settings').parent().css("display", "inline-block" );
$('#id-cell-settings').addClass("active");
}
this.trigger('render:after', this); this.trigger('render:after', this);
return this; return this;