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

Merge pull request 'changed skeleton for thembed toolbar for PDF, PE, SSE' (#386) from feature/skeleton-change into feature/modern-koch-design-tbar

Browse Source
This commit is contained in:
Maxim Kadushkin
2025-04-27 21:24:28 +00:00
parent e4a220cc1f d2bd5ed4ab
commit a4255bb035
25 changed files with 537 additions and 202 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 {

22
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,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');
}
},
textFitPage: 'Fit to Page',
textFitWidth: 'Fit to Width',
txtDarkMode: 'Dark mode'

24
apps/pdfeditor/main/app/template/StatusBar.template
View File

@ -1,7 +1,7 @@
<div class="statusbar" style="display:table;">
<div class="statusbar">
<div class="status-group dropup">
<label id="label-pages" class="status-label dropdown-toggle margin-top-large" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
<label id="label-pages" class="status-label dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
<div id="status-goto-box" class="dropdown-menu">
<label class="float-left"><%= textGotoPage %></label>
<div id="status-goto-page" style="display:inline-block;"></div>
@ -9,25 +9,25 @@
</div>
<div class="separator short space"></div>
<div class="status-group">
<span id="slot-status-btn-prev" style="display: inline-block;" class="margin-top-small"></span>
<span id="slot-status-btn-next" style="display: inline-block;" class="margin-top-small"></span>
<span id="slot-status-btn-prev" style="display: inline-block;"></span>
<span id="slot-status-btn-next" style="display: inline-block;"></span>
</div>
<div class="status-group" style="width:100%; text-align:center;">
<label id="label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
<label id="label-action" class="status-label" data-layout-name="statusBar-actionStatus"></label>
</div>
<div class="status-group" style="">
<div class="status-group cnt-flex-center" style="">
<div class="separator short hide-select-tools"></div>
<button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
<button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
<button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
<button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
<div class="separator short hide-select-tools"></div>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
<div class="cnt-zoom">
<div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" role="button" aria-haspopup="menu" aria-expanded="false">
<label id="label-zoom" class="status-label">Zoom 100%</label>
</div>
</div>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
</div>
</div>

3
apps/pdfeditor/main/app/view/Viewport.js
View File

@ -95,7 +95,8 @@ define([
stretch: true
}, {
el: $container.find(' > .layout-item#statusbar'),
height: 25
alias: 'statusbar',
height: parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height'))
}
]
});

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>

1
apps/pdfeditor/main/resources/less/app.less
View File

@ -99,6 +99,7 @@
@import "../../../../common/main/resources/less/updown-picker.less";
@import "../../../../common/main/resources/less/calendar.less";
@import "../../../../common/main/resources/less/dimension-picker.less";
@import "../../../../common/main/resources/less/statusbar.less";
// App
// --------------------------------------------------

7
apps/pdfeditor/main/resources/less/statusbar.less
View File

@ -1,7 +1,5 @@
@statusbar-height: 25px;
@statusbar-height: var(--statusbar-height, 25px);
.statusbar {
display: table;
padding: 2px;
.status-label {
position: relative;
@ -32,9 +30,7 @@
}
.status-group {
display: table-cell;
white-space: nowrap;
vertical-align: top;
&.dropup {
position: static;
}
@ -66,7 +62,6 @@
.cnt-zoom {
display: inline-block;
vertical-align: middle;
margin-top: 4px;
.dropdown-menu {
min-width: 80px;
.margin-left(-4px);

20
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,25 @@ 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');
this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}
},
textFitPage: 'Fit to Page',
textFitWidth: 'Fit to Width'
}, PE.Controllers.Viewport));

26
apps/presentationeditor/main/app/template/StatusBar.template
View File

