pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-26 02:11:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2278 from ONLYOFFICE/feature/list-view

Browse Source 
Feature/list view
This commit is contained in:
Julia Radzhabova
2023-03-20 11:12:13 +03:00
committed by GitHub
parent 75735d0882 0f4104b210
commit d27abdff62
20 changed files with 361 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/common/main/lib/component/DataView.js
View File

@ -223,6 +223,7 @@ define([
allowScrollbar: true,
scrollAlwaysVisible: false,
minScrollbarLength: 40,
scrollYStyle: null,
showLast: true,
useBSKeydown: false,
cls: ''
@ -273,6 +274,7 @@ define([
me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
me.minScrollbarLength = me.options.minScrollbarLength || 40;
me.scrollYStyle = me.options.scrollYStyle;
me.tabindex = me.options.tabindex || 0;
me.delayRenderTips = me.options.delayRenderTips || false;
if (me.parentMenu)
@ -358,6 +360,7 @@ define([
el: $(this.el).find('.inner').addBack().filter('.inner'),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : this.minScrollbarLength,
scrollYStyle: this.scrollYStyle,
wheelSpeed: 10,
alwaysVisibleY: this.scrollAlwaysVisible
});
@ -598,6 +601,7 @@ define([
el: $(this.el).find('.inner').addBack().filter('.inner'),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : this.minScrollbarLength,
scrollYStyle: this.scrollYStyle,
wheelSpeed: 10,
alwaysVisibleY: this.scrollAlwaysVisible
});
@ -702,10 +706,10 @@ define([
}
},
scrollToRecord: function (record, force) {
scrollToRecord: function (record, force, offsetTop) {
if (!record) return;
var innerEl = $(this.el).find('.inner'),
inner_top = innerEl.offset().top,
inner_top = innerEl.offset().top + (offsetTop ? offsetTop : 0),
idx = _.indexOf(this.store.models, record),
div = (idx>=0 && this.dataViewItems.length>idx) ? $(this.dataViewItems[idx].el) : innerEl.find('#' + record.get('id'));
if (div.length<=0) return;
@ -1065,6 +1069,7 @@ define([
el: $(this.el).find('.inner').addBack().filter('.inner'),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : this.minScrollbarLength,
scrollYStyle: this.scrollYStyle,
wheelSpeed: 10,
alwaysVisibleY: this.scrollAlwaysVisible
});
@ -1157,6 +1162,7 @@ define([
el: $(this.el).find('.inner').addBack().filter('.inner'),
useKeyboard: this.enableKeyEvents && !this.handleSelect,
minScrollbarLength : this.minScrollbarLength,
scrollYStyle: this.scrollYStyle,
wheelSpeed: 10,
alwaysVisibleY: this.scrollAlwaysVisible
});

173
apps/common/main/lib/component/ListView.js
View File

@ -52,19 +52,180 @@ define([
enableKeyEvents: true,
showLast: true,
simpleAddMode: false,
headers: [], //{name: 'string', width: 'number'(optional for last), sortType: 'string'(optional), style: 'string'(optional)} ---> example {name:text, width: 100, sortType: name, style: 'margin-left:10px;}
initSort: null, //{type: 'string', direction: -1 or 1} ---> example {type:name, direction:1}
keyMoveDirection: 'vertical',
itemTemplate: _.template('<div id="<%= id %>" class="list-item" style=""><%= value %></div>'),
cls: ''
},
template: _.template([
'<div class="listview inner <%= cls %>" <% if (options.dataHint) { %> data-hint="<%= options.dataHint %>" <% } if (options.dataHintDirection) { %> data-hint-direction="<%= options.dataHintDirection %>" <% } if (options.dataHintOffset) { %> data-hint-offset="<%= options.dataHintOffset %>" <% } %>></div>'
'<div class="listview inner <%= cls %>" <% if (options.dataHint) { %> data-hint="<%= options.dataHint %>" <% } if (options.dataHintDirection) { %> data-hint-direction="<%= options.dataHintDirection %>" <% } if (options.dataHintOffset) { %> data-hint-offset="<%= options.dataHintOffset %>" <% } %>>',
'</div>'
].join('')),
initialize : function(options) {
if(this.options.initSort != null) {
this.activeSortType = this.options.initSort.type;
this.sortDirection = this.options.initSort.direction;
}
this.headerEl = null;
this.headerHeight = 0;
Common.UI.DataView.prototype.initialize.call(this, options);
},
render: function() {
(this.options.headers.length > 0) && (this.insertHeaders());
Common.UI.DataView.prototype.render.call(this);
},
insertHeaders: function() {
var template = _.template([
'<div class="listview-table-header-wrapper">',
'<div class="listview-table-header">',
'<% _.each(headers, function(header){ %>',
'<%if (header.sortType) { %>',
'<div class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>" sort-type="<%=header.sortType%>">',
'<div class="header-sorted-wrapper">',
'<span class="header-sorted">',
'<label><%= header.name %></label>',
'<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>caret-hidden<%}%>"></span>',
'</span>',
'</div>',
'</div>',
'<%} else { %>',
'<label class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
'<%}%>',
'<% }); %>',
'</div>',
'</div>'
].join(''))({
headers: this.options.headers,
activeSortType: this.options.initSort ? this.options.initSort.type : null,
sortDirection: this.options.initSort ? this.options.initSort.direction : null,
});
this.$el.before(template);
var me = this,
headerEl = this.$el.prev().children();
//Calculating the width of a multiline label in sort header
for(var i = 0, sortHeaderIndex = 0; i < this.options.headers.length; i++){
var header = this.options.headers[i];
if(header.sortType){
var headerWords = header.name.split(' '),
labelEl = $(headerEl.find('.table-header-item .header-sorted label')[sortHeaderIndex]),
tempEl = $('<label>A</label>');
me.$el.before(tempEl);
if(headerWords.length > 1 && labelEl.height() > Math.ceil(tempEl.height())) {
var maxWidthWord = 0;
headerWords.forEach(function(word) {
tempEl.text(word);
(tempEl.width() > maxWidthWord) && (maxWidthWord = tempEl.width());
});
(maxWidthWord < labelEl.width()) && labelEl.width(maxWidthWord);
}
tempEl.remove();
sortHeaderIndex++;
}
};
headerEl.find('.table-header-item .header-sorted').on('click', function(e) {
var selectedSortType = $(e.currentTarget).parent().parent().attr('sort-type'),
curCaretEl = $(e.currentTarget).find('.caret');
if(me.activeSortType === selectedSortType){
me.sortDirection = -me.sortDirection
}
else {
me.activeSortType = selectedSortType;
me.sortDirection = 1;
}
headerEl.find('.caret').addClass('caret-hidden');
if(curCaretEl.removeClass('caret-hidden'));
if(me.sortDirection == -1)
curCaretEl.addClass('sort-desc');
else
curCaretEl.removeClass('sort-desc');
me.trigger('header:click', me.activeSortType, me.sortDirection);
});
if(this.tabindex != 0 && this.handleSelect){
headerEl.on('click', function(e) {
me.focus();
});
var onMouseDown = function (e) {
me.$el.find('.inner').addClass('focused');
$(document).on('mouseup', onMouseUp);
};
var onMouseUp = function (e) {
me.focus();
me.$el.find('.inner').removeClass('focused');
$(document).off('mouseup', onMouseUp);
};
headerEl.on('mousedown', onMouseDown);
}
this.headerEl = headerEl;
this.calcOffsetFromHeader()
},
setHeaderName: function(index, name) {
if(index < 0 || index > this.options.headers.length - 1 || !this.headerEl) return;
var labelEl = $(this.headerEl.find('.table-header-item')[index]);
if(labelEl.attr('sort-type')) {
labelEl = labelEl.find('label')[0];
}
this.options.headers[index].name = name;
labelEl.text(name);
},
setHeaderWidth: function(index, width) {
if(index < 0 || index > this.options.headers.length - 1 || !this.headerEl) return;
var labelEl = $(this.headerEl.find('.table-header-item')[index]);
if(labelEl.attr('sort-type')) {
labelEl = labelEl.find('label')[0];
}
this.options.headers[index].width = width;
$(labelEl).width(width);
},
calcOffsetFromHeader: function() {
if(!this.headerEl) return;
var headerHeight = Math.floor(this.headerEl.outerHeight());
this.headerHeight = headerHeight;
this.scrollYStyle = _.extend({}, this.scrollYStyle, {'margin-top': headerHeight+1 + 'px'});
},
setOffsetFromHeader: function(isCalcNewHeaderHeight) {
if(!this.headerEl) return;
if(isCalcNewHeaderHeight === true){
this.calcOffsetFromHeader();
}
this.$el.find('.listview').css({'padding-top': this.headerHeight + 'px'});
this.scroller.update(isCalcNewHeaderHeight ? {scrollYStyle: this.scrollYStyle} : undefined);
},
onResetItems : function() {
this.innerEl = null;
Common.UI.DataView.prototype.onResetItems.call(this);
this.trigger('items:reset', this);
if(this.headerEl) {
this.setOffsetFromHeader();
}
},
createNewItem: function(record) {
@ -87,7 +248,7 @@ define([
this.dataViewItems.push(view);
} else {
var idx = _.indexOf(this.store.models, record);
var innerDivs = this.innerEl.find('> div');
var innerDivs = this.innerEl.find('> .item');
if (idx > 0)
$(innerDivs.get(idx - 1)).after(view.render().el);
@ -123,7 +284,7 @@ define([
scrollToRecord: function (record, force) {
if (!this._fromKeyDown) {
Common.UI.DataView.prototype.scrollToRecord.call(this, record, force);
Common.UI.DataView.prototype.scrollToRecord.call(this, record, force, this.headerHeight);
return;
}
@ -136,10 +297,12 @@ define([
var div_top = div.position().top,
div_height = div.outerHeight(),
div_first = this.dataViewItems[0].el,
div_first_top = div_first ? div_first.offsetTop : 0,
newpos;
if (force || div_top<0)
newpos = innerEl.scrollTop() + div_top;
if (force || div_top<div_first_top)
newpos = innerEl.scrollTop() + div_top - div_first_top;
else if (div_top+div_height>innerHeight)
newpos = innerEl.scrollTop() + div_top + div_height - innerHeight;

12
apps/common/main/lib/component/Scroller.js
View File

@ -63,7 +63,8 @@ define([
includePadding : true,
includeMargin : true,
alwaysVisibleX : false,
alwaysVisibleY : false
alwaysVisibleY : false,
scrollYStyle : null
},
initialize: function(options) {
@ -85,6 +86,8 @@ define([
this.setAlwaysVisibleX(me.options.alwaysVisibleX);
this.setAlwaysVisibleY(me.options.alwaysVisibleY);
(this.options.scrollYStyle) && (this.setOptionStyleY(this.options.scrollYStyle));
}
return this;
@ -107,6 +110,8 @@ define([
this.setAlwaysVisibleX(options.alwaysVisibleX);
this.setAlwaysVisibleY(options.alwaysVisibleY);
(options.scrollYStyle) && (this.setOptionStyleY(options.scrollYStyle));
// Emulate capture scroller
var mouseDownHandler = function(e) {
@ -166,6 +171,11 @@ define([
}
},
setOptionStyleY: function (style) {
$(this.el).find('.ps-scrollbar-y-rail').css(style);
this.cmpEl.perfectScrollbar('update');
},
isVisible: function() {
return $(this.el).find('.ps-scrollbar-y-rail').is(':visible');
}

63
apps/common/main/resources/less/listview.less
View File

@ -23,13 +23,14 @@
}
}
&:not(.no-focus):focus:not(.disabled) {
&:not(.no-focus):focus:not(.disabled),
&:not(.no-focus).focused:not(.disabled){
border-color: @border-control-focus-ie;
border-color: @border-control-focus;
}
& > .item {
// display: block;
// display: block;
text-overflow: ellipsis;
padding: 3px 6px;
cursor: pointer;
@ -86,6 +87,64 @@
}
}
.listview-table-header-wrapper {
width: 100%;
position: relative;
.listview-table-header {
z-index: 1;
background-color: @background-normal-ie;
background-color: @background-normal;
border-bottom: @scaled-one-px-value-ie solid @border-regular-control-ie;
border-bottom: @scaled-one-px-value solid @border-regular-control;
padding: 3px 6px;
position: absolute;
margin: @scaled-one-px-value;
width: calc(100% - 2 * @scaled-one-px-value);
display: flex;
align-items: center;
label {
overflow: hidden;
text-overflow: ellipsis;
}
.table-header-item {
color: @text-tertiary-ie;
color: @text-tertiary;
display: inline-block;
.header-sorted-wrapper {
display: flex;
.header-sorted {
display: flex;
align-items: center;
overflow: hidden;
padding-right: 1px;
cursor: pointer;
label {
padding-right: 6px;
}
.caret {
border-color: @text-tertiary-ie;
border-color: @text-tertiary;
min-width: 4px;
min-height: 4px;
&.caret-hidden {
visibility: hidden;
}
}
}
}
}
}
}
.no-borders > .listview .item {
border-color: transparent;
border-top-color: transparent;

12
apps/documenteditor/main/app/view/CustomColumnsDialog.js
View File

@ -63,10 +63,7 @@ define([
'<div class="input-row" style="margin-bottom: 10px;">',
'<label class="input-label">' + this.textColumns + '</label><div id="custom-columns-spin-num" style="float: right;"></div>',
'</div>',
'<label class="input-label" style="width:27px; font-weight: bold; margin-left:6px;">#</label>',
'<label class="input-label" style="width:114px; font-weight: bold;">' + this.textWidth + '</label>',
'<label class="input-label" style="width:105px; font-weight: bold;">' + this.textTitleSpacing + '</label>',
'<div id="custom-columns-list" style="width:100%; height: 91px;"></div>',
'<div id="custom-columns-list" style="width:100%; height: 113px;"></div>',
'<div class="input-row" style="margin: 10px 0;">',
'<div id="custom-columns-equal-width"></div>',
'</div>',
@ -181,8 +178,13 @@ define([
store: new Common.UI.DataViewStore(),
showLast: false,
handleSelect: false,
tabindex: 1,
tabindex: 0,
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
headers: [
{name: '#', width:26},
{name: this.textWidth, width:115},
{name: this.textTitleSpacing, width:113},
],
itemTemplate: _.template([
'<div id="custom-columns-list-item-<%= index %>" class="list-item" style="display:flex; align-items:center; width=100%;">',
'<label class="level-caption" style="padding-right:5px; flex-shrink:0; width:20px;"><%= index + 1 %></label>',

44
apps/documenteditor/main/app/view/TableOfContentsSettings.js
View File

@ -48,14 +48,14 @@ define([
DE.Views.TableOfContentsSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 500,
height: 455,
height: 460,
id: 'window-table-contents'
},
initialize : function(options) {
var me = this;
var height = options.type ? 385 : 455;
var height = options.type ? 385 : 460;
_.extend(this.options, {
title: options.type ? this.textTitleTOF : this.textTitle,
height: height,
@ -119,13 +119,13 @@ define([
'<div id="tableofcontents-spin-levels" class="margin-left" style="display: inline-block; width:95px;"></div>',
'</div>',
'<div id="tableofcontents-from-styles" class="hidden">',
'<table><tr><td style="height: 25px;">',
'<label class="input-label label-style" style="width: 144px;">' + me.textStyle + '</label>',
'<label class="input-label" style="">' + me.textLevel + '</label>',
'</td></tr>',
'<tr><td>',
'<div id="tableofcontents-styles-list" class="header-styles-tableview" style="width:100%; height: 121px;"></div>',
'</td></tr></table>',
'<table>',
'<tr>',
'<td>',
'<div id="tableofcontents-styles-list" class="header-styles-tableview" style="width:100%; height: 143px;"></div>',
'</td>',
'</tr>',
'</table>',
'</div>',
'<% } %>',
'</td>',
@ -148,6 +148,7 @@ define([
this.type = options.type || 0; // 0 - TOC, 1 - TOF
this.startLevel = 1;
this.endLevel = 3;
this.isInitStylesListHeaders = false;
this._noApply = true;
this._originalProps = null;
@ -333,6 +334,12 @@ define([
if (newValue) {
this.stylesContainer.toggleClass('hidden', !newValue);
this.levelsContainer.toggleClass('hidden', newValue);
if(newValue && !this.isInitStylesListHeaders) {
this.initListHeaders();
this.stylesList.setOffsetFromHeader(true);
this.isInitStylesListHeaders = true;
}
if (this._needUpdateStyles)
this.synchronizeLevelsFromOutline();
this.stylesList.scroller.update({alwaysVisibleY: true});
@ -365,6 +372,10 @@ define([
simpleAddMode: true,
showLast: false,
tabindex: 1,
headers: [
{name: me.textStyle, width: 144, style: 'margin-left: 16px;'},
{name: me.textLevel},
],
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item">',
@ -506,6 +517,21 @@ define([
this._noApply = false;
},
initListHeaders: function() {
var headersArr = this.stylesList.headerEl.find('.table-header-item'),
widthHeader = this.stylesList.headerEl.width(),
widthFirstHeader = $(headersArr[0]).width(),
marginFirstHeader = parseFloat($(headersArr[0]).css('margin-left'));
$(headersArr[0]).addClass('hidden');
var widthLastHeader = $(headersArr[1]).width();
$(headersArr[0]).removeClass('hidden');
if(marginFirstHeader + widthFirstHeader + widthLastHeader > widthHeader) {
this.stylesList.setHeaderWidth(0, widthHeader - widthLastHeader - marginFirstHeader);
}
},
fillTOCProps: function(props) {
var me = this,
docStyles = this.api.asc_GetStylesArray(),

9
apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
View File

@ -7,16 +7,9 @@
<div id="format-manager-combo-scope" class="input-group-nr" style="width:185px;"></div>
</td>
</tr>
<tr>
<td colspan=2>
<label id="format-manager-label-column" class="header" style="width: 186px;"><%= scope.textRules %></label>
<label id="format-manager-label-sort" class="header" style="width: 177px;"><%= scope.textApply %></label>
<label class="header" style=""><%= scope.textFormat %></label>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="format-manager-rules-list" class="range-tableview" style="width:100%; height: 151px;"></div>
<div id="format-manager-rules-list" class="range-tableview" style="width:100%; height: 173px;"></div>
</td>
</tr>
<tr>

13
apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
View File

@ -7,20 +7,9 @@
<div id="name-manager-combo-filter" class="input-group-nr" style="width:210px;"></div>
</td>
</tr>
<tr>
<td colspan=2>
<div style="width: 169px;display: inline-block;"><span id="name-manager-sort-name" class="header-sorted">
<label class="header"><%= scope.textRanges %></label><div style="width: 6px;height: 6px;"></div><span id="name-manager-sort-name-span" class="sort-direction caret"></span>
</span></div>
<div style="width: 115px;display: inline-block;"><span id="name-manager-sort-scope" class="header-sorted">
<label class="header"><%= scope.textScope %></label><div style="width: 6px;height: 6px;"></div><span id="name-manager-sort-scope-span" class="sort-direction caret"></span>
</span></div>
<label class="header" style=""><%= scope.textDataRange %></label>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 141px;"></div>
<div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 163px;"></div>
</td>
</tr>
<tr>

9
apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
View File

@ -9,16 +9,9 @@
<label><%= scope.textRangesDesc %></label>
</td>
</tr>
<tr>
<td colspan=2>
<label class="header" style="width: 188px;"><%= scope.textTitle %></label>
<label class="header" style="width: 188px;"><%= scope.textRange %></label>
<label class="header" style=""><%= scope.textPwd %></label>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="protect-ranges-list" class="range-tableview" style="width:100%; height: 155px;"></div>
<div id="protect-ranges-list" class="range-tableview" style="width:100%; height: 164px;"></div>
</td>
</tr>
<tr>

9
apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
View File

@ -15,16 +15,9 @@
<tr>
<td colspan=2 class="padding-very-small"></td>
</tr>
<tr>
<td colspan=2>
<label class="header" style="width: 188px;"><%= scope.textTitle %></label>
<label class="header" style="width: 188px;"><%= scope.textRange %></label>
<label class="header" style=""><%= scope.textYouCan %></label>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="protect-edit-ranges-list" class="range-tableview" style="width:100%; height: 130px;"></div>
<div id="protect-edit-ranges-list" class="range-tableview" style="width:100%; height: 141px;"></div>
</td>
</tr>
<tr>

9
apps/spreadsheeteditor/main/app/template/SortDialog.template
View File

@ -11,16 +11,9 @@
<button type="button" class="btn btn-text-default" id="sort-dialog-btn-options" style="min-width: 100px;"><%= scope.textOptions %></button>
</td>
</tr>
<tr>
<td>
<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>
<tr>
<td class="padding-small">
<div id="sort-dialog-list" class="" style="width:100%; height: 151px;"></div>
<div id="sort-dialog-list" class="" style="width:100%; height: 173px;"></div>
</td>
</tr>
</table>

12
apps/spreadsheeteditor/main/app/template/WatchDialog.template
View File

@ -7,19 +7,9 @@
<div id="watch-dialog-btn-delete" style="display: inline-block;"></div>
</td>
</tr>
<tr>
<td>
<label class="header" style="width: 76px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textBook %></label><!--
--><label class="header" style="width: 70px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textSheet %></label><!--
--><label class="header" style="width: 70px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textName %></label><!--
--><label class="header" style="width: 70px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textCell %></label><!--
--><label class="header" style="width: 110px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textValue %></label><!--
--><label class="header" style="width: 140px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textFormula %></label>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="watch-dialog-list" class="range-tableview" style="width:100%; height: 143px;"></div>
<div id="watch-dialog-list" class="range-tableview" style="width:100%; height: 164px;"></div>
</td>
</tr>
</table>

14
apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
View File

@ -94,16 +94,9 @@ define([
'<div id="chart-type-dlg-styles-list" class="" style="width:100%; height: 176px;"></div>',
'</td>',
'</tr>',
'<tr class="combined-chart">',
'<td>',
'<label id="chart-type-dlg-label-column" class="header" style="width: 115px;">', me.textSeries, '</label>',
'<label id="chart-type-dlg-label-sort" class="header" style="width: 100px;">', me.textType, '</label>',
'<label class="header" style="width: 134px;text-align: center;">', me.textSecondary, '</label>',
'</td>',
'</tr>',
'<tr class="combined-chart">',
'<td class="padding-small">',
'<div id="chart-type-dlg-series-list" class="" style="width:100%; height: 180px;"></div>',
'<div id="chart-type-dlg-series-list" class="" style="width:100%; height: 203px;"></div>',
'</td>',
'</tr>',
'</table>',
@ -193,6 +186,11 @@ define([
emptyText: '',
enableKeyEvents: false,
scrollAlwaysVisible: true,
headers: [
{name: me.textSeries, width: 108},
{name: me.textType, width: 105},
{name: me.textSecondary, width: 123, style:'text-align: center;'},
],
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',

8
apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
View File

@ -74,9 +74,7 @@ define([
'</tr>',
'<tr>',
'<td class="padding-small">',
'<label class="header" style="display: inline-block; width: 245px;">', me.textSource,'</label>',
'<label class="header" style="display: inline-block;">', me.textStatus,'</label>',
'<div id="external-links-list" class="range-tableview" style="width:100%; height: 148px;"></div>',
'<div id="external-links-list" class="range-tableview" style="width:100%; height: 171px;"></div>',
'</td>',
'</tr>',
'</table>',
@ -109,6 +107,10 @@ define([
el: $('#external-links-list', this.$window),
store: new Common.UI.DataViewStore(),
simpleAddMode: true,
headers: [
{name: me.textSource, width: 240},
{name: me.textStatus, width: 175}
],
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
'<div style="width:240px;padding-right: 5px;"><%= value %></div>',

5
apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
View File

@ -146,6 +146,11 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
el: $('#format-manager-rules-list', this.$window),
store: new Common.UI.DataViewStore(),
emptyText: '',
headers: [
{name: this.textRules, width: 182},
{name: this.textApply, width: 180},
{name: this.textFormat, width: 114},
],
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div class="list-item" style="width: 100%;display:inline-block;" id="format-manager-item-<%= ruleIndex %>">',

28
apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
View File

@ -119,6 +119,12 @@ define([ 'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
store: new Common.UI.DataViewStore(),
simpleAddMode: true,
emptyText: this.textEmpty,
headers: [
{name: me.textRanges, width: 166, sortType:'name', style: 'padding-right: 12px;'},
{name: me.textScope, width: 117, sortType:'scopeName', style: 'padding-right: 12px;'},
{name: me.textDataRange, width: 208},
],
initSort:{type: this.sort.type, direction: this.sort.direction},
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
'<div class="listitem-icon toolbar__icon <% print(isTable?"btn-menu-table":(isSlicer ? "btn-slicer" : "btn-named-range")) %>"></div>',
@ -158,15 +164,7 @@ define([ 'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
});
this.btnDeleteRange.on('click', _.bind(this.onDeleteRange, this));
$('#name-manager-sort-name').on('click', _.bind(this.onSortNames, this, 'name'));
$('#name-manager-sort-scope').on('click', _.bind(this.onSortNames, this, 'scopeName'));
this.spanSortName = $('#name-manager-sort-name-span');
this.spanSortScope = $('#name-manager-sort-scope-span');
(this.sort.type=='name') ? this.spanSortScope.addClass('hidden') : this.spanSortName.addClass('hidden');
if (this.sort.direction<0) {
(this.sort.type=='name') ? this.spanSortName.addClass('sort-desc') : this.spanSortScope.addClass('sort-desc');
}
this.rangeList.on('header:click', _.bind(this.onSortNames, this));
this.afterRender();
},
@ -360,16 +358,8 @@ define([ 'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
this.close();
},
onSortNames: function(type) {
if (type !== this.sort.type) {
this.sort = {type: type, direction: 1};
this.spanSortName.toggleClass('hidden');
this.spanSortScope.toggleClass('hidden');
} else {
this.sort.direction = -this.sort.direction;
}
var sorted = (type=='name') ? this.spanSortName : this.spanSortScope;
(this.sort.direction>0) ? sorted.removeClass('sort-desc') : sorted.addClass('sort-desc');
onSortNames: function(type, direction) {
this.sort = {type: type, direction: direction};
this.rangeList.store.sort();
this.rangeList.onResetItems();

7
apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
View File

@ -97,10 +97,15 @@ define([ 'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
el: $('#protect-ranges-list', this.$window),
store: new Common.UI.DataViewStore(),
emptyText: this.textEmpty,
headers: [
{name: this.textTitle, width:184},
{name: this.textRange, width:180},
{name: this.textPwd, width:82},
],
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
'<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
'<div style="width:191px;padding-right: 5px;"><%= range %></div>',
'<div style="width:180px;padding-right: 5px;"><%= range %></div>',
'<div style="width:70px;"><% if (pwd) { %>', me.txtYes, '<% } else { %>', me.txtNo, '<% } %></div>',
'<% if (lock) { %>',
'<div class="lock-user"><%=lockuser%></div>',

5
apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
View File

@ -107,6 +107,11 @@ define([ 'text!spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.te
multiSelect: true,
simpleAddMode: true,
emptyText: this.textEmpty,
headers: [
{name: this.textTitle, width: 184},
{name: this.textRange, width: 191},
{name: this.textYouCan, width: 70},
],
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
'<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',

29
apps/spreadsheeteditor/main/app/view/SortDialog.js
View File

@ -128,6 +128,11 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
store: new Common.UI.DataViewStore(),
emptyText: '',
enableKeyEvents: false,
headers: [
{name: me.textColumn, width: 212},
{name: me.textSort, width: 157},
{name: me.textOrder, width: 156},
],
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div class="list-item" style="width: 100%;display: flex;align-items:center;" id="sort-dialog-item-<%= levelIndex %>">',
@ -191,9 +196,6 @@ 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();
},
@ -219,7 +221,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
lockOrientation: !!props.asc_getLockChangeOrientation()
};
this.lblColumn.text(props.asc_getColumnSort() ? this.textColumn : this.textRow);
this.sortList.setHeaderName(0, (props.asc_getColumnSort() ? this.textColumn : this.textRow));
// get name from props
this.fillSortValues();
@ -312,11 +314,22 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
},
initListHeaders: function() {
var pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
pos && this.lblColumn.width(Math.floor(pos.left)-3);
var firstLabelWidth = 0,
secondLabelWidth = 0,
thirdLabelWidth = 0,
pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
pos && (firstLabelWidth = 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());
pos && (secondLabelWidth = Math.floor(pos.left)-5 - firstLabelWidth);
thirdLabelWidth = this.sortList.headerEl.width() - firstLabelWidth - secondLabelWidth;
this.sortList.setHeaderWidth(0, firstLabelWidth);
this.sortList.setHeaderWidth(1, secondLabelWidth);
this.sortList.setHeaderWidth(2, thirdLabelWidth);
},
addControls: function(listView, itemView, item) {
@ -413,7 +426,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
props: me.sortOptions,
handler : function(result, settings) {
if (result == 'ok' && settings) {
me.lblColumn.text(settings.sortcol ? me.textColumn : me.textRow);
me.sortList.setHeaderName(0, settings.sortcol ? me.textColumn : me.textRow);
me.props.asc_setHasHeaders(settings.headers);
// me.props.asc_setCaseSensitive(settings.sensitive);
me.props.asc_setColumnSort(settings.sortcol);

8
apps/spreadsheeteditor/main/app/view/WatchDialog.js
View File

@ -88,6 +88,14 @@ define([ 'text!spreadsheeteditor/main/app/template/WatchDialog.template',
multiSelect: true,
store: new Common.UI.DataViewStore(),
simpleAddMode: true,
headers: [
{name: this.textBook, width: 70},
{name: this.textSheet, width: 70},
{name: this.textName, width: 70},
{name: this.textCell, width: 70},
{name: this.textValue, width: 110},
{name: this.textFormula, width: 135},
],
itemTemplate: _.template([
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;pointer-events:none;">',
'<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(book) %></div>',