From 7d9ae19fc21adf743b85d5eeacae8dc1a0bf2455 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Mon, 20 Feb 2023 02:32:32 +0300
Subject: [PATCH 01/23] Added headers for ListView

---
 apps/common/main/lib/component/ListView.js    | 80 ++++++++++++++++++-
 apps/common/main/resources/less/listview.less | 17 ++++
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index f796d38bbd..c23ff7584b 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -53,19 +53,95 @@ define([
                 enableKeyEvents: true,
                 showLast: true,
                 simpleAddMode: false,
+                headers: [],
+                initSort: null,         //{type: 'string', direction: -1 or 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) {
+                Common.UI.DataView.prototype.initialize.call(this, options);
+
+                if(this.options.initSort != null) {
+                    this.activeSortType = this.options.initSort.type;
+                    this.sortDirection = this.options.initSort.direction;
+                }
+            }, 
+
+            insertHeaders: function() {
+                if(this.options.headers.length == 0) return;
+
+                var template = _.template([
+                    '<div class="table-header">',
+                        '<% _.each(headers, function(header){ %>',
+                            '<%if (header.sortType) { %>',
+                                '<div class="table-header-item" style="width: <%=header.width%>px;" sort-type="<%=header.sortType%>">',
+                                    '<span class="header-sorted">',
+                                        '<label><%= header.name %></label>',
+                                        '<div style="width: 6px;height: 6px;"></div>',
+                                        '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>hidden<%}%>"></span>',
+                                    '</span>',
+                                '</div>',
+                            '<%} else { %>',
+                                '<label class="table-header-item" style="width: <%=header.width%>px;"><%= header.name %></label>',
+                            '<%}%>',
+                        '<% }); %>',
+                    '</div>'
+                ].join(''))({headers: this.options.headers, activeSortType: this.activeSortType, sortDirection: this.sortDirection});
+                this.$el.find('.listview').prepend(template);
+
+                var me = this;
+                this.$el.find('.table-header-item .header-sorted').on('click', function(e) {
+                    var selectedSortType = $(e.currentTarget).parent().attr('sort-type');
+
+                    if(me.activeSortType === selectedSortType){
+                        me.sortDirection = -me.sortDirection
+                    }
+                    else {
+                        me.activeSortType = selectedSortType;
+                        me.sortDirection = 1;
+                    }
+
+                    me.trigger('header:click', me.activeSortType, me.sortDirection);
+                    me.focus();
+                });
+            },
+
+            setHeaderName: function(index, name) {
+                if(index < 0 || index > this.options.headers.length - 1) return;
+
+                var labelEl = $(this.$el.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) return;
+
+                var labelEl = $(this.$el.find('.table-header-item')[index]);
+                if(labelEl.attr('sort-type')) {
+                    labelEl = labelEl.find('label')[0];
+                }
+
+                this.options.headers[index].width = width;
+                $(labelEl).width(width);
+            },
+
             onResetItems : function() {
                 this.innerEl = null;
                 Common.UI.DataView.prototype.onResetItems.call(this);
                 this.trigger('items:reset', this);
+                this.insertHeaders();
             },
 
             createNewItem: function(record) {
@@ -88,7 +164,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);
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index ff462c1f3f..b23a3b7336 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -28,6 +28,23 @@
     border-color: @border-control-focus;
   }
 
+  .table-header {
+    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;
+
+    .table-header-item {
+      color: @text-tertiary-ie;
+      color: @text-tertiary;
+      display: inline-block;
+
+      .caret {
+        border-color: @text-tertiary-ie;
+        border-color: @text-tertiary;
+      }
+    }
+  }
+
   & > .item {
 //    display: block;
     text-overflow: ellipsis;

From 03c86ab65c7068ebe582d7ce15f2791e055aef3f Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Mon, 20 Feb 2023 02:35:04 +0300
Subject: [PATCH 02/23] [SSE] Change headers for lists in NameManagerDialog and
 in SortDialog

---
 .../main/app/template/NameManagerDlg.template | 13 +--------
 .../main/app/template/SortDialog.template     |  9 +-----
 .../main/app/view/NameManagerDlg.js           | 28 ++++++-------------
 .../main/app/view/SortDialog.js               | 22 +++++++++------
 4 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
index ef016148f4..f31bc01d04 100644
--- a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
@@ -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>
diff --git a/apps/spreadsheeteditor/main/app/template/SortDialog.template b/apps/spreadsheeteditor/main/app/template/SortDialog.template
index d67a775073..d0b4f3e3c3 100644
--- a/apps/spreadsheeteditor/main/app/template/SortDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/SortDialog.template
@@ -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>
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 20ba92c6b8..ea8f9a1452 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -120,6 +120,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'},
+                    {name: me.textScope,        width: 117, sortType:'scopeName'},
+                    {name: me.textDataRange,    width: 100},
+                ],
+                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>',
@@ -159,15 +165,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();
         },
 
