From 4bdd1aab3f948e3c84c65c9e0010d505b40855b8 Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Tue, 20 May 2025 18:01:39 +0300 Subject: [PATCH 1/6] [SSE] Fix and refactoring cell editor --- .../resources/less/colors-table-classic.less | 2 + .../less/colors-table-dark-contrast.less | 2 + .../resources/less/colors-table-dark.less | 2 + .../resources/less/colors-table-gray.less | 2 + .../resources/less/colors-table-white.less | 4 ++ .../main/resources/less/colors-table.less | 8 ++++ .../main/resources/less/celleditor.less | 40 ++++++------------- 7 files changed, 33 insertions(+), 27 deletions(-) diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index 7cc3b8e4d8..ecd99570e9 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -203,6 +203,8 @@ --background-statusbar: var(--background-pane); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less index c0f0029a50..d84245c768 100644 --- a/apps/common/main/resources/less/colors-table-dark-contrast.less +++ b/apps/common/main/resources/less/colors-table-dark-contrast.less @@ -204,6 +204,8 @@ --background-statusbar: var(--background-pane); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index 82d25b8419..8debd948ef 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -205,6 +205,8 @@ --background-statusbar: var(--background-pane); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-gray.less b/apps/common/main/resources/less/colors-table-gray.less index 11028d03f8..5a3a314eaf 100644 --- a/apps/common/main/resources/less/colors-table-gray.less +++ b/apps/common/main/resources/less/colors-table-gray.less @@ -183,6 +183,8 @@ --background-statusbar: var(--background-pane); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-white.less b/apps/common/main/resources/less/colors-table-white.less index e9e605e08f..646afc88cc 100644 --- a/apps/common/main/resources/less/colors-table-white.less +++ b/apps/common/main/resources/less/colors-table-white.less @@ -196,6 +196,10 @@ --celleditor-height: 24px; --celleditor-line-height: 20px; --celleditor-border-width: 0px; + --celleditor-input-border: var(--scaled-one-pixel, 1px) solid var(--border-fill-input); + --celleditor-input-border-radius: var(--border-radius-form-control); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-fill-input); + --celleditor-func-label-margin-left: 1px; --x-small-btn-size: 24px; --x-small-btn-icon-size: 24px; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index e092c4228e..030ff79750 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -252,6 +252,10 @@ --celleditor-height: 20px; --celleditor-line-height: 18px; --celleditor-border-width: var(--scaled-one-pixel, 1px); + --celleditor-input-border: 0 none; + --celleditor-input-border-radius: 0; + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --celleditor-func-label-margin-left: -3px; --x-small-btn-size: 20px; --x-small-btn-icon-size: 20px; @@ -494,6 +498,10 @@ @celleditor-height: var(--celleditor-height); @celleditor-line-height: var(--celleditor-line-height); @celleditor-border-width: var(--celleditor-border-width); +@celleditor-input-border: var(--celleditor-input-border); +@celleditor-input-border-radius: var(--celleditor-input-border-radius); +@celleditor-cell-name-border-right: var(--celleditor-cell-name-border-right); +@celleditor-func-label-margin-left: var(--celleditor-func-label-margin-left); @x-small-btn-size: var(--x-small-btn-size, 20px); @x-small-btn-icon-size: var(--x-small-btn-icon-size, 20px); diff --git a/apps/spreadsheeteditor/main/resources/less/celleditor.less b/apps/spreadsheeteditor/main/resources/less/celleditor.less index e2cca1eebf..122bd0e9d7 100644 --- a/apps/spreadsheeteditor/main/resources/less/celleditor.less +++ b/apps/spreadsheeteditor/main/resources/less/celleditor.less @@ -16,30 +16,24 @@ #ce-cell-name { width: 100px; - height: calc(@celleditor-height - @celleditor-border-width); - height: calc(@celleditor-height - @celleditor-border-width + (1px - 1px/var(--pixel-ratio-factor,1))); + height: calc(@celleditor-height - var(--celleditor-border-width)); + height: calc(@celleditor-height - var(--celleditor-border-width) + (1px - 1px/var(--pixel-ratio-factor,1))); padding: 0px 19px 0 4px; vertical-align: top; display: inline-block; transition: none; -webkit-transition: none; - body:not(.theme-white) & { - border: 0 none; - border-right: @scaled-one-px-value-ie solid @border-toolbar-ie; - border-right: @scaled-one-px-value solid @border-toolbar; - box-shadow: 0 @scaled-one-px-value-ie 0 0 @border-toolbar-ie; - box-shadow: 0 @scaled-one-px-value 0 0 @border-toolbar; - } + border: @celleditor-input-border; + border-right: @celleditor-cell-name-border-right; + box-shadow: 0 @celleditor-border-width 0 0 @border-toolbar-ie; + box-shadow: 0 @celleditor-border-width 0 0 @border-toolbar; .rtl & { padding: 0px 4px 0 19px; direction: rtl; - body:not(.theme-white) & { - border: 0 none; - border-left: @scaled-one-px-value-ie solid @border-toolbar-ie; - border-left: @scaled-one-px-value solid @border-toolbar; - } + border: @celleditor-input-border; + border-left: @celleditor-cell-name-border-right; } &[disabled] { @@ -92,11 +86,7 @@ #ce-func-label { height: @x-small-btn-size; width: @x-small-btn-size; - .margin-left(-3px); - - body.theme-white & { - .margin-left(1px); - } + .margin-left(@celleditor-func-label-margin-left); .border-radius(0); @@ -128,7 +118,7 @@ } .ce-group-content { - margin: 0 0px 0 120px; + margin: 0 0px 0 calc(100px + 3px + @celleditor-func-label-margin-left + @x-small-btn-size); height: 100%; display: flex; border-left: @celleditor-border-width solid @border-toolbar-ie; @@ -137,16 +127,14 @@ border-left: none; border-right: @celleditor-border-width solid @border-toolbar-ie; border-right: @celleditor-border-width solid @border-toolbar; - margin: 0 120px 0 0px; + margin: 0 calc(100px + 3px + @celleditor-func-label-margin-left + @x-small-btn-size) 0 0px; } #ce-cell-content { height: 100%; resize: none; min-height: 19px; - body:not(.theme-white) & { - border: 0 none; - } + border: @celleditor-input-border; .padding-x(3px, 19px); .font-size-medium(); line-height: @celleditor-line-height; @@ -173,9 +161,7 @@ } #ce-cell-name, #ce-cell-content { - body:not(.theme-white) & { - border-radius: 0 - } + border-radius: @celleditor-input-border-radius; } &+.layout-resizer { From 9d899e3357ba8ea524294ff6e8f78a01e702d374 Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Tue, 20 May 2025 18:19:01 +0300 Subject: [PATCH 2/6] [SSE] Skeleton formula bar --- apps/common/main/lib/controller/Themes.js | 17 +++++- apps/spreadsheeteditor/main/index.html | 55 +++++++++++++++---- apps/spreadsheeteditor/main/index.html.deploy | 55 +++++++++++++++---- 3 files changed, 102 insertions(+), 25 deletions(-) diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 2ea4ac854c..772371f9f6 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -68,6 +68,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #eee; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; }` }, }, @@ -82,10 +85,13 @@ define([ --sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c; --sk-background-toolbar-header-visio: #444796; --sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1; - --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555; + --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #e0e0e0; --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #eee; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; }` }, }, @@ -105,6 +111,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #555; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; } .content-theme-dark { --sk-canvas-content-background: #3a3a3a; --sk-canvas-page-border: #616161; @@ -128,6 +137,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #555; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; } .content-theme-dark { --sk-canvas-content-background: #3a3a3a; @@ -150,6 +162,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #eee; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #ccc; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; }` }, }, diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index 8ddf2825c5..58d2d6c2b1 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -24,6 +24,11 @@ --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 38px; + --sk-padding-formula: 10px 10px 4px 10px; + --sk-border-style-formula: none; + --sk-gap-formula-field: 28px; + --sk-border-radius-formula-field: 3px; } /* .theme-dark, .theme-type-dark { @@ -170,7 +175,8 @@ top: 0; bottom: 0; left: 875px; - width: 690px; + width: inherit; + max-width: 690px; height: 45px; } .rtl .loadmask > .sktoolbar li.fat { @@ -179,9 +185,13 @@ } .loadmask > .skformula { + padding: 0 0 4px 0; + padding: var(--sk-padding-formula); height: 24px; - background: #f1f1f1; - background: var(--background-toolbar, #f1f1f1); + height: var(--sk-height-formula); + background: #f7f7f7; + background-color: var(--sk-background-toolbar, #f7f7f7); + box-sizing: border-box; } .loadmask > .skformula ul { @@ -189,30 +199,51 @@ font-size: 0; box-sizing: border-box; border-style: solid; + border-style: var(--sk-border-style-formula); border-width: 1px; border-width: var(--scaled-one-px-value, 1px); border-color: #cbcbcb transparent; border-color: var(--border-toolbar, #cbcbcb) transparent; + border-top: 0 none; + display: flex; + height: 100%; } .loadmask > .skformula li { display: inline-block; box-sizing: border-box; - height: 19px; - width: 100%; - margin-left: 20px; background: #fff; background: var(--background-normal, #fff); - border-style: solid; - border-width: 1px; - border-width: var(--scaled-one-px-value, 1px); - border-color: transparent #cbcbcb; - border-color: transparent var(--border-toolbar, #cbcbcb); + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + border-radius: 0px; + border-radius: var(--sk-border-radius-formula-field, 0px); + flex-grow: 1; } .loadmask > .skformula li:first-child { width: 100px; - margin-left: 0; + flex-grow: 0; + margin-right: 20px; + margin-right: var(--sk-gap-formula-field); + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li { + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li:first-child { + margin-right: 0; + margin-left: 20px; + margin-left: var(--sk-gap-formula-field); + border-right: 0 none; + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); } .loadmask > .placeholder { diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy index b97494c37d..a8deaeb15e 100644 --- a/apps/spreadsheeteditor/main/index.html.deploy +++ b/apps/spreadsheeteditor/main/index.html.deploy @@ -27,6 +27,11 @@ --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 38px; + --sk-padding-formula: 10px 10px 4px 10px; + --sk-border-style-formula: none; + --sk-gap-formula-field: 28px; + --sk-border-radius-formula-field: 3px; } .loadmask { @@ -144,7 +149,8 @@ top: 0; bottom: 0; left: 875px; - width: 690px; + width: inherit; + max-width: 690px; height: 45px; } .rtl .loadmask > .sktoolbar li.fat { @@ -153,9 +159,13 @@ } .loadmask>.skformula { + padding: 0 0 4px 0; + padding: var(--sk-padding-formula); height: 24px; - background: #f1f1f1; - background: var(--background-toolbar, #f1f1f1); + height: var(--sk-height-formula); + background: #f7f7f7; + background-color: var(--sk-background-toolbar, #f7f7f7); + box-sizing: border-box; } .loadmask>.skformula ul { @@ -163,30 +173,51 @@ font-size: 0; box-sizing: border-box; border-style: solid; + border-style: var(--sk-border-style-formula); border-width: 1px; border-width: var(--scaled-one-px-value, 1px); border-color: #cbcbcb transparent; border-color: var(--border-toolbar, #cbcbcb) transparent; + border-top: 0 none; + display: flex; + height: 100%; } .loadmask>.skformula li { display: inline-block; box-sizing: border-box; - height: 19px; - width: 100%; - margin-left: 20px; background: #fff; background: var(--background-normal, #fff); - border-style: solid; - border-width: 1px; - border-width: var(--scaled-one-px-value, 1px); - border-color: #cbcbcb; - border-color: transparent var(--border-toolbar, #cbcbcb); + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + border-radius: 0px; + border-radius: var(--sk-border-radius-formula-field, 0px); + flex-grow: 1; } .loadmask>.skformula li:first-child { width: 100px; - margin-left: 0; + flex-grow: 0; + margin-right: 20px; + margin-right: var(--sk-gap-formula-field); + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li { + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li:first-child { + margin-right: 0; + margin-left: 20px; + margin-left: var(--sk-gap-formula-field); + border-right: 0 none; + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); } .loadmask > .placeholder { From fd5db55fb6e9b30aae07a1f9f2e31c00ed8fca40 Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Tue, 27 May 2025 12:17:40 +0300 Subject: [PATCH 3/6] [SSE] Fix cell editor height in external editor after re-show --- apps/common/main/lib/controller/ExternalDiagramEditor.js | 5 +++++ apps/common/main/lib/controller/ExternalMergeEditor.js | 5 +++++ apps/common/main/lib/controller/ExternalOleEditor.js | 5 +++++ apps/spreadsheeteditor/main/app/controller/CellEditor.js | 9 +++++++++ apps/spreadsheeteditor/main/app/controller/Main.js | 3 +++ 5 files changed, 27 insertions(+) diff --git a/apps/common/main/lib/controller/ExternalDiagramEditor.js b/apps/common/main/lib/controller/ExternalDiagramEditor.js index a7d4924dfd..19e3cb5cd2 100644 --- a/apps/common/main/lib/controller/ExternalDiagramEditor.js +++ b/apps/common/main/lib/controller/ExternalDiagramEditor.js @@ -99,6 +99,11 @@ define([ 'resize': _.bind(function(o, state){ externalEditor && externalEditor.serviceCommand('window:resize', state == 'start'); },this), + 'animate:before': _.bind(function(){ + if(!this.isAppFirstOpened) { + externalEditor && externalEditor.serviceCommand('reshow'); + } + },this), 'show': _.bind(function(cmp){ var h = this.diagramEditorView.getHeight(), innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top'); diff --git a/apps/common/main/lib/controller/ExternalMergeEditor.js b/apps/common/main/lib/controller/ExternalMergeEditor.js index ed06c2abd9..f086e7a120 100644 --- a/apps/common/main/lib/controller/ExternalMergeEditor.js +++ b/apps/common/main/lib/controller/ExternalMergeEditor.js @@ -98,6 +98,11 @@ define([ 'resize': _.bind(function(o, state){ externalEditor && externalEditor.serviceCommand('window:resize', state == 'start'); },this), + 'animate:before': _.bind(function(){ + if(!this.isAppFirstOpened) { + externalEditor && externalEditor.serviceCommand('reshow'); + } + },this), 'show': _.bind(function(cmp){ var h = this.mergeEditorView.getHeight(), innerHeight = Common.Utils.innerHeight(); diff --git a/apps/common/main/lib/controller/ExternalOleEditor.js b/apps/common/main/lib/controller/ExternalOleEditor.js index 69a101e595..7fc96badf0 100644 --- a/apps/common/main/lib/controller/ExternalOleEditor.js +++ b/apps/common/main/lib/controller/ExternalOleEditor.js @@ -99,6 +99,11 @@ define([ 'resize': _.bind(function(o, state){ externalEditor && externalEditor.serviceCommand('window:resize', state == 'start'); },this), + 'animate:before': _.bind(function(){ + if(!this.isAppFirstOpened) { + externalEditor && externalEditor.serviceCommand('reshow'); + } + },this), 'show': _.bind(function(cmp){ var h = this.oleEditorView.getHeight(), innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top'); diff --git a/apps/spreadsheeteditor/main/app/controller/CellEditor.js b/apps/spreadsheeteditor/main/app/controller/CellEditor.js index eb70d58951..0a27c8e17a 100644 --- a/apps/spreadsheeteditor/main/app/controller/CellEditor.js +++ b/apps/spreadsheeteditor/main/app/controller/CellEditor.js @@ -73,6 +73,7 @@ define([ }.bind(this) } }); + Common.NotificationCenter.on('external:reshow', this.onExternalReshow.bind(this)); Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this)); }, @@ -261,7 +262,15 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true}); }, + onExternalReshow: function () { + this.changeCellEditorHeight(); + }, + onThemeChanged: function () { + this.changeCellEditorHeight(); + }, + + changeCellEditorHeight: function() { if (!Common.localStorage.getBool('sse-celleditor-expand')) { var editorMinHeight = parseFloat(this.editor.$el.css('min-height')) || 20; editorMinHeight -= (parseFloat(this.editor.$el.css('border-bottom-width')) || 0); diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 3d520e2413..d64b513da3 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -2985,6 +2985,9 @@ define([ } this.isAppDisabled = data.data; break; + case 'reshow': + Common.NotificationCenter.trigger('external:reshow'); + break; case 'queryClose': if (!Common.Utils.ModalWindow.isVisible()) { this.isFrameClosed = true; From 1c87d754c8ae7a29d6c78f42248ca507a033173b Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Tue, 27 May 2025 12:47:20 +0300 Subject: [PATCH 4/6] [SSE] Skeleton formula bar for internal --- .../main/index_internal.html | 53 ++++++++++++++---- .../main/index_internal.html.deploy | 55 +++++++++++++++---- 2 files changed, 87 insertions(+), 21 deletions(-) diff --git a/apps/spreadsheeteditor/main/index_internal.html b/apps/spreadsheeteditor/main/index_internal.html index 251fa33a83..f28959a3b5 100644 --- a/apps/spreadsheeteditor/main/index_internal.html +++ b/apps/spreadsheeteditor/main/index_internal.html @@ -17,6 +17,14 @@ --canvas-page-border: #555; } + .loadmask { + --sk-height-formula: 32px; + --sk-padding-formula: 4px 10px; + --sk-border-style-formula: none; + --sk-gap-formula-field: 28px; + --sk-border-radius-formula-field: 3px; + } + .loadmask { left: 0; top: 0; @@ -38,9 +46,13 @@ } .loadmask > .skformula { + padding: 0 0 4px 0; + padding: var(--sk-padding-formula); height: 24px; + height: var(--sk-height-formula); background: #f7f7f7; - background: var(--background-toolbar, #f7f7f7); + background-color: var(--sk-background-toolbar, #f7f7f7); + box-sizing: border-box; } .loadmask > .skformula ul { @@ -48,30 +60,51 @@ font-size: 0; box-sizing: border-box; border-style: solid; + border-style: var(--sk-border-style-formula); border-width: 1px; border-width: var(--scaled-one-px-value, 1px); border-color: #cbcbcb transparent; border-color: var(--border-toolbar, #cbcbcb) transparent; + border-top: 0 none; + display: flex; + height: 100%; } .loadmask > .skformula li { display: inline-block; box-sizing: border-box; - height: 19px; - width: 100%; - margin-left: 20px; background: #fff; background: var(--background-normal, #fff); - border-style: solid; - border-width: 1px; - border-width: var(--scaled-one-px-value, 1px); - border-color: transparent #cbcbcb; - border-color: transparent var(--border-toolbar, #cbcbcb); + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + border-radius: 0px; + border-radius: var(--sk-border-radius-formula-field, 0px); + flex-grow: 1; } .loadmask > .skformula li:first-child { width: 100px; - margin-left: 0; + flex-grow: 0; + margin-right: 20px; + margin-right: var(--sk-gap-formula-field); + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li { + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li:first-child { + margin-right: 0; + margin-left: 20px; + margin-left: var(--sk-gap-formula-field); + border-right: 0 none; + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); } .loadmask > .placeholder { diff --git a/apps/spreadsheeteditor/main/index_internal.html.deploy b/apps/spreadsheeteditor/main/index_internal.html.deploy index 5b816a8824..aef1d85a7c 100644 --- a/apps/spreadsheeteditor/main/index_internal.html.deploy +++ b/apps/spreadsheeteditor/main/index_internal.html.deploy @@ -11,6 +11,14 @@