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

Changed statusbar for white theme PDF, PE, SSE

Browse Source
This commit is contained in:
Dmitry-Ilyushechkin
2025-04-26 20:20:38 +03:00
parent ae5718606d
commit d2bd5ed4ab
16 changed files with 55 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -376,10 +376,7 @@ define([
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;
}
this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}

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'))
}
]
});

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

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

@ -401,10 +401,7 @@ define([
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;
}
this.viewport.vlayout.getItem('statusbar').height = parseInt(computed_style.getPropertyValue('--statusbar-height') || 25);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
}

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'))
}]
});

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

9
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': {
@ -369,8 +370,10 @@ define([
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);
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');
}
},

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;
})()
}]
});

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;