[DE PE SSE] Change layouts of Download as, Document info, Protect document, Advanced settings, Create new panels

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -216,6 +216,16 @@ define([
             this.menu = options.menu;
             this.fileType = options.fileType;
             this.mode = options.mode;
+
+            Common.NotificationCenter.on({
+                'window:resize': _.bind(function() {
+                    var divided = Common.Utils.innerWidth() >= this.maxWidth;
+                    if (this.isDivided !== divided) {
+                        this.$el.find('.divider').css('width', divided ? '100%' : '0');
+                        this.isDivided = divided;
+                    }
+                }, this)
+            });
         },
 
         render: function() {
@@ -246,6 +256,21 @@ define([
                 });
             }
 
+            var itemWidth = 70 + 24, // width + margin
+                maxCount = 0;
+            this.formats.forEach(_.bind(function (item, index) {
+                var count = item.length;
+                if (count > maxCount) {
+                    maxCount = count;
+                }
+            }, this));
+            this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin
+
+            if (Common.Utils.innerWidth() >= this.maxWidth) {
+                this.$el.find('.divider').css('width', '100%');
+                this.isDivided = true;
+            }
+
             return this;
         },
 
@@ -271,7 +296,8 @@ define([
 
         template: _.template([
         '<div class="flex-settings">',
-            '<table style="margin: 10px 14px 0;"><tbody>',
+            '<div class="header"><%= scope.txtAdvancedSettings %></div>',
+            '<table style="margin: 0 14px 0 20px;"><tbody>',
                 '<tr class="editsave">',
                     '<td colspan="2" class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
                 '</tr>',
@@ -1026,7 +1052,8 @@ define([
         txtStrictTip: 'Use the \'Save\' button to sync the changes you and others make',
         strIgnoreWordsInUPPERCASE: 'Ignore words in UPPERCASE',
         strIgnoreWordsWithNumbers: 'Ignore words with numbers',
-        strShowOthersChanges: 'Show changes from other users'
+        strShowOthersChanges: 'Show changes from other users',
+        txtAdvancedSettings: 'Advanced Settings'
     }, DE.Views.FileMenuPanels.Settings || {}));
 
     DE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
@@ -1099,7 +1126,7 @@ define([
         },
 
         template: _.template([
-            '<h3 style="margin-top: 20px;"><%= scope.txtCreateNew %></h3>',
+            '<div class="header"><%= scope.txtCreateNew %></div>',
             '<div class="thumb-list">',
                 '<% if (blank) { %> ',
                 '<div class="blank-document">',
@@ -1187,7 +1214,8 @@ define([
 
             this.template = _.template([
             '<div class="flex-settings">',
-                '<table class="main" style="margin: 30px 0 0;">',
+                '<div class="header">' + this.txtDocumentInfo + '</div>',
+                '<table class="main">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
                         '<td class="right"><label id="id-info-placement">-</label></td>',
@@ -1313,7 +1341,7 @@ define([
                 '</table>',
             '</div>',
             '<div id="fms-flex-apply">',
-                '<table class="main" style="margin: 10px 0;">',
+                '<table class="main">',
                     '<tr>',
                         '<td class="left"></td>',
                         '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
@@ -1895,7 +1923,8 @@ define([
         txtFastWV: 'Fast Web View',
         txtYes: 'Yes',
         txtNo: 'No',
-        txtPdfProducer: 'PDF Producer'
+        txtPdfProducer: 'PDF Producer',
+        txtDocumentInfo: 'Document Info'
 
     }, DE.Views.FileMenuPanels.DocumentInfo || {}));
 
@@ -2229,7 +2258,7 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
+            '<label id="id-fms-lbl-protect-header"><%= scope.strProtect %></label>',
             '<div id="id-fms-password">',
                 '<label class="header"><%= scope.strEncrypt %></label>',
                 '<div id="fms-btn-add-pwd" style="width:190px;"></div>',

apps/documenteditor/main/resources/less/filemenu.less

@@ -92,8 +92,8 @@
       margin: 30px 0 0 10px;
 
       .header {
-        font-size: 18px;
+        font-size: 16px;
-        margin-bottom: 17px;
+        margin-bottom: 20px;
       }
 
       .format-items {
@@ -220,6 +220,11 @@
 }
 
 #panel-settings {
+  .header {
+    margin: 30px 0 16px 30px;
+    font-size: 16px;
+  }
+
   table {
     width: auto !important;
     tr {
@@ -267,31 +272,14 @@
 }
 
 #panel-createnew {
-  h3 {
+  .header {
-    margin: 0;
+    font-size: 16px;
-    font-size: 10pt;
+    padding: 0 0 0 10px;
-    color: @text-normal-ie;
-    color: @text-normal;
-    .font-weight-bold();
-    padding: 0 0 10px 10px;
     white-space: nowrap;
+    margin-top: 30px;
+    margin-bottom: 20px;
   }
 
-
-
-  .blank-document-info {
-    vertical-align: top;
-    width: 445px;
-    display: inline-block;
-
-    h3 {
-      padding-left: 0;
-      padding-top: 40px;
-      white-space: nowrap;
-    }
-  }
-
-
   hr {
     margin: 0;
     border-bottom: none;
@@ -453,6 +441,10 @@
 
 #panel-info,
 #panel-rights {
+  .header {
+    margin: 30px 0 20px 30px;
+    font-size: 16px;
+  }
   table {
     tr {
       td {
@@ -461,7 +453,7 @@
         &.left {
           padding: 5px 10px;
           text-align: right;
-          width: 30%;
+          width: 200px;
 
           label {
             .font-weight-bold();
@@ -470,7 +462,7 @@
 
         &.right {
           padding: 5px 10px;
-          width: 70%;
+          width: calc(100% - 200px);
         }
       }
 
@@ -549,7 +541,7 @@ label {
 
   .header {
     .font-weight-bold();
-  margin: 30px 0 10px;
+    margin: 20px 0 10px;
   }
 
   table {
@@ -557,4 +549,8 @@ table {
       padding: 5px 0;
     }
   }
+
+  #id-fms-lbl-protect-header {
+    font-size: 16px;
+  }
 }

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -92,6 +92,16 @@ define([
 
             this.menu = options.menu;
             this.fileType = options.fileType;
+
+            Common.NotificationCenter.on({
+                'window:resize': _.bind(function() {
+                    var divided = Common.Utils.innerWidth() >= this.maxWidth;
+                    if (this.isDivided !== divided) {
+                        this.$el.find('.divider').css('width', divided ? '100%' : '0');
+                        this.isDivided = divided;
+                    }
+                }, this)
+            });
         },
 
         render: function() {
@@ -106,6 +116,21 @@ define([
                 });
             }
 
+            var itemWidth = 70 + 24, // width + margin
+                maxCount = 0;
+            this.formats.forEach(_.bind(function (item, index) {
+                var count = item.length;
+                if (count > maxCount) {
+                    maxCount = count;
+                }
+            }, this));
+            this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin
+
+            if (Common.Utils.innerWidth() >= this.maxWidth) {
+                this.$el.find('.divider').css('width', '100%');
+                this.isDivided = true;
+            }
+
             return this;
         },
 
@@ -166,6 +191,16 @@ define([
 
             this.menu = options.menu;
             this.fileType = options.fileType;
+
+            Common.NotificationCenter.on({
+                'window:resize': _.bind(function() {
+                    var divided = Common.Utils.innerWidth() >= this.maxWidth;
+                    if (this.isDivided !== divided) {
+                        this.$el.find('.divider').css('width', divided ? '100%' : '0');
+                        this.isDivided = divided;
+                    }
+                }, this)
+            });
         },
 
         render: function() {
@@ -180,6 +215,21 @@ define([
                 });
             }
 
+            var itemWidth = 70 + 24, // width + margin
+                maxCount = 0;
+            this.formats.forEach(_.bind(function (item, index) {
+                var count = item.length;
+                if (count > maxCount) {
+                    maxCount = count;
+                }
+            }, this));
+            this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin
+
+            if (Common.Utils.innerWidth() >= this.maxWidth) {
+                this.$el.find('.divider').css('width', '100%');
+                this.isDivided = true;
+            }
+
             return this;
         },
 
@@ -205,7 +255,8 @@ define([
 
         template: _.template([
         '<div class="flex-settings">',
-            '<table style="margin: 10px 14px auto;"><tbody>',
+            '<div class="header"><%= scope.txtAdvancedSettings %></div>',
+            '<table style="margin: 0 14px 0 20px;"><tbody>',
                 '<tr class="editsave">',
                     '<td colspan="2" class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
                 '</tr>',
@@ -785,7 +836,8 @@ define([
         txtStrictTip: 'Use the \'Save\' button to sync the changes you and others make',
         strIgnoreWordsInUPPERCASE: 'Ignore words in UPPERCASE',
         strIgnoreWordsWithNumbers: 'Ignore words with numbers',
-        strShowOthersChanges: 'Show changes from other users'
+        strShowOthersChanges: 'Show changes from other users',
+        txtAdvancedSettings: 'Advanced Settings'
     }, PE.Views.FileMenuPanels.Settings || {}));
 
     PE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
@@ -858,7 +910,7 @@ define([
         },
 
         template: _.template([
-            '<h3 style="margin-top: 20px;"><%= scope.txtCreateNew %></h3>',
+            '<div class="header"><%= scope.txtCreateNew %></div>',
             '<div class="thumb-list">',
                 '<% if (blank) { %> ',
                 '<div class="blank-document">',
@@ -946,7 +998,8 @@ define([
 
             this.template = _.template([
             '<div class="flex-settings">',
-                '<table class="main" style="margin: 30px 0 0;">',
+                '<div class="header">' + this.txtPresentationInfo + '</div>',
+                '<table class="main">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
                         '<td class="right"><label id="id-info-placement">-</label></td>',
@@ -1374,7 +1427,8 @@ define([
         txtAddAuthor: 'Add Author',
         txtAddText: 'Add Text',
         txtMinutes: 'min',
-        okButtonText: 'Apply'
+        okButtonText: 'Apply',
+        txtPresentationInfo: 'Presentation Info'
     }, PE.Views.FileMenuPanels.DocumentInfo || {}));
 
     PE.Views.FileMenuPanels.DocumentRights = Common.UI.BaseView.extend(_.extend({
@@ -1687,7 +1741,7 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
+            '<label id="id-fms-lbl-protect-header"><%= scope.strProtect %></label>',
             '<div id="id-fms-password">',
                 '<label class="header"><%= scope.strEncrypt %></label>',
                 '<div id="fms-btn-add-pwd" style="width:190px;"></div>',

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -192,12 +192,16 @@
         }
 
         #panel-saveas, #panel-savecopy {
+            &.content-box {
+                padding: 0 0 0 20px;
+            }
+
             .content-container {
                 margin: 30px 0 0 10px;
 
                 .header {
-                    font-size: 18px;
+                    font-size: 16px;
-                    margin-bottom: 17px;
+                    margin-bottom: 20px;
                 }
 
                 .format-items {
@@ -217,12 +221,6 @@
                         height: 0;
                     }
 
-                    @media(min-width: 800px) {
-                        .divider {
-                            width: 100%;
-                        }
-                    }
-
                 }
             }
         }
@@ -235,6 +233,11 @@
         }
 
         #panel-settings {
+            .header {
+                margin: 30px 0 16px 30px;
+                font-size: 16px;
+            }
+
             table {
                 width: auto !important;
 
@@ -281,26 +284,12 @@
         }
 
         #panel-createnew {
-            h3 {
+            .header {
-                margin: 0;
+                font-size: 16px;
-                font-size: 10pt;
+                padding: 0 0 0 10px;
-                color: @text-normal-ie;
-                color: @text-normal;
-                .font-weight-bold();
-                padding: 0 0 10px 10px;
                 white-space: nowrap;
-            }
+                margin-top: 30px;
-
+                margin-bottom: 20px;
-            .blank-document-info {
-                vertical-align: top;
-                width: 445px;
-                display: inline-block;
-
-                h3 {
-                    padding-left: 0;
-                    padding-top: 45px;
-                    white-space: nowrap;
-                }
             }
 
             hr {
@@ -462,6 +451,11 @@
 
         #panel-info,
         #panel-rights {
+            .header {
+                margin: 30px 0 20px 30px;
+                font-size: 16px;
+            }
+
             table {
                 tr {
                     td {
@@ -470,7 +464,7 @@
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
-                            width: 30%;
+                            width: 200px;
 
                             label {
                                 .font-weight-bold();
@@ -479,7 +473,7 @@
 
                         &.right {
                             padding: 5px 10px;
-                            width: 70%;
+                            width: calc(100% - 200px);
                         }
                     }
 
@@ -535,7 +529,7 @@
 
             .header {
                 .font-weight-bold();
-                margin: 30px 0 10px;
+                margin: 20px 0 10px;
             }
 
             table {
@@ -543,6 +537,10 @@
                     padding: 5px 0;
                 }
             }
+
+            #id-fms-lbl-protect-header {
+                font-size: 16px;
+            }
         }
     }
 }

apps/spreadsheeteditor/main/app/view/FileMenuPanels.js

@@ -78,6 +78,16 @@ define([
 
             this.menu = options.menu;
             this.fileType = options.fileType;
+
+            Common.NotificationCenter.on({
+                'window:resize': _.bind(function() {
+                    var divided = Common.Utils.innerWidth() >= this.maxWidth;
+                    if (this.isDivided !== divided) {
+                        this.$el.find('.divider').css('width', divided ? '100%' : '0');
+                        this.isDivided = divided;
+                    }
+                }, this)
+            });
         },
 
         render: function() {
@@ -92,6 +102,21 @@ define([
                 });
             }
 
+            var itemWidth = 70 + 24, // width + margin
+                maxCount = 0;
+            this.formats.forEach(_.bind(function (item, index) {
+                var count = item.length;
+                if (count > maxCount) {
+                    maxCount = count;
+                }
+            }, this));
+            this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin
+
+            if (Common.Utils.innerWidth() >= this.maxWidth) {
+                this.$el.find('.divider').css('width', '100%');
+                this.isDivided = true;
+            }
+
             return this;
         },
 
@@ -149,6 +174,16 @@ define([
 
             this.menu = options.menu;
             this.fileType = options.fileType;
+
+            Common.NotificationCenter.on({
+                'window:resize': _.bind(function() {
+                    var divided = Common.Utils.innerWidth() >= this.maxWidth;
+                    if (this.isDivided !== divided) {
+                        this.$el.find('.divider').css('width', divided ? '100%' : '0');
+                        this.isDivided = divided;
+                    }
+                }, this)
+            });
         },
 
         render: function() {
@@ -163,6 +198,21 @@ define([
                 });
             }
 
+            var itemWidth = 70 + 24, // width + margin
+                maxCount = 0;
+            this.formats.forEach(_.bind(function (item, index) {
+                var count = item.length;
+                if (count > maxCount) {
+                    maxCount = count;
+                }
+            }, this));
+            this.maxWidth = $('#file-menu-panel .panel-menu').outerWidth() + 20 + 10 + itemWidth * maxCount; // menu + left padding + margin
+
+            if (Common.Utils.innerWidth() >= this.maxWidth) {
+                this.$el.find('.divider').css('width', '100%');
+                this.isDivided = true;
+            }
+
             return this;
         },
 
@@ -188,7 +238,8 @@ define([
 
         template: _.template([
         '<div class="flex-settings">',
-            '<table class="main" style="margin: 10px 14px auto;"><tbody>',
+            '<div class="header"><%= scope.txtAdvancedSettings %></div>',
+            '<table class="main" style="margin: 0 14px 0 20px;"><tbody>',
                 '<tr class="editsave">',
                     '<td class="group-name top" colspan="2"><label><%= scope.txtEditingSaving %></label></td>',
                 '</tr>',
@@ -1173,7 +1224,8 @@ define([
         txtStrictTip: 'Use the \'Save\' button to sync the changes you and others make',
         strShowOthersChanges: 'Show changes from other users',
         txtCalculating: 'Calculating',
-        strDateFormat1904: 'Use 1904 date system'
+        strDateFormat1904: 'Use 1904 date system',
+        txtAdvancedSettings: 'Advanced Settings'
 
 }, SSE.Views.FileMenuPanels.MainSettingsGeneral || {}));
 
@@ -1247,7 +1299,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         },
 
         template: _.template([
-            '<h3 style="margin-top: 20px;"><%= scope.txtCreateNew %></h3>',
+            '<div class="header"><%= scope.txtCreateNew %></div>',
             '<div class="thumb-list">',
                 '<% if (blank) { %> ',
                 '<div class="blank-document">',
@@ -1335,7 +1387,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
 
             this.template = _.template([
             '<div class="flex-settings">',
-                '<table class="main" style="margin: 30px 0 0;">',
+                '<div class="header">' + this.txtSpreadsheetInfo + '</div>',
+                '<table class="main">',
                     '<tr>',
                         '<td class="left"><label>' + this.txtPlacement + '</label></td>',
                         '<td class="right"><label id="id-info-placement">-</label></td>',
@@ -1758,7 +1811,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         txtAddAuthor: 'Add Author',
         txtAddText: 'Add Text',
         txtMinutes: 'min',
-        okButtonText: 'Apply'
+        okButtonText: 'Apply',
+        txtSpreadsheetInfo: 'Spreadsheet Info'
     }, SSE.Views.FileMenuPanels.DocumentInfo || {}));
 
     SSE.Views.FileMenuPanels.DocumentRights = Common.UI.BaseView.extend(_.extend({
@@ -2071,7 +2125,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         menu: undefined,
 
         template: _.template([
-            '<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
+            '<label id="id-fms-lbl-protect-header"><%= scope.strProtect %></label>',
             '<div id="id-fms-password">',
                 '<label class="header"><%= scope.strEncrypt %></label>',
                 '<div id="fms-btn-add-pwd" style="width:190px;"></div>',

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -177,12 +177,16 @@
         }
 
         #panel-saveas, #panel-savecopy  {
+            &.content-box {
+                padding: 0 0 0 20px;
+            }
+
             .content-container {
                 margin: 30px 0 0 10px;
 
                 .header {
-                    font-size: 18px;
+                    font-size: 16px;
-                    margin-bottom: 17px;
+                    margin-bottom: 20px;
                 }
 
                 .format-items {
@@ -202,12 +206,6 @@
                         height: 0;
                     }
 
-                    @media(min-width: 800px) {
-                        .divider {
-                            width: 100%;
-                        }
-                    }
-
                 }
             }
         }
@@ -223,6 +221,11 @@
             display: flex;
             flex-direction: column;
 
+            .header {
+                margin: 30px 0 16px 30px;
+                font-size: 16px;
+            }
+
             #id-settings-menu {
                 .dataview {
                     border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
@@ -336,26 +339,12 @@
         }
 
         #panel-createnew {
-            h3 {
+            .header {
-                margin: 0;
+                font-size: 16px;
-                font-size: 10pt;
+                padding: 0 0 0 10px;
-                color: @text-normal-ie;
-                color: @text-normal;
-                .font-weight-bold();
-                padding: 0 0 10px 10px;
                 white-space: nowrap;
-            }
+                margin-top: 30px;
-
+                margin-bottom: 20px;
-            .blank-document-info {
-                vertical-align: top;
-                width: 445px;
-                display: inline-block;
-
-                h3 {
-                    padding-left: 0;
-                    padding-top: 45px;
-                    white-space: nowrap;
-                }
             }
 
             hr {
@@ -517,6 +506,10 @@
 
         #panel-info,
         #panel-rights {
+            .header {
+                margin: 30px 0 20px 30px;
+                font-size: 16px;
+            }
             table {
                 tr {
                     td {
@@ -525,7 +518,7 @@
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
-                            width: 30%;
+                            width: 200px;
 
                             label {
                                 .font-weight-bold();
@@ -534,7 +527,7 @@
 
                         &.right {
                             padding: 5px 10px;
-                            width: 70%;
+                            width: calc(100% - 200px);
                         }
                     }
 
@@ -590,7 +583,7 @@
 
             .header {
                 .font-weight-bold();
-                margin: 30px 0 10px;
+                margin: 20px 0 10px;
             }
 
             table {
@@ -598,6 +591,10 @@
                     padding: 5px 0;
                 }
             }
+
+            #id-fms-lbl-protect-header {
+                font-size: 16px;
+            }
         }
 
         #panel-print {