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

[SSE] Change layout for sort dialog

Browse source
This commit is contained in:
Julia Radzhabova 2019-12-12 10:18:57 +03:00
parent b75e8ca64a
commit 45304408a7
3 changed files with 55 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/spreadsheeteditor/main/app/template/SortDialog.template
View file

@ -13,8 +13,8 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label id="sort-dialog-label-column" class="header" style="width: 156px;"><%= scope.textColumn %></label> <label id="sort-dialog-label-column" class="header" style="width: 243px;"><%= scope.textColumn %></label>
<label class="header" style="width: 152px;"><%= scope.textSort %></label> <label id="sort-dialog-label-sort" class="header" style="width: 141px;"><%= scope.textSort %></label>
<label class="header" style=""><%= scope.textOrder %></label> <label class="header" style=""><%= scope.textOrder %></label>
</td> </td>
</tr> </tr>

63
apps/spreadsheeteditor/main/app/view/SortDialog.js
View file

@ -74,7 +74,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
options: { options: {
alias: 'SortDialog', alias: 'SortDialog',
contentWidth: 500, contentWidth: 560,
height: 294, height: 294,
buttons: ['ok', 'cancel'] buttons: ['ok', 'cancel']
}, },
@ -112,6 +112,14 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
Common.Views.AdvancedSettingsWindow.prototype.render.call(this); Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
var me = this; var me = this;
var span = $('<span style="position: absolute; visibility: hidden;"/>');
me.$window.append(span);
span.text(this.textSortBy);
var captionWidth = span.width();
span.text(this.textThenBy);
captionWidth = Math.ceil(Math.max(captionWidth, span.width()))+10;
span.remove();
this.sortList = new Common.UI.ListView({ this.sortList = new Common.UI.ListView({
el: $('#sort-dialog-list', this.$window), el: $('#sort-dialog-list', this.$window),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
@ -119,15 +127,18 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
enableKeyEvents: false, enableKeyEvents: false,
template: _.template(['<div class="listview inner" style=""></div>'].join('')), template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([ itemTemplate: _.template([
'<div class="list-item" style="width: 100%;display:inline-block;" id="sort-dialog-item-<%= levelIndex %>">', '<div class="list-item" style="width: 100%;display: flex;align-items:center;" id="sort-dialog-item-<%= levelIndex %>">',
'<div style="width:33%;padding-right: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-col-<%= levelIndex %>" class="input-group-nr"></div></div>', '<label class="level-caption" style="padding-right: 5px;width: ' + captionWidth + 'px;flex-shrink:0;cursor: pointer;"></label>',
'<div style="width:33%;padding-right: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-sort-<%= levelIndex %>" class="input-group-nr"></div></div>', '<div style="display:inline-block;flex-grow: 1;">',
'<% if (sort==Asc.c_oAscSortOptions.ByColorFill || sort==Asc.c_oAscSortOptions.ByColorFont) { %>', '<div style="width: 33%;padding: 0 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-col-<%= levelIndex %>" class="input-group-nr" style=""></div></div>',
'<div style="width:17%;display: inline-block;vertical-align: top;"><div id="sort-dialog-btn-color-<%= levelIndex %>" class="input-group-nr"></div></div>', '<div style="width: 33%;padding: 0 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-sort-<%= levelIndex %>" class="input-group-nr"></div></div>',
'<div style="width:17%;padding-left: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-order-<%= levelIndex %>" class="input-group-nr" style="display: inline-block;"></div></div>', '<% if (sort==Asc.c_oAscSortOptions.ByColorFill || sort==Asc.c_oAscSortOptions.ByColorFont) { %>',
'<% } else { %>', '<div style="width: 17%;padding: 0 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-btn-color-<%= levelIndex %>" class="input-group-nr"></div></div>',
'<div style="width:34%;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-order-<%= levelIndex %>" class="input-group-nr" style="display: inline-block;"></div></div>', '<div style="width: 17%;padding: 0 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-order-<%= levelIndex %>" class="input-group-nr" style=""></div></div>',
'<% } %>', '<% } else { %>',
'<div style="width: 34%;padding: 0 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-order-<%= levelIndex %>" class="input-group-nr" style=""></div></div>',
'<% } %>',
'</div>',
'</div>' '</div>'
].join('')) ].join(''))
}); });
@ -177,6 +188,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.btnDown.on('click', _.bind(this.onMoveClick, this, false)); this.btnDown.on('click', _.bind(this.onMoveClick, this, false));
this.lblColumn = $('#sort-dialog-label-column'); this.lblColumn = $('#sort-dialog-label-column');
this.lblSort = $('#sort-dialog-label-sort');
this.afterRender(); this.afterRender();
}, },
@ -213,6 +225,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.sortList.on('item:add', _.bind(this.addControls, this)); this.sortList.on('item:add', _.bind(this.addControls, this));
this.sortList.on('item:change', _.bind(this.addControls, this)); this.sortList.on('item:change', _.bind(this.addControls, this));
this.refreshList(props.asc_getLevels()); this.refreshList(props.asc_getLevels());
this.initListHeaders();
} }
}, },
@ -278,6 +291,14 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.updateButtons(); this.updateButtons();
}, },
initListHeaders: function() {
var pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
pos && this.lblColumn.width(Math.floor(pos.left)-3);
pos = this.sortList.cmpEl.find('#sort-dialog-btn-color-0').position();
!pos && (pos = this.sortList.cmpEl.find('#sort-dialog-cmb-order-0').position());
pos && this.lblSort.width(Math.floor(pos.left)-5 - this.lblColumn.width());
},
addControls: function(listView, itemView, item) { addControls: function(listView, itemView, item) {
if (!item) return; if (!item) return;
@ -360,6 +381,8 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
cmpEl.on('mousedown', '.combobox', function(){ cmpEl.on('mousedown', '.combobox', function(){
me.sortList.selectRecord(item); me.sortList.selectRecord(item);
}); });
this.updateLevelCaptions(true);
}, },
onOptions: function () { onOptions: function () {
@ -489,6 +512,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.sortList.scrollToRecord(rec); this.sortList.scrollToRecord(rec);
} }
this.updateMoveButtons(); this.updateMoveButtons();
this.updateLevelCaptions();
}, },
onSelectLevel: function(lisvView, itemView, record) { onSelectLevel: function(lisvView, itemView, record) {
@ -608,6 +632,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.btnCopy.setDisabled(this.sortList.store.length<1); this.btnCopy.setDisabled(this.sortList.store.length<1);
this.btnDelete.setDisabled(this.sortList.store.length<1); this.btnDelete.setDisabled(this.sortList.store.length<1);
this.updateMoveButtons(); this.updateMoveButtons();
this.updateLevelCaptions(true);
this.sortList.scroller && this.sortList.scroller.update(); this.sortList.scroller && this.sortList.scroller.update();
}, },
@ -618,6 +643,17 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.btnDown.setDisabled(index<0 || index==this.sortList.store.length-1); this.btnDown.setDisabled(index<0 || index==this.sortList.store.length-1);
}, },
updateLevelCaptions: function(all) {
var captions = this.$window.find('.level-caption');
if (captions.length<1) return;
if (all)
captions.text(this.textThenBy);
else
(captions.length>1) && (captions[1].innerText = this.textThenBy);
captions[0].innerText = this.textSortBy;
},
onSelectOther: function(combo, item) { onSelectOther: function(combo, item) {
var me = this; var me = this;
if (me.api) { if (me.api) {
@ -688,7 +724,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
textLeft: 'Left', textLeft: 'Left',
textRight: 'Right', textRight: 'Right',
errorEmpty: 'All sort criteria must have a column or row specified.', errorEmpty: 'All sort criteria must have a column or row specified.',
textAuto: 'Automatic', textAuto: 'Auto',
textNone: 'None', textNone: 'None',
errorNotOriginalCol: 'The column you selected is not in the original selected range.', errorNotOriginalCol: 'The column you selected is not in the original selected range.',
errorNotOriginalRow: 'The row you selected is not in the original selected range.', errorNotOriginalRow: 'The row you selected is not in the original selected range.',
@ -698,7 +734,8 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
textMoreRows: '(More rows...)', textMoreRows: '(More rows...)',
textMoreCols: '(More columns...)', textMoreCols: '(More columns...)',
errorSameColumnValue: "%1 is being sorted by values more than once.<br>Delete the duplicate sort criteria and try again.", errorSameColumnValue: "%1 is being sorted by values more than once.<br>Delete the duplicate sort criteria and try again.",
errorSameColumnColor: "%1 is being sorted by the same color more than once.<br>Delete the duplicate sort criteria and try again." errorSameColumnColor: "%1 is being sorted by the same color more than once.<br>Delete the duplicate sort criteria and try again.",
textSortBy: 'Sort by',
textThenBy: 'Then by'
}, SSE.Views.SortDialog || {})); }, SSE.Views.SortDialog || {}));
}); });

