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

Support custom SVG icon in listview (#10345)

Browse Source 
* Fix custom SVG icons in listview layouts

* Fix icon in content grid

* Fix icon in umb-folder-grid

* Fix SVG icons in create dialogs

* Get icon once

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
This commit is contained in:
Bjarne Fyrstenborg
2021-06-07 01:33:52 +02:00
committed by GitHub
parent c2c6413eb7
commit 5517a86972
7 changed files with 36 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
View File

@@ -12,8 +12,8 @@
ng-href="{{'#' + item.editPath}}"
ng-click="clickItemName(item, $event, $index)"
ng-class="{'-light': !item.published && item.updater != null}">
<i class="umb-content-grid__icon {{ item.icon }}" aria-hidden="true"></i>
<span>{{ item.name }}</span>
<umb-icon icon="{{item.icon}}" class="{{item.icon}} umb-content-grid__icon"></umb-icon>
<span>{{item.name}}</span>
</a>
<ul class="umb-content-grid__details-list" ng-class="{'-light': !item.published && item.updater != null}">

6
src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
View File

@@ -7,12 +7,10 @@
ng-click="clickFolder(folder, $event, $index)">
<div class="umb-folder-grid__folder-description">
<i class="umb-folder-grid__folder-icon {{ folder.icon }}"></i>
<div ng-click="clickFolderName(folder, $event, $index)" class="umb-folder-grid__folder-name">{{ folder.name }}</div>
<umb-icon icon="{{folder.icon}}" class="{{folder.icon}} umb-folder-grid__folder-icon"></umb-icon>
<div ng-click="clickFolderName(folder, $event, $index)" class="umb-folder-grid__folder-name">{{folder.name}}</div>
</div>
<!--<i class="icon-check umb-folder-grid__action" ng-class="{'-selected': folder.selected}"></i>-->
</div>
</div>

13
src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
View File

@@ -59,8 +59,7 @@
<div class="umb-table-cell umb-table__name">
<button type="button"
class="umb-table-head__link sortable"
ng-click="setSort('name')"
prevent-default>
ng-click="setSort('name')">
<localize key="general_name">Name</localize>
<i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': isSortDirection('name', 'asc'), 'icon-navigation-down': isSortDirection('name', 'desc')}"></i>
</button>
@@ -68,8 +67,7 @@
<div class="umb-table-cell">
<button type="button"
class="umb-table-head__link sortable"
ng-click="setSort('updateDate')"
prevent-default>
ng-click="setSort('updateDate')">
Last Updated
<i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': isSortDirection('updateDate', 'asc'), 'icon-navigation-down': isSortDirection('updateDate', 'desc')}"></i>
</button>
@@ -79,13 +77,12 @@
</div>
<div class="umb-table-body">
<div class="umb-table-row umb-media-grid__list-item -selectable" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy | orderBy:sortBy:sortReverse" ng-class="{'-selected': item.selected}">
<div class="umb-table-cell">
<i ng-show="item.selected" class="umb-table-body__icon umb-table-body__checkicon icon-check" aria-hidden="true"></i>
<i class="{{item.icon}}" class="umb-table-body__icon" aria-hidden="true" ng-if="!item.thumbnail && item.extension != 'svg' && !item.selected"></i><i class="icon-picture" aria-hidden="true" ng-if="item.thumbnail && !item.selected"></i>
<umb-icon icon="icon-check" class="icon-check umb-table-body__icon umb-table-body__checkicon" ng-if="item.selected"></umb-icon>
<umb-icon icon="{{item.icon}}" class="{{item.icon}} umb-table-body__icon" ng-if="!item.thumbnail && item.extension != 'svg' && !item.selected"></umb-icon>
<umb-icon icon="icon-picture" class="icon-picture" ng-if="item.thumbnail && !item.selected"></umb-icon>
</div>
<div class="umb-table-cell umb-table__name">
<ins ng-show="item.isFolder" ng-class="{'-locked': item.selected || !item.file || !item.thumbnail}" ng-click="clickItemName(item, $event, $index)" class="icon-navigation-right"></ins> <span data-src="{{item.value.src}}" class="item-name">{{item.name}}</span>
</div>
<div class="umb-table-cell">

24
src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
View File

@@ -11,11 +11,9 @@
</div>
<div class="umb-table-cell umb-table__name">
<button
type="button"
class="umb-table-head__link sortable"
ng-click="vm.sort('Name', true, true)"
prevent-default>
<button type="button"
class="umb-table-head__link sortable"
ng-click="vm.sort('Name', true, true)">
<localize key="general_name">Name</localize>
<i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': vm.isSortDirection('Name', 'asc'), 'icon-navigation-down': vm.isSortDirection('Name', 'desc')}"></i>
</button>
@@ -24,11 +22,10 @@
<localize key="general_status">Status</localize>
</div>
<div class="umb-table-cell" ng-repeat="column in vm.itemProperties track by column.alias">
<button
type="button"
class="umb-table-head__link"
ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
ng-class="{'sortable':column.allowSorting}" prevent-default>
<button type="button"
class="umb-table-head__link"
ng-click="vm.sort(column.alias, column.allowSorting, column.isSystem)"
ng-class="{'sortable':column.allowSorting}">
<span ng-bind="column.header"></span>
<i class="umb-table-head__icon icon" aria-hidden="true" ng-class="{'icon-navigation-up': vm.isSortDirection(column.alias, 'asc'), 'icon-navigation-down': vm.isSortDirection(column.alias, 'desc')}"></i>
</button>
@@ -39,15 +36,16 @@
<div class="umb-table-body">
<div class="umb-table-row -selectable umb-outline"
ng-repeat="item in vm.items track by $index"
ng-init="item.icon = vm.getIcon(item)"
ng-class="{'-selected':item.selected, '-light':!item.published && item.updater != null}"
ng-click="vm.selectItem(item, $index, $event)">
<div class="umb-table-cell">
<i class="umb-table-body__icon umb-table-body__fileicon {{item.icon}}" aria-hidden="true" ng-class="vm.getIcon(item)"></i>
<i class="umb-table-body__icon umb-table-body__checkicon icon-check" aria-hidden="true"></i>
<umb-icon icon="{{item.icon}}" class="{{item.icon}} umb-table-body__icon umb-table-body__fileicon" ng-if="!item.selected"></umb-icon>
<umb-icon icon="icon-check" class="icon-check umb-table-body__icon umb-table-body__checkicon" ng-if="item.selected"></umb-icon>
</div>
<div class="umb-table-cell umb-table__name">
<a title="{{ item.name }}" class="umb-table-body__link"
<a title="{{item.name}}" class="umb-table-body__link"
ng-href="{{'#' + item.editPath}}"
ng-click="vm.clickItem(item, $event)"
ng-bind="item.name">

22
src/Umbraco.Web.UI.Client/src/views/content/create.html
View File

@@ -14,7 +14,7 @@
<p class="abstract">
<localize key="create_noDocumentTypes" />
</p>
<button class="btn umb-outline" ng-click="editContentType()">
<button type="button" class="btn umb-outline" ng-click="editContentType()">
<localize key="create_noDocumentTypesEditPermissions" />
</button>
</div>
@@ -28,7 +28,7 @@
<p class="abstract" ng-if="countTypes === 0">
<localize key="create_noDocumentTypesAtRoot" />
</p>
<button class="btn umb-outline" ng-click="createContentType()" ng-if="countTypes === 0">
<button type="button" class="btn umb-outline" ng-click="createContentType()" ng-if="countTypes === 0">
<localize key="create_noDocumentTypesCreateNew" />
</button>
</div>
@@ -37,8 +37,8 @@
<ul class="umb-actions umb-actions-child" ng-if="selectContentType && allowedTypes.length > 0" aria-labelledby="selectContentType">
<li class="umb-action" data-element="action-create-{{docType.alias}}" ng-repeat="docType in allowedTypes">
<button class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" umb-auto-focus ng-if="$index === 0">
<i class="large icon {{docType.icon}}"></i>
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" umb-auto-focus ng-if="$index === 0">
<umb-icon icon="{{docType.icon}}" class="{{docType.icon}} icon large"></umb-icon>
<span class="menu-label">
{{docType.name}}
<small>
@@ -46,8 +46,8 @@
</small>
</span>
</button>
<button class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" ng-if="$index !== 0">
<i class="large icon {{docType.icon}}"></i>
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" ng-if="$index !== 0">
<umb-icon icon="{{docType.icon}}" class="{{docType.icon}} icon large"></umb-icon>
<span class="menu-label">
{{docType.name}}
<small>
@@ -62,8 +62,8 @@
<ul class="umb-actions umb-actions-child" ng-if="selectBlueprint">
<li class="umb-action" ng-repeat="blueprint in selectableBlueprints | orderBy:'name':false track by $index">
<button class="umb-action-link umb-outline btn-reset" ng-click="createFromBlueprint(blueprint.id)">
<i class="large icon {{docType.icon}}"></i>
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createFromBlueprint(blueprint.id)">
<umb-icon icon="{{docType.icon}}" class="{{docType.icon}} icon large"></umb-icon>
<span class="menu-label">
{{blueprint.name}}
</span>
@@ -71,8 +71,8 @@
</li>
<li class="umb-action sep" ng-show="allowBlank">
<button class="umb-action-link umb-outline btn-reset" ng-click="createBlank(docType)">
<i class="large icon {{docType.icon}}"></i>
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createBlank(docType)">
<umb-icon icon="{{docType.icon}}" class="{{docType.icon}} icon large"></umb-icon>
<span class="menu-label">
<localize key="blueprints_blankBlueprint">Blank</localize>
</span>
@@ -85,7 +85,7 @@
</div>
<div ng-if="!loading" class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<button class="btn btn-info umb-outline" ng-click="closeDialog(true)">
<button type="button" class="btn btn-info umb-outline" ng-click="closeDialog(true)">
<localize key="buttons_somethingElse">All Actions</localize>
</button>
</div>

20
src/Umbraco.Web.UI.Client/src/views/media/create.html
View File

@@ -15,36 +15,22 @@
</div>
<ul class="umb-actions umb-actions-child">
<li data-element="action-{{docType.alias}}" class="umb-action" ng-repeat="docType in allowedTypes">
<button ng-click="createMediaItem(docType)" class="umb-action-link umb-outline btn-reset" prevent-default>
<i class="large icon {{docType.icon}}"></i>
<button type="button" ng-click="createMediaItem(docType)" class="umb-action-link umb-outline btn-reset">
<umb-icon icon="{{docType.icon}}" class="{{docType.icon}} icon large"></umb-icon>
<span class="menu-label">
{{docType.name}}
<small>{{docType.description}}</small>
</span>
</button>
</li>
<!--
<li class="add">
<a href="#settings/documenttype/create/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()">
<i class="icon-large icon-plus"></i>
<span class="menu-label">
Create a new media type
<small>
Design and configure a new media type
</small>
</span>
</a>
</li>
-->
</ul>
</div>
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<button class="btn btn-info" ng-click="closeDialog()">
<button type="button" class="btn btn-info" ng-click="closeDialog()">
<localize key="buttons_somethingElse">Do something else</localize>
</button>
</div>

4
src/Umbraco.Web.UI.Client/src/views/member/create.html
View File

@@ -6,8 +6,8 @@
<ul class="umb-actions umb-actions-child">
<li class="umb-action" ng-repeat="docType in allowedTypes">
<button class="umb-action-link umb-outline btn-reset" ng-click="createMemberType(docType)">
<i class="large icon {{docType.icon}}"></i>
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createMemberType(docType)">
<umb-icon icon="{{docType.icon}}" class="{{docType.icon}} icon large"></umb-icon>
<span class="menu-label">
{{docType.name}}
<small>{{docType.description}}</small>