[SSE] Change layout for sort dialog
This commit is contained in:
Julia Radzhabova
parent
b75e8ca64a
commit
45304408a7
|
|
@ -13,8 +13,8 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label id="sort-dialog-label-column" class="header" style="width: 156px;"><%= scope.textColumn %></label>
|
||||
<label class="header" style="width: 152px;"><%= scope.textSort %></label>
|
||||
<label id="sort-dialog-label-column" class="header" style="width: 243px;"><%= scope.textColumn %></label>
|
||||
<label id="sort-dialog-label-sort" class="header" style="width: 141px;"><%= scope.textSort %></label>
|
||||
<label class="header" style=""><%= scope.textOrder %></label>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
|
||||
options: {
|
||||
alias: 'SortDialog',
|
||||
contentWidth: 500,
|
||||
contentWidth: 560,
|
||||
height: 294,
|
||||
buttons: ['ok', 'cancel']
|
||||
},
|
||||
|
|
@ -112,6 +112,14 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
Common.Views.AdvancedSettingsWindow.prototype.render.call(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({
|
||||
el: $('#sort-dialog-list', this.$window),
|
||||
store: new Common.UI.DataViewStore(),
|
||||
|
|
@ -119,15 +127,18 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
enableKeyEvents: false,
|
||||
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
|
||||
itemTemplate: _.template([
|
||||
'<div class="list-item" style="width: 100%;display:inline-block;" 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>',
|
||||
'<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 class="list-item" style="width: 100%;display: flex;align-items:center;" id="sort-dialog-item-<%= levelIndex %>">',
|
||||
'<label class="level-caption" style="padding-right: 5px;width: ' + captionWidth + 'px;flex-shrink:0;cursor: pointer;"></label>',
|
||||
'<div style="display:inline-block;flex-grow: 1;">',
|
||||
'<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: 33%;padding: 0 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-sort-<%= levelIndex %>" class="input-group-nr"></div></div>',
|
||||
'<% if (sort==Asc.c_oAscSortOptions.ByColorFill || sort==Asc.c_oAscSortOptions.ByColorFont) { %>',
|
||||
'<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: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>',
|
||||
'<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: 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%;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: 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>'
|
||||
].join(''))
|
||||
});
|
||||
|
|
@ -177,6 +188,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
this.btnDown.on('click', _.bind(this.onMoveClick, this, false));
|
||||
|
||||
this.lblColumn = $('#sort-dialog-label-column');
|
||||
this.lblSort = $('#sort-dialog-label-sort');
|
||||
|
||||
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:change', _.bind(this.addControls, this));
|
||||
this.refreshList(props.asc_getLevels());
|
||||
this.initListHeaders();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -278,6 +291,14 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
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) {
|
||||
if (!item) return;
|
||||
|
||||
|
|
@ -360,6 +381,8 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
cmpEl.on('mousedown', '.combobox', function(){
|
||||
me.sortList.selectRecord(item);
|
||||
});
|
||||
|
||||
this.updateLevelCaptions(true);
|
||||
},
|
||||
|
||||
onOptions: function () {
|
||||
|
|
@ -489,6 +512,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
this.sortList.scrollToRecord(rec);
|
||||
}
|
||||
this.updateMoveButtons();
|
||||
this.updateLevelCaptions();
|
||||
},
|
||||
|
||||
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.btnDelete.setDisabled(this.sortList.store.length<1);
|
||||
this.updateMoveButtons();
|
||||
this.updateLevelCaptions(true);
|
||||
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);
|
||||
},
|
||||
|
||||
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) {
|
||||
var me = this;
|
||||
if (me.api) {
|
||||
|
|
@ -688,7 +724,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
|
|||
textLeft: 'Left',
|
||||
textRight: 'Right',
|
||||
errorEmpty: 'All sort criteria must have a column or row specified.',
|
||||
textAuto: 'Automatic',
|
||||
textAuto: 'Auto',
|
||||
textNone: 'None',
|
||||
errorNotOriginalCol: 'The column 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...)',
|
||||
textMoreCols: '(More columns...)',
|
||||
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 || {}));
|
||||
});
|
||||
|
|
@ -2118,7 +2118,7 @@
|
|||
"SSE.Views.SortDialog.textLeft": "Left",
|
||||
"SSE.Views.SortDialog.textRight": "Right",
|
||||
"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.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.",
|
||||
|
|
@ -2129,6 +2129,8 @@
|
|||
"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.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.textHeaders": "My data has headers",
|
||||
"SSE.Views.SortOptionsDialog.textCase": "Case sensitive",
|
||||
|
|
|
|||
Loading…
Reference in a new issue