Add "umb-button-ellipsis" component (#8132)

2020-07-23 17:05:39 +02:00
parent 5deb71cb4d
commit b3e5c510a5
11 changed files with 206 additions and 23 deletions
@@ -0,0 +1,91 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbButtonEllipsis
+@restrict E
+@scope
+
+@description
+<b>Added in Umbraco version 8.7.0</b> Use this directive to render an umbraco ellipsis.
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-button-ellipsis
+            text="{{text}}"
+            labelKey="{{labelKey}}"
+            action="{{vm.open()}}"
+            >
+        </umb-button-ellipsis>
+
+    </div>
+</pre>
+
+@param {string} text Set the text for the checkbox label.
+@param {string} labelKey Set a dictinary/localization string for the checkbox label
+@param {callback} action Callback when the value of the checkbox change by interaction.
+@param {string} cssClass Set a css class modifier
+@param {string} color Set a hex code like <code>#f5c1bc</code>
+@param {boolean} showText Set to <code>true</code> to show the text. <code>false</code> by default
+@param {domElement} element Highlights a DOM-element (HTML-selector)
+@param {string} state Set the initial state of the component. To have it hidden use <code>hidden</code>
+**/
+
+(function () {
+    'use strict';
+
+    function UmbButtonEllipsis($timeout, localizationService) {
+
+        var vm = this;
+
+        vm.$onInit = onInit;
+        vm.clickButton = clickButton;
+
+        function onInit() {
+            setText();
+
+            setColor();
+        }
+
+        function clickButton(event) {
+            if(vm.action) {
+                vm.action({$event: event});
+            }
+        }
+
+        function setText() {
+            if (vm.labelKey) {
+                localizationService.localize(vm.labelKey).then(function (data) {
+                    // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
+                     if(data.indexOf('[') === -1){
+                       vm.text = data;
+                     }
+                });
+           }
+        }
+
+        function setColor() {
+            vm.color = vm.color ? vm.color : '#000000';
+        }
+    }
+
+    var component = {
+        templateUrl: 'views/components/buttons/umb-button-ellipsis.html',
+        controller: UmbButtonEllipsis,
+        controllerAs: 'vm',
+        transclude: true,
+        bindings: {
+            text: "@",
+            labelKey: "@?",
+            action: "&",
+            cssClass: "@?",
+            color: "@?",
+            showText: "<?",
+            element: "@?",
+            state: "@?"
+        }
+    };
+
+    angular.module('umbraco.directives').component('umbButtonEllipsis', component);
+
+})();
@@ -179,6 +179,7 @@
@import "components/buttons/umb-button-group.less";
@import "components/buttons/umb-toggle.less";
@import "components/buttons/umb-toggle-group.less";
+@import "components/buttons/umb-button-ellipsis.less";

@import "components/notifications/umb-notifications.less";
@import "components/umb-file-dropzone.less";
@@ -0,0 +1,44 @@
+.umb-button-ellipsis{
+    padding: 0 5px;
+    text-align: center;
+    margin: 0 10px 0 auto;
+    cursor: pointer;
+    border-radius: @baseBorderRadius;
+    color: black;
+    position: relative;
+    opacity: 0.8;
+    transition: opacity .3s ease-out;
+
+    &.show-text{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .umb-tour-is-visible .umb-tree &,
+    &:hover,
+    &:focus{
+        opacity: 1;
+    }
+
+    &--hidden{
+        opacity: 0;
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+        }
+    }
+
+    &__icon {
+        color: inherit;
+        flex-basis: 100%;
+    }
+
+    &__text {
+        color: inherit;
+        font-size: 12px;
+        line-height: 1em;
+        flex-basis: 100%;
+    }
+}
@@ -90,6 +90,10 @@ body.touch .umb-tree {
            overflow: visible;
            clip: auto;
        }
+
+        .umb-button-ellipsis--hidden {
+            opacity: 1;
+        }
        
        .umb-tree-icon {
            color: @ui-option-type-hover;
@@ -14,9 +14,12 @@
            </li>

            <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="visibleSections < sections.length">
-                <a href="#" ng-click="trayClick()" prevent-default aria-label="More sections">
-                    <span class="section__name">&bull;&bull;&bull;</span>
-                </a>
+                <umb-button-ellipsis
+                    action="trayClick()"
+                    text="More sections"
+                    color="#ffffff"
+                    >
+                </umb-button-ellipsis>

                <ul id="applications-tray" class="sections-tray shadow-depth-2" ng-if="showTray" on-outside-click="trayClick()">
                    <li ng-repeat="section in sections | limitTo: sections.length | limitTo: -(sections.length - visibleSections)" ng-class="{current: section.alias == currentSection}">
@@ -0,0 +1,10 @@
+<button
+    type="button"
+    data-element="{{vm.element}}"
+    class="btn-reset umb-button-ellipsis {{vm.cssClass}}"
+    style="color:{{vm.color}};"
+    ng-class="{'umb-button-ellipsis--hidden': vm.state === 'hidden', 'show-text': vm.showText}"
+    ng-click="vm.clickButton($event)">
+    <span class="umb-button-ellipsis__icon" aria-hidden="true">&bull;&bull;&bull;</span>
+    <span class="umb-button-ellipsis__text" ng-class="{'sr-only': vm.showText !== true}">{{vm.text}}</span>
+</button>
@@ -16,13 +16,14 @@

        <div class="umb-sub-views-nav-item umb-sub-views-nav-item-more">

-            <a data-element="sub-view-{{moreButton.alias}}"
-                href=""
-                ng-click="toggleDropdown()"
-                ng-class="{'is-active': moreButton.active}">
-                <div class="umb-sub-views-nav-item-more__icon"><i></i><i></i><i></i></div>
-                <span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
-            </a>
+            <umb-button-ellipsis
+                element="sub-view-{{moreButton.alias}}"
+                action="toggleDropdown()"
+                color="#1b264f"
+                text="{{moreButton.name}}"
+                show-text="true"
+                >
+            </umb-button-ellipsis>

            <umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" class="umb-sub-views-nav-item-more__dropdown">
                <umb-dropdown-item ng-repeat="navItem in navigation | limitTo: overflowingItems">
@@ -2,7 +2,10 @@
    <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>

    <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>
+        <button
+            class="umb-property-actions__menu-open-toggle"
+            ng-click="vm.close()" tabindex="-1"><i></i><i></i><i></i>
+        </button>
        <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">
@@ -4,10 +4,14 @@
    </li>

    <li data-element="tab-expand" class="umb-tab umb-tab--expand" ng-class="{ 'open': vm.showTray }" ng-show="vm.needTray">
-        <button class="btn-reset umb-tab-button umb-tab-button--expand" ng-click="vm.toggleTray()" type="button">
-            <i></i><i></i><i></i>
-            <span class="sr-only"><localize key="visuallyHiddenTexts_tabExpand">View more options</localize></span>
-        </button>
+        <umb-button-ellipsis
+            action="vm.toggleTray()"
+            text="View more options"
+            label-key="visuallyHiddenTexts_tabExpand"
+            color="#68676b"
+            >
+        </umb-button-ellipsis>
+
        <umb-dropdown class="umb-tabs-tray" ng-if="vm.showTray" on-close="vm.hideTray()">
            <umb-dropdown-item ng-repeat="tab in vm.tabs | limitTo: vm.overflowingTabs" ng-class="{'umb-tabs-tray-item--active': tab.active}">
                <button class="btn-reset umb-tab-button" ng-click="vm.clickTab($event, tab)" role="tab" aria-selected="{tab.active}" type="button">{{ tab.label }}</button>
@@ -14,7 +14,14 @@
        <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>

        <!-- NOTE: These are the 'option' elipses -->
-        <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl" aria-label="{{optionsText}} {{node.name}}"><i></i><i></i><i></i></button>
+        <umb-button-ellipsis
+            ng-if="::node.menuUrl"
+            element="tree-item-options"
+            action="options(node, $event)"
+            text="{{optionsText}} {{node.name}}"
+            state="hidden"
+            >
+        </umb-button-ellipsis>

        <umb-loader ng-show="node.loading" position="bottom" class="umb-tree-item__loader"></umb-loader>
    </div>
@@ -8,9 +8,17 @@
                    {{tree.name}}
                </a>
            </h5>
-            <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)">
-                <i></i><i></i><i></i>
-            </button>
+
+            <umb-button-ellipsis
+                element="tree-item-options"
+                action="options(tree.root, $event)"
+                text="Open context node for {{tree.name}}"
+                state="hidden"
+                ng-hide="tree.root.isContainer || !tree.root.menuUrl"
+                ng-swipe-right="options(tree.root, $event)"
+                >
+            </umb-button-ellipsis>
+
        </div>
        <umb-tree-item class="umb-animated"
                       ng-repeat="child in tree.root.children"
@@ -30,13 +38,20 @@
        <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(group)" ng-hide="hideheader === 'true'" on-right-click="altSelect(group, $event)">
            <h5>
                <a ng-href="#/{{section}}" ng-click="select(group, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
-                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(group)"></i>
+                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(group)" aria-hidden="true"></i>
                    {{group.name}}
                </a>
            </h5>
-            <button data-element="tree-item-options" class="umb-options umb-outline btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-hide="group.isContainer || !group.menuUrl" ng-click="options(group, $event)" ng-swipe-right="options(group, $event)">
-                <i></i><i></i><i></i>
-            </button>
+
+            <umb-button-ellipsis
+                element="tree-item-options"
+                action="options(group, $event)"
+                text="Open context node for {{group.name}}"
+                state="hidden"
+                ng-hide="group.isContainer || !group.menuUrl"
+                ng-swipe-right="options(group, $event)"
+                >
+            </umb-button-ellipsis>
        </div>

        <umb-tree-item class="umb-animated"