From 826ac6aef18c9b217c2d876cc5892aca1458ea2a Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 23 Jan 2018 20:35:16 +0300 Subject: [PATCH] new design changes --- apps/common/main/lib/view/Header.js | 8 ++++++ apps/common/main/resources/less/header.less | 25 ++++++++++++++++++- .../main/app/controller/Viewport.js | 12 +++++++-- .../main/app/template/Viewport.template | 3 +++ apps/documenteditor/main/app/view/Viewport.js | 12 +++++++-- .../main/resources/less/toolbar.less | 3 ++- .../main/app/controller/Viewport.js | 10 ++++++-- .../main/app/template/Viewport.template | 3 +++ .../main/app/view/Viewport.js | 18 +++++++++---- .../main/app/controller/Viewport.js | 12 ++++++--- .../main/app/template/Viewport.template | 3 +++ .../main/app/view/Viewport.js | 18 +++++++------ 12 files changed, 104 insertions(+), 23 deletions(-) diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index 42fdf831c..eca408c00 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -414,6 +414,14 @@ define([ $html.find('#slot-btn-back').hide(); this.labelDocName.hide(); + //TODO: for new design representation only + this.labelDocName = $('#box-document-title > #title-doc-name'); + this.labelDocName.text = function (str) {this.val(str);}; + this.labelDocName.text( this.documentCaption ); + + $('.toolbar-fullview-panel').addClass('new-doctitle-offset'); + /***********/ + if ( config.isOffline ) $saveStatus = false; } else { diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 67c665f3a..af24cab25 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -239,4 +239,27 @@ width: 20px; height: 20px; } -} \ No newline at end of file +} + +#box-document-title { + background-color: @tabs-bg-color; + + #title-doc-name { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; + font-size: 12px; + width: 100%; + height: 100%; + + color: #d3d9e3; + background-color: transparent; + border: 0 none; + cursor: default; + } +} + +.toolbar-fullview-panel.new-doctitle-offset { + top: @height-tabs + 26; +} diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index fe6907548..b34a955f8 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/apps/documenteditor/main/app/controller/Viewport.js @@ -75,7 +75,8 @@ define([ toolbar.setExtra('left', me.header.getPanel('left', config)); }, 'view:compact' : function (toolbar, state) { - me.viewport.vlayout.panels[0].height = state ? 32 : 32+67; + me.viewport.vlayout.getItem('toolbar').height = state ? + Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal'); } } }); @@ -113,11 +114,18 @@ define([ onAppShowed: function (config) { var me = this; + me.appConfig = config; if ( !config.isEdit || ( !Common.localStorage.itemExists("de-compact-toolbar") && config.customization && config.customization.compactToolbar )) { - me.viewport.vlayout.panels[0].height = 32; + + var panel = me.viewport.vlayout.getItem('toolbar'); + if ( panel ) panel.height = Common.Utils.InternalSettings.get('toolbar-height-compact'); + } + + if ( config.isDesktopApp ) { + me.viewport.vlayout.getItem('doc-title').el.show(); } }, diff --git a/apps/documenteditor/main/app/template/Viewport.template b/apps/documenteditor/main/app/template/Viewport.template index a0d2cb205..2535307dd 100644 --- a/apps/documenteditor/main/app/template/Viewport.template +++ b/apps/documenteditor/main/app/template/Viewport.template @@ -1,5 +1,8 @@
+
+ +
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js index b4547c48a..8c4b6ba1a 100644 --- a/apps/documenteditor/main/app/view/Viewport.js +++ b/apps/documenteditor/main/app/view/Viewport.js @@ -82,10 +82,18 @@ define([ var $container = $('#viewport-vbox-layout', this.$el); this.vlayout = new Common.UI.VBoxLayout({ box: $container, - items: [{ + items: [ + { + el: $container.find(' > .layout-item#box-document-title').hide(), + alias: 'doc-title', + height: Common.Utils.InternalSettings.get('doc-title-height') + }, + { el: $container.find(' > .layout-item#toolbar'), + alias: 'toolbar', // rely: true - height: Common.localStorage.getBool('de-compact-toolbar') ? 32 : 32+67 + height: Common.localStorage.getBool('de-compact-toolbar') ? + Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal') }, { el: $container.find(' > .layout-item.middle'), stretch: true diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index fd84706f4..2b1c918b5 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -1,5 +1,6 @@ -@tabs-bg-color: #4f6279; +//@tabs-bg-color: #4f6279; +@tabs-bg-color: #446995; #toolbar { //z-index: 101; diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js index 9d90c4485..c07ca3bec 100644 --- a/apps/presentationeditor/main/app/controller/Viewport.js +++ b/apps/presentationeditor/main/app/controller/Viewport.js @@ -76,7 +76,8 @@ define([ toolbar.setExtra('left', me.header.getPanel('left', config)); }, 'view:compact' : function (toolbar, state) { - me.viewport.vlayout.panels[0].height = state ? 32 : 32+67; + me.viewport.vlayout.getItem('toolbar').height = state ? + Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal'); } }, // Events generated by main view @@ -116,12 +117,17 @@ define([ onAppShowed: function (config) { var me = this; + me.appConfig = config; if ( !config.isEdit || ( !Common.localStorage.itemExists("pe-compact-toolbar") && config.customization && config.customization.compactToolbar )) { - me.viewport.vlayout.panels[0].height = 32; + me.viewport.vlayout.getItem('toolbar').height = Common.Utils.InternalSettings.get('toolbar-height-compact'); + } + + if ( config.isDesktopApp ) { + me.viewport.vlayout.getItem('doc-title').el.show(); } }, diff --git a/apps/presentationeditor/main/app/template/Viewport.template b/apps/presentationeditor/main/app/template/Viewport.template index 2a5121016..40c80aae5 100644 --- a/apps/presentationeditor/main/app/template/Viewport.template +++ b/apps/presentationeditor/main/app/template/Viewport.template @@ -4,6 +4,9 @@
+
+ +
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js index e1be9b2d2..20de5b753 100644 --- a/apps/presentationeditor/main/app/view/Viewport.js +++ b/apps/presentationeditor/main/app/view/Viewport.js @@ -85,14 +85,22 @@ define([ var items = $container.find(' > .layout-item'); this.vlayout = new Common.UI.VBoxLayout({ box: $container, - items: [{ - el: items[0], - height: Common.localStorage.getBool('pe-compact-toolbar') ? 32 : 32+67 - }, { + items: [ + { + el: $container.find(' > .layout-item#box-document-title').hide(), + alias: 'doc-title', + height: Common.Utils.InternalSettings.get('doc-title-height') + }, + { el: items[1], - stretch: true + alias: 'toolbar', + height: Common.localStorage.getBool('pe-compact-toolbar') ? + Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal') }, { el: items[2], + stretch: true + }, { + el: items[3], height: 25 }] }); diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index 3d2095fc1..412d34df2 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -74,7 +74,8 @@ define([ toolbar.setExtra('left', me.header.getPanel('left', config)); }, 'view:compact' : function (toolbar, state) { - me.viewport.vlayout.panels[0].height = state ? 32 : 32+67; + me.viewport.vlayout.getItem('toolbar').height = state ? + Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal'); } } }); @@ -88,15 +89,20 @@ define([ onAppShowed: function (config) { var me = this; + me.appConfig = config; if ( !config.isEdit || ( !Common.localStorage.itemExists("sse-compact-toolbar") && config.customization && config.customization.compactToolbar )) { - me.viewport.vlayout.panels[0].height = 32; + me.viewport.vlayout.getItem('toolbar').height = Common.Utils.InternalSettings.get('toolbar-height-compact'); } else if ( config.isEditDiagram || config.isEditMailMerge ) { - me.viewport.vlayout.panels[0].height = 41; + me.viewport.vlayout.getItem('toolbar').height = 41; + } + + if ( config.isDesktopApp ) { + me.viewport.vlayout.getItem('doc-title').el.show(); } }, diff --git a/apps/spreadsheeteditor/main/app/template/Viewport.template b/apps/spreadsheeteditor/main/app/template/Viewport.template index b6c6b4ce5..17a3911e8 100644 --- a/apps/spreadsheeteditor/main/app/template/Viewport.template +++ b/apps/spreadsheeteditor/main/app/template/Viewport.template @@ -1,5 +1,8 @@
+
+ +
diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js index 86c059741..499bd7b9e 100644 --- a/apps/spreadsheeteditor/main/app/view/Viewport.js +++ b/apps/spreadsheeteditor/main/app/view/Viewport.js @@ -87,16 +87,20 @@ define([ box: $container, items: [ { - // el: items[0], // decorative element for view mode for desktop - // height: 5 - // }, { - el: items[0], - height: Common.localStorage.getBool('sse-compact-toolbar') ? 32 : 32+67 - }, { + el: $container.find(' > .layout-item#box-document-title').hide(), + alias: 'doc-title', + height: Common.Utils.InternalSettings.get('doc-title-height') + }, + { el: items[1], - stretch: true + alias: 'toolbar', + height: Common.localStorage.getBool('sse-compact-toolbar') ? + Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal') }, { el: items[2], + stretch: true + }, { + el: items[3], height: 25 }] });