Change hint for developer mode.

apps/common/main/lib/template/Header.template

@@ -1,7 +1,6 @@
 <div id="header-container">
     <div id="header-logo"></div>
     <div id="header-caption"><div><%= headerCaption %></div></div>
-    <div id="header-developer" class="hidden"><div><%= headerDeveloper %></div></div>
     <div id="header-documentcaption"><div><%= documentCaption %></div></div>
     <div id="header-back" style="display: <%= canBack ? 'table-cell' : 'none' %>;"><div><%= textBack %></div></div>
 </div>

apps/common/main/lib/view/Header.js

@@ -54,7 +54,6 @@ define([
         options : {
             branding: {},
             headerCaption: 'Default Caption',
-            headerDeveloper: 'DEVELOPER MODE',
             documentCaption: '',
             canBack: false
         },
@@ -79,7 +78,6 @@ define([
             this.options = this.options ? _({}).extend(this.options, options) : options;
 
             this.headerCaption      = this.options.headerCaption;
-            this.headerDeveloper    = this.txtHeaderDeveloper;
             this.documentCaption    = this.options.documentCaption;
             this.canBack            = this.options.canBack;
             this.branding           = this.options.customization;
@@ -88,7 +86,6 @@ define([
         render: function () {
             $(this.el).html(this.template({
                 headerCaption   : this.headerCaption,
-                headerDeveloper   : this.headerDeveloper,
                 documentCaption : Common.Utils.String.htmlEncode(this.documentCaption),
                 canBack         : this.canBack,
                 textBack        : this.textBack
@@ -223,10 +220,6 @@ define([
             }
         },
 
-        setDeveloperMode: function(mode) {
-            $('#header-developer').toggleClass('hidden', !mode);
-        },
-
         setCanRename: function(rename) {
             var dc = $('#header-documentcaption div');
             if (rename) {
@@ -257,7 +250,6 @@ define([
 
         textBack: 'Go to Documents',
         openNewTabText: 'Open in New Tab',
-        txtHeaderDeveloper: 'DEVELOPER MODE',
         txtRename: 'Rename'
     }, Common.Views.Header || {}))
 });

apps/common/main/resources/less/header.less

@@ -46,34 +46,6 @@
     }
 }
 
-#header-developer {
-    background-color: #ffb400;
-    padding-left: 15px + @app-header-height / 3;
-    & > div {
-        position: relative;
-        background-color: #ffb400;
-        color: #6e4e00 !important;
-        padding-right: 15px;
-        cursor: default;
-        z-index: 1;
-        white-space: nowrap;
-        height: @app-header-height;
-        line-height: @app-header-height;
-
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: -@app-header-height / 2;
-            width: @app-header-height / 2;
-            height: @app-header-height;
-            border-top: @app-header-height / 2 solid transparent;
-            border-left: @app-header-height / 3 solid #ffb400;
-            border-bottom: @app-header-height / 2 solid transparent;
-        }
-    }
-}
-
 #header-documentcaption {
     width: 100%;
     max-width: 100px;

apps/documenteditor/main/app/controller/LeftMenu.js

@@ -174,6 +174,8 @@ define([
             if (this.mode.canUseHistory)
                 this.leftMenu.setOptionsPanel('history', this.getApplication().getController('Common.Controllers.History').getView('Common.Views.History'));
 
+            this.mode.isTrial && this.leftMenu.setDeveloperMode(true);
+
             Common.util.Shortcuts.resumeEvents();
             return this;
         },
@@ -184,6 +186,7 @@ define([
                 this.leftMenu.setOptionsPanel('plugins', this.getApplication().getController('Common.Controllers.Plugins').getView('Common.Views.Plugins'));
             } else
                 this.leftMenu.btnPlugins.hide();
+            this.mode.isTrial && this.leftMenu.setDeveloperMode(true);
         },
 
         clickMenuFileItem: function(menu, action, isopts) {

apps/documenteditor/main/app/controller/Main.js

@@ -976,6 +976,7 @@ define([
                 this.appOptions.canForcesave   = this.appOptions.isEdit && !this.appOptions.isOffline && (typeof (this.editorConfig.customization) == 'object' && !!this.editorConfig.customization.forcesave);
                 this.appOptions.forcesave      = this.appOptions.canForcesave;
                 this.appOptions.canEditComments= this.appOptions.isOffline || !(typeof (this.editorConfig.customization) == 'object' && this.editorConfig.customization.commentAuthorOnly);
+                this.appOptions.isTrial         = params.asc_getTrial();
 
                 var type = /^(?:(pdf|djvu|xps))$/.exec(this.document.fileType);
                 this.appOptions.canDownloadOrigin = !this.appOptions.nativeApp && this.permissions.download !== false && (type && typeof type[1] === 'string');
@@ -988,7 +989,6 @@ define([
                 if (this.appOptions.canBranding)
                     headerView.setBranding(this.editorConfig.customization);
 
-                params.asc_getTrial() && headerView.setDeveloperMode(true);
                 this.appOptions.canRename && headerView.setCanRename(true);
 
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);

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

@@ -358,6 +358,24 @@ define([
             Common.NotificationCenter.trigger('layout:changed', 'history');
         },
 
+        setDeveloperMode: function(mode) {
+            if ( !this.$el.is(':visible') ) return;
+
+            if (!this.developerHint) {
+                this.developerHint = $('<div id="developer-hint">' + this.txtDeveloper + '</div>').appendTo(this.$el);
+                this.devHeight = this.developerHint.outerHeight();
+                $(window).on('resize', _.bind(this.onWindowResize, this));
+            }
+            this.developerHint.toggleClass('hidden', !mode);
+
+            var lastbtn = this.$el.find('button.btn-category:visible:last-of-type');
+            this.minDevPosition = lastbtn.offset().top - lastbtn.offsetParent().offset().top + lastbtn.height() + 20;
+            this.onWindowResize();
+        },
+
+        onWindowResize: function() {
+            this.developerHint.css('top', Math.max((this.$el.height()-this.devHeight)/2, this.minDevPosition));
+        },
         /** coauthoring begin **/
         tipComments : 'Comments',
         tipChat     : 'Chat',
@@ -366,6 +384,7 @@ define([
         tipSupport  : 'Feedback & Support',
         tipFile     : 'File',
         tipSearch   : 'Search',
-        tipPlugins  : 'Plugins'
+        tipPlugins  : 'Plugins',
+        txtDeveloper: 'DEVELOPER MODE'
     }, DE.Views.LeftMenu || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -141,7 +141,7 @@
   "Common.Views.ExternalMergeEditor.textTitle": "Mail Merge Recipients",
   "Common.Views.Header.openNewTabText": "Open in New Tab",
   "Common.Views.Header.textBack": "Go to Documents",
-  "Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
+  "del_Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
   "Common.Views.Header.txtRename": "Rename",
   "Common.Views.History.textCloseHistory": "Close History",
   "Common.Views.History.textHide": "Collapse",
@@ -1073,6 +1073,7 @@
   "DE.Views.LeftMenu.tipSearch": "Search",
   "DE.Views.LeftMenu.tipSupport": "Feedback & Support",
   "DE.Views.LeftMenu.tipTitles": "Titles",
+  "DE.Views.LeftMenu.txtDeveloper": "DEVELOPER MODE",
   "DE.Views.MailMergeEmailDlg.cancelButtonText": "Cancel",
   "DE.Views.MailMergeEmailDlg.filePlaceholder": "PDF",
   "DE.Views.MailMergeEmailDlg.okButtonText": "Send",

apps/documenteditor/main/resources/less/leftmenu.less

@@ -430,3 +430,19 @@ button.notify .btn-menu-comments {background-position: -0*@toolbar-icon-size -60
         font: 12px tahoma, arial, verdana, sans-serif;
     }
 }
+
+#developer-hint {
+    position: absolute;
+    left: 0;
+    padding: 12px 0;
+    background-color: #ffb400;
+    color: #6e4e00 !important;
+    white-space: nowrap;
+    line-height: @app-header-height;
+    writing-mode: vertical-rl;
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}

apps/presentationeditor/main/app/controller/LeftMenu.js

@@ -166,6 +166,7 @@ define([
                 this.leftMenu.btnChat.hide();
                 this.leftMenu.btnComments.hide();
             }
+            this.mode.isTrial && this.leftMenu.setDeveloperMode(true);
             /** coauthoring end **/
             Common.util.Shortcuts.resumeEvents();
             this.leftMenu.btnThumbs.toggle(true);
@@ -178,6 +179,7 @@ define([
                 this.leftMenu.setOptionsPanel('plugins', this.getApplication().getController('Common.Controllers.Plugins').getView('Common.Views.Plugins'));
             } else
                 this.leftMenu.btnPlugins.hide();
+            this.mode.isTrial && this.leftMenu.setDeveloperMode(true);
         },
 
         clickMenuFileItem: function(menu, action, isopts) {

apps/presentationeditor/main/app/controller/Main.js

@@ -742,6 +742,7 @@ define([
                 this.appOptions.canForcesave   = this.appOptions.isEdit && !this.appOptions.isOffline && (typeof (this.editorConfig.customization) == 'object' && !!this.editorConfig.customization.forcesave);
                 this.appOptions.forcesave      = this.appOptions.canForcesave;
                 this.appOptions.canEditComments= this.appOptions.isOffline || !(typeof (this.editorConfig.customization) == 'object' && this.editorConfig.customization.commentAuthorOnly);
+                this.appOptions.isTrial        = params.asc_getTrial();
 
                 this._state.licenseWarning = (licType===Asc.c_oLicenseResult.Connections) && this.appOptions.canEdit && this.editorConfig.mode !== 'view';
 
@@ -750,7 +751,6 @@ define([
                 if (this.appOptions.canBranding)
                     headerView.setBranding(this.editorConfig.customization);
 
-                params.asc_getTrial() && headerView.setDeveloperMode(true);
                 this.appOptions.canRename && headerView.setCanRename(true);
 
                 this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins);

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

@@ -373,6 +373,25 @@ define([
             return this;
         },
 
+        setDeveloperMode: function(mode) {
+            if ( !this.$el.is(':visible') ) return;
+
+            if (!this.developerHint) {
+                this.developerHint = $('<div id="developer-hint">' + this.txtDeveloper + '</div>').appendTo(this.$el);
+                this.devHeight = this.developerHint.outerHeight();
+                $(window).on('resize', _.bind(this.onWindowResize, this));
+            }
+            this.developerHint.toggleClass('hidden', !mode);
+
+            var lastbtn = this.$el.find('button.btn-category:visible:last-of-type');
+            this.minDevPosition = lastbtn.offset().top - lastbtn.offsetParent().offset().top + lastbtn.height() + 20;
+            this.onWindowResize();
+        },
+
+        onWindowResize: function() {
+            this.developerHint.css('top', Math.max((this.$el.height()-this.devHeight)/2, this.minDevPosition));
+        },
+
         /** coauthoring begin **/
         tipComments : 'Comments',
         tipChat     : 'Chat',
@@ -382,6 +401,7 @@ define([
         tipFile     : 'File',
         tipSearch   : 'Search',
         tipSlides: 'Slides',
-        tipPlugins  : 'Plugins'
+        tipPlugins  : 'Plugins',
+        txtDeveloper: 'DEVELOPER MODE'
     }, PE.Views.LeftMenu || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -80,7 +80,7 @@
   "Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor",
   "Common.Views.Header.openNewTabText": "Open in New Tab",
   "Common.Views.Header.textBack": "Go to Documents",
-  "Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
+  "del_Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
   "Common.Views.Header.txtRename": "Rename",
   "Common.Views.ImageFromUrlDialog.cancelButtonText": "Cancel",
   "Common.Views.ImageFromUrlDialog.okButtonText": "OK",
@@ -875,6 +875,7 @@
   "PE.Views.LeftMenu.tipSlides": "Slides",
   "PE.Views.LeftMenu.tipSupport": "Feedback & Support",
   "PE.Views.LeftMenu.tipTitles": "Titles",
+  "PE.Views.LeftMenu.txtDeveloper": "DEVELOPER MODE",
   "PE.Views.ParagraphSettings.strLineHeight": "Line Spacing",
   "PE.Views.ParagraphSettings.strParagraphSpacing": "Paragraph Spacing",
   "PE.Views.ParagraphSettings.strSpacingAfter": "After",

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

@@ -451,4 +451,20 @@
             }
         }
     }
+}
+
+#developer-hint {
+    position: absolute;
+    left: 0;
+    padding: 12px 0;
+    background-color: #ffb400;
+    color: #6e4e00 !important;
+    white-space: nowrap;
+    line-height: @app-header-height;
+    writing-mode: vertical-rl;
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
 }

apps/spreadsheeteditor/main/app/controller/LeftMenu.js

@@ -174,6 +174,7 @@ define([
                 this.leftMenu.btnChat.hide();
                 this.leftMenu.btnComments.hide();
             }
+            this.mode.isTrial && this.leftMenu.setDeveloperMode(true);
             /** coauthoring end **/
             Common.util.Shortcuts.resumeEvents();
             if (!this.mode.isEditMailMerge && !this.mode.isEditDiagram)
@@ -187,6 +188,7 @@ define([
                 this.leftMenu.setOptionsPanel('plugins', this.getApplication().getController('Common.Controllers.Plugins').getView('Common.Views.Plugins'));
             } else
                 this.leftMenu.btnPlugins.hide();
+            this.mode.isTrial && this.leftMenu.setDeveloperMode(true);
         },
 
         clickMenuFileItem: function(menu, action, isopts) {

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -759,6 +759,7 @@ define([
                     this.appOptions.canComments    = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit) && !((typeof (this.editorConfig.customization) == 'object') && this.editorConfig.customization.comments===false);
                     this.appOptions.canChat        = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit) && !this.appOptions.isOffline && !((typeof (this.editorConfig.customization) == 'object') && this.editorConfig.customization.chat===false);
                     this.appOptions.canRename      = !!this.permissions.rename;
+                    this.appOptions.isTrial        = params.asc_getTrial();
 
                     this.appOptions.canBranding  = (licType === Asc.c_oLicenseResult.Success) && (typeof this.editorConfig.customization == 'object');
                     if (this.appOptions.canBranding)
@@ -768,7 +769,6 @@ define([
                     if (this.appOptions.canBrandingExt)
                         this.updatePlugins(this.plugins, true);
 
-                    params.asc_getTrial() && this.headerView.setDeveloperMode(true);
                     this.appOptions.canRename && this.headerView.setCanRename(true);
                 }
 

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

@@ -339,6 +339,25 @@ define([
             return this;
         },
 
+        setDeveloperMode: function(mode) {
+            if ( !this.$el.is(':visible') ) return;
+
+            if (!this.developerHint) {
+                this.developerHint = $('<div id="developer-hint">' + this.txtDeveloper + '</div>').appendTo(this.$el);
+                this.devHeight = this.developerHint.outerHeight();
+                $(window).on('resize', _.bind(this.onWindowResize, this));
+            }
+            this.developerHint.toggleClass('hidden', !mode);
+
+            var lastbtn = this.$el.find('button.btn-category:visible:last-of-type');
+            this.minDevPosition = lastbtn.offset().top - lastbtn.offsetParent().offset().top + lastbtn.height() + 20;
+            this.onWindowResize();
+        },
+
+        onWindowResize: function() {
+            this.developerHint.css('top', Math.max((this.$el.height()-this.devHeight)/2, this.minDevPosition));
+        },
+
         /** coauthoring begin **/
         tipComments : 'Comments',
         tipChat     : 'Chat',
@@ -347,6 +366,7 @@ define([
         tipSupport  : 'Feedback & Support',
         tipFile     : 'File',
         tipSearch   : 'Search',
-        tipPlugins  : 'Plugins'
+        tipPlugins  : 'Plugins',
+        txtDeveloper: 'DEVELOPER MODE'
     }, SSE.Views.LeftMenu || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -74,7 +74,7 @@
   "Common.Views.DocumentAccessDialog.textTitle": "Sharing Settings",
   "Common.Views.Header.openNewTabText": "Open in New Tab",
   "Common.Views.Header.textBack": "Go to Documents",
-  "Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
+  "del_Common.Views.Header.txtHeaderDeveloper": "DEVELOPER MODE",
   "Common.Views.Header.txtRename": "Rename",
   "Common.Views.ImageFromUrlDialog.cancelButtonText": "Cancel",
   "Common.Views.ImageFromUrlDialog.okButtonText": "OK",
@@ -1194,6 +1194,7 @@
   "SSE.Views.LeftMenu.tipPlugins": "Plugins",
   "SSE.Views.LeftMenu.tipSearch": "Search",
   "SSE.Views.LeftMenu.tipSupport": "Feedback & Support",
+  "SSE.Views.LeftMenu.txtDeveloper": "DEVELOPER MODE",
   "SSE.Views.MainSettingsPrint.okButtonText": "Save",
   "SSE.Views.MainSettingsPrint.strBottom": "Bottom",
   "SSE.Views.MainSettingsPrint.strLandscape": "Landscape",

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

@@ -516,4 +516,20 @@
             }
         }
     }
+}
+
+#developer-hint {
+    position: absolute;
+    left: 0;
+    padding: 12px 0;
+    background-color: #ffb400;
+    color: #6e4e00 !important;
+    white-space: nowrap;
+    line-height: @app-header-height;
+    writing-mode: vertical-rl;
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
 }