Update for PE

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

@@ -233,83 +233,84 @@ define([
         '<div class="flex-settings">',
             '<table style="margin: 11px 0 0;"><tbody>',
                 '<tr class="edit">',
-                    '<td class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
+                    '<td colspan="2" class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
                 '</tr>',
                 '<tr class="autosave">',
-                    '<td><span id="fms-chb-autosave"></span></td>',
+                    '<td colspan="2"><span id="fms-chb-autosave"></span></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td><div id="fms-chb-paste-settings"></div></td>',
+                    '<td colspan="2"><div id="fms-chb-paste-settings"></div></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td><span id="fms-chb-compatible"></span></td>',
+                    '<td colspan="2"><span id="fms-chb-compatible"></span></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td class="group-name"><label><%= scope.txtCollaboration %></label></td>',
+                    '<td colspan="2" class="group-name"><label><%= scope.txtCollaboration %></label></td>',
                 '</tr>',
                 '<tr class="coauth changes-mode">',
-                    '<td class="subgroup-name"><label><%= scope.strCoAuthMode %></label></td>',
+                    '<td colspan="2" class="subgroup-name"><label><%= scope.strCoAuthMode %></label></td>',
                 '</tr>',
                 '<tr class="coauth changes-mode">',
-                    '<td style="display: flex;"><div id="fms-rb-coauth-mode-fast"></div>',
+                    '<td colspan="2"><div style="display: flex;"><div id="fms-rb-coauth-mode-fast"></div>',
                     '<span style ="display: flex; flex-direction: column;"><label><%= scope.strFast %></label>',
-                    '<label class="comment-text">Real-time co-editing. All changes are saved automatically</label></span></div></div>',
+                    '<label class="comment-text">Real-time co-editing. All changes are saved automatically</label></span></div>',
                     '</td>',
                 '</tr>',
                 '<tr class="coauth changes-mode">',
-                    '<td style="display: flex;"><div id="fms-rb-coauth-mode-strict"></div>',
+                    '<td colspan="2"><div style="display: flex;"><div id="fms-rb-coauth-mode-strict"></div>',
                     '<span style ="display: flex; flex-direction: column;"><label><%= scope.strStrict %></label>',
                     '<label class="comment-text">Use the \'Save\' button to sync the changes you and others make</label></span>',
                     '</div></td>',
                 '</tr>',
                 '<tr class="view-review">',
-                    '<td class="subgroup-name"><label><%= scope.txtShowTrackChanges %></label></td>',
+                    '<td colspan="2" class="subgroup-name"><label><%= scope.txtShowTrackChanges %></label></td>',
                 '</tr>',
                 '<tr class="view-review">',
-                    '<td><div id="fms-rb-show-track-ballons"></div></td>',
+                    '<td colspan="2"><div id="fms-rb-show-track-ballons"></div></td>',
                 '</tr>',
                 '<tr class="view-review">',
-                    '<td><div id="fms-rb-show-track-tooltips"></div></td>',
+                    '<td colspan="2"><div id="fms-rb-show-track-tooltips"></div></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td class="subgroup-name"><label><%= scope.strShowChanges %></label></td>',
+                    '<td colspan="2" class="subgroup-name"><label><%= scope.strShowChanges %></label></td>',
                 '</tr>',
                 '<tr class="edit show-changes">',
-                    '<td><div id="fms-rb-show-changes-none"></div></td>',
+                    '<td colspan="2"><div id="fms-rb-show-changes-none"></div></td>',
                 '</tr>',
                 '<tr class="edit show-changes">',
-                    '<td><div id="fms-rb-show-changes-all"></div></td>',
+                    '<td colspan="2"><div id="fms-rb-show-changes-all"></div></td>',
                 '</tr>',
                 '<tr class="edit show-changes">',
-                    '<td><div id="fms-rb-show-changes-last"></div></td>',
+                    '<td colspan="2"><div id="fms-rb-show-changes-last"></div></td>',
                 '</tr>',
                 '<tr class="comments">',
-                    '<td><div id="fms-chb-live-comment"></div></td>',
+                    '<td colspan="2"><div id="fms-chb-live-comment"></div></td>',
                 '</tr>',
                 '<tr class="comments">',
-                    '<td><div id="fms-chb-resolved-comment"></div></td>',
+                    '<td colspan="2"><div id="fms-chb-resolved-comment"></div></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td class="group-name"><label><%= scope.txtProofing %></label></td>',
+                    '<td colspan="2" class="group-name"><label><%= scope.txtProofing %></label></td>',
                 '</tr>',
                 '<tr class="edit spellcheck">',
-                    '<td><div id="fms-chb-spell-check"></div></td>',
+                    '<td colspan="2"><div id="fms-chb-spell-check"></div></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtAutoCorrect %></button></div></td>',
+                    '<td colspan="2"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtAutoCorrect %></button></div></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td class="group-name"><label><%= scope.txtWorkspace %></label></td>',
+                    '<td colspan="2" class="group-name"><label><%= scope.txtWorkspace %></label></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td><span id="fms-chb-align-guides"></span></td>',
+                    '<td colspan="2"><span id="fms-chb-align-guides"></span></td>',
                 '</tr>',
                 '<tr class="edit">',
-                    '<td><div id="fms-chb-input-mode"></div></td>',
+                    '<td colspan="2"><div id="fms-chb-input-mode"></div></td>',
+                '</tr>',
+                '<tr class="forcesave">',
+                    '<td><label id="fms-lbl-forcesave"><%= scope.textForceSave %></label></td>',
+                    '<td><span id="fms-chb-forcesave"></span></td>',
                 '</tr>',
-
-            '</tbody></table>',
-            '<table style="margin: 16px 0 0;"><tbody>',
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td>',
@@ -367,7 +368,7 @@ define([
             /** coauthoring begin **/
             this.chLiveComment = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-live-comment'),
-                labelText: this.strLiveComment,
+                labelText: this.strShowComments,
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -377,7 +378,7 @@ define([
 
             this.chResolvedComment = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-resolved-comment'),
-                labelText: this.strResolvedComment,
+                labelText: this.strShowResolvedComments,
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -412,7 +413,6 @@ define([
                     me.onChangeCoAuthMode(me.rbCoAuthModeFast.getValue()?1:0);
                 }
             });
-            this.lblAutosave = $markup.findById('#fms-lbl-autosave');
 
             this.chForcesave = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-forcesave'),
@@ -459,10 +459,6 @@ define([
                 dataHintOffset: 'big'
             });
 
-            /** coauthoring begin **/
-
-
-
             this.rbCoAuthModeFast = new Common.UI.RadioBox({
                 el          :$markup.findById('#fms-rb-coauth-mode-fast'),
                 name        : 'coauth-mode',
@@ -622,20 +618,6 @@ define([
                 dataHintOffset: 'small'
             });
 
-            this.cmbReviewHover = new Common.UI.ComboBox({
-                el          : $markup.findById('#fms-cmb-review-hover'),
-                style       : 'width: 160px;',
-                editable    : false,
-                cls         : 'input-group-nr',
-                data        : [
-                    { value: false, displayValue: this.txtChangesBalloons },
-                    { value: true, displayValue: this.txtChangesTip }
-                ],
-                dataHint: '2',
-                dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
-            });
-
             $markup.find('.btn.primary').each(function(index, el){
                 (new Common.UI.Button({
                     el: $(el)
@@ -695,7 +677,6 @@ define([
             $('tr.forcesave', this.el)[mode.canForcesave ? 'show' : 'hide']();
             if (this.mode.isDesktopApp && this.mode.isOffline) {
                 this.chAutosave.setCaption(this.strAutoRecover);
-                this.lblAutosave.text(this.textAutoRecover);
             }
             /** coauthoring begin **/
             $('tr.coauth', this.el)[mode.isEdit && mode.canCoAuthoring ? 'show' : 'hide']();
@@ -936,7 +917,9 @@ define([
         txtCollaboration: 'Collaboration',
         txtShowTrackChanges: 'Show track changes',
         txtWorkspace: 'Workspace',
-        txtHieroglyphs: 'Hieroglyphs'
+        txtHieroglyphs: 'Hieroglyphs',
+        strShowComments: 'Show comments in text',
+        strShowResolvedComments: 'Show resolved comments'
     }, DE.Views.FileMenuPanels.Settings || {}));
 
     DE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({

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

@@ -123,7 +123,7 @@
 
 #panel-settings {
   table {
-    width: 500px;
+    width: auto !important;
     tr {
       td {
         padding: 6px 10px;
@@ -162,7 +162,6 @@
       &.divider {
         height: 10px;
       }
-
     }
   }
 }

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

@@ -199,65 +199,82 @@ define([
 
         template: _.template([
         '<div class="flex-settings">',
-            '<table style="margin: 30px 0 0;"><tbody>',
+            '<table style="margin: 10px 0 0;"><tbody>',
-                '<tr class="edit spellcheck">',
+                '<tr class="autosave edit">',
-                    '<td class="left"><label><%= scope.txtSpellCheck %></label></td>',
+                    '<td colspan="2" class="group-name top"><label><%= scope.txtEditingSaving %></label></td>',
-                    '<td class="right"><div id="fms-chb-spell-check"></div></td>',
+                '</tr>',
-                '</tr>','<tr class="divider edit spellcheck"></tr>',
-                '<tr class="edit">',
-                    '<td class="left"><label><%= scope.txtProofing %></label></td>',
-                    '<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtAutoCorrect %></button></div></td>',
-                '</tr>','<tr class="divider edit"></tr>',
-                '<tr class="edit">',
-                    '<td class="left"><label><%= scope.txtInput %></label></td>',
-                    '<td class="right"><div id="fms-chb-input-mode"></div></td>',
-                '</tr>','<tr class="divider edit"></tr>',
-                '<tr class="edit">',
-                    '<td class="left"><label><%= scope.textAlignGuides %></label></td>',
-                    '<td class="right"><span id="fms-chb-align-guides"></span></td>',
-                '</tr>','<tr class="divider edit"></tr>',
                 '<tr class="autosave">',
-                    '<td class="left"><label id="fms-lbl-autosave"><%= scope.textAutoSave %></label></td>',
+                    '<td colspan="2"><span id="fms-chb-autosave"></span></td>',
-                    '<td class="right"><span id="fms-chb-autosave"></span></td>',
+                '</tr>',
-                '</tr>','<tr class="divider autosave"></tr>',
+                '<tr class="edit">',
+                    '<td colspan="2"><div id="fms-chb-paste-settings"></div></td>',
+                '</tr>',
+                '<tr class="coauth changes">',
+                    '<td colspan="2" class="group-name"><label><%= scope.txtCollaboration %></label></td>',
+                '</tr>',
+                '<tr class="coauth changes">',
+                    '<td colspan="2" class="subgroup-name"><label><%= scope.strCoAuthMode %></label></td>',
+                '</tr>',
+                '<tr class="coauth changes">',
+                    '<td colspan="2"><div style="display: flex;">',
+                        '<div id="fms-rb-coauth-mode-fast"></div>',
+                        '<span style ="display: flex; flex-direction: column;"><label><%= scope.strFast %></label>',
+                        '<label class="comment-text">Real-time co-editing. All changes are saved automatically</label></span>',
+                    '</div></td>',
+                '</tr>',
+                '<tr class="coauth changes">',
+                    '<td colspan="2"><div style="display: flex;">',
+                        '<div id="fms-rb-coauth-mode-strict"></div>',
+                        '<span style ="display: flex; flex-direction: column;"><label><%= scope.strStrict %></label>',
+                        '<label class="comment-text">Use the \'Save\' button to sync the changes you and others make</label></span>',
+                    '</div></td>',
+                '</tr>',
+                '<tr class="edit spellcheck">',
+                    '<td colspan="2" class="group-name"><label><%= scope.txtProofing %></label></td>',
+                '</tr>',
+                '<tr class="edit spellcheck">',
+                    '<td colspan="2"><div id="fms-chb-spell-check"></div></td>',
+                '</tr>',
+                '<tr class="edit">',
+                    '<td colspan="2"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtAutoCorrect %></button></div></td>',
+                '</tr>',
+                '<tr class="edit">',
+                    '<td colspan="2" class="group-name"><label><%= scope.txtWorkspace %></label></td>',
+                    '</tr>',
+                '<tr class="edit">',
+                    '<td><span id="fms-chb-align-guides"></span></td>',
+                '</tr>',
+                '<tr class="edit">',
+                    '<td><div id="fms-chb-input-mode"></div></td>',
+                '</tr>',
+
+                '<tr class="themes">',
+                    '<td><label><%= scope.strTheme %></label></td>',
+                    '<td><span id="fms-cmb-theme"></span></td>',
+                '</tr>',
+                '<tr class="edit">',
+                    '<td><label><%= scope.strUnit %></label></td>',
+                    '<td><span id="fms-cmb-unit"></span></td>',
+                '</tr>',
+                '<tr>',
+                    '<td><label><%= scope.strZoom %></label></td>',
+                    '<td><div id="fms-cmb-zoom" class="input-group-nr"></div></td>',
+                '</tr>',
+                '<tr>',
+                    '<td><label><%= scope.strFontRender %></label></td>',
+                    '<td><span id="fms-cmb-font-render"></span></td>',
+                '</tr>',
+                '<tr class="macros">',
+                    '<td><label><%= scope.strMacrosSettings %></label></td>',
+                    '<td><div><div id="fms-cmb-macros"></div></div></td>',
+                '</tr>',
+
                 '<tr class="forcesave">',
                     '<td class="left"><label id="fms-lbl-forcesave"><%= scope.textForceSave %></label></td>',
                     '<td class="right"><span id="fms-chb-forcesave"></span></td>',
                 '</tr>','<tr class="divider forcesave"></tr>',
-                /** coauthoring begin **/
+
-                '<tr class="coauth changes">',
+
-                    '<td class="left"><label><%= scope.strCoAuthMode %></label></td>',
-                    '<td class="right">',
-                        '<div><div id="fms-cmb-coauth-mode" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<label id="fms-lbl-coauth-mode" style="vertical-align: middle;"><%= scope.strCoAuthModeDescFast %></label></div></td>',
-                '</tr>','<tr class="divider coauth changes"></tr>',
-                /** coauthoring end **/
-                '<tr class="themes">',
-                    '<td class="left"><label><%= scope.strTheme %></label></td>',
-                    '<td class="right"><span id="fms-cmb-theme"></span></td>',
-                '</tr>','<tr class="divider"></tr>',
-                '<tr>',
-                    '<td class="left"><label><%= scope.strZoom %></label></td>',
-                    '<td class="right"><div id="fms-cmb-zoom" class="input-group-nr"></div></td>',
-                '</tr>','<tr class="divider"></tr>',
-                '<tr>',
-                    '<td class="left"><label><%= scope.strFontRender %></label></td>',
-                    '<td class="right"><span id="fms-cmb-font-render"></span></td>',
-                '</tr>','<tr class="divider"></tr>',
-                '<tr class="edit">',
-                    '<td class="left"><label><%= scope.strUnit %></label></td>',
-                    '<td class="right"><span id="fms-cmb-unit"></span></td>',
-                '</tr>','<tr class="divider edit"></tr>',
-                '<tr class="edit">',
-                    '<td class="left"><label><%= scope.strPaste %></label></td>',
-                    '<td class="right"><div id="fms-chb-paste-settings"></div></td>',
-                '</tr>','<tr class="divider edit"></tr>',
-                '<tr class="macros">',
-                    '<td class="left"><label><%= scope.strMacrosSettings %></label></td>',
-                    '<td class="right">',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<label id="fms-lbl-macros" style="vertical-align: middle;"><%= scope.txtWarnMacrosDesc %></label></div></td>',
-                '</tr>','<tr class="divider macros"></tr>',
                 '<tr class="fms-btn-apply">',
                     '<td class="left"></td>',
                     '<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
@@ -286,7 +303,7 @@ define([
 
             this.chSpell = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-spell-check'),
-                labelText: this.strSpellCheckMode,
+                labelText: this.txtSpellCheck,
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -294,7 +311,7 @@ define([
 
             this.chInputMode = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-input-mode'),
-                labelText: this.strInputMode,
+                labelText: this.txtHieroglyphs,
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -345,22 +362,38 @@ define([
             }).on('selected', function(combo, record) {
                 if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
                     me.chAutosave.setValue(1);
-                me.lblCoAuthMode.text(record.descValue);
             });
 
-            this.lblCoAuthMode = $markup.findById('#fms-lbl-coauth-mode');
+            this.rbCoAuthModeFast = new Common.UI.RadioBox({
+                el          : $markup.findById('#fms-rb-coauth-mode-fast'),
+                name        : 'coauth-mode',
+                dataHint    : '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            }).on('change', function () {
+                me.chAutosave.setValue(1);
+            });
+
+            this.rbCoAuthModeStrict = new Common.UI.RadioBox({
+                el          : $markup.findById('#fms-rb-coauth-mode-strict'),
+                name        : 'coauth-mode',
+                dataHint    : '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            //this.lblCoAuthMode = $markup.findById('#fms-lbl-coauth-mode');
             /** coauthoring end **/
 
             this.chAutosave = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-autosave'),
-                labelText: this.strAutosave,
+                labelText: this.textAutoSave,
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             }).on('change', function(field, newValue, oldValue, eOpts){
-                if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
+                if (field.getValue()!=='checked' && me.rbCoAuthModeFast.getValue()) {
-                    me.cmbCoAuthMode.setValue(0);
+                    me.rbCoAuthModeStrict.setValue(1);
-                    me.lblCoAuthMode.text(me.strCoAuthModeDescStrict);
                 }
             });
             this.lblAutosave = $markup.findById('#fms-lbl-autosave');
@@ -375,7 +408,7 @@ define([
 
             this.chAlignGuides = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-align-guides'),
-                labelText: this.strAlignGuides,
+                labelText: this.textAlignGuides,
                 dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -431,6 +464,12 @@ define([
                     { value: 0, displayValue: this.txtWarnMacros, descValue: this.txtWarnMacrosDesc },
                     { value: 1, displayValue: this.txtRunMacros, descValue: this.txtRunMacrosDesc }
                 ],
+                itemsTemplate: _.template([
+                    '<% _.each(items, function(item) { %>',
+                    '<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem" style ="display: flex; flex-direction: column;">',
+                    '<label><%= scope.getDisplayValue(item) %></label><label class="comment-text"><%= item.descValue %></label></a></li>',
+                    '<% }); %>'
+                ].join('')),
                 dataHint: '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
@@ -552,9 +591,8 @@ define([
 
             /** coauthoring begin **/
             var fast_coauth = Common.Utils.InternalSettings.get("pe-settings-coauthmode");
-            item = this.cmbCoAuthMode.store.findWhere({value: fast_coauth ? 1 : 0});
+            this.rbCoAuthModeFast.setValue(fast_coauth);
-            this.cmbCoAuthMode.setValue(item ? item.get('value') : 1);
+            this.rbCoAuthModeStrict.setValue(!fast_coauth);
-            this.lblCoAuthMode.text(item ? item.get('descValue') : this.strCoAuthModeDescFast);
             /** coauthoring end **/
 
             value = Common.Utils.InternalSettings.get("pe-settings-fontrender");
@@ -608,7 +646,7 @@ define([
             Common.Utils.InternalSettings.set("pe-settings-zoom", Common.localStorage.getItem("pe-settings-zoom"));
             /** coauthoring begin **/
             if (this.mode.isEdit && !this.mode.isOffline && this.mode.canCoAuthoring && this.mode.canChangeCoAuthoring) {
-                Common.localStorage.setItem("pe-settings-coauthmode", this.cmbCoAuthMode.getValue());
+                Common.localStorage.setItem("pe-settings-coauthmode", this.rbCoAuthModeFast.getValue());
             }
             /** coauthoring end **/
             Common.localStorage.setItem("pe-settings-fontrender", this.cmbFontRender.getValue());
@@ -702,7 +740,11 @@ define([
         strTheme: 'Theme',
         txtThemeLight: 'Light',
         txtThemeDark: 'Dark',
-        txtAutoCorrect: 'AutoCorrect options...'
+        txtAutoCorrect: 'AutoCorrect options...',
+        txtEditingSaving: 'Editing and saving',
+        txtCollaboration: 'Collaboration',
+        txtWorkspace: 'Workspace',
+        txtHieroglyphs: 'Hieroglyphs'
     }, PE.Views.FileMenuPanels.Settings || {}));
 
     PE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({

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

@@ -160,12 +160,28 @@
 
         #panel-settings {
             table {
-                width: 100%;
+                width: auto !important;
 
                 tr {
                     td {
-                        padding: 5px 10px;
+                        padding: 6px 10px;
+                        &.group-name {
+                            padding-top: 22px;
+                            &.top{padding-top: 5px}
+                            label {
+                                font-size: 14px;
+                                .font-weight-bold();
+                            }
+                        }
 
+                        &.subgroup-name label{
+                            font-size: 11px;
+                            .font-weight-bold();
+                        }
+
+                        .comment-text{
+                            opacity: 0.45;
+                        }
                         &.left {
                             text-align: right;
                             width: 30%;

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

@@ -294,7 +294,6 @@ define([
                 '<tr class="edit">',
                     '<td colspan = "2"><div id="fms-chb-paste-settings"></div></td>',
                 '</tr>',
-            /** coauthoring begin **/
                 '<tr class="coauth changes comments" >',
                     '<td class="group-name" colspan="2"><label><%= scope.txtCollaboration %></label></td>',
                 '</tr>',
@@ -321,7 +320,6 @@ define([
                 '<tr class="comments">',
                     '<td colspan="2"><div id="fms-chb-resolved-comment"></div></td>',
                 '</tr>',
-            /** coauthoring end **/
                 '<tr >',
                     '<td class="group-name" colspan="2"><label><%= scope.txtWorkspace %></label></td>',
                 '</tr>',
@@ -434,7 +432,7 @@ define([
             this.chLiveComment = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-live-comment'),
                 labelText: this.strShowComments,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             }).on('change', function(field, newValue, oldValue, eOpts){
@@ -444,7 +442,7 @@ define([
             this.chResolvedComment = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-resolved-comment'),
                 labelText: this.strShowResolvedComments,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -452,7 +450,7 @@ define([
             this.chR1C1Style = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-r1c1-style'),
                 labelText: this.strReferenceStyle,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -460,7 +458,7 @@ define([
             this.rbCoAuthModeFast = new Common.UI.RadioBox({
                 el          : $markup.findById('#fms-rb-coauth-mode-fast'),
                 name        : 'coauth-mode',
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             }).on('change', function () {
@@ -469,7 +467,7 @@ define([
             this.rbCoAuthModeStrict = new Common.UI.RadioBox({
                 el          : $markup.findById('#fms-rb-coauth-mode-strict'),
                 name        : 'coauth-mode',
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -497,7 +495,7 @@ define([
                     { value: 400, displayValue: "400%" },
                     { value: 500, displayValue: "500%" }
                 ],
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             });
@@ -520,7 +518,7 @@ define([
                     { value: Asc.c_oAscFontRenderingModeType.hinting, displayValue: this.txtNative },
                     { value: 'custom', displayValue: this.txtCacheMode }
                 ],
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             });
@@ -529,7 +527,7 @@ define([
             this.chAutosave = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-autosave'),
                 labelText: this.textAutoSave,
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             }).on('change', function(field, newValue, oldValue, eOpts){
@@ -543,7 +541,7 @@ define([
             this.chForcesave = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-forcesave'),
                 labelText: this.strForcesave,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -558,7 +556,7 @@ define([
                     { value: Common.Utils.Metric.c_MetricUnits['pt'], displayValue: this.txtPt },
                     { value: Common.Utils.Metric.c_MetricUnits['inch'], displayValue: this.txtInch }
                 ],
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             });
@@ -582,7 +580,7 @@ define([
                 editable    : false,
                 cls         : 'input-group-nr',
                 data        : formula_arr,
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             }).on('selected', function(combo, record) {
@@ -636,7 +634,7 @@ define([
             this.chSeparator = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-separator-settings'),
                 labelText: this.strUseSeparatorsBasedOnRegionalSettings,
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             }).on('change', _.bind(function(field, newValue, oldValue, eOpts){
@@ -671,7 +669,7 @@ define([
                 el: $markup.findById('#fms-decimal-separator'),
                 style: 'width: 35px;',
                 validateOnBlur: false,
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -682,7 +680,7 @@ define([
                 el: $markup.findById('#fms-thousands-separator'),
                 style: 'width: 35px;',
                 validateOnBlur: false,
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -707,7 +705,7 @@ define([
                     '<% }); %>'
                 ].join('')),
 
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             });
@@ -715,7 +713,7 @@ define([
             this.chPaste = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-paste-settings'),
                 labelText: this.strPasteButton,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -725,7 +723,7 @@ define([
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
-                dataHint    : '3',
+                dataHint    : '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             });
@@ -736,7 +734,7 @@ define([
                 style: 'width: 267px;',
                 editable: false,
                 menuStyle: 'min-width: 267px; max-height: 209px;',
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'bottom',
                 dataHintOffset: 'big'
             });
@@ -744,7 +742,7 @@ define([
             this.chIgnoreUppercase = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-ignore-uppercase-words'),
                 labelText: this.strIgnoreWordsInUPPERCASE,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });
@@ -752,7 +750,7 @@ define([
             this.chIgnoreNumbers = new Common.UI.CheckBox({
                 el: $markup.findById('#fms-chb-ignore-numbers-words'),
                 labelText: this.strIgnoreWordsWithNumbers,
-                dataHint: '3',
+                dataHint: '2',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
             });