From 4bdd1aab3f948e3c84c65c9e0010d505b40855b8 Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Tue, 20 May 2025 18:01:39 +0300 Subject: [PATCH 01/29] [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 02/29] [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 35ef47f8dc972b31751ae8ac9b11de0dcd8a51c2 Mon Sep 17 00:00:00 2001 From: maxkadushkin Date: Tue, 27 May 2025 00:17:14 +0300 Subject: [PATCH 03/29] [themes] added new dark theme --- apps/common/main/lib/controller/Themes.js | 8 + .../less/colors-table-white-dark.less | 331 ++++++++++++++++++ .../main/resources/less/app.less | 1 + apps/pdfeditor/main/resources/less/app.less | 1 + .../main/resources/less/app.less | 1 + .../main/resources/less/app.less | 1 + apps/visioeditor/main/resources/less/app.less | 1 + 7 files changed, 344 insertions(+) create mode 100644 apps/common/main/resources/less/colors-table-white-dark.less diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 770c7bd3aa..7d5ff9cb65 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -161,6 +161,14 @@ define([ cls: 'mod2', } }, + 'theme-white-dark': { + text: locale.txtThemeWhiteDark || 'White Dark', + type: 'dark', + source: 'static', + icons: { + cls: 'mod2', + } + }, } var id_default_light_theme = 'theme-white', diff --git a/apps/common/main/resources/less/colors-table-white-dark.less b/apps/common/main/resources/less/colors-table-white-dark.less new file mode 100644 index 0000000000..a94d2d0f47 --- /dev/null +++ b/apps/common/main/resources/less/colors-table-white-dark.less @@ -0,0 +1,331 @@ + +:root { + .theme-white-dark { + //--toolbar-header-document: #d3d3d3; + --toolbar-header-document: #222222; + --toolbar-header-spreadsheet: #222222; + --toolbar-header-presentation: #222222; + --toolbar-header-pdf: #222222; + --toolbar-header-visio: #222222; + + --text-toolbar-header-on-background-document: #FFFFFF; + --text-toolbar-header-on-background-spreadsheet: #FFFFFF; + --text-toolbar-header-on-background-presentation: #FFFFFF; + --text-toolbar-header-on-background-pdf: #FFFFFF; + --text-toolbar-header-on-background-visio: #FFFFFF; + + --background-normal: #404040; + --background-toolbar: #404040; + --background-toolbar-tab: #404040; + --background-toolbar-additional: #404040; + --background-primary-dialog-button: #6e9fec; + --background-accent-button: #446995; + --background-notification-popover: #fcfed7; + --background-notification-badge: #ffd112; + --background-scrim: fade(#000, 20%); + --background-loader: fade(#181818, 90%); + --background-alt-key-hint: #FFD938; + --background-contrast-popover: #fff; + --shadow-contrast-popover: rgba(0, 0, 0, 0.3); + --background-fill-button: #ffd112; + --background-pane: #222222; + --background-pane-additional: var(--background-pane); + + --highlight-button-hover: #585858; + --highlight-button-pressed: #686868; + --highlight-button-pressed-hover: #7f7f7f; + --highlight-primary-dialog-button-hover: #4a87e7; + --highlight-primary-dialog-button-pressed: #446eca; + --highlight-accent-button-hover: #375478; + --highlight-accent-button-pressed: #293f59; + --highlight-header-button-hover: #585858; + --highlight-header-button-pressed: #686868; + --highlight-text-select: #3494fb; + --highlight-fill-button-hover: #ffe165; + --highlight-fill-button-pressed: #dfb500; + + --border-toolbar: #cbcbcb; + --border-toolbar-active-panel-top: var(--background-toolbar); + --border-toolbar-active-tab: var(--background-toolbar-tab); + --border-divider: #585858; + --border-regular-control: #686868; + --border-toolbar-button-hover: #eaeaea; + --border-preview-hover: #92B7F0; + --border-preview-select: #4A87E7; + --border-control-focus: #4A87E7; + --border-color-shading: fade(#000, 15%); + --border-error: #f62211; + --border-contrast-popover: #fff; + --border-button-pressed-focus: #4A87E7; + + --text-normal: #f3f3f3; + --text-normal-pressed: #f9f9f9; + --text-secondary: #969696; + --text-tertiary: #cecece; + --text-link: #445799; + --text-link-hover: #445799; + --text-link-active: #445799; + --text-link-visited: #445799; + --text-inverse: #fff; + --text-toolbar-header: #f3f3f3; + --text-contrast-background: #fff; + --text-alt-key-hint: fade(#000, 80%); + + --icon-normal: #383838; + --icon-normal-pressed: #444; + --icon-inverse: #444; + --icon-toolbar-header: #444; + --icon-notification-badge: #000; + --icon-contrast-popover: #fff; + --icon-success: #090; + + --highlight-header-tab-underline-document: #4a87e7; + --highlight-header-tab-underline-spreadsheet: #3A8056; + --highlight-header-tab-underline-presentation: #B75B44; + --highlight-header-tab-underline-pdf: #AA5252; + --highlight-header-tab-underline-visio: #444796; + + --highlight-toolbar-tab-underline-document: #446995; + --highlight-toolbar-tab-underline-spreadsheet: #3A8056; + --highlight-toolbar-tab-underline-presentation: #B75B44; + --highlight-toolbar-tab-underline-pdf: #AA5252; + --highlight-toolbar-tab-underline-visio: #444796; + + // Canvas + + --canvas-background: #222222; + --canvas-content-background: #fff; + --canvas-page-border: #ccc; + + --canvas-ruler-background: #fff; + --canvas-ruler-border: #cbcbcb; + --canvas-ruler-margins-background: #d9d9d9; + --canvas-ruler-mark: #555; + --canvas-ruler-handle-border: #555; + --canvas-ruler-handle-border-disabled: #aaa; + + --canvas-high-contrast: #000; + --canvas-high-contrast-disabled: #666; + + --canvas-cell-border: fade(#000, 10%); + --canvas-cell-title-text: #444; + --canvas-cell-title-background: #f7f7f7; + --canvas-cell-title-background-hover: #dfdfdf; + --canvas-cell-title-background-selected: #cfcfcf; + --canvas-cell-title-border: #d8d8d8; + --canvas-cell-title-border-hover: #c9c9c9; + --canvas-cell-title-border-selected: #bbb; + + --canvas-dark-cell-title: #666666; + --canvas-dark-cell-title-hover: #999; + --canvas-dark-cell-title-selected: #333; + --canvas-dark-cell-title-border: #3d3d3d; + --canvas-dark-cell-title-border-hover: #5c5c5c; + --canvas-dark-cell-title-border-selected: #0f0f0f; + + --canvas-scroll-thumb: #f7f7f7; + --canvas-scroll-thumb-hover: #c0c0c0; + --canvas-scroll-thumb-pressed: #adadad; + --canvas-scroll-thumb-border: #cbcbcb; + --canvas-scroll-thumb-border-hover: #cbcbcb; + --canvas-scroll-thumb-border-pressed: #adadad; + --canvas-scroll-arrow: #adadad; + --canvas-scroll-arrow-hover: #f7f7f7; + --canvas-scroll-arrow-pressed: #f7f7f7; + --canvas-scroll-thumb-target: #c0c0c0; + --canvas-scroll-thumb-target-hover: #f7f7f7; + --canvas-scroll-thumb-target-pressed: #f7f7f7; + + --canvas-sheet-view-cell-background: #73bf91; + --canvas-sheet-view-cell-background-hover: #97e3b6; + --canvas-sheet-view-cell-background-pressed: #aaffcc; + --canvas-sheet-view-cell-title-label: #121212; + --canvas-sheet-view-select-all-icon: #3d664e; + + --canvas-freeze-line-1px: #818182; + --canvas-freeze-line-2px: #aaaaaa; + --canvas-select-all-icon: #999; + + // Others + + --button-small-normal-icon-offset-x: -24px; + --button-small-active-icon-offset-x: -24px; + //--button-large-normal-icon-offset-x: 0; + //--button-large-active-icon-offset-x: -31px; + //--button-huge-normal-icon-offset-x: 0; + //--button-huge-active-icon-offset-x: -40px; + //--button-xhuge-normal-icon-offset-x: 0; + //--button-xhuge-active-icon-offset-x: -28px; + --button-header-normal-icon-offset-x: -24px; + --button-header-active-icon-offset-x: -24px; + + --modal-window-mask-opacity: 0.2; + --image-border-types-filter: none; + --image-border-types-filter-selected: none; + --component-normal-icon-filter: none; + + --component-normal-icon-opacity: 1; + --component-hover-icon-opacity: 1; + --component-active-icon-opacity: 1; + --component-active-hover-icon-opacity: 1; + --component-disabled-opacity: .4; + + --header-component-normal-icon-opacity: 1; + --header-component-hover-icon-opacity: 1; + --header-component-active-icon-opacity: 1; + --header-component-active-hover-icon-opacity: 1; + + //--menu-icon-item-checked-offset-x: -20px; + --border-sidemenu: 0 none; + --border-radius-toolbar: 8px; + --toolbar-tab-radius: 5px; + --toolbar-tab-line-radius: 2px; + --toolbar-tab-line-height: 3px; + --toolbar-tab-line-bottom: 2px; + --background-statusbar: var(--background-toolbar); + --border-toolbar-z-clear: transparent; + --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); + --shadow-side-panel: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06); + --layout-padding-toolbar: 0 10px; + --layout-padding-left-panel: 0px 3px 8px 40px; + --layout-padding-left-panel-rtl: 0px 40px 8px 3px; + --layout-padding-right-panel: 0px 4px 8px 3px; + --layout-padding-right-panel-rtl: 0px 3px 8px 4px; + --layout-padding-right-panel-content: 5px 12px 0 12px; + --layout-padding-right-panel-content-rtl: 5px 12px 0 12px; + --layout-padding-x-side-panel: 6px; + --layout-padding-y-side-panel: 4px; + + --celleditor-height: 24px; + --celleditor-line-height: 20px; + --celleditor-border-width: 0px; + + --x-small-btn-size: 24px; + --x-small-btn-icon-size: 24px; + --toolbar-small-btn-margin-top: 12px; + --x-huge-btn-height: calc(var(--x-small-btn-size) * 2 + var(--toolbar-small-btn-margin-top)); + --x-huge-btn-icon-size: 28px; + --toolbar-height-controls: 84px; + --statusbar-height: 32px; + --toolbar-group-height: var(--x-huge-btn-height); + --form-control-size: var(--x-small-btn-size); + --x-category-btn-size: var(--x-small-btn-size); + --category-btn-y-margin-small: 2px; + --category-btn-y-margin-large: 10px; + --large-btn-dataview-y-margin: 0; + + --border-radius-form-control: 4px; + --border-radius-checkbox: 4px; + --border-radius-button-base: 4px; + --border-radius-button-toolbar: var(--border-radius-button-base); + --border-radius-button-normal: var(--border-radius-button-base); + --border-radius-button-category: var(--border-radius-button-base); + --border-radius-window: 8px; + --border-radius-dropdown-menu: 8px; + --border-radius-dataview-item: 2px; + + --line-height-base: 1.5; + --input-height-base: 24px; + + --font-family-base: "Segoe UI"; + --font-size-base: 12px; + + --background-fill-input: var(--background-normal); + --background-fill-input-disabled: var(--background-normal); + --background-fill-input-readonly: var(--background-normal); + + --highlight-category-button-hover: rgba(18, 132, 238, 0.05); + --highlight-category-button-pressed: rgba(18, 132, 238, 0.12); + --highlight-header-input-hover: var(--highlight-header-button-hover); + --highlight-header-input-pressed: var(--background-fill-input); + + --border-fill-input: var(--border-regular-control); + //--border-fill-input-focused: var(--border-control-focus); + --border-fill-input-focused: #4A87E7; + --border-fill-input-disabled: var(--border-regular-control); + --border-fill-input-readonly: var(--border-regular-control); + + --text-fill-input: var(--text-normal); + --text-fill-input-disabled: var(--text-normal); + --text-fill-input-readonly: var(--text-normal); + + --shadow-fill-input: 0 0 0 1px var(--border-fill-input-focused); + --shadow-control-focus: inset 0 0 0 1px var(--border-control-focus), 0 0 0 1px var(--border-control-focus); + --shadow-control-pressed-focus: var(--shadow-control-focus); + --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus); + + // dropdown button + --dd-button-size: 16px; + --dd-button-x-padding: 6px; + + // checkbox + --chb-size: 14px; + --chb-v-margin: 2px; + --chb-border-radius: 4px; + --chb-check-mark-background: var(--background-normal); + --chb-background-normal: var(--background-normal); + --chb-background-normal-hover: #F9F9F9; + --chb-background-checked-hover: #4A87E7; + --chb-background-checked: #4A87E7; + --chb-border-normal: #969696; + --chb-border-normal-hover: #969696; + --chb-border-normal-focus: #969696; + --chb-border-checked: #4A87E7; + --chb-border-checked-hover: #4A87E7; + --chb-border-checked-focus: #4A87E7; + + // radio + --rb-size: 14px; + --rb-check-mark-size: 2px; + --rb-check-mark-background: var(--background-normal); + --rb-background-normal: var(--background-normal); + --rb-background-normal-hover: #F9F9F9; + --rb-background-checked-hover: #4A87E7; + --rb-background-checked: #4A87E7; + --rb-border-normal: #969696; + --rb-border-normal-hover: #969696; + --rb-border-normal-focus: #969696; + --rb-border-checked: #4A87E7; + --rb-border-checked-hover: #4A87E7; + --rb-border-checked-focus: #4A87E7; + + // slider + --slider-track-height: 4px; + --slider-border-radius: 2px; + --slider-track-background-normal: #EAEAEA; + --slider-track-background-filled: #446ECA; + --slider-thumb-size: 18px; + --slider-thumb-border-size: 3px; + --slider-thumb-border-radius: 50%; + --slider-thumb-background-normal: #4A87E7; + --slider-thumb-border-normal: #fff; + --slider-thumb-background-hover: #446ECA; + --slider-thumb-background-active: #3D59AF; + --slider-thumb-shadow: 0 1px 2px 0 #0000000F, 0 1px 3px 0 #0000001A; + + --sprite-button-small-width: 48px; + --sprite-button-big-width: 56px; + --sprite-button-huge-width: 80px; + --sprite-button-icons-base-url: ~"@{app-image-const-path}/v2"; + + --header-input-height: var(--input-height-base); + --header-input-line-height: var(--line-height-base); + --border-header-input-focused: var(--border-fill-input-focused); + + --header-component-height: var(--x-small-btn-size); + --header-component-width: var(--x-small-btn-size); + --header-component-line-height: var(--x-small-btn-size); + --header-component-padding: 0; + --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; + --simple-editor-layout-collapse-button-rigth: 8px; + --toolbar-preferred-tab-style: line; + + --content-padding-top: 8px; + } +} \ No newline at end of file diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index d707aa4947..4f9e10d6fd 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap diff --git a/apps/pdfeditor/main/resources/less/app.less b/apps/pdfeditor/main/resources/less/app.less index 22148543db..8a99800e0d 100644 --- a/apps/pdfeditor/main/resources/less/app.less +++ b/apps/pdfeditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap // -------------------------------------------------- diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 90e9d5ab7a..aebc0e279b 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap // -------------------------------------------------- diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less index b8594733e9..7f7e3889e6 100644 --- a/apps/spreadsheeteditor/main/resources/less/app.less +++ b/apps/spreadsheeteditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap // -------------------------------------------------- diff --git a/apps/visioeditor/main/resources/less/app.less b/apps/visioeditor/main/resources/less/app.less index 97a8354302..48ef2415c1 100644 --- a/apps/visioeditor/main/resources/less/app.less +++ b/apps/visioeditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap // -------------------------------------------------- From fd5db55fb6e9b30aae07a1f9f2e31c00ed8fca40 Mon Sep 17 00:00:00 2001 From: Alexey Koshelev Date: Tue, 27 May 2025 12:17:40 +0300 Subject: [PATCH 04/29] [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 05/29] [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 @@