@@ -361,16 +359,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();
diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index c3dbc30356..b6c46e2532 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -129,6 +129,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: 100},
+                ],
                 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 %>">',
@@ -192,9 +197,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();
         },
 
@@ -220,7 +222,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();
@@ -313,11 +315,15 @@ 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 widthLblSort = 0,
+                pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
+
+            pos && (widthLblSort = Math.floor(pos.left)-3);
+            this.sortList.setHeaderWidth(0, widthLblSort);
+            
             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 && this.sortList.setHeaderWidth(1, Math.floor(pos.left)-5 - widthLblSort);
         },
 
         addControls: function(listView, itemView, item) {
@@ -414,7 +420,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);

From 7b52fb5f0e329c86b852615c9b632c2a81b44749 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Wed, 22 Feb 2023 03:41:54 +0300
Subject: [PATCH 03/23] Rendering headers individually

---
 apps/common/main/lib/component/ListView.js    | 66 ++++++++++++-------
 apps/common/main/resources/less/listview.less | 49 +++++++++-----
 .../main/app/template/NameManagerDlg.template |  2 +-
 .../main/app/template/SortDialog.template     |  2 +-
 4 files changed, 76 insertions(+), 43 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index c23ff7584b..7cc118100a 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -66,39 +66,52 @@ define([
             ].join('')),
 
             initialize : function(options) {
-                Common.UI.DataView.prototype.initialize.call(this, options);
-
                 if(this.options.initSort != null) {
                     this.activeSortType = this.options.initSort.type;
                     this.sortDirection = this.options.initSort.direction;
                 }
+                Common.UI.DataView.prototype.initialize.call(this, options);
             }, 
 
