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

@@ -90,7 +90,7 @@ define([
                         '</section>';
 
         var templateLeftBox = '<section>' +
-                                '<div id="header-logo"></div>'
+                                '<div id="header-logo"></div>' +
                             '</section>';
 
         function onAddUser(model, collection, opts) {
@@ -253,7 +253,6 @@ define([
             options: {
                 branding: {},
                 headerCaption: 'Default Caption',
-                // headerDeveloper: 'DEVELOPER MODE',
                 documentCaption: '',
                 canBack: false
             },
@@ -273,7 +272,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;
@@ -408,10 +406,6 @@ define([
                 return this.canBack;
             },
 
-            setDeveloperMode: function (mode) {
-                // $('#header-developer').toggleClass('hidden', !mode);
-            },
-
             setCanRename: function (rename) {
                 // var dc = $('#header-documentcaption div');
                 // if (rename) {
@@ -456,7 +450,6 @@ define([
             },
 
             textBack: 'Go to Documents',
-            // txtHeaderDeveloper: 'DEVELOPER MODE',
             txtRename: 'Rename'
         }
     }(), Common.Views.Header || {}))

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

@@ -7,34 +7,6 @@
 //    cursor: pointer;
 //}
 
-//#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

@@ -181,6 +181,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;
         },
@@ -191,6 +193,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

@@ -974,6 +974,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();
 
                 if ( this.appOptions.isLightVersion ) {
                     this.appOptions.canUseHistory =
@@ -997,7 +998,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

@@ -352,6 +352,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',
@@ -360,6 +378,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

@@ -146,7 +146,7 @@
   "Common.Views.Header.textSaveChanged": "Modified",
   "Common.Views.Header.textSaveExpander": "All changes saved",
   "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.Header.txtAccessRights": "Change access rights",
   "Common.Views.Header.tipAccessRights": "Manage document access rights",
@@ -1091,6 +1091,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

@@ -62,3 +62,19 @@ button.notify .btn-menu-comments {background-position: -0*@toolbar-icon-size -60
     background-color: @gray-light;
     overflow: hidden;
 }
+
+#developer-hint {
+    position: absolute;
+    left: 0;
+    padding: 12px 0;
+    background-color: #ffb400;
+    color: #6e4e00 !important;
+    white-space: nowrap;
+    line-height: 20px;
+    writing-mode: vertical-rl;
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}