[Embedded] Change toolbar height

This commit is contained in:
Julia Radzhabova 2021-09-29 16:52:28 +03:00
parent 29a065c3bd
commit fa9fd8d971
12 changed files with 24 additions and 15 deletions

View file

@ -99,13 +99,13 @@
right: 0; right: 0;
&.top { &.top {
top: 48px; top: 40px;
bottom: 0; bottom: 0;
} }
&.bottom { &.bottom {
top: 0; top: 0;
bottom: 46px; bottom: 38px;
} }
} }
@ -126,7 +126,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 48px; height: 40px;
-webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor; -webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
//-moz-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor; //-moz-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
@ -137,7 +137,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 46px; height: 38px;
-webkit-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor; -webkit-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
//-moz-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor; //-moz-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;

View file

@ -113,7 +113,7 @@
right: 0; right: 0;
&.top { &.top {
top: 48px; top: 40px;
bottom: 0; bottom: 0;
} }
@ -140,7 +140,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 48px; height: 40px;
.box-inner-shadow(0 -1px 0 @toolbarBorderColor); .box-inner-shadow(0 -1px 0 @toolbarBorderColor);
} }

View file

@ -29,7 +29,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;

View file

@ -27,7 +27,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;

View file

@ -47,7 +47,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
background-color: var(--background-toolbar, #F7F7F7); background-color: var(--background-toolbar, #F7F7F7);
-webkit-box-shadow: inset 0 -1px 0 #cbcbcb; -webkit-box-shadow: inset 0 -1px 0 #cbcbcb;

View file

@ -28,7 +28,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
background-color: var(--background-toolbar, #F7F7F7); background-color: var(--background-toolbar, #F7F7F7);
-webkit-box-shadow: inset 0 -1px 0 #cbcbcb; -webkit-box-shadow: inset 0 -1px 0 #cbcbcb;

View file

@ -29,7 +29,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;

View file

@ -27,7 +27,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;

View file

@ -76,11 +76,13 @@ PE.ApplicationController = new(function(){
if (embedConfig.toolbarDocked === 'bottom') { if (embedConfig.toolbarDocked === 'bottom') {
$('#toolbar').addClass('bottom'); $('#toolbar').addClass('bottom');
$('#editor_sdk').addClass('bottom'); $('#editor_sdk').addClass('bottom');
$('#box-preview').addClass('bottom');
$('#box-tools').removeClass('dropdown').addClass('dropup'); $('#box-tools').removeClass('dropdown').addClass('dropup');
ttOffset[1] = -40; ttOffset[1] = -40;
} else { } else {
$('#toolbar').addClass('top'); $('#toolbar').addClass('top');
$('#editor_sdk').addClass('top'); $('#editor_sdk').addClass('top');
$('#box-preview').addClass('top');
} }
config.canBackToFolder = (config.canBackToFolder!==false) && config.customization && config.customization.goback && config.canBackToFolder = (config.canBackToFolder!==false) && config.customization && config.customization.goback &&

View file

@ -16,7 +16,14 @@
width:100%; width:100%;
height:100%; height:100%;
z-index: 10; z-index: 10;
padding: 48px 0 0 0; padding: 0;
&.top {
padding-top: 40px;
}
&.bottom {
padding-bottom: 38px;
}
} }
#id-preview { #id-preview {

View file

@ -29,7 +29,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;

View file

@ -26,7 +26,7 @@
.loadmask > .brendpanel { .loadmask > .brendpanel {
width: 100%; width: 100%;
position: absolute; position: absolute;
height: 48px; height: 40px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; -webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA; box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;