From eda6510de07df8b5c3126e5c86345e3734205ddb Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 26 Jul 2021 16:57:01 +0300 Subject: [PATCH] [SSE] Add methods and styles to change compact mode of statusbar --- .../main/app/controller/Statusbar.js | 2 + .../main/app/template/StatusBar.template | 10 ++-- .../main/app/view/Statusbar.js | 52 +++++++++++++++-- .../main/resources/less/statusbar.less | 58 ++++++++++++++++--- 4 files changed, 103 insertions(+), 19 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index c45c94cc0..90eac1398 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -759,6 +759,8 @@ define([ this.statusbar.fireEvent('view:compact', [this.statusbar, compact]); Common.localStorage.setBool('sse-compact-statusbar', compact); Common.NotificationCenter.trigger('layout:changed', 'status'); + this.statusbar.onChangeCompact(compact); + Common.NotificationCenter.trigger('edit:complete', this.statusbar); }, diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template index 45c720cbf..5102ba865 100644 --- a/apps/spreadsheeteditor/main/app/template/StatusBar.template +++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template @@ -1,6 +1,5 @@
-
@@ -24,7 +23,7 @@
-
+
@@ -32,14 +31,17 @@
-
+
+
+
-
+
+
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 17a4ac20f..ad85a36de 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -79,6 +79,12 @@ define([ scope: this })); + this.cntStatusbar = $('.statusbar', this.el); + this.isCompact = Common.localStorage.getBool('sse-compact-statusbar', false); + if (!this.isCompact) { + this.cntStatusbar.addClass('no-compact'); + } + this.editMode = false; this.rangeSelectionMode = Asc.c_oAscSelectionDialogType.None; @@ -472,6 +478,12 @@ define([ this.boxZoom = $('#status-zoom-box', this.el); this.boxZoom.find('.separator').css('border-left-color','transparent'); + this.boxNumberSheets = $('#status-number-of-sheet', this.el); + this.isCompact && this.boxNumberSheets.hide(); + + this.boxAction = $('#status-action', this.el); + this.isCompact && this.boxAction.hide(); + this.$el.append('
'); this.$customizeStatusBarMenu = this.$el.find('#statusbar-menu'); this.$customizeStatusBarMenu.on({ @@ -789,19 +801,32 @@ define([ }, updateTabbarBorders: function() { - var right = parseInt(this.boxZoom.css('width')), visible = false; + var visible = false; + var right = parseInt(this.boxZoom.css('width')); if (this.boxMath.is(':visible')) { - right += parseInt(this.boxMath.css('width')); + this.boxMath.css({'right': right + 'px'}); + right += parseInt(this.boxMath.css('width')); visible = true; } - if (this.boxFiltered.is(':visible')) { - right += parseInt(this.boxFiltered.css('width')); + this.boxFiltered.css({'right': right + 'px'}); + right += parseInt(this.boxFiltered.css('width')); visible = true; } + this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent'); - this.boxZoom.find('.separator').css('border-left-color',visible?'':'transparent'); - this.tabBarBox.css('right', right + 'px'); + if (this.isCompact) { + this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'}); + this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'}); + this.boxZoom.css({'top': '0px', 'bottom': 'auto'}); + this.tabBarBox.css('right', right + 'px'); + } else { + this.boxAction.css({'right': right + 'px'}) + this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'}); + this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'}); + this.boxZoom.css({'top': 'auto', 'bottom': '0px'}); + this.tabBarBox.css('right', '0px'); + } }, updateVisibleItemsBoxMath: function () { @@ -879,6 +904,21 @@ define([ item.$el.find('a').blur(); }, + onChangeCompact: function (compact) { + this.isCompact = compact; + if (compact) { + this.cntStatusbar.removeClass('no-compact'); + this.boxNumberSheets.hide(); + this.boxAction.hide(); + } else { + this.cntStatusbar.addClass('no-compact'); + this.boxNumberSheets.show(); + this.boxAction.show(); + } + this.updateTabbarBorders(); + this.onTabInvisible(undefined, this.tabbar.checkInvisible(true)); + }, + tipZoomIn : 'Zoom In', tipZoomOut : 'Zoom Out', tipZoomFactor : 'Magnification', diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index 0c709d596..86008040f 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -6,18 +6,26 @@ width: 112px; float: left; padding: 3px 12px 0 10px; + height: 25px; } #status-zoom-box { width: 160px; - float: right; + //float: right; padding-top: 3px; + position: absolute; + right: 0; + height: 25px; + .separator { - margin-right: 10px; margin-top: -3px; } + #status-btn-zoomdown { + margin-left: 10px; + } + #status-label-zoom { cursor: pointer; text-align: center; @@ -120,11 +128,17 @@ #status-math-box, #status-filtered-box { - float: right; + //float: right; padding-top: 6px; padding-right: 14px; + position: absolute; + height: 25px; + label { + &:first-of-type { + padding-left: 14px; + } &:not(:last-child) { padding-right: 10px; } @@ -138,10 +152,10 @@ #status-sheets-bar-box { position: absolute; overflow: hidden; - height: 32px; + height: 25px; left: 112px; right: 160px; - margin-right: 3px; + //margin-right: 3px; } #status-sheets-bar { @@ -337,6 +351,36 @@ } } + #status-number-of-sheet , #status-action { + position: absolute; + height: 25px; + bottom: 0; + display: flex; + justify-content: space-around; + .status-label { + font-weight: bold; + color: @text-normal; + margin-top: 5px; + width: 100%; + text-align: center; + } + } + + #status-number-of-sheet { + width: 135px; + } + + #status-action { + left: 135px; + } + + &.no-compact { + #status-tabs-scroll, #status-sheets-bar-box, #status-addtabs-box { + border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie; + border-bottom: @scaled-one-px-value solid @border-toolbar; + } + } + .btn-tpl(@top-position) { .btn-icon { background-position: 0 @top-position; @@ -426,10 +470,6 @@ height: 25px; } } - - .statusbar-top, .statusbar-bottom { - height: 25px; - } } .statusbar-mask {