PropertyActions first version

2019-10-25 11:50:52 +02:00
parent 957520aca0
commit 548bb48f38
11 changed files with 171 additions and 34 deletions
@@ -33,14 +33,18 @@ angular.module("umbraco.directives")
                    $scope.property.propertyErrorMessage = errorMsg;
                };

-                $scope.$on("ExposePropertyEditorAPI", function(event, api) {
-
+                var unsubscribe = $scope.$on("ExposePropertyEditorAPI", function(event, api) {
+                    
                    //avoid eventual parent properties to capture this.
                    event.stopPropagation();
                    
                    $scope.propertyActions = api.propertyActions;
                });

+                $scope.$on("$destroy", function () {
+                    unsubscribe();
+                });
+
            }
        };
    });
@@ -0,0 +1,27 @@
+(function() {
+    'use strict';
+
+    function propertyEditorService() {
+        /**
+         * @ngdoc function
+         * @name umbraco.services.propertyEditorService#expose
+         * @methodOf umbraco.services.propertyEditorService
+         * @function
+         *
+         * @param {object} scope An object containing API for the PropertyEditor
+         */
+        function exposeAPI(scope) {
+            if (!scope) {
+                throw "scope cannot be null";
+            }
+
+            scope.$emit("ExposePropertyEditorAPI", scope);
+        }
+
+        return {
+            exposeAPI: exposeAPI
+        };
+    }
+
+    angular.module('umbraco.services').factory('propertyEditorService', propertyEditorService);
+})();
@@ -1,4 +1,9 @@
-.umb-property-actions__toggle {
+.umb-property-actions {
+    display: inline;
+}
+
+.umb-property-actions__toggle,
+.umb-property-actions__menu-open-toggle {
    position: relative;
    display: flex;
    flex: 0 0 auto;
@@ -21,16 +26,39 @@
            margin: 0;
        }
    }
-
+}
+.umb-property-actions__toggle {
    &:hover {
        i {
            background: @ui-action-type-hover;
        }
    }
 }
+.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: 1px solid @dropdownBorder;
+    border-left: 1px solid @dropdownBorder;
+    border-right: 1px solid @dropdownBorder;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+
+    .box-shadow(0 5px 20px rgba(0,0,0,.3));
+
+    background-color: white;
+    
+}
+
+.umb-property .umb-property-actions {
+    float: left;
+}
 .umb-property .umb-property-actions__toggle {
-    margin-top: 10px;
+    margin-top: 2px;
    opacity: 0;
    transition: opacity 120ms;
 }
@@ -39,7 +67,53 @@
    opacity: 1;
 }

