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

Ensure focus on specific action in block card (#14846)

Browse Source 
* Ensure focus on specific action in block card

* Move if statement to parent

* Change buttons in groups as well

* Adjust styling
This commit is contained in:
Bjarne Fyrstenborg
2023-10-03 17:02:20 +01:00
committed by GitHub
parent 930f9f6704
commit 34892101a9
3 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.less
View File

@@ -127,7 +127,12 @@ umb-block-card {
right: 10px;
opacity: 0;
transition: opacity 120ms;
margin-right: 10px;
display: flex;
gap: 5px;
> div {
position: relative;
}
.__action {
display: inline-flex;
@@ -137,7 +142,7 @@ umb-block-card {
width: 28px;
height: 28px;
background-color: white;
color:@ui-action-type;
color: @ui-action-type;
&:hover {
color: @ui-action-type-hover;

40
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.html
View File

@@ -20,14 +20,18 @@
ng-click="vm.openBlockOverlay(block)"
data-content-element-type-key="{{block.contentElementTypeKey}}">
<div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
<button type="button" ng-if="block.areas.length > 0" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
<umb-icon icon="icon-layout" class="icon"></umb-icon>
<localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
</button>
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
<div ng-if="block.areas.length > 0">
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
<umb-icon icon="icon-layout" class="icon"></umb-icon>
<localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
</button>
</div>
<div>
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
</div>
</div>
</umb-block-card>
@@ -79,14 +83,18 @@
ng-click="vm.openBlockOverlay(block)"
data-content-element-type-key="{{block.contentElementTypeKey}}">
<div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
<button type="button" ng-if="block.areas.length > 0" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
<umb-icon icon="icon-layout" class="icon"></umb-icon>
<localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
</button>
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
<div ng-if="block.areas.length > 0">
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
<umb-icon icon="icon-layout" class="icon"></umb-icon>
<localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
</button>
</div>
<div>
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
</div>
</div>
</umb-block-card>

12
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.html
View File

@@ -9,12 +9,12 @@
ng-class="{'--isOpen':vm.openBlock === block}"
ng-click="vm.openBlockOverlay(block)">
<div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
<button type="button"
class="btn-reset __action umb-outline"
ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
<div>
<button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
<localize key="general_delete" class="sr-only">Delete</localize>
</button>
</div>
</div>
</umb-block-card>