@ -1,33 +1,33 @@
<div class="statusbar" style="display:table;">
<div class="statusbar">
<div class="status-group">
<div id="slot-status-btn-preview" style="display: inline-block;" class="margin-top-small margin-left-10"></div>
<div id="slot-status-btn-preview" style="display: inline-block;" class=" margin-left-10"></div>
</div>
<div class="status-group dropup">
<label id="status-label-pages" class="status-label dropdown-toggle margin-top-large margin-left-7" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<label id="status-label-slide-master" class="status-label margin-top-large margin-left-7" style="display: none;" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= scope.textSlideMaster %></label>
<label id="status-label-pages" class="status-label dropdown-toggle margin-left-7" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<label id="status-label-slide-master" class="status-label margin-left-7" style="display: none;" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= scope.textSlideMaster %></label>
<div id="status-goto-box" class="dropdown-menu">
<label class="float-left"><%= scope.goToPageText %></label>
<div id="status-goto-page" style="display:inline-block;"></div>
</div>
</div>
<div class="status-group" style="width:100%; text-align:center;">
<label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
<label id="status-label-action" class="status-label" data-layout-name="statusBar-actionStatus"></label>
</div>
<div class="status-group" style="">
<span id="btn-cnt-lang" class="el-edit margin-top-small" data-layout-name="statusBar-textLang"></span>
<span id="btn-doc-lang" class="el-edit margin-top-small" data-layout-name="statusBar-docLang"></span>
<div class="status-group cnt-flex-center" style="">
<span id="btn-cnt-lang" class="el-edit" data-layout-name="statusBar-textLang"></span>
<span id="btn-doc-lang" class="el-edit" data-layout-name="statusBar-docLang"></span>
<div class="separator short el-edit space"></div>
<span id="btn-doc-spell" class="el-edit margin-top-small"></span>
<span id="btn-doc-spell" class="el-edit"></span>
<div class="separator short el-edit el-lang"></div>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide">&nbsp;</i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide">&nbsp;</i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
<div class="cnt-zoom">
<div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" role="button" aria-haspopup="menu" aria-expanded="false">
<label id="status-label-zoom" class="status-label">Zoom 100%</label>
</div>
</div>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
</div>
</div>

3
apps/presentationeditor/main/app/view/Viewport.js
View File

@ -99,7 +99,8 @@ define([
stretch: true
}, {
el: items[3],
height: 25
alias: 'statusbar',
height: parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height'))
}]
});

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>

1
apps/presentationeditor/main/resources/less/app.less
View File

@ -128,6 +128,7 @@
@import "../../../../common/main/resources/less/updown-picker.less";
@import "../../../../common/main/resources/less/calendar.less";
@import "../../../../common/main/resources/less/macros-dialog.less";
@import "../../../../common/main/resources/less/statusbar.less";
// App
// --------------------------------------------------

11
apps/presentationeditor/main/resources/less/statusbar.less
View File

@ -1,7 +1,5 @@
@statusbar-height: 25px;
@statusbar-height: var(--statusbar-height, 25px);
.statusbar {
display: table;
padding: 2px;
.status-label {
position: relative;
@ -20,9 +18,7 @@
}
.status-group {
display: table-cell;
white-space: nowrap;
vertical-align: top;
&.dropup {
position: static;
}
@ -58,7 +54,6 @@
.cnt-zoom {
display: inline-block;
vertical-align: middle;
margin-top: 4px;
.dropdown-menu {
min-width: 80px;
.margin-left(-4px);
@ -90,8 +85,4 @@
display: inline-block;
}
}
#slot-status-btn-preview {
width: 32px;
}
}

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

@ -73,7 +73,8 @@ define([
},
'Statusbar': {
'view:compact': function (statusbar, state) {
me.viewport.vlayout.getItem('statusbar').height = state ? 25 : 50;
var height = parseInt(window.getComputedStyle(document.body).getPropertyValue('--statusbar-height'));
me.viewport.vlayout.getItem('statusbar').height = state ? height : height * 2;
}
},
'Toolbar': {
@ -120,6 +121,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 +357,27 @@ 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');
var height = parseInt(computed_style.getPropertyValue('--statusbar-height'));
var NoCompact = $('.statusbar').hasClass('no-compact');
this.viewport.vlayout.getItem('statusbar').height = NoCompact ? height * 2 : height;
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}
},
textHideFBar: 'Hide Formula Bar',
textHideHeadings: 'Hide Headings',
textHideGridlines: 'Hide Gridlines',

