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

changed skeleton for thembed toolbar for PDF, PE, SSE

Browse Source
This commit is contained in:
Dmitry-Ilyushechkin
2025-04-22 19:07:07 +03:00
parent b1bed16b66
commit ae5718606d
12 changed files with 492 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,6 +62,7 @@ define([
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f7f7f7;
--sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
--sk-background-toolbar-header-slide: #BE664F; --sk-background-toolbar-header-cell: #40865c;
--sk-background-toolbar-tab: rgba(0,0,0,.15); --sk-background-toolbar-button: #d8dadc;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
--sk-canvas-background: #eee; --sk-canvas-content-background: #fff;
@ -77,6 +78,7 @@ define([
css: `.loadmask {--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #446995; --sk-background-toolbar-header-pdf: #aa5252;
--sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c;
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@ -94,6 +96,7 @@ define([
--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
--sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
--sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
--sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@ -115,6 +118,7 @@ define([
--sk-height-toolbar-controls: 66px; --sk-layout-padding-toolbar: 0;
--sk-shadow-toolbar: inset 0 -1px #616161; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #2a2a2a; --sk-background-toolbar-header-pdf: #2a2a2a;
--sk-background-toolbar-header-slide: #2a2a2a;--sk-background-toolbar-header-cell: #2a2a2a;
--sk-background-toolbar: #404040; --sk-background-toolbar-controls: #404040;
--sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;
@ -135,6 +139,7 @@ define([
css: `.loadmask {--sk-height-toolbar-controls: 66px;--sk-layout-padding-toolbar: 0;
--sk-shadow-toolbar: inset 0 -1px #cbcbcb; --sk-border-radius-toolbar: 0;
--sk-background-toolbar-header-word: #f7f7f7; --sk-background-toolbar-header-pdf: #f7f7f7;
--sk-background-toolbar-header-slide: #f7f7f7;--sk-background-toolbar-header-cell: #f7f7f7;
--sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1;
--sk-background-toolbar-tab: #e0e0e0; --sk-background-toolbar-button: #e0e0e0;
--sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px;

2
apps/documenteditor/main/index.html
View File

@ -99,7 +99,7 @@
.pdf-form .loadmask > .brendpanel {
background: #AA5252;
background: var(--sk-background-toolbar-header-pdf, #AA5252);
background: var(--sk-background-toolbar-header-pdf);
}
.loadmask > .brendpanel .underline {

2
apps/documenteditor/main/index.html.deploy
View File

@ -52,7 +52,7 @@
.pdf-form .loadmask > .brendpanel {
background: #AA5252;
background: var(--sk-background-toolbar-header-pdf, #AA5252);
background: var(--sk-background-toolbar-header-pdf);
}
.loadmask > .brendpanel .underline {

25
apps/pdfeditor/main/app/controller/Viewport.js
View File

@ -85,7 +85,7 @@ define([
me.header.btnPrintQuick[value ? 'show' : 'hide']();*/
},
'view:compact' : function (toolbar, state) {
me.viewport.vlayout.getItem('toolbar').height = state ?
me.viewport.vlayout.getItem('toolbar').height = state ?
Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
},
'undo:disabled' : function (state) {
@ -111,6 +111,7 @@ define([
});
Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this));
Common.NotificationCenter.on('tabbackground:changed', this.onTabBackgroundChange.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
this._initEditing = true;
},
@ -362,6 +363,28 @@ define([
this.viewport.vlayout.getItem('toolbar').el.toggleClass('style-off-tabs', background==='toolbar');
},
onThemeChanged: function () {
if (Common.UI.Themes.available()) {
var _intvars = Common.Utils.InternalSettings;
var $filemenu = $('.toolbar-fullview-panel');
const computed_style = window.getComputedStyle(document.body);
_intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
_intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
$filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
_intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
const height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
if (this.viewport?.vlayout?.getItem('statusbar')) {
this.viewport.vlayout.getItem('statusbar').height = height;
}
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}
},
textFitPage: 'Fit to Page',
textFitWidth: 'Fit to Width',
txtDarkMode: 'Dark mode'

122
apps/pdfeditor/main/index.html
View File

@ -10,7 +10,25 @@
<!-- splash -->
<style type="text/css">
.theme-dark, .theme-type-dark {
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--sk-border-radius-toolbar: 8px;
--sk-background-toolbar: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-pdf: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
/* .theme-dark, .theme-type-dark {
--toolbar-header-pdf: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
@ -18,23 +36,23 @@
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #555;
/*--canvas-content-background: #fff;*/
--skeleton-canvas-page-border: #555;
}
/* --skeleton-canvas-page-border: #555;
} */
.content-theme-dark {
/* .content-theme-dark {
--skeleton-canvas-content-background: #3a3a3a;
--skeleton-canvas-page-border: #2a2a2a;
--skeleton-canvas-line: rgba(255,255,255,.05);
}
} */
.theme-classic-light {
/* .theme-classic-light {
--background-toolbar: #f1f1f1;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #e0e0e0;
/* --highlight-button-hover: #e0e0e0;
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--loadmask-canvas-page-border: #ccc;
}
} */
.loadmask {
left: 0;
@ -45,20 +63,23 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
.loadmask > .brendpanel {
width: 100%;
/* width: 100%; */
min-height: 28px;
background: #AA5252;
background: var(--toolbar-header-pdf, #AA5252);
background: var(--sk-background-toolbar-header-pdf);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
/* background: var(--background-toolbar, #f1f1f1); */
background: var(--sk-background-toolbar-header-pdf);
}
.loadmask > .brendpanel > div {
@ -68,7 +89,8 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
/* margin-left: auto; */
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -78,12 +100,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -92,19 +114,35 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
/* margin: 0 10px; */
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
/*height: 66px;*/
/*height: var(--sk-height-toolbar-controls, 66px);*/
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
/*padding: 10px 7px;*/
/*padding: 0 7px;*/
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask > .sktoolbar ul {
@ -112,12 +150,12 @@
padding: 0;
white-space: nowrap;
position: relative;
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -149,19 +187,19 @@
.loadmask > .placeholder {
box-sizing: border-box;
background: #fff;
background: var(--skeleton-canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
width: 794px;
margin: 19px auto 46px;
height: 1123px;
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, #bbbec2);
border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
padding-top: 50px;
}
.loadmask > .placeholder > .line {
height: 15px;
margin: 30px 80px;
background: var(--skeleton-canvas-line, rgba(0,0,0,.05));
background: var(--sk-canvas-line, rgba(0,0,0,.05));
overflow: hidden;
position: relative;
@ -283,16 +321,40 @@
<script src="../../common/main/lib/util/docserviceworker.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
</div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul>
</section>
</div>
<div class="placeholder" style="display: none;">
<div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div>
</div>
</div>
<script>
if ( !!window.skhtml ) {
var skl = document.getElementById("loading-mask");
if ( skl ) {
skl.innerHTML = window.skhtml;
delete skl;
}
delete window.skhtml;
}
</script>
<div id="viewport" role="main"></div>
<script>

71
apps/pdfeditor/main/index.html.deploy
View File

@ -11,10 +11,22 @@
<!-- splash -->
<style type="text/css">
.content-theme-dark {
--skeleton-canvas-content-background: #3a3a3a;
--skeleton-canvas-page-border: #2a2a2a;
--skeleton-canvas-line: rgba(255,255,255,.05);
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--sk-border-radius-toolbar: 8px;
--sk-background-toolbar: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-pdf: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
@ -26,20 +38,20 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
.loadmask > .brendpanel {
width: 100%;
min-height: 28px;
background: #AA5252;
background: var(--toolbar-header-pdf, #AA5252);
background: var(--sk-background-toolbar-header-pdf);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
background: var(--sk-background-toolbar-header-pdf);
}
.loadmask > .brendpanel > div {
@ -49,7 +61,7 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -59,12 +71,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -73,19 +85,29 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask > .sktoolbar ul {
@ -93,12 +115,12 @@
padding: 0;
white-space: nowrap;
position: relative;
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -130,20 +152,19 @@
.loadmask > .placeholder {
box-sizing: border-box;
background: #fff;
background: var(--skeleton-canvas-content-background, var(--canvas-content-background, #fff));
background: var(--sk-canvas-content-background, #fff);
width: 794px;
margin: 19px auto 46px;
height: 1123px;
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
padding-top: 50px;
}
.loadmask > .placeholder > .line {
height: 15px;
margin: 30px 80px;
background: rgba(0,0,0,.05);
background: var(--skeleton-canvas-line, rgba(0,0,0,.05));
background: var(--sk-canvas-line, rgba(0,0,0,.05));
overflow: hidden;
position: relative;
@ -251,7 +272,7 @@
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><section class="box-controls"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></section></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="viewport" role="main"></div>
<script>

23
apps/presentationeditor/main/app/controller/Viewport.js
View File

@ -160,6 +160,7 @@ define([
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('search:show', _.bind(this.onSearchShow, this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
},
onAppShowed: function (config) {
@ -387,6 +388,28 @@ define([
this._isDisabledPreview = disable;
},
onThemeChanged: function () {
if (Common.UI.Themes.available()) {
var _intvars = Common.Utils.InternalSettings;
var $filemenu = $('.toolbar-fullview-panel');
const computed_style = window.getComputedStyle(document.body);
_intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
_intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
$filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
_intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
const height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
if (this.viewport?.vlayout?.getItem('statusbar')) {
this.viewport.vlayout.getItem('statusbar').height = height;
}
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}
},
textFitPage: 'Fit to Page',
textFitWidth: 'Fit to Width'
}, PE.Controllers.Viewport));

116
apps/presentationeditor/main/index.html
View File

@ -9,7 +9,25 @@
<!-- splash -->
<style type="text/css">
.theme-dark, .theme-type-dark {
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--sk-border-radius-toolbar: 8px;
--sk-background-toolbar: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-slide: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
/* .theme-dark, .theme-type-dark {
--toolbar-header-presentation: #2a2a2a;
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
@ -17,20 +35,20 @@
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
}
/* --canvas-page-border: #555;
} */
.theme-classic-light {
/* .theme-classic-light {
}
.theme-light {
--background-toolbar: #f1f1f1;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #d8dadc;
/* --highlight-button-hover: #d8dadc;
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
}
} */
.loadmask {
left: 0;
@ -41,20 +59,23 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
.loadmask > .brendpanel {
width: 100%;
/* width: 100%; */
min-height: 28px;
background: #BE664F;
background: var(--toolbar-header-presentation, #BE664F);
background: var(--sk-background-toolbar-header-slide);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
/* background: var(--background-toolbar, #f1f1f1); */
background: var(--sk-background-toolbar-header-slide);
}
.loadmask > .brendpanel > div {
@ -64,7 +85,8 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
/* margin-left: auto; */
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -74,12 +96,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -88,19 +110,35 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
/* margin: 0 10px; */
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
/*height: 66px;*/
/*height: var(--sk-height-toolbar-controls, 66px);*/
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
/*padding: 10px 7px;*/
/*padding: 0 7px;*/
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask > .sktoolbar ul {
@ -108,12 +146,12 @@
padding: 0;
white-space: nowrap;
position: relative;
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -175,9 +213,9 @@
height: 100%;
width: 100%;
background: #fff;
background: var(--canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
@ -304,17 +342,41 @@
<script src="../../common/main/lib/util/docserviceworker.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<div class="spacer"></div>
</div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
</section>
</div>
<div class="placeholder" style="display: none;">
<div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line empty"></div><div class="line"></div></div></div></div>
</div>
</div>
<script>
if ( !!window.skhtml ) {
var skl = document.getElementById("loading-mask");
if ( skl ) {
skl.innerHTML = window.skhtml;
delete skl;
}
delete window.skhtml;
}
</script>
<div id="viewport" role="main"></div>
<script>

70
apps/presentationeditor/main/index.html.deploy
View File

@ -11,6 +11,24 @@
<!-- splash -->
<style type="text/css">
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--sk-border-radius-toolbar: 8px;
--sk-background-toolbar: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-slide: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;
@ -20,7 +38,7 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
@ -28,12 +46,13 @@
width: 100%;
min-height: 28px;
background: #BE664F;
background: var(--toolbar-header-presentation, #BE664F);
background: var(--sk-background-toolbar-header-slide);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
background: var(--sk-background-toolbar-header-slide);
}
.loadmask > .brendpanel > div {
@ -43,7 +62,7 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -53,12 +72,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -67,19 +86,30 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
padding: 10px 6px;
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask > .sktoolbar ul {
@ -87,12 +117,12 @@
padding: 0;
white-space: nowrap;
position: relative;
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -154,9 +184,9 @@
height: 100%;
width: 100%;
background: #fff;
background: var(--canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
border: var(--scaled-one-px-value, 1px) solid var(--sk--canvas-page-border, var(--canvas-page-border, #bbbec2));
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;
@ -284,8 +314,10 @@
<div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 54px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space" style="width: 250px;"/><li style="width: 70px;"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li class="big" style="width: 48px;"/><li class="split" /><li class="space"/><li style="width: 236px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li class="big"/><li class="big"/><li class="space"/><li class="fat"/><li class="space"/><li style="width: 70px;"/></ul>
</section>
</div>
<div class="placeholder" style="display: none;">
<div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line empty"></div><div class="line"></div></div></div></div>

20
apps/spreadsheeteditor/main/app/controller/Viewport.js
View File

@ -120,6 +120,7 @@ define([
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('tabstyle:changed', this.onTabStyleChange.bind(this));
Common.NotificationCenter.on('tabbackground:changed', this.onTabBackgroundChange.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
},
setApi: function(api) {
@ -355,6 +356,25 @@ define([
this.viewport.vlayout.getItem('toolbar').el.toggleClass('style-off-tabs', background==='toolbar');
},
onThemeChanged: function () {
if (Common.UI.Themes.available()) {
var _intvars = Common.Utils.InternalSettings;
var $filemenu = $('.toolbar-fullview-panel');
const computed_style = window.getComputedStyle(document.body);
_intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84));
_intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls'));
$filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height'));
this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ?
_intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal');
this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}
},
textHideFBar: 'Hide Formula Bar',
textHideHeadings: 'Hide Headings',
textHideGridlines: 'Hide Gridlines',

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

@ -8,7 +8,25 @@
<!-- splash -->
<style type="text/css">
.theme-dark, .theme-type-dark {
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--sk-border-radius-toolbar: 8px;
--sk-background-toolbar: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-cell: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
/* .theme-dark, .theme-type-dark {
--toolbar-header-spreadsheet: #2a2a2a;
--background-toolbar: #404040;
--background-normal: #333;
@ -17,7 +35,7 @@
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
/* --canvas-page-border: #555;
}
.theme-classic-light {
@ -26,11 +44,11 @@
.theme-light {
--background-toolbar: #f1f1f1;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #d8dadc;
/* --highlight-button-hover: #d8dadc;
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
}
} */
.loadmask {
left: 0;
@ -41,20 +59,22 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
.loadmask > .brendpanel {
width: 100%;
/* width: 100%; */
min-height: 28px;
background: #40865c;
background: var(--toolbar-header-spreadsheet, #40865c);
background: var(--sk-background-toolbar-header-cell);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
/* background: var(--background-toolbar, #f1f1f1); */
background: var(--sk-background-toolbar-header-cell);
}
.loadmask > .brendpanel > div {
@ -64,7 +84,8 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
/* margin-left: auto; */
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -74,12 +95,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -88,17 +109,33 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
/* margin: 0 10px; */
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
height: 46px;
padding: 10px 6px;
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
/*padding: 10px 7px;*/
/*padding: 0 7px;*/
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls, 66px);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask ul {
@ -109,12 +146,12 @@
}
.loadmask > .sktoolbar ul {
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -180,12 +217,12 @@
.loadmask > .placeholder {
background: #fff;
background: var(--canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
width: 100%;
height: 100%;
font-size: 0;
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
@ -310,12 +347,28 @@
<script src="../../common/main/lib/util/htmlutils.js"></script>
<script src="../../common/main/lib/util/docserviceworker.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;"><div>
<div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div class="brendpanel" style="display: none;">
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
<div class="spacer"></div>
</div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
</section>
</div>
<div class="skformula" style="display: none;">
<ul><li/><li/></ul>
@ -325,6 +378,18 @@
</div>
</div>
<script>
if ( !!window.skhtml ) {
var skl = document.getElementById("loading-mask");
if ( skl ) {
skl.innerHTML = window.skhtml;
delete skl;
}
delete window.skhtml;
}
</script>
<div id="viewport" role="main"></div>
<script>

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

@ -11,6 +11,24 @@
<!-- splash -->
<style type="text/css">
.loadmask {
--sk-height-toolbar-controls:84px;
--sk-layout-padding-toolbar:0 10px;
--sk-layout-padding-header: 0 10px;
--sk-shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--sk-border-radius-toolbar: 8px;
--sk-background-toolbar: #f3f3f3;
--sk-background-toolbar-controls: #fff;
--sk-canvas-background: #f3f3f3;
--sk-background-toolbar-header-cell: #f3f3f3;
--sk-background-toolbar-tab: #eaeaea;
--sk-background-toolbar-button: #f9f9f9;
--sk-layout-padding-toolbar-controls: 0 8px;
--sk-canvas-content-background: #fff;
--sk-canvas-page-border: #dde0e5;
--sk-canvas-line: rgba(0,0,0,.05);
}
.loadmask {
left: 0;
top: 0;
@ -20,7 +38,7 @@
overflow: hidden;
border: none;
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
background: var(--sk-canvas-background, #eee);
z-index: 1002;
}
@ -28,12 +46,13 @@
width: 100%;
min-height: 28px;
background: #40865c;
background: var(--toolbar-header-spreadsheet, #40865c);
background: var(--sk-background-toolbar-header-cell);
padding: var(--sk-layout-padding-header);
}
.loadmask > .brendpanel .underline {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
background: var(--sk-background-toolbar-header-cell);
}
.loadmask > .brendpanel > div {
@ -43,7 +62,7 @@
}
.loadmask > .brendpanel .spacer {
margin-left: auto;
flex-grow: 1;
}
.loadmask > .brendpanel .rect {
@ -53,12 +72,12 @@
border-radius: 3px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .brendpanel .underline .rect {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-tab);
opacity: 0.4;
}
@ -67,17 +86,30 @@
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
background: var(--sk-background-toolbar-tab);
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
height: 46px;
padding: 10px 6px;
padding: 0;
padding: var(--sk-layout-padding-toolbar, 0);
box-sizing: content-box;
background-color: var(--sk-background-toolbar, #f7f7f7);
}
.loadmask > .sktoolbar > .box-controls {
background: var(--sk-background-toolbar-controls, #f7f7f7);
border-radius: var(--sk-border-radius-toolbar, 0);
padding: var(--sk-layout-padding-toolbar-controls);
box-shadow: var(--sk-shadow-toolbar);
height: 66px;
height: var(--sk-height-toolbar-controls);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.loadmask ul {
@ -88,12 +120,12 @@
}
.loadmask > .sktoolbar ul {
height: 25px;
height: 20px;
}
.loadmask > .sktoolbar li {
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
background: var(--sk-background-toolbar-button, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -159,12 +191,12 @@
.loadmask > .placeholder {
background: #fff;
background: var(--canvas-content-background, #fff);
background: var(--sk-canvas-content-background, #fff);
width: 100%;
height: 100%;
font-size: 0;
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
border: var(--scaled-one-px-value, 1px) solid var(--sk-canvas-page-border, #bbbec2);
white-space: nowrap;
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
@ -292,8 +324,10 @@
<div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
<section class="box-controls">
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/><li class="fat"/></ul>
<ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"/><li style="width: 223px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 140px;"/><li class="space"/><li style="width: 146px;"/><li class="space"/><li style="width: 85px;"/></ul>
</section>
</div>
<div class="skformula" style="display: none;">
<ul><li/><li/></ul>