pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 10:46:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

[SSE] Skeleton formula bar

Browse Source
This commit is contained in:
Alexey Koshelev
2025-05-20 18:19:01 +03:00
parent 4bdd1aab3f
commit 9d899e3357
3 changed files with 102 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/common/main/lib/controller/Themes.js
View File

@ -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;
}`
},
},

55
apps/spreadsheeteditor/main/index.html
View File

@ -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 {

55
apps/spreadsheeteditor/main/index.html.deploy
View File

@ -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 {