diff --git a/apps/pdfeditor/main/app/controller/Viewport.js b/apps/pdfeditor/main/app/controller/Viewport.js index 93e35e0375..a764796ea0 100644 --- a/apps/pdfeditor/main/app/controller/Viewport.js +++ b/apps/pdfeditor/main/app/controller/Viewport.js @@ -376,10 +376,7 @@ define([ this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); - const height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25); - if (this.viewport?.vlayout?.getItem('statusbar')) { - this.viewport.vlayout.getItem('statusbar').height = height; - } + this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25); Common.NotificationCenter.trigger('layout:changed', 'toolbar'); } diff --git a/apps/pdfeditor/main/app/template/StatusBar.template b/apps/pdfeditor/main/app/template/StatusBar.template index 9462a31f47..be267e3a33 100644 --- a/apps/pdfeditor/main/app/template/StatusBar.template +++ b/apps/pdfeditor/main/app/template/StatusBar.template @@ -1,7 +1,7 @@ -
+
- +
- - + +
- +
-
+
- - + +
- - - + + +
- +
diff --git a/apps/pdfeditor/main/app/view/Viewport.js b/apps/pdfeditor/main/app/view/Viewport.js index d72b04aa7c..be6310ad68 100644 --- a/apps/pdfeditor/main/app/view/Viewport.js +++ b/apps/pdfeditor/main/app/view/Viewport.js @@ -95,7 +95,8 @@ define([ stretch: true }, { el: $container.find(' > .layout-item#statusbar'), - height: 25 + alias: 'statusbar', + height: parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height')) } ] }); diff --git a/apps/pdfeditor/main/resources/less/app.less b/apps/pdfeditor/main/resources/less/app.less index eea97f35f5..5b4b909c80 100644 --- a/apps/pdfeditor/main/resources/less/app.less +++ b/apps/pdfeditor/main/resources/less/app.less @@ -99,6 +99,7 @@ @import "../../../../common/main/resources/less/updown-picker.less"; @import "../../../../common/main/resources/less/calendar.less"; @import "../../../../common/main/resources/less/dimension-picker.less"; +@import "../../../../common/main/resources/less/statusbar.less"; // App // -------------------------------------------------- diff --git a/apps/pdfeditor/main/resources/less/statusbar.less b/apps/pdfeditor/main/resources/less/statusbar.less index c17bb0239e..f1c151716e 100644 --- a/apps/pdfeditor/main/resources/less/statusbar.less +++ b/apps/pdfeditor/main/resources/less/statusbar.less @@ -1,7 +1,5 @@ -@statusbar-height: 25px; +@statusbar-height: var(--statusbar-height, 25px); .statusbar { - display: table; - padding: 2px; .status-label { position: relative; @@ -32,9 +30,7 @@ } .status-group { - display: table-cell; white-space: nowrap; - vertical-align: top; &.dropup { position: static; } @@ -66,7 +62,6 @@ .cnt-zoom { display: inline-block; vertical-align: middle; - margin-top: 4px; .dropdown-menu { min-width: 80px; .margin-left(-4px); diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js index 62690daec3..9e875e7d2a 100644 --- a/apps/presentationeditor/main/app/controller/Viewport.js +++ b/apps/presentationeditor/main/app/controller/Viewport.js @@ -401,10 +401,7 @@ define([ this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); - const height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25); - if (this.viewport?.vlayout?.getItem('statusbar')) { - this.viewport.vlayout.getItem('statusbar').height = height; - } + this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25); Common.NotificationCenter.trigger('layout:changed', 'toolbar'); } diff --git a/apps/presentationeditor/main/app/template/StatusBar.template b/apps/presentationeditor/main/app/template/StatusBar.template index a7a48a7220..70238b639d 100644 --- a/apps/presentationeditor/main/app/template/StatusBar.template +++ b/apps/presentationeditor/main/app/template/StatusBar.template @@ -1,33 +1,33 @@ -
+
-
+
- - + +
- +
-
- - +
+ +
- +
- - - + + +
- +
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js index fe746ac42f..b8976aa0c3 100644 --- a/apps/presentationeditor/main/app/view/Viewport.js +++ b/apps/presentationeditor/main/app/view/Viewport.js @@ -99,7 +99,8 @@ define([ stretch: true }, { el: items[3], - height: 25 + alias: 'statusbar', + height: parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height')) }] }); diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 3959530052..bc47300314 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -128,6 +128,7 @@ @import "../../../../common/main/resources/less/updown-picker.less"; @import "../../../../common/main/resources/less/calendar.less"; @import "../../../../common/main/resources/less/macros-dialog.less"; +@import "../../../../common/main/resources/less/statusbar.less"; // App // -------------------------------------------------- diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less index 512489e57d..6df8b8f86c 100644 --- a/apps/presentationeditor/main/resources/less/statusbar.less +++ b/apps/presentationeditor/main/resources/less/statusbar.less @@ -1,7 +1,5 @@ -@statusbar-height: 25px; +@statusbar-height: var(--statusbar-height, 25px); .statusbar { - display: table; - padding: 2px; .status-label { position: relative; @@ -20,9 +18,7 @@ } .status-group { - display: table-cell; white-space: nowrap; - vertical-align: top; &.dropup { position: static; } @@ -58,7 +54,6 @@ .cnt-zoom { display: inline-block; vertical-align: middle; - margin-top: 4px; .dropdown-menu { min-width: 80px; .margin-left(-4px); @@ -90,8 +85,4 @@ display: inline-block; } } - - #slot-status-btn-preview { - width: 32px; - } } diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index f37e4ff3c6..438f94a081 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -73,7 +73,8 @@ define([ }, 'Statusbar': { 'view:compact': function (statusbar, state) { - me.viewport.vlayout.getItem('statusbar').height = state ? 25 : 50; + var height = parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height')); + me.viewport.vlayout.getItem('statusbar').height = state ? height : height * 2; } }, 'Toolbar': { @@ -369,8 +370,10 @@ define([ this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); - this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25); - + var height = parseInt(computed_style.getPropertyValue('--statusbar-height')); + var NoCompact = $('.statusbar').hasClass('no-compact'); + this.viewport.vlayout.getItem('statusbar').height = NoCompact ? height * 2 : height; + Common.NotificationCenter.trigger('layout:changed', 'toolbar'); } }, diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template index 2c0096414d..bf1e7bd9aa 100644 --- a/apps/spreadsheeteditor/main/app/template/StatusBar.template +++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template @@ -1,16 +1,16 @@
-
+
-
+
-
+
@@ -36,7 +36,7 @@
-
+
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 76357bddf8..5a63ed8fca 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -67,6 +67,7 @@ define([ initialize: function (options) { _.extend(this, options); + Common.NotificationCenter.on('uitheme:changed', this.setMode.bind(this)); }, render: function () { diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js index 829b2cf4bf..1409c58bde 100644 --- a/apps/spreadsheeteditor/main/app/view/Viewport.js +++ b/apps/spreadsheeteditor/main/app/view/Viewport.js @@ -98,7 +98,10 @@ define([ }, { el: items[3], alias: 'statusbar', - height: Common.localStorage.getBool('sse-compact-statusbar', true) ? 25 : 50 + height: (function () { + var h = parseInt(getComputedStyle(document.body).getPropertyValue('--statusbar-height')); + return Common.localStorage.getBool('sse-compact-statusbar', true) ? h : h * 2; + })() }] }); diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less index 6315552ed1..06a55146df 100644 --- a/apps/spreadsheeteditor/main/resources/less/app.less +++ b/apps/spreadsheeteditor/main/resources/less/app.less @@ -128,6 +128,7 @@ @import "../../../../common/main/resources/less/bigscaling.less"; @import "../../../../common/main/resources/less/updown-picker.less"; @import "../../../../common/main/resources/less/macros-dialog.less"; +@import "../../../../common/main/resources/less/statusbar.less"; // App // -------------------------------------------------- diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index e93347fe1b..df197f0b28 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -1,4 +1,4 @@ -@statusbar-height: 25px; +@statusbar-height: var(--statusbar-height, 25px); @status-scroll-padding-left: 12px; @statusb-scroll-padding-right: 10px; @status-scroll-width: calc(2*@x-small-btn-size + @status-scroll-padding-left + @statusb-scroll-padding-right); @@ -49,7 +49,7 @@ #status-tabs-scroll { width: @status-scroll-width; - padding: calc(@statusbar-height - @x-small-btn-size) @status-scroll-padding-left 0 @statusb-scroll-padding-right; + padding: 0 @status-scroll-padding-left 0 @statusb-scroll-padding-right; height: @statusbar-height; float: left; @@ -60,8 +60,6 @@ } #status-zoom-box { - padding-top: calc(@statusbar-height - @x-small-btn-size); - position: absolute; height: @statusbar-height; @@ -162,7 +160,7 @@ } #status-addtabs-box { - padding: calc(@statusbar-height - @x-small-btn-size) 8px 0; + padding: 0 8px; border-left: @scaled-one-px-value-ie solid @border-toolbar-ie; border-left: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value-ie solid @border-toolbar-ie; @@ -431,7 +429,6 @@ justify-content: flex-start; .status-label { color: @text-normal; - margin-top: 6px; width: 100%; text-align: center; } @@ -452,7 +449,7 @@ &.no-compact { #status-tabs-scroll, #status-sheets-bar-box, #status-addtabs-box { - height: 26px; + height: @statusbar-height; border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie; border-bottom: @scaled-one-px-value solid @border-toolbar; } @@ -522,7 +519,6 @@ .cnt-zoom { display: inline-block; position: relative; - top: 1px; .dropdown-menu { min-width: 80px;