8
apps/spreadsheeteditor/main/app/template/StatusBar.template
View File

@ -1,16 +1,16 @@
<div class="statusbar">
<div id="status-tabs-scroll" class="status-group" dir="ltr">
<div id="status-tabs-scroll" class="status-group cnt-flex-center" dir="ltr">
<button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
<button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
</div>
<div id="status-addtabs-box" class="status-group">
<div id="status-addtabs-box" class="status-group cnt-flex-center">
<button id="status-btn-addtab" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="X"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
<div class="cnt-tabslist">
<button id="status-btn-tabslist" type="button" class="btn small btn-toolbar dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="N"><i class="icon toolbar__icon btn-sheet-list">&nbsp;</i></button>
</div>
</div>
<div id="status-zoom-box" class="status-group">
<div id="status-zoom-box" class="status-group cnt-flex-center">
<div class="separator short"></div>
<button id="status-btn-zoomdown" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
<div class="cnt-zoom">
@ -36,7 +36,7 @@
<div id="status-sheets-bar" class="status-group">
</div>
</div>
<div id="status-number-of-sheet">
<div id="status-number-of-sheet" class="cnt-flex-center">
<label id="label-sheets" class="status-label"></label>
</div>
<div id="status-action">

1
apps/spreadsheeteditor/main/app/view/Statusbar.js
View File

@ -67,6 +67,7 @@ define([
initialize: function (options) {
_.extend(this, options);
Common.NotificationCenter.on('uitheme:changed', this.setMode.bind(this));
},
render: function () {

5
apps/spreadsheeteditor/main/app/view/Viewport.js
View File

@ -98,7 +98,10 @@ define([
}, {
el: items[3],
alias: 'statusbar',
height: Common.localStorage.getBool('sse-compact-statusbar', true) ? 25 : 50
height: (function () {
var h = parseInt(getComputedStyle(document.body).getPropertyValue('--statusbar-height'));
return Common.localStorage.getBool('sse-compact-statusbar', true) ? h : h * 2;
})()
}]
});

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>

1
apps/spreadsheeteditor/main/resources/less/app.less
View File

@ -128,6 +128,7 @@
@import "../../../../common/main/resources/less/bigscaling.less";
@import "../../../../common/main/resources/less/updown-picker.less";
@import "../../../../common/main/resources/less/macros-dialog.less";
@import "../../../../common/main/resources/less/statusbar.less";
// App
// --------------------------------------------------

12
apps/spreadsheeteditor/main/resources/less/statusbar.less
View File

@ -1,4 +1,4 @@
@statusbar-height: 25px;
@statusbar-height: var(--statusbar-height, 25px);
@status-scroll-padding-left: 12px;
@statusb-scroll-padding-right: 10px;
@status-scroll-width: calc(2*@x-small-btn-size + @status-scroll-padding-left + @statusb-scroll-padding-right);
@ -49,7 +49,7 @@
#status-tabs-scroll {
width: @status-scroll-width;
padding: calc(@statusbar-height - @x-small-btn-size) @status-scroll-padding-left 0 @statusb-scroll-padding-right;
padding: 0 @status-scroll-padding-left 0 @statusb-scroll-padding-right;
height: @statusbar-height;
float: left;
@ -60,8 +60,6 @@
}
#status-zoom-box {
padding-top: calc(@statusbar-height - @x-small-btn-size);
position: absolute;
height: @statusbar-height;
@ -162,7 +160,7 @@
}
#status-addtabs-box {
padding: calc(@statusbar-height - @x-small-btn-size) 8px 0;
padding: 0 8px;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
@ -431,7 +429,6 @@
justify-content: flex-start;
.status-label {
color: @text-normal;
margin-top: 6px;
width: 100%;
text-align: center;
}
@ -452,7 +449,7 @@
&.no-compact {
#status-tabs-scroll, #status-sheets-bar-box, #status-addtabs-box {
height: 26px;
height: @statusbar-height;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar;
}
@ -522,7 +519,6 @@
.cnt-zoom {
display: inline-block;
position: relative;
top: 1px;
.dropdown-menu {
min-width: 80px;