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

Merge pull request #603 from ONLYOFFICE/fix/sse-format-settings

Browse source 
[SSE] Change layout for custom format
This commit is contained in:
Julia Radzhabova 2020-12-02 17:15:57 +03:00 committed by GitHub
parent 2ae72903cf cab58051e4
commit 25b1d9adff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
View file

@ -103,7 +103,7 @@ define([
'<label id="format-settings-label-example" style="vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;">100</label>', '<label id="format-settings-label-example" style="vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;">100</label>',
'</td>', '</td>',
'</tr>', '</tr>',
'<tr>', '<tr class="format-no-code">',
'<td class="padding-small">', '<td class="padding-small">',
'</td>', '</td>',
'</tr>', '</tr>',
@ -140,7 +140,7 @@ define([
'<td colspan="1" class="padding-large">', '<td colspan="1" class="padding-large">',
'<label class="header">', me.textFormat,'</label>', '<label class="header">', me.textFormat,'</label>',
'<div id="format-settings-txt-code" class="input-group-nr" style="height:22px;width:264px;margin-bottom: 8px;"></div>', '<div id="format-settings-txt-code" class="input-group-nr" style="height:22px;width:264px;margin-bottom: 8px;"></div>',
'<div id="format-settings-combo-code" class="input-group-nr" style="width:264px;"></div>', '<div id="format-settings-list-code" style="width:264px; height: 116px;"></div>',
'</td>', '</td>',
'</tr>', '</tr>',
'</table>', '</table>',
@ -229,16 +229,14 @@ define([
}); });
this.cmbType.on('selected', _.bind(this.onTypeSelect, this)); this.cmbType.on('selected', _.bind(this.onTypeSelect, this));
this.cmbCode = new Common.UI.ComboBox({ this.codesList = new Common.UI.ListView({
el: $('#format-settings-combo-code'), el: $('#format-settings-list-code'),
cls: 'input-group-nr', store: new Common.UI.DataViewStore(),
menuStyle: 'min-width: 310px;max-height:235px;', tabindex: 1,
editable: false, itemTemplate: _.template('<div id="<%= id %>" class="list-item" style="pointer-events:none;overflow: hidden; text-overflow: ellipsis;"><%= value %></div>')
data: [],
scrollAlwaysVisible: true,
takeFocusOnClose: true
}); });
this.cmbCode.on('selected', _.bind(this.onCodeSelect, this)); this.codesList.on('item:select', _.bind(this.onCodeSelect, this));
this.codesList.on('entervalue', _.bind(this.onPrimary, this));
this.inputCustomFormat = new Common.UI.InputField({ this.inputCustomFormat = new Common.UI.InputField({
el : $('#format-settings-txt-code'), el : $('#format-settings-txt-code'),
@ -246,7 +244,7 @@ define([
validateOnChange : true, validateOnChange : true,
validation : function () { return true; } validation : function () { return true; }
}).on ('changing', function (input, value) { }).on ('changing', function (input, value) {
(me.cmbCode.getValue() !== me.txtCustom) && me.cmbCode.setValue(me.txtCustom); me.codesList.deselectAll();
me.Format = me.api.asc_convertNumFormatLocal2NumFormat(value); me.Format = me.api.asc_convertNumFormatLocal2NumFormat(value);
me.lblExample.text(me.api.asc_getLocaleExample(me.Format)); me.lblExample.text(me.api.asc_getLocaleExample(me.Format));
}); });
@ -257,6 +255,7 @@ define([
this._typePanel = this.$window.find('.format-type'); this._typePanel = this.$window.find('.format-type');
this._symbolsPanel = this.$window.find('.format-symbols'); this._symbolsPanel = this.$window.find('.format-symbols');
this._codePanel = this.$window.find('.format-code'); this._codePanel = this.$window.find('.format-code');
this._nocodePanel = this.$window.find('.format-no-code');
this.lblExample = this.$window.find('#format-settings-label-example'); this.lblExample = this.$window.find('#format-settings-label-example');
@ -264,7 +263,7 @@ define([
}, },
getFocusedComponents: function() { getFocusedComponents: function() {
return [this.cmbFormat, this.spnDecimal, this.cmbSymbols, this.cmbNegative, this.cmbType, this.cmbCode]; return [this.cmbFormat, this.spnDecimal, this.cmbSymbols, this.cmbNegative, this.cmbType, this.inputCustomFormat, {cmp: this.codesList, selector: '.listview'}];
}, },
getDefaultFocusableComponent: function () { getDefaultFocusableComponent: function () {
@ -418,10 +417,12 @@ define([
this.lblExample.text(this.api.asc_getLocaleExample(this.Format)); this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
}, },
onCodeSelect: function(combo, record){ onCodeSelect: function(listView, itemView, record){
this.Format = record.value; if (!record) return;
this.Format = record.get('format');
this.lblExample.text(this.api.asc_getLocaleExample(this.Format)); this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.inputCustomFormat.setValue(record.displayValue); this.inputCustomFormat.setValue(record.get('value'));
}, },
onFormatSelect: function(combo, record, e, initFormatInfo) { onFormatSelect: function(combo, record, e, initFormatInfo) {
@ -501,17 +502,28 @@ define([
data = [], data = [],
isCustom = (this.CustomFormat) ? true : false; isCustom = (this.CustomFormat) ? true : false;
formatsarr.forEach(function(item) { formatsarr.forEach(function(item) {
data.push({value: item, displayValue: me.api.asc_convertNumFormat2NumFormatLocal(item)}); var rec = new Common.UI.DataViewModel();
rec.set({
value: me.api.asc_convertNumFormat2NumFormatLocal(item),
format: item
});
data.push(rec);
if (me.CustomFormat == item) if (me.CustomFormat == item)
isCustom = false; isCustom = false;
}); });
if (isCustom) { if (isCustom) {
data.push({value: this.CustomFormat, displayValue: this.CustomFormat}); var rec = new Common.UI.DataViewModel();
rec.set({
value: me.api.asc_convertNumFormat2NumFormatLocal(this.CustomFormat),
format: this.CustomFormat
});
data.push(rec);
} }
this.cmbCode.setData(data); this.codesList.store.reset(data, {silent: false});
var value = me.api.asc_convertNumFormat2NumFormatLocal(this.Format); var rec = this.codesList.store.findWhere({value: this.Format});
this.cmbCode.setValue(value); rec && this.codesList.selectRecord(rec);
this.inputCustomFormat.setValue(value); rec && this.codesList.scrollToRecord(rec);
this.inputCustomFormat.setValue(me.api.asc_convertNumFormat2NumFormatLocal(this.Format));
} }
this.lblExample.text(this.api.asc_getLocaleExample(this.Format)); this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
@ -522,6 +534,7 @@ define([
this._typePanel.toggleClass('hidden', !hasType); this._typePanel.toggleClass('hidden', !hasType);
this._symbolsPanel.toggleClass('hidden', !hasSymbols); this._symbolsPanel.toggleClass('hidden', !hasSymbols);
this._codePanel.toggleClass('hidden', !hasCode); this._codePanel.toggleClass('hidden', !hasCode);
this._nocodePanel.toggleClass('hidden', hasCode);
this._state = { hasDecimal: hasDecimal, hasNegative: hasNegative, hasSeparator: hasSeparator, hasType: hasType, hasSymbols: hasSymbols, hasCode: hasCode}; this._state = { hasDecimal: hasDecimal, hasNegative: hasNegative, hasSeparator: hasSeparator, hasType: hasType, hasSymbols: hasSymbols, hasCode: hasCode};
}, },