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

[DE] Fix paragraph settings layout (Tabs)

Browse source
This commit is contained in:
Julia Svinareva 2019-08-05 09:30:33 +03:00
parent 49dbcefce3
commit 4af90803b0
2 changed files with 81 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
View file

@ -172,32 +172,36 @@
</div> </div>
</div> </div>
<div id="id-adv-paragraph-tabs" class="settings-panel"> <div id="id-adv-paragraph-tabs" class="settings-panel">
<div class="inner-content"> <div class="inner-content" style="width: 330px;">
<div class="padding-small" style="display: inline-block;"> <div class="padding-large">
<label class="input-label"><%= scope.textTabPosition %></label> <label class="input-label"><%= scope.textDefault %></label>
<div id="paraadv-spin-tab"></div> <div id="paraadv-spin-default-tab"></div>
</div>
<div class="padding-small" style="display: inline-block; float: right;"> </div>
<label class="input-label"><%= scope.textDefault %></label> <div>
<div id="paraadv-spin-default-tab"></div> <div class="padding-small" style="margin-right: 9px; display: inline-block;">
</div> <label class="input-label"><%= scope.textTabPosition %></label>
<div class="padding-large"> <div id="paraadv-spin-tab"></div>
<div id="paraadv-list-tabs" style="width:180px; height: 94px;"></div> </div>
</div> <div class="padding-small" style="margin-right: 9px; display: inline-block;">
<div class="padding-large" style="display: inline-block;margin-right: 7px;"> <label class="input-label"><%= scope.textAlign %></label>
<label class="input-label"><%= scope.textAlign %></label> <div id="paraadv-cmb-align"></div>
<div id="paraadv-cmb-align"></div> </div>
</div> <div class="padding-small" style="display: inline-block;">
<div class="padding-large" style="display: inline-block;"> <label class="input-label"><%= scope.textLeader %></label>
<label class="input-label"><%= scope.textLeader %></label> <div id="paraadv-cmb-leader"></div>
<div id="paraadv-cmb-leader"></div> </div>
</div> </div>
<div style="margin-bottom: 45px;"></div> <div>
<div> <div colspan=3 class="padding-large">
<button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:90px;margin-right: 4px;"><%= scope.textSet %></button> <div id="paraadv-list-tabs" style="width:310px; height: 110px;"></div>
<button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:90px;margin-right: 4px;"><%= scope.textRemove %></button> </div>
<button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:90px;margin-right: 4px;"><%= scope.textRemoveAll %></button> </div>
</div> <div>
<button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:95px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
<button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:95px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
<button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:95px;display: inline-block;"><%= scope.textRemoveAll %></button>
</div>
</div> </div>
</div> </div>
<div id="id-adv-paragraph-margins" class="settings-panel"> <div id="id-adv-paragraph-margins" class="settings-panel">

73
apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
View file

