From d9858934d0056ffdd814dd2c8120401c6762b192 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 15 Feb 2017 16:45:25 +0300 Subject: [PATCH] [DE] toolbar's new layout --- .../main/app/template/Toolbar.template | 351 ++++++++---------- apps/documenteditor/main/app/view/Toolbar.js | 206 +++++----- .../main/resources/less/toolbar.less | 151 +++++++- 3 files changed, 415 insertions(+), 293 deletions(-) diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index 6a71a0ac4..92723424a 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -1,206 +1,155 @@ -
- - - -
-
-
- - -
-
-
-
-
- - -
-
-
-
-
- - -
-
-
-
- - - - - -
-
-
-
-
- - - - -
-
-
-
-
- - - - -
-
-
-
-
- - - - - - - -
-
-
-
-
- -
-
-
-
-
-
- +
+
+
+
+ + < + + + + > + +
+
+
SomeDocument.docx
+
+
+
+
+
+ +
+
+
-
-
- - - -
-
-
- +
+
+ +
+
+ +
-
- +
+
+
+ + +
+
+ + +
-
-
-
- -
-
- -
-
-
-
-
- - -
-
- - -
-
-
-
-
- - - - -
-
- - - - - - - - - -
-
-
-
-
- - - - - - -
-
- - - - - -
-
-
-
-
- - - - - - -
-
- - - - - -
-
-
-
-
- - -
-
- - -
-
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
+
+ +
+
+
+
+ + + + +
+
+ + + + + + + + + +
+
+
+
+
+ + + + + + +
+
+ + + + + +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ + + + + + +
+
+ + + + + +
+
+
+
+
+
+ + +
+
+ + +
+
+
+
review panel
+
plugins panel
+
+
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 474884217..445b2ef57 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -35,8 +35,8 @@ * * Toolbar view * - * Created by Alexander Yuzhin on 1/9/14 - * Copyright (c) 2014 Ascensio System SIA. All rights reserved. + * Created by Maxim.Kadushkin on 2/13/17 + * Copyright (c) 2017 Ascensio System SIA. All rights reserved. * */ @@ -56,18 +56,15 @@ define([ 'common/main/lib/component/Window', 'common/main/lib/component/ComboBoxFonts', 'common/main/lib/component/ComboDataView' - /** coauthoring begin **/ ,'common/main/lib/component/SynchronizeTip' - /** coauthoring end **/ - -], function ($, _, Backbone, toolbarTemplate) { +], function ($, _, Backbone, template) { 'use strict'; DE.Views.Toolbar = Backbone.View.extend(_.extend({ el: '#toolbar', // Compile our stats template - template: _.template(toolbarTemplate), + template: _.template(template), // Delegated events for creating new items, and clearing completed ones. events: { @@ -985,22 +982,41 @@ define([ left = Common.localStorage.getItem("de-pgmargins-left"), bottom = Common.localStorage.getItem("de-pgmargins-bottom"), right = Common.localStorage.getItem("de-pgmargins-right"); - if (top!==null && left!==null && bottom!==null && right!==null) { - var mnu = this.btnPageMargins.menu.items[0]; - mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)]; - mnu.setVisible(true); - $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options})); - } else - this.btnPageMargins.menu.items[0].setVisible(false); + // if (top!==null && left!==null && bottom!==null && right!==null) { + // var mnu = this.btnPageMargins.menu.items[0]; + // mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)]; + // mnu.setVisible(true); + // $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options})); + // } else + // this.btnPageMargins.menu.items[0].setVisible(false); var value = Common.localStorage.getItem("de-compact-toolbar"); var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar); - me.$el.html(this.template({ - isCompactView: valueCompact - })); + var _tpl_ = this.template({ + tabs: [{ + caption: 'File', + action: 'file' + }, { + caption: 'Home', + action: 'home' + }, { + caption: 'Insert', + action: 'ins' + }, { + caption: 'Page Layout', + action: 'layout' + }, { + caption: 'Review', + action: 'review' + }, { + caption: 'Plugins', + action: 'plugins' + }] + }); + + me.$el.html( me.rendererComponents(_tpl_) ); - me.rendererComponents(valueCompact ? 'short' : 'full'); me.isCompactView = valueCompact; this.trigger('render:after', this); @@ -1011,81 +1027,95 @@ define([ this.needShowSynchTip = false; /** coauthoring end **/ + var $tabs = me.$el.find('.tabs > ul a'); + var $panels = me.$el.find('.box-panels > .panel'); + $tabs.on('click', function (e) { + $tabs.parent().removeClass('active'); + $panels.removeClass('active'); + + var tab = $(e.target).data('tab'); + if ( tab !== 'file' ) { + $panels.filter('[data-tab='+tab+']').addClass('active'); + } + + var $tp = $(e.target.parentNode); + $tp.addClass('active'); + + $marker.width($tp.width()); + $marker.css({left: $tp.position().left}); + }); + + var $marker = me.$el.find('.tabs .marker'); + return this; }, - rendererComponents: function(mode) { - var prefix = (mode === 'short') ? 'short' : 'full'; - - var replacePlacholder = function(id, cmp) { - var placeholderEl = $(id), - placeholderDom = placeholderEl.get(0); - - if (placeholderDom) { - if (cmp.rendered) { - cmp.el = document.getElementById(cmp.id); - placeholderDom.appendChild(document.getElementById(cmp.id)); - } else { - cmp.render(placeholderEl); - } + rendererComponents: function(html) { + var $host = $(html); + var _injectComponent = function(id, cmp) { + var $slot = $host.find(id); + if ( $slot.length ) { + cmp.rendered ? + $slot.append(cmp.$el) : cmp.render($slot); } }; - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-newdocument', this.btnNewDocument); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-opendocument', this.btnOpenDocument); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontname', this.cmbFontName); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontsize', this.cmbFontSize); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-print', this.btnPrint); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-save', this.btnSave); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-undo', this.btnUndo); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-redo', this.btnRedo); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copy', this.btnCopy); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-paste', this.btnPaste); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incfont', this.btnIncFontSize); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decfont', this.btnDecFontSize); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-bold', this.btnBold); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-italic', this.btnItalic); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-underline', this.btnUnderline); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-strikeout', this.btnStrikeout); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-superscript', this.btnSuperscript); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-subscript', this.btnSubscript); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-highlight', this.btnHighlightColor); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-fontcolor', this.btnFontColor); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-left', this.btnAlignLeft); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-center', this.btnAlignCenter); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-right', this.btnAlignRight); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-just', this.btnAlignJust); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incoffset', this.btnIncLeftOffset); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decoffset', this.btnDecLeftOffset); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-linespace', this.btnLineSpace); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidenchars', this.btnShowHidenChars); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-markers', this.btnMarkers); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-numbering', this.btnNumbers); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-multilevels', this.btnMultilevels); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttable', this.btnInsertTable); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertimage', this.btnInsertImage); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertchart', this.btnInsertChart); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttext', this.btnInsertText); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-dropcap', this.btnDropCap); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-columns', this.btnColumns); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagebreak', this.btnInsertPageBreak); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserthyperlink',this.btnInsertHyperlink); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-editheader', this.btnEditHeader); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertshape', this.btnInsertShape); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertequation', this.btnInsertEquation); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pageorient', this.btnPageOrient); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagemargins', this.btnPageMargins); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagesize', this.btnPageSize); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-clearstyle', this.btnClearStyle); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copystyle', this.btnCopyStyle); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-colorschemas', this.btnColorSchemas); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidebars', this.btnHide); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-settings', this.btnAdvSettings); - replacePlacholder('#id-toolbar-full-placeholder-btn-paracolor', this.btnParagraphColor); - replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listStyles); - replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign); - replacePlacholder('#id-toolbar-full-placeholder-btn-mailrecepients', this.btnMailRecepients); - replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-notes', this.btnNotes); + _injectComponent('#slot-btn-newdocument', this.btnNewDocument); + _injectComponent('#slot-btn-opendocument', this.btnOpenDocument); + _injectComponent('#slot-field-fontname', this.cmbFontName); + _injectComponent('#slot-field-fontsize', this.cmbFontSize); + _injectComponent('#slot-btn-print', this.btnPrint); + _injectComponent('#slot-btn-save', this.btnSave); + _injectComponent('#slot-btn-undo', this.btnUndo); + _injectComponent('#slot-btn-redo', this.btnRedo); + _injectComponent('#slot-btn-copy', this.btnCopy); + _injectComponent('#slot-btn-paste', this.btnPaste); + _injectComponent('#slot-btn-incfont', this.btnIncFontSize); + _injectComponent('#slot-btn-decfont', this.btnDecFontSize); + _injectComponent('#slot-btn-bold', this.btnBold); + _injectComponent('#slot-btn-italic', this.btnItalic); + _injectComponent('#slot-btn-underline', this.btnUnderline); + _injectComponent('#slot-btn-strikeout', this.btnStrikeout); + _injectComponent('#slot-btn-superscript', this.btnSuperscript); + _injectComponent('#slot-btn-subscript', this.btnSubscript); + _injectComponent('#slot-btn-highlight', this.btnHighlightColor); + _injectComponent('#slot-btn-fontcolor', this.btnFontColor); + _injectComponent('#slot-btn-align-left', this.btnAlignLeft); + _injectComponent('#slot-btn-align-center', this.btnAlignCenter); + _injectComponent('#slot-btn-align-right', this.btnAlignRight); + _injectComponent('#slot-btn-align-just', this.btnAlignJust); + _injectComponent('#slot-btn-incoffset', this.btnIncLeftOffset); + _injectComponent('#slot-btn-decoffset', this.btnDecLeftOffset); + _injectComponent('#slot-btn-linespace', this.btnLineSpace); + _injectComponent('#slot-btn-hidenchars', this.btnShowHidenChars); + _injectComponent('#slot-btn-markers', this.btnMarkers); + _injectComponent('#slot-btn-numbering', this.btnNumbers); + _injectComponent('#slot-btn-multilevels', this.btnMultilevels); + _injectComponent('#slot-btn-instable', this.btnInsertTable); + _injectComponent('#slot-btn-insimage', this.btnInsertImage); + _injectComponent('#slot-btn-inschart', this.btnInsertChart); + _injectComponent('#slot-btn-instext', this.btnInsertText); + _injectComponent('#slot-btn-dropcap', this.btnDropCap); + _injectComponent('#slot-btn-columns', this.btnColumns); + _injectComponent('#slot-btn-pagebreak', this.btnInsertPageBreak); + _injectComponent('#slot-btn-inshyperlink',this.btnInsertHyperlink); + _injectComponent('#slot-btn-editheader', this.btnEditHeader); + _injectComponent('#slot-btn-insshape', this.btnInsertShape); + _injectComponent('#slot-btn-insequation', this.btnInsertEquation); + _injectComponent('#slot-btn-pageorient', this.btnPageOrient); + _injectComponent('#slot-btn-pagemargins', this.btnPageMargins); + _injectComponent('#slot-btn-pagesize', this.btnPageSize); + _injectComponent('#slot-btn-clearstyle', this.btnClearStyle); + _injectComponent('#slot-btn-copystyle', this.btnCopyStyle); + _injectComponent('#slot-btn-colorschemas', this.btnColorSchemas); + _injectComponent('#slot-btn-hidebars', this.btnHide); + _injectComponent('#slot-btn-settings', this.btnAdvSettings); + _injectComponent('#slot-btn-paracolor', this.btnParagraphColor); + _injectComponent('#slot-field-styles', this.listStyles); + _injectComponent('#slot-btn-halign', this.btnHorizontalAlign); + _injectComponent('#slot-btn-mailrecepients', this.btnMailRecepients); + _injectComponent('#slot-btn-notes', this.btnNotes); + return $host; }, createDelayedElements: function() { @@ -1566,7 +1596,7 @@ define([ this.mode = mode; if (!mode.nativeApp) { - var nativeBtnGroup = $('.toolbar-group-native'); + var nativeBtnGroup = this.$el.find('.group.native'); if (nativeBtnGroup) { nativeBtnGroup.hide(); diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 44cda7f91..86d3ffb61 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -1,9 +1,123 @@ +@height-tabs: 42px; +@height-controls: 67px; + .toolbar { - padding: 10px 0; + height: @height-tabs + @height-controls; + + .box-tabs { + height: @height-tabs; + + display: flex; + align-items: stretch; + + .tabs { + flex-grow: 1; + background-color: #d0ddb6; + position: relative; + overflow: hidden; + display: flex; + } + + ul { + padding: 0; + margin: 0; + height: 100%; + white-space: nowrap; + overflow: hidden; + flex-grow: 1; + } + + li { + display: inline-block; + + > a { + display: inline-block; + line-height: @height-tabs; + padding: 0 10px; + text-decoration: none; + cursor: default; + font-size: 14px; + text-align: center; + + &::after { + display: block; + content: attr(title); + font-weight: bold; + height: 1px; + overflow: hidden; + visibility: hidden; + } + + } + + &.active { + > a { + font-weight: bold; + } + } + } + + .marker { + position: absolute; + border-top: 3px solid green; + bottom: 0; + -webkit-transition: width .2s, left .2s ease-out; + transition: width .2s, left .2s ease-out; + } + + .link { + line-height: @height-tabs; + min-width: 20px; + text-align: center; + } + + .extra { + &.left { + //display: inline-block; + //float: left; + min-width: 240px; + height: 42px; + .background-ximage('@{common-image-path}/about/OnlyOffice.png', '@{common-image-path}/about/OnlyOffice@2x.png', 240px); + background-size: contain; + background-repeat: no-repeat; + + background-color: #98ddda; + } + + &.right { + min-width: 350px; + line-height: @height-tabs; + + background-color: #98ddda; + } + } + } + + .box-controls { + height: @height-controls; + padding: 10px 0; + display: flex; + + //background-color: #F2CBBF; + + .panel { + display: table; + height: 100%; + } + //width: 100%; + } + + .box-panels { + .panel:not(.active) { + display: none; + } + } + //padding: 10px 0; + background-color: @gray-light; .box-inner-shadow(0 -1px 0 @gray-dark); - .toolbar-group { + .toolbar-group, .group { display: table-cell; vertical-align: top; white-space: nowrap; @@ -14,7 +128,12 @@ } } - .toolbar-row { + .group { + //background-color: #a9f261; + vertical-align: middle; + } + + .toolbar-row, .elset { height: 20px; font-size: 0; @@ -23,6 +142,10 @@ } } + .elset { + //background-color: #f2f254; + } + .separator { margin-left: 12px; @@ -35,7 +158,7 @@ } } - .btn-placeholder { + .btn-slot { // background-color: red; display: inline-block; width: 20px; @@ -437,3 +560,23 @@ background-position: @plus-offset-x @plus-offset-y - 16; } } + +#slot-field-fontname { + float: left; + width: 165px; +} + +#slot-field-fontsize { + float: left; + width: 45px; + margin-left: 2px; +} + +#slot-btn-incfont, #slot-btn-decfont { + margin-left: 2px; +} + +#slot-field-styles { + width: 100%; + min-width: 160px; +} \ No newline at end of file