[DE] repaired header

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

@@ -50,214 +50,216 @@ define([
     'common/main/lib/view/RenameDialog'
 ], function (Backbone, headerTemplate) { 'use strict';
 
-    Common.Views.Header =  Backbone.View.extend(_.extend({
+    Common.Views.Header =  Backbone.View.extend(_.extend(function(){
-        options : {
+        var templateR = '<section>' +
-            branding: {},
+                            '<label id="doc-name"></label>' +
-            headerCaption: 'Default Caption',
+                            '<div class="elset">' +
-            headerDeveloper: 'DEVELOPER MODE',
+                                '<span class="btn-slot split" id="slot-btn-back"></span>' +
-            documentCaption: '',
+                                '<span class="btn-slot" id="slot-btn-users"></span>' +
-            canBack: false
+                            '</div>' +
-        },
+                        '</section>';
 
-        el: '#header',
+        var templateL = '<section>' +
+                            '<div id="header-logo"></div>'
+                        '</section>';
+        return {
+            options: {
+                branding: {},
+                headerCaption: 'Default Caption',
+                // headerDeveloper: 'DEVELOPER MODE',
+                documentCaption: '',
+                canBack: false
+            },
 
-        // Compile our stats template
+            el: '#header',
-        template: _.template(headerTemplate),
 
-        // Delegated events for creating new items, and clearing completed ones.
+            // Compile our stats template
-        events: {
+            template: _.template(headerTemplate),
-            'click #header-logo': function(e) {
-                var _url = !!this.branding && !!this.branding.logo && !!this.branding.logo.url ?
-                                this.branding.logo.url : 'http://www.onlyoffice.com';
 
-                var newDocumentPage = window.open(_url);
+            // Delegated events for creating new items, and clearing completed ones.
-                newDocumentPage && newDocumentPage.focus();
+            events: {
-            }
+                // 'click #header-logo': function (e) {}
-        },
+            },
 
-        initialize: function (options) {
+            initialize: function (options) {
-            this.options = this.options ? _({}).extend(this.options, options) : options;
+                var me = this;
+                this.options = this.options ? _({}).extend(this.options, options) : options;
 
-            this.headerCaption      = this.options.headerCaption;
+                this.headerCaption = this.options.headerCaption;
-            this.headerDeveloper    = this.txtHeaderDeveloper;
+                // this.headerDeveloper = this.txtHeaderDeveloper;
-            this.documentCaption    = this.options.documentCaption;
+                this.documentCaption = this.options.documentCaption;
-            this.canBack            = this.options.canBack;
+                this.canBack = this.options.canBack;
-            this.branding           = this.options.customization;
+                this.branding = this.options.customization;
-        },
 
-        render: function () {
+                me.btnGoBack = new Common.UI.Button({
-            $(this.el).html(this.template({
+                    id: 'btn-goback',
-                headerCaption   : this.headerCaption,
+                    cls: 'btn-toolbar',
-                headerDeveloper   : this.headerDeveloper,
+                    iconCls: 'img-commonctrl review-prev',
-                documentCaption : Common.Utils.String.htmlEncode(this.documentCaption),
+                    split: true,
-                canBack         : this.canBack,
+                    menu: new Common.UI.Menu({
-                textBack        : this.textBack
+                        style: 'min-width: 60px;',
-            }));
+                        items: [
+                            {caption: me.openNewTabText}
+                        ]
+                    })
+                });
 
-            var menuNewTab = new Common.UI.MenuItem({
+                me.btnUsers = new Common.UI.Button({
-                caption     : this.openNewTabText
+                    cls: 'btn-toolbar',
-            }).on('click', function(item, e) {
+                    iconCls: 'img-commonctrl review-next'
-                Common.NotificationCenter.trigger('goback', true);
+                });
-                Common.component.Analytics.trackEvent('Back to Folder');
-            });
-            this.gotoDocsMenu = new Common.UI.Menu({
-                style: 'min-width: 100px;',
-                items: [
-                    menuNewTab
-                ]
-            });
-        },
 
-        setVisible: function(visible) {
+                (new Promise(function (accept, reject) {
-            visible
+                    Common.NotificationCenter.on('app:ready', function() { accept(); });
-                ? this.show()
+                })).then(function(){
-                : this.hide();
+                    me.btnGoBack.updateHint(me.textBack);
-        },
+                    me.btnUsers.updateHint('Users');
 
-        setBranding: function(value) {
+                    me.btnGoBack.on('click', function (e) {
-            var element;
+                        me.fireEvent('go:back', ['page:current']);
+                    });
+                    me.btnGoBack.menu.on('item:click', function (e) {
+                        me.fireEvent('go:back', ['page:new']);
+                    })
 
-            this.branding = value;
+                    me.logo.on('click', function (e) {
+                        var _url = !!this.branding && !!this.branding.logo && !!this.branding.logo.url ?
+                                        this.branding.logo.url : 'http://www.onlyoffice.com';
 
-            if (value && value.logo && value.logo.image) {
+                        var newDocumentPage = window.open(_url);
-                element = $('#header-logo');
+                        newDocumentPage && newDocumentPage.focus();
-                if (element) {
+                    })
-                    element.html('<img src="'+value.logo.image+'" style="max-width:86px; max-height:20px; margin: 0 8px 0 15px;"/>');
+                });
-                    element.css({'background-image': 'none', width: 'auto'});
+            },
-                }
-            }
 
-//            if (value && value.backgroundColor) {
+            render: function (el, role) {
-//                element = Ext.select(".common-header");
+                $(el).html(this.getPanel(role));
-//                if (element) {
-//                    element.setStyle("background-image", "none");
-//                    element.setStyle("background-color", value.backgroundColor);
-//                }
-//            }
-//
-//            if (value && value.textColor) {
-//                var allSpanEl = element.select('span');
-//                allSpanEl.each(function(el){
-//                    el.setStyle("color", value.textColor);
-//                });
-//            }
-        },
 
-        setHeaderCaption: function(value) {
+                return this;
-            this.headerCaption = value;
+            },
 
-            var caption = $('#header-caption > div');
+            getPanel: function (role) {
+                if ( role == 'left' ) {
+                    $html = $(templateL);
+                    this.logo = $html.find('#header-logo');
+                    return $html;
+                } else
+                if ( role == 'right' ) {
+                    var $html = $(templateR);
 
-            if (caption)
+                    if ( this.canBack === true ) {
-                caption.html(value);
+                        this.btnGoBack.render($html.find('#slot-btn-back'));
-
+                        this.btnUsers.render($html.find('#slot-btn-users'));
-            return value;
-        },
-
-        getHeaderCaption: function() {
-            return this.headerCaption;
-        },
-
-        setDocumentCaption: function(value, applyOnly) {
-            if (_.isUndefined(applyOnly)) {
-                this.documentCaption = value;
-            }
-
-            if (!value)
-                value = '';
-
-            var dc = $('#header-documentcaption div');
-            if (dc)
-                dc.html(Common.Utils.String.htmlEncode(value));
-
-            return value;
-        },
-
-        getDocumentCaption: function() {
-            return this.documentCaption;
-        },
-
-        setCanBack: function(value) {
-            this.canBack = value;
-            var back = $('#header-back');
-
-            if (back) {
-                back.off('mouseup');
-                back.css('display', value ? 'table-cell' : 'none');
-
-                if (value)
-                    back.on('mouseup', _.bind(this.onBackClick, this));
-            }
-        },
-
-        getCanBack: function() {
-            return this.canBack;
-        },
-
-        onBackClick: function(e) {
-            if (e.which == 3) { // right button click
-                Common.UI.Menu.Manager.hideAll();
-                var me = this,
-                    showPoint = [e.pageX*Common.Utils.zoom(), e.pageY*Common.Utils.zoom()],
-                    menuContainer = $(this.el).find(Common.Utils.String.format('#menu-container-{0}',  this.gotoDocsMenu.id));
-                if (!this.gotoDocsMenu.rendered) {
-                    // Prepare menu container
-                    if (menuContainer.length < 1) {
-                        menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', this.gotoDocsMenu.id));
-                        $(this.el).append(menuContainer);
                     }
 
-                    this.gotoDocsMenu.render(menuContainer);
+                    if ( this.documentCaption ) {
-                    this.gotoDocsMenu.cmpEl.attr({tabindex: "-1"});
+                        $html.find('#doc-name').html(
+                            Common.Utils.String.htmlEncode(this.documentCaption) );
+                    }
+
+                    this.labelDocName = $html.find('#doc-name');
+
+                    return $html;
                 }
-                _.delay(function(){
+            },
-                     menuContainer.css({
-                        left: showPoint[0] - me.gotoDocsMenu.cmpEl.width(),
-                        top : showPoint[1] + 3
-                    });
-                    me.gotoDocsMenu.show();
-                },10);
-            } else {
-                Common.NotificationCenter.trigger('goback', e.which == 2);
-                Common.component.Analytics.trackEvent('Back to Folder');
-            }
-        },
 
-        setDeveloperMode: function(mode) {
+            setVisible: function (visible) {
-            $('#header-developer').toggleClass('hidden', !mode);
+                // visible
-        },
+                //     ? this.show()
+                //     : this.hide();
+            },
 
-        setCanRename: function(rename) {
+            setBranding: function (value) {
-            var dc = $('#header-documentcaption div');
+                var element;
-            if (rename) {
+
-                var me = this;
+                this.branding = value;
-                dc.tooltip({title: me.txtRename, placement: 'cursor'});
+
-                dc.on('click', function(e) {
+                if (value && value.logo && value.logo.image) {
-                    (new Common.Views.RenameDialog({
+                    element = $('#header-logo');
-                        filename: me.documentCaption,
+                    if ( element ) {
-                        handler: function(result, value) {
+                        element.html('<img src="' + value.logo.image + '" style="max-width:86px; max-height:42px; margin: 0 8px 0 15px;"/>');
-                            if (result == 'ok' && !_.isEmpty(value.trim()) && me.documentCaption !== value.trim()) {
+                        element.css({'background-image': 'none', width: 'auto'});
-                                Common.Gateway.requestRename(value);
+                    }
-                            }
-                            Common.NotificationCenter.trigger('edit:complete', me);
-                        }
-                    })).show(dc.position().left-1, 20);
-                });
-            } else {
-                var tip = dc.data('bs.tooltip');
-                if (tip) {
-                    tip.options.title = '';
-                    tip.setContent();
                 }
-                dc.off('click');
+            },
-            }
-            dc.css('cursor', rename ? 'pointer' : 'default');
-            dc.toggleClass('renamed', rename);
-        },
 
-        textBack: 'Go to Documents',
+            setHeaderCaption: function (value) {
-        openNewTabText: 'Open in New Tab',
+                this.headerCaption = value;
-        txtHeaderDeveloper: 'DEVELOPER MODE',
+
-        txtRename: 'Rename'
+                return value;
-    }, Common.Views.Header || {}))
+            },
+
+            getHeaderCaption: function () {
+                return this.headerCaption;
+            },
+
+            setDocumentCaption: function (value, applyOnly) {
+                !value && (value = '');
+
+                this.documentCaption = value;
+                if ( this.labelDocName )
+                    this.labelDocName.html(Common.Utils.String.htmlEncode(value));
+
+                return value;
+            },
+
+            getDocumentCaption: function () {
+                return this.documentCaption;
+            },
+
+            setDocumentChanged: function (changed) {
+                var _name = Common.Utils.String.htmlEncode(this.documentCaption);
+                changed && (_name += '*');
+
+                this.labelDocName.html(_name);
+            },
+
+            setCanBack: function (value) {
+                this.canBack = value;
+
+                this.btnGoBack[value ? 'show' : 'hide']();
+            },
+
+            getCanBack: function () {
+                return this.canBack;
+            },
+
+            setDeveloperMode: function (mode) {
+                // $('#header-developer').toggleClass('hidden', !mode);
+            },
+
+            setCanRename: function (rename) {
+                // var dc = $('#header-documentcaption div');
+                // if (rename) {
+                //     var me = this;
+                //     dc.tooltip({title: me.txtRename, placement: 'cursor'});
+                //     dc.on('click', function (e) {
+                //         (new Common.Views.RenameDialog({
+                //             filename: me.documentCaption,
+                //             handler: function (result, value) {
+                //                 if (result == 'ok' && !_.isEmpty(value.trim()) && me.documentCaption !== value.trim()) {
+                //                     Common.Gateway.requestRename(value);
+                //                 }
+                //                 Common.NotificationCenter.trigger('edit:complete', me);
+                //             }
+                //         })).show(dc.position().left - 1, 20);
+                //     });
+                // } else {
+                //     var tip = dc.data('bs.tooltip');
+                //     if (tip) {
+                //         tip.options.title = '';
+                //         tip.setContent();
+                //     }
+                //     dc.off('click');
+                // }
+                // dc.css('cursor', rename ? 'pointer' : 'default');
+                // dc.toggleClass('renamed', rename);
+            },
+
+            textBack: 'Go to Documents',
+            openNewTabText: 'Open in New Tab',
+            // txtHeaderDeveloper: 'DEVELOPER MODE',
+            txtRename: 'Rename'
+        }
+    }(), Common.Views.Header || {}))
 });

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

@@ -1,118 +1,89 @@
-#header-container {
+//#header-logo {
-    height: @app-header-height;
+//    background-color: @app-header-bg-color-dark;
-    display: table;
+//    min-width: 15px + 90px + 5px;
+//    .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
+//    background-repeat: no-repeat;
+//    background-position: 15px center;
+//    cursor: pointer;
+//}
 
-    & > div {
+//#header-developer {
-        display: table-cell;
+//    background-color: #ffb400;
-        height: @app-header-height;
+//    padding-left: 15px + @app-header-height / 3;
-        white-space: nowrap;
+//    & > div {
-        vertical-align: middle;
+//        position: relative;
-        color: #fff;
+//        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-logo {
+//#header-documentcaption {
-    background-color: @app-header-bg-color-dark;
+//    width: 100%;
-    min-width: 15px + 90px + 5px;
+//    max-width: 100px;
-    .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px);
+//    overflow: hidden;
-    background-repeat: no-repeat;
+//    text-overflow: ellipsis;
-    background-position: 15px center;
+//    background-color: @app-header-bg-color;
-    cursor: pointer;
+//    padding: 0 7px + @app-header-height / 3;
-}
+//    cursor: default;
+//
+//    div {
+//        display: inline-block;
+//        padding: 2px 8px;
+//
+//        &.renamed:hover {
+//            background-color: @app-header-bg-color-dark;
+//        }
+//    }
+//}
 
-#header-caption {
+.toolbar {
-    & > div {
+    .extra {
-        position: relative;
+        .elset:not(:first-child) {
-        background-color: @app-header-bg-color-dark;
+            margin-top: 0;
-        color: lighten(@app-header-bg-color-light, 20%) !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 @app-header-bg-color-dark;
-            border-bottom: @app-header-height / 2 solid transparent;
         }
     }
 }
-
+.extra {
-#header-developer {
+    > section {
-    background-color: #ffb400;
+        line-height: 20px;
-    padding-left: 15px + @app-header-height / 3;
+        height: 100%;
-    & > div {
+        display: flex;
-        position: relative;
+        align-items: center;
-        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 {
+    &.left {
-    width: 100%;
+        min-width: 150px;
-    max-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background-color: @app-header-bg-color;
-    padding: 0 7px + @app-header-height / 3;
-    cursor: default;
-
-    div {
-        display: inline-block;
-        padding: 2px 8px;
-
-        &.renamed:hover {
-            background-color: @app-header-bg-color-dark;
-        }
     }
-}
 
-#header-back {
+    #doc-name {
-    & > div {
+        flex-grow: 1;
-        position: relative;
+    }
-        background-color: @app-header-bg-color-light;
+
-        padding: 0 15px 0 15px + @app-header-height / 3;
+    #header-logo {
+        width: 100%;
+        height: 100%;
         cursor: pointer;
-        white-space: nowrap;
-        height: @app-header-height;
-        line-height: @app-header-height - 2px;
 
-        &:after {
+        .background-ximage('@{app-image-path}/logo.png', '@{app-image-path}/logo.png', 240px);
-            content: '';
+        background-size: contain;
-            position: absolute;
+        background-repeat: no-repeat;
-            top: 0;
-            left: 0;
-            width: @app-header-height / 2;
-            height: @app-header-height;
-            border-top: @app-header-height / 2 solid transparent;
-            border-left: @app-header-height / 3 solid @app-header-bg-color;
-            border-bottom: @app-header-height / 2 solid transparent;
-        }
     }
 }

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

@@ -1041,19 +1041,19 @@ define([
             applyModeCommonElements: function() {
                 window.editor_elements_prepared = true;
 
-                var value = Common.localStorage.getItem("de-hidden-title");
+                // var value = Common.localStorage.getItem("de-hidden-title");
-                    value = this.appOptions.isEdit && (value!==null && parseInt(value) == 1);
+                //     value = this.appOptions.isEdit && (value!==null && parseInt(value) == 1);
 
                 var app             = this.getApplication(),
                     viewport        = app.getController('Viewport').getView('Viewport'),
-                    headerView      = app.getController('Viewport').getView('Common.Views.Header'),
+                    // headerView      = app.getController('Viewport').getView('Common.Views.Header'),
                     statusbarView   = app.getController('Statusbar').getView('Statusbar'),
                     documentHolder  = app.getController('DocumentHolder').getView('DocumentHolder');
 
-                if (headerView) {
+                // if (headerView) {
-                    headerView.setHeaderCaption(this.appOptions.isEdit ? 'Document Editor' : 'Document Viewer');
+                    // headerView.setHeaderCaption(this.appOptions.isEdit ? 'Document Editor' : 'Document Viewer');
-                    headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp);
+                    // headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp);
-                }
+                // }
 
                 if (this.appOptions.nativeApp) {
                     $('body').removeClass('safari');
@@ -1388,10 +1388,10 @@ define([
                     if (isModified) {
                         if (!_.isUndefined(title) && (!this._state.fastCoauth || this._state.usersCount<2 )) {
                             title = '* ' + title;
-                            headerView.setDocumentCaption(headerView.getDocumentCaption() + '*', true);
+                            headerView.setDocumentChanged(true);
                         }
                     } else {
-                        headerView.setDocumentCaption(headerView.getDocumentCaption());
+                        headerView.setDocumentChanged(false);
                     }
 
                     if (window.document.title != title)

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

@@ -65,6 +65,22 @@ define([
         // When controller is created let's setup view event listeners
         initialize: function() {
             // This most important part when we will tell our controller what events should be handled
+
+            var me = this;
+            this.addListeners({
+                'Toolbar': {
+                    'render:before' : function (toolbar) {
+                        toolbar.setExtra('right', me.header.getPanel('right'));
+                        toolbar.setExtra('left', me.header.getPanel('left'));
+                    }
+                },
+                'Common.Views.Header': {
+                    'go:back': function (opts) {
+                        Common.NotificationCenter.trigger('goback', /new/.test(opts));
+                        // Common.component.Analytics.trackEvent('Back to Folder');
+                    }
+                }
+            });
         },
 
         setApi: function(api) {
@@ -78,7 +94,7 @@ define([
             this.viewport = this.createView('Viewport').render();
             this.header   = this.createView('Common.Views.Header', {
                 headerCaption: 'Document Editor'
-            }).render();
+            });
 
             Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
             $(window).on('resize', _.bind(this.onWindowResize, this));

apps/documenteditor/main/app/template/Toolbar.template

@@ -17,7 +17,8 @@
                 <i class="icon">&gt;</i>
             </a>
         </section>
-        <div class="extra right">SomeDocument.docx</div>
+        <div class="extra right">
+        </div>
     </div>
     <section class="box-controls">
         <section class="panel">

apps/documenteditor/main/app/template/Viewport.template

@@ -1,8 +1,7 @@
 <div class="layout-region">
     <div id="viewport-vbox-layout" class="layout-ct vbox">
-        <div id="header" class="layout-item"></div>
         <div id="toolbar" class="layout-item"></div>
-        <div class="layout-item">
+        <div class="layout-item middle">
             <div id="viewport-hbox-layout" class="layout-ct hbox">
                 <div id="left-menu" class="layout-item" style="width: 40px;"></div>
                 <div id="file-menu-panel" class="left-menu-full-ct" style="display:none;"></div>

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

@@ -1290,7 +1290,7 @@ define([
                  * Render UI layout
                  */
 
-                this.trigger('render:before', this);
+                this.fireEvent('render:before', [this]);
 
                 var top = Common.localStorage.getItem("de-pgmargins-top"),
                     left = Common.localStorage.getItem("de-pgmargins-left"),
@@ -1311,7 +1311,7 @@ define([
 
                 me.isCompactView = valueCompact;
 
-                this.trigger('render:after', this);
+                this.fireEvent('render:after', [this]);
 
                 /** coauthoring begin **/
                 value = Common.localStorage.getItem("de-hide-synch");
@@ -2371,6 +2371,18 @@ define([
                 setFolded.call(this, f);
             },
 
+            setExtra: function (place, el) {
+                if ( $tabs ) {
+                } else {
+                    if ( place == 'right' ) {
+                        config.$dom.find('.extra.right').html(el);
+                    } else
+                    if ( place == 'left' ) {
+                        config.$dom.find('.extra.left').html(el);
+                    }
+                }
+            },
+
             textBold: 'Bold',
             textItalic: 'Italic',
             textUnderline: 'Underline',

apps/documenteditor/main/resources/less/variables.less

@@ -12,10 +12,3 @@
 
 @brand-active:          @blue-dark;
 @brand-active-light:    @blue-light;
-
-// Header
-// -------------------------
-@app-header-height:         20px;
-@app-header-bg-color:       @blue;
-@app-header-bg-color-dark:  @blue-dark;
-@app-header-bg-color-light: @blue-light;