@ -58,6 +58,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
}, },
initialize : function(options) { initialize : function(options) {
var me = this;
_.extend(this.options, { _.extend(this.options, {
title: this.textTitle, title: this.textTitle,
items: [ items: [
@ -129,6 +130,28 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
{displayValue: this.textLevel + '8'}, {displayValue: this.textLevel + '8'},
{displayValue: this.textLevel + '9'} {displayValue: this.textLevel + '9'}
]; ];
this._arrTabAlign = [
{ value: 1, displayValue: this.textTabLeft },
{ value: 3, displayValue: this.textTabCenter },
{ value: 2, displayValue: this.textTabRight }
];
this._arrKeyTabAlign = [];
this._arrTabAlign.forEach(function(item) {
me._arrKeyTabAlign[item.value] = item.displayValue;
});
this._arrTabLeader = [
{ value: Asc.c_oAscTabLeader.None, displayValue: this.textNone },
{ value: Asc.c_oAscTabLeader.Dot, displayValue: '....................' },
{ value: Asc.c_oAscTabLeader.Hyphen, displayValue: '-----------------' },
{ value: Asc.c_oAscTabLeader.MiddleDot, displayValue: '·················' },
{ value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
];
this._arrKeyTabLeader = [];
this._arrTabLeader.forEach(function(item) {
me._arrKeyTabLeader[item.value] = item.displayValue;
});
}, },
render: function() { render: function() {
@ -504,7 +527,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.numTab = new Common.UI.MetricSpinner({ this.numTab = new Common.UI.MetricSpinner({
el: $('#paraadv-spin-tab'), el: $('#paraadv-spin-tab'),
step: .1, step: .1,
width: 180, width: 95,
defaultUnit : "cm", defaultUnit : "cm",
value: '1.25 cm', value: '1.25 cm',
maxValue: 55.87, maxValue: 55.87,
@ -515,7 +538,7 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.numDefaultTab = new Common.UI.MetricSpinner({ this.numDefaultTab = new Common.UI.MetricSpinner({
el: $('#paraadv-spin-default-tab'), el: $('#paraadv-spin-default-tab'),
step: .1, step: .1,
width: 107, width: 95,
defaultUnit : "cm", defaultUnit : "cm",
value: '1.25 cm', value: '1.25 cm',
maxValue: 55.87, maxValue: 55.87,
@ -531,7 +554,15 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.tabList = new Common.UI.ListView({ this.tabList = new Common.UI.ListView({
el: $('#paraadv-list-tabs'), el: $('#paraadv-list-tabs'),
emptyText: this.noTabs, emptyText: this.noTabs,
store: new Common.UI.DataViewStore() store: new Common.UI.DataViewStore(),
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
'<div style="width:98px;padding-right: 5px;display: inline-block;"><%= value %></div>',
'<div style="width:98px;padding-right: 5px;display: inline-block;padding-left: 7px;"><%= displayTabAlign %></div>',
'<div style="width:98px;display: inline-block;padding-left: 16px;"><%= displayTabLeader %></div>',
'</div>'
].join(''))
}); });
this.tabList.store.comparator = function(rec) { this.tabList.store.comparator = function(rec) {
return rec.get("tabPos"); return rec.get("tabPos");
@ -548,31 +579,21 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
this.cmbAlign = new Common.UI.ComboBox({ this.cmbAlign = new Common.UI.ComboBox({
el : $('#paraadv-cmb-align'), el : $('#paraadv-cmb-align'),
style : 'width: 85px;', style : 'width: 95px;',
menuStyle : 'min-width: 85px;', menuStyle : 'min-width: 95px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : this._arrTabAlign
{ value: 1, displayValue: this.textTabLeft },
{ value: 3, displayValue: this.textTabCenter },
{ value: 2, displayValue: this.textTabRight }
]
}); });
this.cmbAlign.setValue(1); this.cmbAlign.setValue(1);
this.cmbLeader = new Common.UI.ComboBox({ this.cmbLeader = new Common.UI.ComboBox({
el : $('#paraadv-cmb-leader'), el : $('#paraadv-cmb-leader'),
style : 'width: 85px;', style : 'width: 95px;',
menuStyle : 'min-width: 85px;', menuStyle : 'min-width: 95px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : this._arrTabLeader
{ value: Asc.c_oAscTabLeader.None, displayValue: this.textNone },
{ value: Asc.c_oAscTabLeader.Dot, displayValue: '....................' },
{ value: Asc.c_oAscTabLeader.Hyphen, displayValue: '-----------------' },
{ value: Asc.c_oAscTabLeader.MiddleDot, displayValue: '·················' },
{ value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
]
}); });
this.cmbLeader.setValue(Asc.c_oAscTabLeader.None); this.cmbLeader.setValue(Asc.c_oAscTabLeader.None);
@ -866,7 +887,9 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
tabPos: pos, tabPos: pos,
value: parseFloat(pos.toFixed(3)) + ' ' + Common.Utils.Metric.getCurrentMetricName(), value: parseFloat(pos.toFixed(3)) + ' ' + Common.Utils.Metric.getCurrentMetricName(),
tabAlign: tab.get_Value(), tabAlign: tab.get_Value(),
tabLeader: tab.asc_getLeader() tabLeader: tab.asc_getLeader(),
displayTabLeader: this._arrKeyTabLeader[tab.asc_getLeader()],
displayTabAlign: this._arrKeyTabAlign[tab.get_Value()]
}); });
arr.push(rec); arr.push(rec);
} }
@ -1265,7 +1288,9 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
addTab: function(btn, eOpts){ addTab: function(btn, eOpts){
var val = this.numTab.getNumberValue(), var val = this.numTab.getNumberValue(),
align = this.cmbAlign.getValue(), align = this.cmbAlign.getValue(),
leader = this.cmbLeader.getValue(); leader = this.cmbLeader.getValue(),
displayAlign = this._arrKeyTabAlign[align],
displayLeader = this._arrKeyTabLeader[leader];
var store = this.tabList.store; var store = this.tabList.store;
var rec = store.find(function(record){ var rec = store.find(function(record){
@ -1274,6 +1299,8 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
if (rec) { if (rec) {
rec.set('tabAlign', align); rec.set('tabAlign', align);
rec.set('tabLeader', leader); rec.set('tabLeader', leader);
rec.set('displayTabAlign', displayAlign);
rec.set('displayTabLeader', displayLeader);
this._tabListChanged = true; this._tabListChanged = true;
} else { } else {
rec = new Common.UI.DataViewModel(); rec = new Common.UI.DataViewModel();
@ -1281,7 +1308,9 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
tabPos: val, tabPos: val,
value: val + ' ' + Common.Utils.Metric.getCurrentMetricName(), value: val + ' ' + Common.Utils.Metric.getCurrentMetricName(),
tabAlign: align, tabAlign: align,
tabLeader: leader tabLeader: leader,
displayTabLeader: displayLeader,
displayTabAlign: displayAlign
}); });
store.add(rec); store.add(rec);
} }