yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make sure contexbar fits within the available space (#13467)

Browse Source 
* Make sure contexbar fits within the available space

* Ensuring context bar moves above, no matter size of it.

* Fixing apperance of connection-fixers
This commit is contained in:
Niels Lyngsø
2022-11-29 09:58:59 +01:00
committed by nikolajlauridsen
parent 65f66c2560
commit b9990f23db
2 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
View File

@@ -95,18 +95,13 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
&::after {
display: var(--umb-block-grid--block-ui-display, block);
animation: umb-block-grid__block__border-pulse 400ms ease-in-out alternate infinite;
@keyframes umb-block-grid__block__border-pulse {
0% { border-color: rgba(@blueDark, 1); }
100% { border-color: rgba(@blueDark, 0.66); }
}
border-color: @blueDark;
}
}
&.--active {
&::after {
display: block;
border-color: @pinkLight;
animation: none;
}
> .umb-block-grid__block--context {
@@ -223,15 +218,16 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
.umb-block-grid__block--context {
position: absolute;
top: -21px;
bottom: 100%;
right: -1px;
max-width: 100%;
font-size: 12px;
z-index: 4;
display: var(--umb-block-grid--block-ui-display, flex);
justify-content: end;
/** prevent interaction with inline-create button just beneath the context-bar: */
::after {
&::after {
content: '';
position: absolute;
top: 100%;
@@ -243,34 +239,62 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
.__context-bar {
padding: 0 9px;
padding-top: 1px;
background-color: #3544B1;
background-color: @blueDark;
color: white;
border-top: rgba(255, 255, 255, .7) 1px solid;
border-left: rgba(255, 255, 255, .7) 1px solid;
border-right: rgba(255, 255, 255, .7) 1px solid;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: inline-block;
display: inline-flex;
box-sizing: border-box;
max-width: 100%;
white-space: nowrap;
/* Ensure that the bar is visually connected with the border **/
&::before {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 1px;
border-top: 1px solid @blueDark;
box-sizing: border-box;
background: none;
}
&::after {
content: '';
position: absolute;
right: 1px;
bottom: -2px;
height: 2px;
width: 2px;
border-top: 1px solid @blueDark;
border-right: 1px solid @blueDark;
box-sizing: border-box;
background: none;
}
.action {
color: currentColor;
font-size: 12px;
line-height: inherit;
overflow: hidden;
text-overflow: ellipsis;
}
.__divider {
display: inline-block;
margin: 0 3px;
}
.__label {
display: inline-flex;
align-items: center;
padding: 0;
font-weight: 700;
user-select: none;
.icon {
font-size: 22px;
margin-right: 5px;
display: inline-block;
}
overflow: hidden;
text-overflow: ellipsis;
}
}
}

14
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
View File

@@ -76,18 +76,10 @@
title="blockEditor_focusParentBlock"
ng-click="vm.parentBlock.showBlockUI()"
ng-class="{ '--error': false && vm.valFormManager.isShowingValidation() }"
>
<span>
{{vm.parentBlock.label}}
</span>
<span class="sr-only">
<localize key="blockEditor_focusParentBlock">Focus parent block</localize>
</span>
</button>
ng-bind="vm.parentBlock.label"
></button>
<div class="__divider" ng-if="vm.parentBlock">/</div>
<div class="__label">
<span>{{vm.layoutEntry.$block.label}}</span>
</div>
<div class="__label" title="{{vm.layoutEntry.$block.label}}" ng-bind="vm.layoutEntry.$block.label"></div>
</div>
</div>