Added property actions button

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";

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;
+}

src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html

@@ -0,0 +1,12 @@
+<div class="umb-property-actions" ng-if="vm.actions.length > 0">
+    <button type="button" class="btn-reset umb-property-actions__toggle" ng-click="vm.toggle()"><i></i><i></i><i></i></button>
+
+    <ul class="umb-actions dropdown-menu" role="menu" on-outside-click="vm.close()" ng-if="vm.isOpen" on-close="vm.close()" deep-blur="vm.close()">
+        <li role="menuitem" lass="umb-action" ng-class="{'sep':action.separatorm, '-opens-dialog': action.opensDialog}" ng-repeat="action in vm.actions">
+            <button type="button" ng-click="vm.executeAction(action)">
+                <i class="icon icon-{{action.icon}}" aria-hidden="true"></i>
+                <span class="menu-label">{{::action.label}}</span>
+            </button>
+        </li>
+    </ul>
+</div>

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);
+
+})();

src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html

@@ -18,6 +18,9 @@
                         <strong class="umb-control-required">*</strong>
                     </span>
                     <small ng-bind-html="property.description | preserveNewLineInHtml"></small>
+
+                    <umb-property-actions actions="property.actions"></umb-property-actions>
+
                 </label>
 
                 <div class="controls" ng-transclude>