ListView: Fix multiline headers

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%>">',
+                                    '<div class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>" sort-type="<%=header.sortType%>">',
-                                        '<span class="header-sorted">',
+                                        '<div class="header-sorted-wrapper">',
-                                            '<label><%= header.name %></label>',
+                                            '<span class="header-sorted">',
-                                            '<div style="width: 6px;height: 6px;"></div>',
+                                                '<label><%= header.name %></label>',
-                                            '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>hidden<%}%>"></span>',
+                                                '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>caret-hidden<%}%>"></span>',
-                                        '</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 

apps/common/main/resources/less/listview.less

@@ -101,11 +101,12 @@
     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 {
@@ -113,13 +114,31 @@
       color: @text-tertiary;
       display: inline-block;
       
-      &.one-line {
+      .header-sorted-wrapper {
-        white-space: nowrap;
+        display: flex;
-      }
 
-      .caret {
+        .header-sorted {
-        border-color: @text-tertiary-ie;
+          display: flex;
-        border-color: @text-tertiary;
+          align-items: center;
+          overflow: hidden;
+          padding-right: 1px;
+          cursor: pointer;
+  
+          label {
+            padding-right: 6px;
+          }
+  
+          .caret {
+            border-color: @text-tertiary-ie;
+            border-color: @text-tertiary;
+            min-width: 4px;
+            min-height: 4px;
+    
+            &.caret-hidden {
+              visibility: hidden;
+            }
+          }
+        }
       }
     }
   }

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 %>">',

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.textRanges,       width: 166, sortType:'name',        style: 'padding-right: 12px;'},
-                    {name: me.textScope,        width: 117, sortType:'scopeName',   style: 'padding-right: 25px;'},
+                    {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},