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

Support SVG icon in action menu (#12403)

Browse Source 
* Support custom SVG icon in menu item with legacy support

* Update menu icons

* Update action icons

* Adjust icons in menu actions with legacy fallback

* Don't use legacy icon

* Update comments
This commit is contained in:
Bjarne Fyrstenborg
2022-05-16 23:50:19 +02:00
committed by GitHub
parent 048193e3a5
commit d051f850eb
39 changed files with 244 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbcontextmenu.directive.js
View File

@@ -7,7 +7,7 @@
* Handles the click events on the context menu
**/
angular.module("umbraco.directives")
.directive('umbContextMenu', function (navigationService, keyboardService, backdropService) {
.directive('umbContextMenu', function (navigationService, keyboardService) {
return {
scope: {
menuDialogTitle: "@",
@@ -20,22 +20,27 @@ angular.module("umbraco.directives")
templateUrl: 'views/components/application/umb-contextmenu.html',
link: function (scope, element, attrs, ctrl) {
// Map action icons using legacy icon font or svg icons.
Utilities.forEach(scope.menuActions, action => {
action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon;
});
//adds a handler to the context menu item click, we need to handle this differently
//depending on what the menu item is supposed to do.
scope.executeMenuItem = function (action) {
scope.executeMenuItem = action => {
navigationService.executeMenuAction(action, scope.currentNode, scope.currentSection);
};
scope.outSideClick = function() {
scope.outSideClick = () => {
navigationService.hideNavigation();
};
keyboardService.bind("esc", function() {
keyboardService.bind("esc", () => {
navigationService.hideNavigation();
});
//ensure to unregister from all events!
scope.$on('$destroy', function () {
scope.$on('$destroy', () => {
keyboardService.unbind("esc");
});
}

14
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js
View File

@@ -1,7 +1,7 @@
(function () {
'use strict';
function EditorMenuDirective($injector, treeService, navigationService, umbModelMapper, appState) {
function EditorMenuDirective(treeService, navigationService, appState) {
function link(scope, el, attr, ctrl) {
@@ -17,7 +17,7 @@
//adds a handler to the context menu item click, we need to handle this differently
//depending on what the menu item is supposed to do.
scope.executeMenuItem = function (action) {
scope.executeMenuItem = action => {
//the action is called as it would be by the tree. to ensure that the action targets the correct node,
//we need to set the current node in appState before calling the action. otherwise we break all actions
//that use the current node (and that's pretty much all of them)
@@ -34,10 +34,14 @@
}
if (!scope.actions) {
treeService.getMenu({ treeNode: scope.currentNode })
.then(function (data) {
scope.actions = data.menuItems;
treeService.getMenu({ treeNode: scope.currentNode }).then(data => {
scope.actions = data.menuItems;
// Map action icons using legacy icon font or svg icons.
Utilities.forEach(scope.actions, action => {
action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon;
});
});
}
};

2
src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html
View File

@@ -14,7 +14,7 @@
ng-class="{sep:action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in menuActions">
<button type="button" ng-click="executeMenuItem(action)"
class="umb-action-link btn-reset umb-outline">
<umb-icon icon="icon-{{action.cssclass}}" class="icon"></umb-icon>
<umb-icon icon="{{action.icon}}" class="icon"></umb-icon>
<span class="menu-label">{{action.name}}</span>
</button>
</li>

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

@@ -8,14 +8,13 @@
show-caret="true"
has-popup="true"
is-expanded="dropdown.isOpen"
disabled="!actions || !actions.length || isDisabled"
>
disabled="!actions || !actions.length || isDisabled">
</umb-button>
<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">
<umb-dropdown-item class="umb-action" ng-class="{'sep': action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in actions">
<button type="button" ng-click="executeMenuItem(action)">
<umb-icon icon="icon-{{action.cssclass}}" class="icon"></umb-icon>
<umb-icon icon="{{action.icon}}" class="icon"></umb-icon>
<!-- Render the text that will be visually displayed -->
<span class="menu-label" aria-hidden="true">{{action.name}}</span>
<!-- Render the textDescription from the language files if it's attached to the action object-->