yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Actions" is identified as a button, but behaves like a drop do… (#6303)

Browse Source
This commit is contained in:
Jan Skovgaard
2019-09-15 15:29:44 +02:00
committed by Sebastiaan Janssen
parent 41c4f12d1b
commit a4ac2328f9
3 changed files with 34 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
View File

@@ -67,6 +67,9 @@ Use this directive to render an umbraco button. The directive can be used to gen
@param {boolean=} disabled Set to <code>true</code> to disable the button.
@param {string=} addEllipsis Adds an ellipsis character (…) to the button label which means the button will open a dialog or prompt the user for more information.
@param {string=} showCaret Shows a caret on the right side of the button label
@param {string=} autoFocus add autoFocus to the button
@param {string=} hasPopup Used to expose to the accessibility API whether the button will trigger a popup or not
@param {string=]} isExpanded Used to add an aria-expanded attribute and expose whether the button has expanded a popup or not
**/
@@ -96,7 +99,9 @@ Use this directive to render an umbraco button. The directive can be used to gen
alias: "@?",
addEllipsis: "@?",
showCaret: "@?",
autoFocus: "@?"
autoFocus: "@?",
hasPopup: "@?",
isExpanded: "<?"
}
});
@@ -126,13 +131,13 @@ Use this directive to render an umbraco button. The directive can be used to gen
// make it possible to pass in multiple styles
if(vm.buttonStyle.startsWith("[") && vm.buttonStyle.endsWith("]")) {
// when using an attr it will always be a string so we need to remove square brackets
// and turn it into and array
var withoutBrackets = vm.buttonStyle.replace(/[\[\]']+/g,'');
// split array by , + make sure to catch whitespaces
var array = withoutBrackets.split(/\s?,\s?/g);
angular.forEach(array, function(item){
vm.style = vm.style + " " + "btn-" + item;
if(item === "block") {

25
src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
View File

@@ -9,25 +9,36 @@
<a ng-if="vm.type === 'link'" ng-href="{{vm.href}}" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</a>
<button ng-if="vm.type === 'button'" type="button" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
<button
ng-if="vm.type === 'button'"
type="button"
class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}"
ng-click="vm.clickButton($event)"
hotkey="{{vm.shortcut}}"
hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
ng-disabled="vm.disabled"
umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}"
aria-haspopup="{{vm.hasPopup}}"
aria-expanded="{{vm.isExpanded}}"
>
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</button>
<button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</button>

13
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html
View File

@@ -5,15 +5,18 @@
button-style="white"
action="dropdown.isOpen = !dropdown.isOpen"
label-key="general_actions"
show-caret="true">
show-caret="true"
has-popup="true"
is-expanded="dropdown.isOpen"
>
</umb-button>
<umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false">
<umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false" deep-blur="dropdown.isOpen = false">
<umb-dropdown-item class="umb-action" ng-class="{'sep':action.separatorm, '-opens-dialog': action.opensDialog}" ng-repeat="action in actions">
<a href="" ng-click="executeMenuItem(action)" prevent-default>
<i class="icon icon-{{action.cssclass}}"></i>
<button type="button" ng-click="executeMenuItem(action)">
<i class="icon icon-{{action.cssclass}}" aria-hidden="true"></i>
<span class="menu-label">{{action.name}}</span>
</a>
</button>
</umb-dropdown-item>
</umb-dropdown>