-.umb-property-actions .dropdown-menu {
-    left: auto;
-    top: auto;
+.umb-property-actions__menu {
+    
+    display: block;
+    border-radius: 3px;
+    
+    position: absolute;
+    z-index: 1000;
+
+    float: left;
+    min-width: 160px;
+    list-style: none;
+
+    ul > {
+
+        border: 1px solid @dropdownBorder;
+
+        border-top-right-radius: 3px;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+
+        overflow: hidden;
+
+        .box-shadow(0 5px 20px rgba(0,0,0,.3));
+    }
+
+    ul > li > button {
+        
+        position: relative;
+        z-index:2;// need to stay on top of menu-toggle-open shadow.
+
+        display: block;
+        font-weight: normal;
+        line-height: @baseLineHeight;
+        white-space: nowrap;
+        cursor:pointer;
+
+        background: @ui-option;
+        border: 0;
+        padding: 8px 20px;
+        color: @ui-option-type;
+        width: 100%;
+        text-align: left;
+        
+        &:hover {
+            text-decoration: none;
+            color: @ui-option-type-hover;
+            background: @ui-option-hover;
+        }
+    }
 }
@@ -165,6 +165,24 @@ h5.-black {
 .umb-control-group .umb-el-wrap {
  padding: 0
 }
+.form-horizontal .umb-control-group .control-header {
+    float: left;
+    width: 160px;
+    padding-top: 5px;
+    text-align: left;
+
+    .control-label {
+        float: left;
+        width: auto;
+        padding-top: 0;
+        text-align: left;
+    }
+
+    .control-description {
+        display: block;
+        clear: both;
+    }
+}

 /* LABELS*/
 .umb-control-group label.control-label, .umb-control-group .control-label {
@@ -132,6 +132,7 @@

@ui-option-type:        @blueExtraDark;
@ui-option-type-hover:  @blueMid;
+@ui-option:             white;
@ui-option-hover:       @sand-7;

@ui-option-disabled-type:        @gray-6;
@@ -1,12 +1,15 @@
 <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>
+    <button type="button" class="btn-reset umb-outline umb-property-actions__toggle" ng-click="vm.toggle()" localize="title" title="propertyActions_tooltipForPropertyActionsMenu"><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"><localize key="{{::action.labelKey}}" tokens={{action.labelTokens}}></localize></span>
-            </button>
-        </li>
-    </ul>
+    <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()">
+        <button class="umb-property-actions__menu-open-toggle" ng-click="vm.close()" tabindex="-1"><i></i><i></i><i></i></button>
+        <ul class="umb-actions">
+            <li role="menuitem" class="umb-action" ng-class="{'sep':action.separatorm, '-opens-dialog': action.opensDialog}" ng-repeat="action in vm.actions">
+                <button type="button" class="btn-reset umb-outline" ng-click="vm.executeAction(action)">
+                    <i class="icon icon-{{action.icon}}" aria-hidden="true"></i>
+                    <span class="menu-label"><localize key="{{::action.labelKey}}" tokens="action.labelTokens"></localize></span>
+                </button>
+            </li>
+        </ul>
+    </div>
 </div>
@@ -6,22 +6,25 @@

            <div class="umb-el-wrap">

-                <label class="control-label" ng-hide="property.hideLabel" for="{{property.alias}}" ng-attr-title="{{propertyAlias}}">
-
+                <div class="control-header">
                    <small ng-if="showInherit" class="db" style="padding-top: 0; margin-bottom: 5px;">
                        <localize key="contentTypeEditor_inheritedFrom"></localize> {{inheritsFrom}}
                    </small>

-                    {{property.label}}
+                    <label class="control-label" ng-hide="property.hideLabel" for="{{property.alias}}" ng-attr-title="{{propertyAlias}}">

-                    <span ng-if="property.validation.mandatory">
-                        <strong class="umb-control-required">*</strong>
-                    </span>
-                    <small ng-bind-html="property.description | preserveNewLineInHtml"></small>
+                        {{property.label}}
+
+                        <span ng-if="property.validation.mandatory">
+                            <strong class="umb-control-required">*</strong>
+                        </span>
+
+                    </label>

                    <umb-property-actions actions="propertyActions"></umb-property-actions>

-                </label>
+                    <small class="control-description" ng-bind-html="property.description | preserveNewLineInHtml"></small>
+                </div>

                <div class="controls" ng-transclude>
                </div>
@@ -110,8 +110,9 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
    "overlayService",
    "$routeParams",
    "editorState",
+    "propertyEditorService",
    
-    function ($scope, $interpolate, $filter, $timeout, contentResource, localizationService, iconHelper, clipboardService, eventsService, overlayService, $routeParams, editorState) {
+    function ($scope, $interpolate, $filter, $timeout, contentResource, localizationService, iconHelper, clipboardService, eventsService, overlayService, $routeParams, editorState, propertyEditorService) {
        
        var contentTypeAliases = [];
        _.each($scope.model.config.contentTypes, function (contentType) {
@@ -410,7 +411,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
            $event.stopPropagation();
        }
        
-        var copyAllEntries = function($event) {
+        var copyAllEntries = function() {
            
            syncCurrentNode();

@@ -429,9 +430,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
            localizationService.localize("clipboard_labelForArrayOfItemsFrom", [$scope.model.label, activeVariant.name]).then(function(data) {
                clipboardService.copyArray("elementTypeArray", aliases, $scope.nodes, data, "icon-thumbnail-list", $scope.model.id);
            });
-
-            
-            $event.stopPropagation();
        }
        
        $scope.pasteFromClipboard = function(newNode) {
@@ -622,15 +620,15 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
        
        $scope.propertyActions = [
            {
-                labelKey: 'actions_copy',
+                labelKey: 'clipboard_labelForCopyAllEntries',
                labelTokens: [$scope.model.label],
                icon: 'documents',
                method: copyAllEntries
            }
        ];

-        $scope.$emit("ExposePropertyEditorAPI", $scope);// must be executed at a state where the API is set.
-
+        //$scope.$emit("ExposePropertyEditorAPI", $scope);// must be executed at a state where the API is set.
+        propertyEditorService.exposeAPI($scope);// must be executed at a state where the API is set.

        var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
            updateModel();
@@ -1734,4 +1734,7 @@ Mange hilsner fra Umbraco robotten
    <key alias="labelForCopyAllEntries">Kopier %0%</key>
    <key alias="labelForArrayOfItemsFrom">%0% fra %1%</key>
  </area>
+  <area alias="propertyActions">
+    <key alias="tooltipForPropertyActionsMenu">Åben egenskabshandlinger</key>
+  </area>
 </language>
@@ -2168,7 +2168,10 @@ To manage your website, simply open the Umbraco back office and start adding con
    <key alias="usedByProperties">Used by</key>
  </area>
  <area alias="clipboard">
-    <key alias="labelForCopyAllEntries">Copy %0%</key>
+    <key alias="copyAllEntries">Copy %0%</key>
    <key alias="labelForArrayOfItemsFrom">%0% from %1%</key>
  </area>
+  <area alias="propertyActions">
+    <key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>
+  </area>
 </language>
@@ -2187,4 +2187,7 @@ To manage your website, simply open the Umbraco back office and start adding con
    <key alias="labelForCopyAllEntries">Copy %0%</key>
    <key alias="labelForArrayOfItemsFrom">%0% from %1%</key>
  </area>
+  <area alias="propertyActions">
+    <key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>
+  </area>
 </language>