diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 83d254c73c..e36a55bca0 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -137,6 +137,7 @@ @import "components/umb-grid.less"; @import "components/umb-empty-state.less"; @import "components/umb-property-editor.less"; +@import "components/umb-property-actions.less"; @import "components/umb-color-swatches.less"; @import "components/check-circle.less"; @import "components/umb-file-icon.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less new file mode 100644 index 0000000000..940daccbb6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less @@ -0,0 +1,45 @@ +.umb-property-actions__toggle { + position: relative; + display: flex; + flex: 0 0 auto; + padding: 6px 6px; + text-align: center; + cursor: pointer; + border-radius: 3px; + + background-color: @ui-action-hover; + + i { + height: 3px !important; + width: 3px !important; + border-radius: 3px; + background: @ui-action-type; + display: inline-block; + margin: 0 2px 0 0; + + &:last-child { + margin: 0; + } + } + + &:hover { + i { + background: @ui-action-type-hover; + } + } +} + +.umb-property .umb-property-actions__toggle { + margin-top: 2px; + opacity: 0; + transition: opacity 120ms; +} +.umb-property:hover .umb-property-actions__toggle, +.umb-property .umb-property-actions__toggle:focus { + opacity: 1; +} + +.umb-property-actions .dropdown-menu { + left: auto; + top: auto; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html new file mode 100644 index 0000000000..8d2134bc37 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html @@ -0,0 +1,12 @@ +
+ + + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umbpropertyactions.component.js new file mode 100644 index 0000000000..7aad8f5361 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umbpropertyactions.component.js @@ -0,0 +1,62 @@ +(function () { + 'use strict'; + + /** + * A component to render the property action toggle + */ + + function umbPropertyActionsController(keyboardService) { + + var vm = this; + + vm.isOpen = false; + + function initDropDown() { + keyboardService.bind("esc", function() { + navigationService.hideNavigation(); + }); + } + function destroyDropDown() { + keyboardService.unbind("esc"); + } + + vm.toggle = function() { + if (vm.isOpen === true) { + vm.close(); + } else { + vm.open(); + } + } + vm.open = function() { + vm.isOpen = true; + initDropDown(); + } + vm.close = function() { + vm.isOpen = false; + destroyDropDown(); + } + + vm.executeAction = function(action) { + action.method(); + } + + vm.$onDestroy = function () { + if (vm.isOpen === true) { + destroyDropDown(); + } + } + + } + + var umbPropertyActionsComponent = { + templateUrl: 'views/components/property/property-actions/umb-property-actions.html', + bindings: { + actions: "<" + }, + controllerAs: 'vm', + controller: umbPropertyActionsController + }; + + angular.module('umbraco.directives').component('umbPropertyActions', umbPropertyActionsComponent); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html index 9d2588484c..4a7de0d8a7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html @@ -18,6 +18,9 @@ * + + +