Update umb-property-actions toggle button (#8565)
This commit is contained in:
Bjarne Fyrstenborg
committed by
GitHub
GitHub
parent
a6309523d3
commit
6f5806c1cc
@@ -5,50 +5,77 @@
|
||||
* A component to render the property action toggle
|
||||
*/
|
||||
|
||||
function umbPropertyActionsController(keyboardService) {
|
||||
function umbPropertyActionsController(keyboardService, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.isOpen = false;
|
||||
vm.labels = {
|
||||
openText: "Open Property Actions",
|
||||
closeText: "Close Property Actions"
|
||||
};
|
||||
|
||||
vm.open = open;
|
||||
vm.close = close;
|
||||
vm.toggle = toggle;
|
||||
vm.executeAction = executeAction;
|
||||
|
||||
vm.$onDestroy = onDestroy;
|
||||
vm.$onInit = onInit;
|
||||
|
||||
function initDropDown() {
|
||||
keyboardService.bind("esc", vm.close);
|
||||
}
|
||||
|
||||
function destroyDropDown() {
|
||||
keyboardService.unbind("esc");
|
||||
}
|
||||
|
||||
vm.toggle = function() {
|
||||
function toggle() {
|
||||
if (vm.isOpen === true) {
|
||||
vm.close();
|
||||
} else {
|
||||
vm.open();
|
||||
}
|
||||
}
|
||||
vm.open = function() {
|
||||
|
||||
function open() {
|
||||
vm.isOpen = true;
|
||||
initDropDown();
|
||||
}
|
||||
vm.close = function() {
|
||||
|
||||
function close() {
|
||||
vm.isOpen = false;
|
||||
destroyDropDown();
|
||||
}
|
||||
|
||||
vm.executeAction = function(action) {
|
||||
function executeAction(action) {
|
||||
action.method();
|
||||
vm.close();
|
||||
}
|
||||
|
||||
vm.$onDestroy = function () {
|
||||
function onDestroy() {
|
||||
if (vm.isOpen === true) {
|
||||
destroyDropDown();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function onInit() {
|
||||
|
||||
var labelKeys = [
|
||||
"propertyActions_tooltipForPropertyActionsMenu",
|
||||
"propertyActions_tooltipForPropertyActionsMenuClose"
|
||||
]
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(values => {
|
||||
vm.labels.openText = values[0];
|
||||
vm.labels.closeText = values[1];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var umbPropertyActionsComponent = {
|
||||
templateUrl: 'views/components/property/property-actions/umb-property-actions.html',
|
||||
templateUrl: 'views/components/property/umb-property-actions.html',
|
||||
bindings: {
|
||||
actions: "<"
|
||||
},
|
||||
@@ -1,9 +1,4 @@
|
||||
.umb-property-actions {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.umb-property-actions__toggle,
|
||||
.umb-property-actions__menu-open-toggle {
|
||||
.umb-property-actions__toggle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
@@ -11,7 +6,6 @@
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
|
||||
background-color: @ui-action-hover;
|
||||
|
||||
i {
|
||||
@@ -32,27 +26,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.umb-property-actions__menu-open-toggle {
|
||||
position: absolute;
|
||||
z-index:1;
|
||||
outline: none;// this is not acceccible by keyboard, since we use the .umb-property-actions__toggle for that.
|
||||
|
||||
top: -15px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
|
||||
border: 1px solid @dropdownBorder;
|
||||
|
||||
border-bottom: 1px solid @gray-9;
|
||||
|
||||
.box-shadow(0 5px 20px rgba(0,0,0,.3));
|
||||
|
||||
background-color: @white;
|
||||
.umb-property-actions {
|
||||
display: inline;
|
||||
|
||||
&.-open {
|
||||
.umb-property-actions__toggle {
|
||||
background-color: @white;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid @dropdownBorder;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
.box-shadow(0 5px 20px rgba(0,0,0,.3));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.umb-property .umb-property-actions {
|
||||
float: left;
|
||||
}
|
||||
@@ -66,32 +53,22 @@
|
||||
.umb-property .umb-property-actions__toggle:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Revert-style-hack that ensures that we only show property-actions on properties that are directly begin hovered.
|
||||
.umb-property:hover .umb-property:not(:hover) .umb-property-actions__toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.umb-property-actions__menu {
|
||||
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
display: block;
|
||||
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
list-style: none;
|
||||
|
||||
.umb-contextmenu {
|
||||
|
||||
border-top-left-radius: 0;
|
||||
margin-top:-2px;
|
||||
|
||||
}
|
||||
|
||||
.umb-contextmenu-item > button {
|
||||
|
||||
z-index:2;// need to stay on top of menu-toggle-open shadow.
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,13 @@
|
||||
<div class="umb-property-actions" ng-if="vm.actions.length > 0">
|
||||
<div class="umb-property-actions" ng-class="{ '-open': vm.isOpen }" ng-if="vm.actions.length > 0">
|
||||
|
||||
<umb-button-ellipsis
|
||||
css-class="umb-outline umb-property-actions__toggle"
|
||||
action="vm.toggle()"
|
||||
mode="small"
|
||||
text="Open Property Actions"
|
||||
label-key="propertyActions_tooltipForPropertyActionsMenu"
|
||||
>
|
||||
text="{{vm.isOpen ? vm.labels.closeText : vm.labels.openText}}">
|
||||
</umb-button-ellipsis>
|
||||
|
||||
<div class="umb-property-actions__menu" role="menu" ng-if="vm.isOpen" on-outside-click="vm.close()" on-close="vm.close()" deep-blur="vm.close()">
|
||||
|
||||
<umb-button-ellipsis
|
||||
css-class="umb-button-ellipsis--absolute umb-property-actions__menu-open-toggle"
|
||||
action="vm.close()"
|
||||
mode="small"
|
||||
text="Close Property Actions"
|
||||
label-key="propertyActions_tooltipForPropertyActionsMenuClose"
|
||||
>
|
||||
</umb-button-ellipsis>
|
||||
|
||||
<ul class="umb-contextmenu">
|
||||
<li ng-repeat="action in vm.actions" role="menuitem" class="umb-contextmenu-item" ng-class="{'-opens-dialog': action.opensDialog}">
|
||||
<button type="button" class="btn-reset umb-outline" ng-click="vm.executeAction(action)" ng-disabled="action.isDisabled === true">
|
||||
Reference in New Issue
Block a user