+            render: function() {
+                Common.UI.DataView.prototype.render.call(this);
+                this.insertHeaders();
+            },
+
             insertHeaders: function() {
                 if(this.options.headers.length == 0) return;
 
                 var template = _.template([
-                    '<div class="table-header">',
-                        '<% _.each(headers, function(header){ %>',
-                            '<%if (header.sortType) { %>',
-                                '<div class="table-header-item" style="width: <%=header.width%>px;" sort-type="<%=header.sortType%>">',
-                                    '<span class="header-sorted">',
-                                        '<label><%= header.name %></label>',
-                                        '<div style="width: 6px;height: 6px;"></div>',
-                                        '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>hidden<%}%>"></span>',
-                                    '</span>',
-                                '</div>',
-                            '<%} else { %>',
-                                '<label class="table-header-item" style="width: <%=header.width%>px;"><%= header.name %></label>',
-                            '<%}%>',
-                        '<% }); %>',
+                    '<div class="listview-table-header-wrapper">',
+                        '<div class="listview-table-header">',
+                            '<% _.each(headers, function(header){ %>',
+                                '<%if (header.sortType) { %>',
+                                    '<div class="table-header-item" style="width: <%=header.width%>px;" sort-type="<%=header.sortType%>">',
+                                        '<span class="header-sorted">',
+                                            '<label><%= header.name %></label>',
+                                            '<div style="width: 6px;height: 6px;"></div>',
+                                            '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>hidden<%}%>"></span>',
+                                        '</span>',
+                                    '</div>',
+                                '<%} else { %>',
+                                    '<label class="table-header-item" style="width: <%=header.width%>px;"><%= header.name %></label>',
+                                '<%}%>',
+                            '<% }); %>',
+                        '</div>',
                     '</div>'
-                ].join(''))({headers: this.options.headers, activeSortType: this.activeSortType, sortDirection: this.sortDirection});
-                this.$el.find('.listview').prepend(template);
+                ].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;
-                this.$el.find('.table-header-item .header-sorted').on('click', function(e) {
-                    var selectedSortType = $(e.currentTarget).parent().attr('sort-type');
+                var me = this,
+                    headerEl = this.$el.prev();
+
+                headerEl.find('.table-header-item .header-sorted').on('click', function(e) {
+                    var selectedSortType = $(e.currentTarget).parent().attr('sort-type'),
+                        curCaretEl = $(e.currentTarget).find('.caret');
 
                     if(me.activeSortType === selectedSortType){
                         me.sortDirection = -me.sortDirection
@@ -108,8 +121,16 @@ define([
                         me.sortDirection = 1;
                     }
 
+                    headerEl.find('.caret').addClass('hidden');
+
+                    if(curCaretEl.removeClass('hidden'));
+                    if(me.sortDirection == -1) 
+                        curCaretEl.addClass('sort-desc');
+                    else 
+                        curCaretEl.removeClass('sort-desc');
+                    
+
                     me.trigger('header:click', me.activeSortType, me.sortDirection);
-                    me.focus();
                 });
             },
 
@@ -141,7 +162,6 @@ define([
                 this.innerEl = null;
                 Common.UI.DataView.prototype.onResetItems.call(this);
                 this.trigger('items:reset', this);
-                this.insertHeaders();
             },
 
             createNewItem: function(record) {
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index b23a3b7336..3b69b40f02 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -3,6 +3,7 @@
   border: @scaled-one-px-value solid @border-regular-control;
   .border-radius(@border-radius-small);
   line-height: 15px;
+  padding-top: 21px;
 
   &.inner {
     width: 100%;
@@ -28,25 +29,8 @@
     border-color: @border-control-focus;
   }
 
-  .table-header {
-    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;
-
-    .table-header-item {
-      color: @text-tertiary-ie;
-      color: @text-tertiary;
-      display: inline-block;
-
-      .caret {
-        border-color: @text-tertiary-ie;
-        border-color: @text-tertiary;
-      }
-    }
-  }
-
   & > .item {
-//    display: block;
+  //    display: block;
     text-overflow: ellipsis;
     padding: 3px 6px;
     cursor: pointer;
@@ -103,6 +87,35 @@
   }
 }
 
+.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);
+  
+    .table-header-item {
+      color: @text-tertiary-ie;
+      color: @text-tertiary;
+      display: inline-block;
+  
+      .caret {
+        border-color: @text-tertiary-ie;
+        border-color: @text-tertiary;
+      }
+    }
+  }
+}
+
+
 .no-borders > .listview .item {
   border-color: transparent;
   border-top-color: transparent;
diff --git a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
index f31bc01d04..8e650a1c18 100644
--- a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
@@ -9,7 +9,7 @@
             </tr>
             <tr>
                 <td colspan=2 class="padding-small">
-                    <div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 163px;"></div>
+                    <div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 162px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/SortDialog.template b/apps/spreadsheeteditor/main/app/template/SortDialog.template
index d0b4f3e3c3..3ed8e4a7fb 100644
--- a/apps/spreadsheeteditor/main/app/template/SortDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/SortDialog.template
@@ -13,7 +13,7 @@
             </tr>
             <tr>
                 <td class="padding-small">
-                    <div id="sort-dialog-list" class="" style="width:100%; height: 173px;"></div>
+                    <div id="sort-dialog-list" class="" style="width:100%; height: 172px;"></div>
                 </td>
             </tr>
         </table>

From bf9f0b3ae1a87c192805cff5bf48952ef26d8387 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Mon, 27 Feb 2023 14:40:29 +0300
Subject: [PATCH 04/23] ListView: fix focus and keydown

---
 apps/common/main/lib/component/ListView.js    | 19 +++++++++++++++++--
 apps/common/main/resources/less/listview.less |  3 ++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index 7cc118100a..62c7c56d20 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -132,6 +132,19 @@ define([
 
                     me.trigger('header:click', me.activeSortType, me.sortDirection);
                 });
+                headerEl.on('click', function(e) {
+                    me.focus();
+                });
+                var onMouseDown = function (e) {
+                    me.innerEl.addClass('focused');
+                    $(document).on('mouseup',   onMouseUp);
+                };
+                var onMouseUp = function (e) {
+                    me.focus();
+                    me.innerEl.removeClass('focused');
+                    $(document).off('mouseup',   onMouseUp);
+                };
+                headerEl.on('mousedown', onMouseDown);
             },
 
             setHeaderName: function(index, name) {
@@ -233,10 +246,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;
 
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index 3b69b40f02..f175666ded 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -24,7 +24,8 @@
     }
   }
 
-  &: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;
   }

From 643222cad6762cdd7c5f3decfd1f0dc7182891a6 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 14:51:33 +0300
Subject: [PATCH 05/23] Added dynamic calculation of the header height. And
 minor refactoring.

---
 apps/common/main/lib/component/ListView.js    | 46 ++++++++++++++-----
 apps/common/main/resources/less/listview.less |  4 +-
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index 62c7c56d20..393236920f 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -70,17 +70,18 @@ define([
                     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);
-                this.insertHeaders();
             },
 
