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

Merge pull request 'feature/celleditor-skeleton' (#446) from feature/celleditor-skeleton into release/v9.0.0

Browse Source
This commit is contained in:
Maxim Kadushkin
2025-05-29 09:45:22 +00:00
parent 1fd279de66 dbb9e29ce5
commit 5d50e2e8be
18 changed files with 284 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/common/main/lib/controller/ExternalDiagramEditor.js
View File

@ -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');

5
apps/common/main/lib/controller/ExternalMergeEditor.js
View File

@ -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();

5
apps/common/main/lib/controller/ExternalOleEditor.js
View File

@ -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');

15
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;
}`
},
},
@ -86,6 +89,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;
}`
},
},
@ -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;
}`
},
},

3
apps/common/main/resources/less/colors-table-classic.less
View File

@ -204,6 +204,8 @@
--border-toolbar-z-clear: var(--border-toolbar);
--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);
@ -227,6 +229,7 @@
--shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
--shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);
--toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar);
--toolbar-preferred-tab-style: fill;
//--rb-background-normal: var(--background-normal);

3
apps/common/main/resources/less/colors-table-dark-contrast.less
View File

@ -205,6 +205,8 @@
--border-toolbar-z-clear: var(--border-toolbar);
--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);
@ -228,6 +230,7 @@
--shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
--shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);
--toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar);
--toolbar-preferred-tab-style: fill;
//--rb-background-normal: var(--background-normal);

3
apps/common/main/resources/less/colors-table-dark.less
View File

@ -206,6 +206,8 @@
--border-toolbar-z-clear: var(--border-toolbar);
--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);
@ -229,6 +231,7 @@
--shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
--shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);
--toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar);
--toolbar-preferred-tab-style: fill;
//--rb-background-normal: var(--background-normal);

3
apps/common/main/resources/less/colors-table-gray.less
View File

@ -184,6 +184,8 @@
--border-toolbar-z-clear: var(--border-toolbar);
--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);
@ -207,6 +209,7 @@
--shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus);
--shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal);
--toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar);
--toolbar-preferred-tab-style: fill;
//--rb-background-normal: var(--background-normal);

12
apps/common/main/resources/less/colors-table-ie-fix.less
View File

@ -93,6 +93,18 @@
@component-disabled-opacity-ie: .4;
// cell editor SSE
@celleditor-height-ie: 24px;
@celleditor-line-height-ie: 20px;
@celleditor-border-width-ie: 0px;
@celleditor-input-border-ie: 1px solid #E1E1E1;
@celleditor-input-border-radius-ie: 4px;
@celleditor-cell-name-border-right-ie: 1px solid #E1E1E1;
@celleditor-func-label-margin-left-ie: 1px;
@x-small-btn-size-ie: 24px;
.ie {
.toolbar__icon.toolbar__icon-big {
@big-icon-background-image-ie: ~"url(@{app-image-const-path}/iconsbig.png)";

4
apps/common/main/resources/less/colors-table-white.less
View File

@ -201,6 +201,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;

8
apps/common/main/resources/less/colors-table.less
View File

@ -257,6 +257,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;
@ -512,6 +516,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);

9
apps/spreadsheeteditor/main/app/controller/CellEditor.js
View File

@ -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);

3
apps/spreadsheeteditor/main/app/controller/Main.js
View File

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

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 {
@ -160,7 +165,8 @@
top: 0;
bottom: 0;
left: 875px;
width: 690px;
width: inherit;
max-width: 690px;
height: 45px;
}
.rtl .loadmask > .sktoolbar li.fat {
@ -169,9 +175,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 {
@ -179,30 +189,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 {
@ -135,7 +140,8 @@
top: 0;
bottom: 0;
left: 875px;
width: 690px;
width: inherit;
max-width: 690px;
height: 45px;
}
.rtl .loadmask > .sktoolbar li.fat {
@ -144,9 +150,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 {
@ -154,30 +164,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 {

53
apps/spreadsheeteditor/main/index_internal.html
View File

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

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

@ -11,6 +11,14 @@
<!-- splash -->
<style type="text/css">
.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;
@ -32,9 +40,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 {
@ -42,30 +54,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 {
.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 {

65
apps/spreadsheeteditor/main/resources/less/celleditor.less
View File

@ -1,13 +1,15 @@
#cell-editing-box {
border-bottom: solid @celleditor-border-width @border-toolbar-ie;
border-bottom: solid @celleditor-border-width-ie @border-toolbar-ie;
border-bottom: solid @celleditor-border-width @border-toolbar;
border-left: solid @celleditor-border-width @border-toolbar-ie;
border-left: solid @celleditor-border-width-ie @border-toolbar-ie;
border-left: solid @celleditor-border-width @border-toolbar;
min-height: @celleditor-height-ie;
min-height: @celleditor-height;
background-color: @background-pane-ie;
background-color: @background-pane;
.ce-group-name {
height: @celleditor-height-ie;
height: @celleditor-height;
//border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
//border-bottom: @scaled-one-px-value solid @border-toolbar;
@ -16,30 +18,28 @@
#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-ie - @celleditor-border-width-ie);
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-ie;
border: @celleditor-input-border;
border-right: @celleditor-cell-name-border-right-ie;
border-right: @celleditor-cell-name-border-right;
box-shadow: 0 @celleditor-border-width-ie 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-ie;
border: @celleditor-input-border;
border-left: @celleditor-cell-name-border-right-ie;
border-left: @celleditor-cell-name-border-right;
}
&[disabled] {
@ -64,6 +64,7 @@
background-color: @background-normal-ie;
background-color: transparent;
width: 16px;
height: @celleditor-height-ie;
height: @celleditor-height;
.inner-box-caret {
@ -92,11 +93,8 @@
#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-ie);
.margin-left(@celleditor-func-label-margin-left);
.border-radius(0);
@ -108,7 +106,7 @@
&:not(.expanded) {
#ce-func-label {
border-bottom: @celleditor-border-width solid @border-toolbar-ie;
border-bottom: @celleditor-border-width-ie solid @border-toolbar-ie;
border-bottom: @celleditor-border-width solid @border-toolbar;
}
}
@ -128,27 +126,30 @@
}
.ce-group-content {
margin: 0 0px 0 120px;
margin: 0 0px 0 calc(100px + 3px + @celleditor-func-label-margin-left-ie + @x-small-btn-size-ie);
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;
border-left: @celleditor-border-width-ie solid @border-toolbar-ie;
border-left: @celleditor-border-width solid @border-toolbar;
.rtl & {
border-left: none;
border-right: @celleditor-border-width solid @border-toolbar-ie;
border-right: @celleditor-border-width-ie 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-ie + @x-small-btn-size-ie) 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-ie;
border: @celleditor-input-border;
box-shadow: none;
.padding-x(3px, 19px);
.font-size-medium();
line-height: @celleditor-line-height-ie;
line-height: @celleditor-line-height;
padding-bottom: 0;
&::-webkit-scrollbar-button:single-button{
@ -173,9 +174,8 @@
}
#ce-cell-name, #ce-cell-content {
body:not(.theme-white) & {
border-radius: 0
}
border-radius: @celleditor-input-border-radius-ie;
border-radius: @celleditor-input-border-radius;
}
&+.layout-resizer {
@ -194,6 +194,7 @@
#ce-btn-expand {
width: 16px;
height: @celleditor-height-ie;
height: @celleditor-height;
.border-radius(0);
background: transparent;