4
apps/spreadsheeteditor/main/locale/en.json
View file

@ -2118,7 +2118,7 @@
"SSE.Views.SortDialog.textLeft": "Left", "SSE.Views.SortDialog.textLeft": "Left",
"SSE.Views.SortDialog.textRight": "Right", "SSE.Views.SortDialog.textRight": "Right",
"SSE.Views.SortDialog.errorEmpty": "All sort criteria must have a column or row specified.", "SSE.Views.SortDialog.errorEmpty": "All sort criteria must have a column or row specified.",
"SSE.Views.SortDialog.textAuto": "Automatic", "SSE.Views.SortDialog.textAuto": "Auto",
"SSE.Views.SortDialog.textNone": "None", "SSE.Views.SortDialog.textNone": "None",
"SSE.Views.SortDialog.errorNotOriginalCol": "The column you selected is not in the original selected range.", "SSE.Views.SortDialog.errorNotOriginalCol": "The column you selected is not in the original selected range.",
"SSE.Views.SortDialog.errorNotOriginalRow": "The row you selected is not in the original selected range.", "SSE.Views.SortDialog.errorNotOriginalRow": "The row you selected is not in the original selected range.",
@ -2129,6 +2129,8 @@
"SSE.Views.SortDialog.textMoreCols": "(More columns...)", "SSE.Views.SortDialog.textMoreCols": "(More columns...)",
"SSE.Views.SortDialog.errorSameColumnValue": "%1 is being sorted by values more than once.<br>Delete the duplicate sort criteria and try again.", "SSE.Views.SortDialog.errorSameColumnValue": "%1 is being sorted by values more than once.<br>Delete the duplicate sort criteria and try again.",
"SSE.Views.SortDialog.errorSameColumnColor": "%1 is being sorted by the same color more than once.<br>Delete the duplicate sort criteria and try again.", "SSE.Views.SortDialog.errorSameColumnColor": "%1 is being sorted by the same color more than once.<br>Delete the duplicate sort criteria and try again.",
"SSE.Views.SortDialog.textSortBy": "Sort by",
"SSE.Views.SortDialog.textThenBy": "Then by",
"SSE.Views.SortOptionsDialog.textTitle": "Sort Options", "SSE.Views.SortOptionsDialog.textTitle": "Sort Options",
"SSE.Views.SortOptionsDialog.textHeaders": "My data has headers", "SSE.Views.SortOptionsDialog.textHeaders": "My data has headers",
"SSE.Views.SortOptionsDialog.textCase": "Case sensitive", "SSE.Views.SortOptionsDialog.textCase": "Case sensitive",