-            insertHeaders: function() {
-                if(this.options.headers.length == 0) return;
-
+            insertHeaders: function() {                
                 var template = _.template([
                     '<div class="listview-table-header-wrapper">',
                         '<div class="listview-table-header">',
@@ -94,7 +95,7 @@ define([
                                         '</span>',
                                     '</div>',
                                 '<%} else { %>',
-                                    '<label class="table-header-item" style="width: <%=header.width%>px;"><%= header.name %></label>',
+                                    '<label class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
                                 '<%}%>',
                             '<% }); %>',
                         '</div>',
@@ -107,7 +108,7 @@ define([
                 this.$el.before(template);
 
                 var me = this,
-                    headerEl = this.$el.prev();
+                    headerEl = this.$el.prev().children();
 
                 headerEl.find('.table-header-item .header-sorted').on('click', function(e) {
                     var selectedSortType = $(e.currentTarget).parent().attr('sort-type'),
@@ -136,21 +137,24 @@ define([
                     me.focus();
                 });
                 var onMouseDown = function (e) {
-                    me.innerEl.addClass('focused');
+                    me.$el.find('.inner').addClass('focused');
                     $(document).on('mouseup',   onMouseUp);
                 };
                 var onMouseUp = function (e) {
                     me.focus();
-                    me.innerEl.removeClass('focused');
+                    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) return;
+                if(index < 0 || index > this.options.headers.length - 1 || !headerEl) return;
 
-                var labelEl = $(this.$el.find('.table-header-item')[index]);
+                var labelEl = $(this.headerEl.find('.table-header-item')[index]);
                 if(labelEl.attr('sort-type')) {
                     labelEl = labelEl.find('label')[0];
                 }
@@ -160,9 +164,9 @@ define([
             },
 
             setHeaderWidth: function(index, width) {
-                if(index < 0 || index > this.options.headers.length - 1) return;
+                if(index < 0 || index > this.options.headers.length - 1 || !headerEl) return;
 
-                var labelEl = $(this.$el.find('.table-header-item')[index]);
+                var labelEl = $(this.headerEl.find('.table-header-item')[index]);
                 if(labelEl.attr('sort-type')) {
                     labelEl = labelEl.find('label')[0];
                 }
@@ -171,10 +175,28 @@ define([
                 $(labelEl).width(width);
             },
 
+            calcOffsetFromHeader: function() {
+                if(!this.headerEl) return;
+                var headerHeight = Math.floor(this.headerEl.outerHeight());
+                this.headerHeight = headerHeight;
+            },
+
+            setOffsetFromHeader: function(isCalcNewHeaderHeight) {
+                if(!this.headerEl) return;
+
+                if(isCalcNewHeaderHeight === true){
+                    this.calcOffsetFromHeader();
+                }
+                this.$el.find('.listview').css({'padding-top': this.headerHeight + 'px'});
+            },
+
             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) {
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index f175666ded..9a2cd4d7db 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -3,7 +3,6 @@
   border: @scaled-one-px-value solid @border-regular-control;
   .border-radius(@border-radius-small);
   line-height: 15px;
-  padding-top: 21px;
 
   &.inner {
     width: 100%;
@@ -107,6 +106,9 @@
       color: @text-tertiary-ie;
       color: @text-tertiary;
       display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: bottom;
   
       .caret {
         border-color: @text-tertiary-ie;

From 3e61d254afe1f1c1549a3e556409a0f2ba509f56 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 14:57:50 +0300
Subject: [PATCH 06/23] Scroller: Added optional styles for vertical scrollbar

---
 apps/common/main/lib/component/DataView.js |  6 ++++++
 apps/common/main/lib/component/ListView.js |  2 ++
 apps/common/main/lib/component/Scroller.js | 12 +++++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js
index e2413e9d8b..4e4756c198 100644
--- a/apps/common/main/lib/component/DataView.js
+++ b/apps/common/main/lib/component/DataView.js
@@ -224,6 +224,7 @@ define([
             allowScrollbar: true,
             scrollAlwaysVisible: false,
             minScrollbarLength: 40,
+            scrollYStyle: null,
             showLast: true,
             useBSKeydown: false,
             cls: ''
@@ -274,6 +275,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)
@@ -359,6 +361,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
                 });
@@ -599,6 +602,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
                 });
@@ -1066,6 +1070,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
                 });
@@ -1158,6 +1163,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
             });
diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index 393236920f..e0342c94b9 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -179,6 +179,7 @@ define([
                 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) {
@@ -188,6 +189,7 @@ define([
                     this.calcOffsetFromHeader();
                 }
                 this.$el.find('.listview').css({'padding-top': this.headerHeight + 'px'});
+                this.scroller.update(isCalcNewHeaderHeight ? {scrollYStyle: this.scrollYStyle} : undefined);
             },
 
             onResetItems : function() {
diff --git a/apps/common/main/lib/component/Scroller.js b/apps/common/main/lib/component/Scroller.js
index db564e0d46..8f123044f5 100644
--- a/apps/common/main/lib/component/Scroller.js
+++ b/apps/common/main/lib/component/Scroller.js
@@ -64,7 +64,8 @@ define([
                 includePadding          : true,
                 includeMargin           : true,
                 alwaysVisibleX          : false,
-                alwaysVisibleY          : false
+                alwaysVisibleY          : false,
+                scrollYStyle            : null
             },
 
             initialize: function(options) {
@@ -86,6 +87,8 @@ define([
 
                     this.setAlwaysVisibleX(me.options.alwaysVisibleX);
                     this.setAlwaysVisibleY(me.options.alwaysVisibleY);
+
+                    (this.options.scrollYStyle) && (this.setOptionStyleY(this.options.scrollYStyle));
                 }
 
                 return this;
@@ -108,6 +111,8 @@ define([
 
                 this.setAlwaysVisibleX(options.alwaysVisibleX);
                 this.setAlwaysVisibleY(options.alwaysVisibleY);
+                
+                (options.scrollYStyle) && (this.setOptionStyleY(options.scrollYStyle));
 
                 // Emulate capture scroller
                 var mouseDownHandler = function(e) {
@@ -167,6 +172,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');
             }

From 1d8aca4ee71e5ee1a10bb81429afc87945c8468a Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:00:32 +0300
Subject: [PATCH 07/23] DataView:  Added offset argument for scrollToRecord
 function

---
 apps/common/main/lib/component/DataView.js | 4 ++--
 apps/common/main/lib/component/ListView.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js
index 4e4756c198..bf1b87fa66 100644
--- a/apps/common/main/lib/component/DataView.js
+++ b/apps/common/main/lib/component/DataView.js
@@ -707,10 +707,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;
diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index e0342c94b9..7e9c13132f 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -257,7 +257,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;
                 }
 

From dd01384dcad327b3af5744be9ad808ca9c78fd83 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:39:54 +0300
Subject: [PATCH 08/23] ListView: Fix Bug

---
 apps/common/main/lib/component/ListView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index 7e9c13132f..ee4064dede 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -152,7 +152,7 @@ define([
             },
 
             setHeaderName: function(index, name) {
-                if(index < 0 || index > this.options.headers.length - 1 || !headerEl) return;
+                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')) {
@@ -164,7 +164,7 @@ define([
             },
 
             setHeaderWidth: function(index, width) {
-                if(index < 0 || index > this.options.headers.length - 1 || !headerEl) return;
+                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')) {

From 0655344296f8361b5810a9313d6fd22a840a10c4 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:46:49 +0300
Subject: [PATCH 09/23] [DE] Added an inline header of the styles list in
 TableOfContentsSettings dialog .

---
 .../main/app/view/TableOfContentsSettings.js  | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 2e4ea4e271..a52d8c9417 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -49,14 +49,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,
@@ -120,13 +120,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>',
@@ -149,6 +149,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;
 
@@ -334,6 +335,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});
@@ -366,6 +373,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">',
@@ -507,6 +518,18 @@ 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')),
+                widthLastHeader = $(headersArr[1]).width();
+                
+            if(marginFirstHeader + widthFirstHeader + widthLastHeader > widthHeader) {
+                this.stylesList.setHeaderWidth(0, widthHeader - widthLastHeader - marginFirstHeader);
+            }
+        },
+
         fillTOCProps: function(props) {
             var me = this,
                 docStyles = this.api.asc_GetStylesArray(),

From b4a636cdf85da26b70d93af986385dc318479590 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:48:39 +0300
Subject: [PATCH 10/23] [SSE] Added an inline header of the styles list in
 FormatRulesManager dialog .

---
 .../main/app/template/FormatRulesManagerDlg.template     | 9 +--------
 .../main/app/view/FormatRulesManagerDlg.js               | 5 +++++
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template b/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
index 9dae144902..3741cf231c 100644
--- a/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
@@ -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>
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
index 4734874a71..3db709400d 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
@@ -147,6 +147,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 %>">',

From ea834d1cb6627e73d973eb00815e7e51059acaf6 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:52:10 +0300
Subject: [PATCH 11/23] [SSE] Update header in NameManager dialog.

---
 .../spreadsheeteditor/main/app/template/NameManagerDlg.template | 2 +-
 apps/spreadsheeteditor/main/app/view/NameManagerDlg.js          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
index 8e650a1c18..f31bc01d04 100644
--- a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
@@ -9,7 +9,7 @@
             </tr>
             <tr>
                 <td colspan=2 class="padding-small">
-                    <div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 162px;"></div>
+                    <div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 163px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index ea8f9a1452..62b5a0df3a 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -123,7 +123,7 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
                 headers: [
                     {name: me.textRanges,       width: 166, sortType:'name'},
                     {name: me.textScope,        width: 117, sortType:'scopeName'},
-                    {name: me.textDataRange,    width: 100},
+                    {name: me.textDataRange,    width: 208},
                 ],
                 initSort:{type: this.sort.type, direction: this.sort.direction},
                 itemTemplate: _.template([

From e3a61c0496f05ffc43d72d19ed8b0e462eaf763f Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:55:18 +0300
Subject: [PATCH 12/23] [SSE] Added an inline header of the list in
 ProtectRanges dialog.

---
 .../main/app/template/ProtectRangesDlg.template          | 9 +--------
 apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js | 7 ++++++-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template b/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
index fee4ace453..f7abb351d4 100644
--- a/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
@@ -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>
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
index b444f6c89d..f5519206a2 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
@@ -97,10 +97,15 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
                 store: new Common.UI.DataViewStore(),
                 simpleAddMode: true,
                 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>',

From d4e36d0a43441c38cc2c5f01557b540a71e845b2 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:55:56 +0300
Subject: [PATCH 13/23] [SSE] Update header in SortDialog.

---
 apps/spreadsheeteditor/main/app/template/SortDialog.template | 2 +-
 apps/spreadsheeteditor/main/app/view/SortDialog.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/SortDialog.template b/apps/spreadsheeteditor/main/app/template/SortDialog.template
index 3ed8e4a7fb..d0b4f3e3c3 100644
--- a/apps/spreadsheeteditor/main/app/template/SortDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/SortDialog.template
@@ -13,7 +13,7 @@
             </tr>
             <tr>
                 <td class="padding-small">
-                    <div id="sort-dialog-list" class="" style="width:100%; height: 172px;"></div>
+                    <div id="sort-dialog-list" class="" style="width:100%; height: 173px;"></div>
                 </td>
             </tr>
         </table>
diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index b6c46e2532..548521887f 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -132,7 +132,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                 headers: [
                     {name: me.textColumn,   width: 212},
                     {name: me.textSort,     width: 157},
-                    {name: me.textOrder,    width: 100},
+                    {name: me.textOrder},
                 ],
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([

From a2e00483a10eb9ebe8c8dbe7981a537c877b8973 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 15:56:59 +0300
Subject: [PATCH 14/23] [SSE] Added an inline header of the list in
 WatchDialog.

---
 .../main/app/template/WatchDialog.template           | 12 +-----------
 apps/spreadsheeteditor/main/app/view/WatchDialog.js  |  8 ++++++++
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/WatchDialog.template b/apps/spreadsheeteditor/main/app/template/WatchDialog.template
index d9dfe4296d..0c555cef6c 100644
--- a/apps/spreadsheeteditor/main/app/template/WatchDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/WatchDialog.template
@@ -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>
diff --git a/apps/spreadsheeteditor/main/app/view/WatchDialog.js b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
index 81e3a753d6..19cbef940c 100644
--- a/apps/spreadsheeteditor/main/app/view/WatchDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
@@ -89,6 +89,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>',

From 730115a89df29b868e9f011dff28c7c13c4053d4 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 16:00:23 +0300
Subject: [PATCH 15/23] [SSE] Added an inline header of the list in
 ChartTypeDialog.

---
 .../main/app/view/ChartTypeDialog.js               | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index 7083d0b12c..f7d6fc3849 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -95,16 +95,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>',
@@ -194,6 +187,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 %>">',

From ecc9b03c692dbea1e5e5443cdcf7963149cf353f Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 9 Mar 2023 16:02:09 +0300
Subject: [PATCH 16/23] [SSE] Added an inline header of the list in
 ExternalListDlg.

---
 apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
index 99b8dfcc89..c97c31a7e1 100644
--- a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
@@ -75,9 +75,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>',
@@ -110,6 +108,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>',

From d81e2d84a681294c91be8a0a487c3a9c7830cbc5 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Sun, 12 Mar 2023 02:26:23 +0300
Subject: [PATCH 17/23] [SSE] Fix header of the list in SortDialog

---
 .../main/app/view/SortDialog.js                 | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index 548521887f..e3aabf419e 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -132,7 +132,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                 headers: [
                     {name: me.textColumn,   width: 212},
                     {name: me.textSort,     width: 157},
-                    {name: me.textOrder},
+                    {name: me.textOrder,    width: 156},
                 ],
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
@@ -315,15 +315,22 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
         },
 
         initListHeaders: function() {
-            var widthLblSort = 0,
+            var firstLabelWidth = 0,
+                secondLabelWidth = 0,
+                thirdLabelWidth = 0,
                 pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
 
-            pos && (widthLblSort = Math.floor(pos.left)-3);
-            this.sortList.setHeaderWidth(0, widthLblSort);
+            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.sortList.setHeaderWidth(1, Math.floor(pos.left)-5 - widthLblSort);
+            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) {

From 50f0cd7f6f23fd27992763450ca5df1464a9acf3 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Sun, 12 Mar 2023 02:37:27 +0300
Subject: [PATCH 18/23] ListView: Added optional feature to render header in
 one line

---
 apps/common/main/lib/component/ListView.js    | 41 +++++++++++--------
 apps/common/main/resources/less/listview.less | 13 ++++--
 .../main/app/view/ChartTypeDialog.js          |  1 +
 .../main/app/view/NameManagerDlg.js           |  4 +-
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index ee4064dede..cd8dbf2def 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -53,8 +53,9 @@ define([
                 enableKeyEvents: true,
                 showLast: true,
                 simpleAddMode: false,
-                headers: [],
-                initSort: null,         //{type: 'string', direction: -1 or 1}
+                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;} 
+                headerOneLine: true,
+                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: ''
@@ -87,7 +88,7 @@ define([
                         '<div class="listview-table-header">',
                             '<% _.each(headers, function(header){ %>',
                                 '<%if (header.sortType) { %>',
-                                    '<div class="table-header-item" style="width: <%=header.width%>px;" sort-type="<%=header.sortType%>">',
+                                    '<div class="table-header-item one-line" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>" sort-type="<%=header.sortType%>">',
                                         '<span class="header-sorted">',
                                             '<label><%= header.name %></label>',
                                             '<div style="width: 6px;height: 6px;"></div>',
@@ -95,7 +96,7 @@ define([
                                         '</span>',
                                     '</div>',
                                 '<%} else { %>',
-                                    '<label class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
+                                    '<label class="table-header-item <% if (headerOneLine) {%>one-line<%}%>" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
                                 '<%}%>',
                             '<% }); %>',
                         '</div>',
@@ -103,7 +104,8 @@ define([
                 ].join(''))({
                     headers: this.options.headers, 
                     activeSortType: this.options.initSort ? this.options.initSort.type : null, 
-                    sortDirection: this.options.initSort ? this.options.initSort.direction : null
+                    sortDirection: this.options.initSort ? this.options.initSort.direction : null,
+                    headerOneLine: this.options.headerOneLine
                 });
                 this.$el.before(template);
 
@@ -133,19 +135,22 @@ define([
 
                     me.trigger('header:click', me.activeSortType, me.sortDirection);
                 });
-                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);
+
+                if(this.tabindex != 0){
+                    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()
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index 9a2cd4d7db..c3b050c7c6 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -102,13 +102,20 @@
     margin: @scaled-one-px-value;
     width: calc(100% - 2 * @scaled-one-px-value);
   
+    label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: bottom;
+    }
+
     .table-header-item {
       color: @text-tertiary-ie;
       color: @text-tertiary;
       display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      vertical-align: bottom;
+
+      &.one-line {
+        white-space: nowrap;
+      }
   
       .caret {
         border-color: @text-tertiary-ie;
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index f7d6fc3849..165e0a48ed 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -192,6 +192,7 @@ define([
                     {name: me.textType, width: 105},
                     {name: me.textSecondary, width: 123, style:'text-align: center;'},
                 ],
+                headerOneLine: false,
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 62b5a0df3a..c3230f3d3d 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -121,8 +121,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
                 simpleAddMode: true,
                 emptyText: this.textEmpty,
                 headers: [
-                    {name: me.textRanges,       width: 166, sortType:'name'},
-                    {name: me.textScope,        width: 117, sortType:'scopeName'},
+                    {name: me.textRanges,       width: 166, sortType:'name',        style: 'padding-right: 25px;'},
+                    {name: me.textScope,        width: 117, sortType:'scopeName',   style: 'padding-right: 25px;'},
                     {name: me.textDataRange,    width: 208},
                 ],
                 initSort:{type: this.sort.type, direction: this.sort.direction},

From 9aeca5b7e84e7d3e8bf6e8cd2fd7ff1863d12c4f Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Wed, 15 Mar 2023 01:23:29 +0300
Subject: [PATCH 19/23] ListView: Fix multiline headers

---
 apps/common/main/lib/component/ListView.js    | 47 ++++++++++++++-----
 apps/common/main/resources/less/listview.less | 33 ++++++++++---
 .../main/app/view/ChartTypeDialog.js          |  1 -
 .../main/app/view/NameManagerDlg.js           |  4 +-
 4 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index cd8dbf2def..515d63d0fc 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -54,7 +54,6 @@ define([
                 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;} 
-                headerOneLine: true,
                 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>'),
@@ -88,15 +87,16 @@ define([
                         '<div class="listview-table-header">',
                             '<% _.each(headers, function(header){ %>',
                                 '<%if (header.sortType) { %>',
-                                    '<div class="table-header-item one-line" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>" sort-type="<%=header.sortType%>">',
-                                        '<span class="header-sorted">',
-                                            '<label><%= header.name %></label>',
-                                            '<div style="width: 6px;height: 6px;"></div>',
-                                            '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>hidden<%}%>"></span>',
-                                        '</span>',
+                                    '<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 <% if (headerOneLine) {%>one-line<%}%>" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
+                                    '<label class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
                                 '<%}%>',
                             '<% }); %>',
                         '</div>',
@@ -105,15 +105,38 @@ define([
                     headers: this.options.headers, 
                     activeSortType: this.options.initSort ? this.options.initSort.type : null, 
                     sortDirection: this.options.initSort ? this.options.initSort.direction : null,
-                    headerOneLine: this.options.headerOneLine
                 });
                 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().attr('sort-type'),
+                    var selectedSortType = $(e.currentTarget).parent().parent().attr('sort-type'),
                         curCaretEl = $(e.currentTarget).find('.caret');
 
                     if(me.activeSortType === selectedSortType){
@@ -124,9 +147,9 @@ define([
                         me.sortDirection = 1;
                     }
 
-                    headerEl.find('.caret').addClass('hidden');
+                    headerEl.find('.caret').addClass('caret-hidden');
 
-                    if(curCaretEl.removeClass('hidden'));
+                    if(curCaretEl.removeClass('caret-hidden'));
                     if(me.sortDirection == -1) 
                         curCaretEl.addClass('sort-desc');
                     else 
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index c3b050c7c6..1220ee4865 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -101,25 +101,44 @@
     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;
-      vertical-align: bottom;
     }
 
     .table-header-item {
       color: @text-tertiary-ie;
       color: @text-tertiary;
       display: inline-block;
+      
+      .header-sorted-wrapper {
+        display: flex;
 
-      &.one-line {
-        white-space: nowrap;
-      }
+        .header-sorted {
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          padding-right: 1px;
+          cursor: pointer;
   
-      .caret {
-        border-color: @text-tertiary-ie;
-        border-color: @text-tertiary;
+          label {
+            padding-right: 6px;
+          }
+  
+          .caret {
+            border-color: @text-tertiary-ie;
+            border-color: @text-tertiary;
+            min-width: 4px;
+            min-height: 4px;
+    
+            &.caret-hidden {
+              visibility: hidden;
+            }
+          }
+        }
       }
     }
   }
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index 165e0a48ed..f7d6fc3849 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -192,7 +192,6 @@ define([
                     {name: me.textType, width: 105},
                     {name: me.textSecondary, width: 123, style:'text-align: center;'},
                 ],
-                headerOneLine: false,
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index c3230f3d3d..e3d3f315f6 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -121,8 +121,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
                 simpleAddMode: true,
                 emptyText: this.textEmpty,
                 headers: [
-                    {name: me.textRanges,       width: 166, sortType:'name',        style: 'padding-right: 25px;'},
-                    {name: me.textScope,        width: 117, sortType:'scopeName',   style: 'padding-right: 25px;'},
+                    {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},

From fb3c538b7a5498b69d5aca3fae313b85a02a3674 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Wed, 15 Mar 2023 19:00:28 +0300
Subject: [PATCH 20/23] [DE] Fix header for list in TableOfContentsSettings
 dialog

---
 .../main/app/view/TableOfContentsSettings.js             | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index dd72ca2eb4..60336254b5 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -521,9 +521,12 @@ define([
             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')),
-                widthLastHeader = $(headersArr[1]).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);
             }

From 71cd34109005ace7dc670e725bff0d832868d068 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 16 Mar 2023 14:26:13 +0300
Subject: [PATCH 21/23] [SSE] Added an inline header of the list in
 ProtectedRangesManagerDlg

---
 .../main/app/template/ProtectedRangesManagerDlg.template | 9 +--------
 .../main/app/view/ProtectedRangesManagerDlg.js           | 5 +++++
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template b/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
index 2aab5e6925..b7067b683d 100644
--- a/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
@@ -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>
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
index 8619bdbbbb..eef2b26d36 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
@@ -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>',

From 698834764f6bac79b97c9fea7b7ab20b75f758b4 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 16 Mar 2023 14:31:48 +0300
Subject: [PATCH 22/23] [DE] Added an inline header of the list in
 CustomColumnsDialog.

---
 .../main/app/view/CustomColumnsDialog.js             | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/documenteditor/main/app/view/CustomColumnsDialog.js b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
index 8f0a247a4d..558ec7470b 100644
--- a/apps/documenteditor/main/app/view/CustomColumnsDialog.js
+++ b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
@@ -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>',

From 0f4104b210dad7c52792578aab8fcf6ebd4808c9 Mon Sep 17 00:00:00 2001
From: Alexei Koshelev <aleksei.koshelev@onlyoffice.com>
Date: Thu, 16 Mar 2023 14:32:10 +0300
Subject: [PATCH 23/23] ListView: Fix bug

---
 apps/common/main/lib/component/ListView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index 609bd241ef..4265c6e7f8 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -158,7 +158,7 @@ define([
                     me.trigger('header:click', me.activeSortType, me.sortDirection);
                 });
 
-                if(this.tabindex != 0){
+                if(this.tabindex != 0 && this.handleSelect){
                     headerEl.on('click', function(e) {
                         me.focus();
                     });