[themes] fix toolbar for new theme in DiagramEditor

This commit is contained in:
maxkadushkin
2025-05-21 01:01:21 +03:00
parent 79d6245048
commit 01b9374e7e
6 changed files with 74 additions and 3 deletions

View File

@ -316,6 +316,11 @@
--header-component-margin: 0 6px;
--header-component-align: center;
--toolbar-simple-border-bottom: 0 none;
--toolbar-simple-shadow: var(--shadow-toolbar, none);
--toolbar-simple-content-padding-top: 3px;
--layout-padding-hor-toolbar-simple: 5px;
--content-padding-top: 8px;
}
}

View File

@ -367,6 +367,12 @@
--rb-border-checked-focus: var(--border-control-focus);
--rb-check-mark-size: 4px;
--rb-check-mark-background: var(--text-normal);
//
--toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar);
--toolbar-simple-shadow: 0 none;
--toolbar-simple-content-padding-top: 0;
--layout-padding-hor-toolbar-simple: 0;
}
// Background

View File

@ -150,6 +150,7 @@ define([
} else
if ( config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) {
me.viewport.vlayout.getItem('toolbar').height = 41;
document.body.classList.add('inner-simple-editor');
}
if ( config.twoLevelHeader && !config.isEditDiagram && !config.isEditMailMerge && !config.isEditOle && !config.compactHeader) {

View File

@ -1,4 +1,4 @@
<div class="toolbar" style="height: 41px; padding: 10px 0;">
<div class="toolbar">
<% if ( isEditDiagram ) { %>
<!----------------------->
<!-- Edit diagram mode -->

View File

@ -253,6 +253,7 @@ define([
});
if (config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) {
me.$el.addClass('type-simple');
me.$layout = $(_.template(simple)(config));
if ( config.isEditDiagram || config.isEditOle ) {
me.btnInsertFormula = new Common.UI.Button({

View File

@ -11,8 +11,22 @@
}
.simple-bar {
display: table;
width: 100%;
display: flex;
align-items: center;
border-radius: var(--border-radius-toolbar, 0);
position: relative;
height: 32px;
background-color: @background-toolbar;
&:before {
content: '';
position: absolute;
box-shadow: var(--toolbar-simple-shadow, none);
width: 100%;
height: 32px;
bottom: 0;
border-radius: var(--border-radius-toolbar, 0);
}
.separator.short {
margin-top: 1px;
@ -47,6 +61,50 @@
}
}
#toolbar {
.inner-simple-editor & {
padding-left: var(--layout-padding-hor-toolbar-simple);
padding-right: var(--layout-padding-hor-toolbar-simple);
border-bottom: var(--toolbar-simple-border-bottom);
overflow: hidden;
.toolbar {
height: 41px;
//padding: 10px 0;
display: flex;
flex-direction: column;
justify-content: center;
//position: relative;
//--toolbar-tabs-scroller-height: 38px;
background-color: #f1f1f1;
background-color: @background-pane;
//-webkit-box-shadow: inset 0 -1px #cbcbcb;
//box-shadow: inset 0 -1px #cbcbcb;
//-webkit-box-shadow: inset 0 calc(-1 * var(--scaled-one-pixel, 1px)) var(--border-toolbar);
//box-shadow: inset 0 calc(-1 * var(--scaled-one-pixel, 1px)) var(--border-toolbar);
}
}
}
#cell-editing-box {
.inner-simple-editor & {
padding-left: var(--layout-padding-hor-toolbar-simple);
padding-right: var(--layout-padding-hor-toolbar-simple);
.ce-group-expand {
right: calc(3px + var(--layout-padding-hor-toolbar-simple, 0px));
}
}
}
.inner-simple-editor {
.layout-item.middle {
padding-top: var(--toolbar-simple-content-padding-top, 0);
}
}
.username-tip {
background-color: #ee3525;
border: none;