diff --git a/apps/common/main/resources/less/colors-table-white.less b/apps/common/main/resources/less/colors-table-white.less index d3dfaa3f6d..36a78096d3 100644 --- a/apps/common/main/resources/less/colors-table-white.less +++ b/apps/common/main/resources/less/colors-table-white.less @@ -316,6 +316,11 @@ --header-component-margin: 0 6px; --header-component-align: center; + --toolbar-simple-border-bottom: 0 none; + --toolbar-simple-shadow: var(--shadow-toolbar, none); + --toolbar-simple-content-padding-top: 3px; + --layout-padding-hor-toolbar-simple: 5px; + --content-padding-top: 8px; } } \ No newline at end of file diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index e092c4228e..252a5ba6ef 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -367,6 +367,12 @@ --rb-border-checked-focus: var(--border-control-focus); --rb-check-mark-size: 4px; --rb-check-mark-background: var(--text-normal); + + // + --toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --toolbar-simple-shadow: 0 none; + --toolbar-simple-content-padding-top: 0; + --layout-padding-hor-toolbar-simple: 0; } // Background diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index d213b769f1..33921b3bdb 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -150,6 +150,7 @@ define([ } else if ( config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) { me.viewport.vlayout.getItem('toolbar').height = 41; + document.body.classList.add('inner-simple-editor'); } if ( config.twoLevelHeader && !config.isEditDiagram && !config.isEditMailMerge && !config.isEditOle && !config.compactHeader) { diff --git a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template index 2bd6b33dfa..48993fbcfe 100644 --- a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template +++ b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template @@ -1,4 +1,4 @@ -
+
<% if ( isEditDiagram ) { %> diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index b5b79d4894..cf67527c80 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -253,6 +253,7 @@ define([ }); if (config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) { + me.$el.addClass('type-simple'); me.$layout = $(_.template(simple)(config)); if ( config.isEditDiagram || config.isEditOle ) { me.btnInsertFormula = new Common.UI.Button({ diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index da0aef1179..3146522f13 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -11,8 +11,22 @@ } .simple-bar { - display: table; - width: 100%; + display: flex; + align-items: center; + border-radius: var(--border-radius-toolbar, 0); + position: relative; + height: 32px; + background-color: @background-toolbar; + + &:before { + content: ''; + position: absolute; + box-shadow: var(--toolbar-simple-shadow, none); + width: 100%; + height: 32px; + bottom: 0; + border-radius: var(--border-radius-toolbar, 0); + } .separator.short { margin-top: 1px; @@ -47,6 +61,50 @@ } } +#toolbar { + .inner-simple-editor & { + padding-left: var(--layout-padding-hor-toolbar-simple); + padding-right: var(--layout-padding-hor-toolbar-simple); + border-bottom: var(--toolbar-simple-border-bottom); + overflow: hidden; + + .toolbar { + height: 41px; + //padding: 10px 0; + + display: flex; + flex-direction: column; + justify-content: center; + + //position: relative; + //--toolbar-tabs-scroller-height: 38px; + background-color: #f1f1f1; + background-color: @background-pane; + //-webkit-box-shadow: inset 0 -1px #cbcbcb; + //box-shadow: inset 0 -1px #cbcbcb; + //-webkit-box-shadow: inset 0 calc(-1 * var(--scaled-one-pixel, 1px)) var(--border-toolbar); + //box-shadow: inset 0 calc(-1 * var(--scaled-one-pixel, 1px)) var(--border-toolbar); + } + } +} + +#cell-editing-box { + .inner-simple-editor & { + padding-left: var(--layout-padding-hor-toolbar-simple); + padding-right: var(--layout-padding-hor-toolbar-simple); + + .ce-group-expand { + right: calc(3px + var(--layout-padding-hor-toolbar-simple, 0px)); + } + } +} + +.inner-simple-editor { + .layout-item.middle { + padding-top: var(--toolbar-simple-content-padding-top, 0); + } +} + .username-tip { background-color: #ee3525; border: none;