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

Support custom SVG icon in umb-child-selector component (#10344)

Browse Source 
* Use umb-icon component

* Specify button type attribute

* Use umb-search-filter component

* Adjust styling of item picker

* Replace trash icons with umb-icon

* Replace a few icons in umb-grid-selector as well

* Use umb-icon in datatype picker

* Ensure icons are styles correct in legacy format

* Use umb-icon component in macro parameter editors and fix wrong end closing tag from button element

* Use umb-icon in macro parameter editor overlay
This commit is contained in:
Bjarne Fyrstenborg
2021-06-07 00:27:02 +02:00
committed by GitHub
parent eb6b7cffad
commit c2c6413eb7
8 changed files with 133 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/Umbraco.Web.UI.Client/src/less/components/card.less
View File

@@ -96,8 +96,6 @@
}
//Card icon grid for picking items off a card
.umb-card-grid {
padding: 0;
@@ -129,48 +127,74 @@
}
.umb-card-grid.-three-in-row li {
flex: 0 0 33.333%;
max-width:33.333%;
flex: 0 0 33.333%;
max-width: 33.333%;
i {
span > i, // legacy icon
.umb-icon {
font-size: 36px;
line-height: 28px;
line-height: 1;
}
}
.umb-card-grid .umb-card-grid-item {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 10px 5px;
border-radius: @baseBorderRadius * 2;
transition: background-color 120ms;
font-size: 13px;
line-height: 1.3em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
> span {
.umb-card-grid {
.umb-card-grid-item {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 10px 5px;
border-radius: @baseBorderRadius * 2;
transition: background-color 120ms;
font-size: 13px;
line-height: 1.3em;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: transparent;
word-break: break-word;
align-items: center;
justify-content: flex-start;
&__loading {
position: absolute;
background-color: rgba(255,255,255,0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a {
color: @ui-option-type;
text-decoration: none;
}
> span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: transparent;
word-break: break-word;
}
&:hover {
background-color: @ui-option-hover;
color: @ui-option-type-hover;
}
&:focus {
color: @ui-option-type-hover;
}
}
}
.umb-card-grid .umb-card-grid-item:hover {
background-color: @ui-option-hover;
color: @ui-option-type-hover;
}
.umb-card-grid .umb-card-grid-item:focus {
color: @ui-option-type-hover;
span > i, // legacy icon
.umb-icon {
font-size: 30px;
line-height: 1;
margin-top: 6px;
margin-bottom: 10px;
display: block;
}
}
.umb-card-grid .umb-card-grid-item.--creator {
@@ -189,7 +213,6 @@
width: 100%;
padding-top: 100%;
border-radius: @baseBorderRadius * 2;
box-sizing: border-box;
transition: background-color 120ms;
@@ -217,30 +240,6 @@
}
}
.umb-card-grid a {
color: @ui-option-type;
text-decoration: none;
}
.umb-card-grid i {
font-size: 30px;
line-height: 20px;
margin-top: 6px;
margin-bottom: 10px;
display: block;
}
.umb-card-grid .umb-card-grid-item__loading {
position: absolute;
background-color: rgba(255,255,255,0.8);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
//Round icon-like button - this should be somewhere else
.umb-btn-round {
padding: 4px 6px 4px 6px;

1
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
View File

@@ -546,6 +546,7 @@ input.umb-group-builder__group-sort-value {
.icon {
font-size: 32px;
line-height: 1;
}
}

42
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html
View File

@@ -22,8 +22,7 @@
text="Type to search"
on-change="vm.searchTermChanged()"
css-class="w-100"
auto-focus="true"
>
auto-focus="true">
</umb-search-filter>
<umb-load-indicator ng-if="vm.loading === true"></umb-load-indicator>
@@ -33,14 +32,13 @@
<h2 class="h5">{{key | umbCmsTitleCase}}</h2>
<ul class="umb-card-grid -six-in-row">
<li ng-repeat="dataType in value | orderBy:'name'" data-element="datatype-{{dataType.name}}">
<button
type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.viewOptionsForEditor(dataType)"
title="{{ dataType.name }}">
<button type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.viewOptionsForEditor(dataType)"
title="{{dataType.name}}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
{{ dataType.name }}
<umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
{{dataType.name}}
</span>
</button>
</li>
@@ -62,14 +60,13 @@
<div ng-if="dataType.loading" class="umb-card-grid-item__loading">
<div class="umb-button__progress"></div>
</div>
<button
type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.pickDataType(dataType)"
title="{{ dataType.name }}">
<button type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.pickDataType(dataType)"
title="{{dataType.name}}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
{{ dataType.name }}
<umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
{{dataType.name}}
</span>
</button>
</li>
@@ -84,14 +81,13 @@
<h3 class="h5">{{result.group | umbCmsTitleCase}}</h3>
<ul class="umb-card-grid -six-in-row">
<li ng-repeat="dataType in result.entries | orderBy:'name'">
<button
type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.pickEditor(dataType)"
title="{{ dataType.name }}">
<button type="button"
class="btn-reset umb-card-grid-item"
ng-click="vm.pickEditor(dataType)"
title="{{dataType.name}}">
<span>
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}" aria-hidden="true"></i>
{{ dataType.name }}
<umb-icon icon="{{dataType.icon || 'icon-autofill'}}" class="{{dataType.icon || 'icon-autofill'}}"></umb-icon>
{{dataType.name}}
</span>
</button>
</li>

31
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macroparameterpicker/macroparameterpicker.html
View File

@@ -24,8 +24,7 @@
text="Type to filter..."
css-class="w-100"
on-change="vm.filterItems()"
auto-focus="true"
>
auto-focus="true">
</umb-search-filter>
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
@@ -36,14 +35,13 @@
<ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="parameterEditor in value | orderBy:'name'"
data-element="editor-{{parameterEditor.name}}">
<button
type="button"
ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
ng-click="vm.pickParameterEditor(parameterEditor)"
class="btn-reset umb-card-grid-item"
title="{{parameterEditor.name}}">
<button type="button"
ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
ng-click="vm.pickParameterEditor(parameterEditor)"
class="btn-reset umb-card-grid-item"
title="{{parameterEditor.name}}">
<span>
<i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}" aria-hidden="true"></i>
<umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}" class="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
{{parameterEditor.name}}
</span>
</button>
@@ -63,17 +61,16 @@
<div ng-if="parameterEditor.loading" class="umb-card-grid-item__loading">
<div class="umb-button__progress"></div>
</div>
<button
type="button"
ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
ng-click="vm.pickParameterEditor(parameterEditor)"
class="btn-reset umb-card-grid-item"
title="{{parameterEditor.name}}">
<button type="button"
ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
ng-click="vm.pickParameterEditor(parameterEditor)"
class="btn-reset umb-card-grid-item"
title="{{parameterEditor.name}}">
<span>
<i class="{{parameterEditor.icon}}" ng-class="{'icon-autofill': parameterEditor.icon == null}" aria-hidden="true"></i>
<umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}" class="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
{{parameterEditor.name}}
</span>
</a>
</button>
</li>
</ul>
</div>

34
src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
View File

@@ -1,19 +1,19 @@
<div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
<div class="form-search" ng-if="model.filter !== false" style="margin-bottom: 15px;">
<i class="icon-search" aria-hidden="true"></i>
<input type="text"
ng-model="filter.searchTerm"
class="umb-search-field search-query input-block-level -full-width-input"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
<div class="mb3" ng-if="model.filter !== false">
<umb-search-filter
model="filter.searchTerm"
label-key="placeholders_filter"
text="Type to filter..."
css-class="w-100"
auto-focus="true">
</umb-search-filter>
</div>
<div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
<h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
<button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
<i class="icon-trash" aria-hidden="true"></i>
<button type="button" ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
<umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
</button>
</div>
@@ -21,7 +21,7 @@
<li ng-repeat="pasteItem in model.pasteItems | filter:filter.searchTerm">
<button type="button" class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
<span>
<i class="{{ pasteItem.icon }}" aria-hidden="true"></i>
<umb-icon icon="{{pasteItem.icon}}" class="{{pasteItem.icon}}"></umb-icon>
{{ pasteItem.name | truncate:true:36 }}
</span>
</button>
@@ -36,16 +36,16 @@
<li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:filter.searchTerm">
<button type="button" class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
<span ng-mouseover="showTooltip(availableItem, $event)" ng-mouseleave="hideTooltip()">
<i class="{{ availableItem.icon }}" aria-hidden="true"></i>
<span>{{ availableItem.name }}</span>
<umb-icon icon="{{availableItem.icon}}" class="{{availableItem.icon}}"></umb-icon>
<span>{{availableItem.name}}</span>
</span>
</button>
</li>
<li ng-if="model.createNewItem">
<button class="umb-card-grid-item btn-reset --creator" ng-click="model.createNewItem.action()">
<button type="button" class="umb-card-grid-item btn-reset --creator" ng-click="model.createNewItem.action()">
<span>
<i class="{{ model.createNewItem.icon }}"></i>
{{ model.createNewItem.name }}
<umb-icon icon="{{model.createNewItem.icon}}" class="{{model.createNewItem.icon}}"></umb-icon>
{{model.createNewItem.name}}
</span>
</button>
</li>

8
src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
View File

@@ -3,10 +3,10 @@
<div class="umb-child-selector__child -parent">
<div class="umb-child-selector__child-description">
<div class="umb-child-selector__child-icon-holder">
<i class="umb-child-selector__child-icon {{ parentIcon }}" aria-hidden="true"></i>
<umb-icon icon="{{parentIcon}}" class="umb-child-selector__child-icon {{parentIcon}}"></umb-icon>
</div>
<span class="umb-child-selector__child-name">
<strong>{{ parentName }}</strong>
<strong>{{parentName}}</strong>
</span>
<small>
(<localize key="general_current"></localize>)
@@ -19,13 +19,13 @@
<div class="umb-child-selector__child" ng-repeat="selectedChild in selectedChildren">
<div class="umb-child-selector__child-description">
<div class="umb-child-selector__child-icon-holder">
<i class="umb-child-selector__child-icon {{selectedChild.icon}}" aria-hidden="true"></i>
<umb-icon icon="{{selectedChild.icon}}" class="umb-child-selector__child-icon {{selectedChild.icon}}"></umb-icon>
</div>
<span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
</div>
<div class="umb-child-selector__child-actions">
<button type="button" class="umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
<i class="icon-trash" aria-hidden="true"></i>
<umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
</button>
</div>
</div>

29
src/Umbraco.Web.UI.Client/src/views/components/umb-grid-selector.html
View File

@@ -3,33 +3,42 @@
<div class="umb-grid-selector__items">
<div class="umb-grid-selector__item -default" ng-if="defaultItem !== null">
<div class="umb-grid-selector__item-content">
<i class="umb-grid-selector__item-icon {{ defaultItem.icon }}" aria-hidden="true"></i>
<umb-icon icon="{{defaultItem.icon}}" class="{{defaultItem.icon}} umb-grid-selector__item-icon"></umb-icon>
<div class="umb-grid-selector__item-label">{{ defaultItem.name }}</div>
<div ng-show="defaultItem.id"><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="openTemplate(defaultItem)"><localize key="general_open">Open</localize></button></div>
<span class="umb-grid-selector__item-default-label">(<localize key="general_default">Default</localize> {{itemLabel}})</span>
</div>
<i class="umb-grid-selector__item-remove icon-trash" ng-if="selectedItems.length === 1" ng-click="removeDefaultItem()" aria-role="button">
</div>
<button type="button" class="btn-reset" ng-if="selectedItems.length === 1" ng-click="removeDefaultItem()">
<umb-icon icon="icon-trash" class="icon-trash umb-grid-selector__item-remove"></umb-icon>
<span class="sr-only">Remove Template</span>
</i>
</button>
</div>
<div class="umb-grid-selector__item" ng-repeat="selectedItem in selectedItems | filter: { alias:'!'+defaultItem.alias }:true">
<div class="umb-grid-selector__item-content">
<i class="umb-grid-selector__item-icon {{ selectedItem.icon }}" aria-hidden="true"></i>
<umb-icon icon="{{selectedItem.icon}}" class="{{selectedItem.icon}} umb-grid-selector__item-icon"></umb-icon>
<div class="umb-grid-selector__item-label">{{ selectedItem.name }}</div>
<div><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="openTemplate(selectedItem)"><localize key="general_open">Open</localize></button></div>
<div><button class="umb-grid-selector__item-default-label btn-link -blue" ng-click="setAsDefaultItem(selectedItem)"><localize key="grid_setAsDefault">Set as default</localize></button></div>
</div>
<i class="umb-grid-selector__item-remove icon-trash" ng-click="removeItem(selectedItem)" aria-role="button">
<button type="button" class="btn-reset" ng-click="removeItem(selectedItem)">
<umb-icon icon="icon-trash" class="icon-trash umb-grid-selector__item-remove"></umb-icon>
<span class="sr-only">Remove Template</span>
</i>
</button>
</div>
<button class="umb-grid-selector__item -placeholder" ng-if="(availableItems | compareArrays:selectedItems:'alias').length > 0" ng-click="openItemPicker($event)" hotkey="alt+shift+g">
<button type="button" class="umb-grid-selector__item -placeholder" ng-if="(availableItems | compareArrays:selectedItems:'alias').length > 0" ng-click="openItemPicker($event)" hotkey="alt+shift+g">
<div class="umb-grid-selector__item-content">
<div class="umb-grid-selector__item-label -blue" ng-if="defaultItem !== null"><localize key="grid_chooseExtra">Choose extra</localize> {{ itemLabel }}</div>
<div class="umb-grid-selector__item-label -blue" ng-if="defaultItem === null"><localize key="grid_chooseDefault">Choose default</localize> {{ itemLabel }}</div>
<div class="umb-grid-selector__item-label -blue" ng-if="defaultItem !== null"><localize key="grid_chooseExtra">Choose extra</localize> {{itemLabel}}</div>
<div class="umb-grid-selector__item-label -blue" ng-if="defaultItem === null"><localize key="grid_chooseDefault">Choose default</localize> {{itemLabel}}</div>
</div>
</button>

2
src/Umbraco.Web.UI.Client/src/views/macros/infiniteeditors/parameter.html
View File

@@ -49,7 +49,7 @@
<button type="button" class="btn-reset editor-info" ng-click="vm.openMacroParameterPicker(model.parameter)">
<div class="editor-icon-wrapper">
<i class="icon {{ model.parameter.dataTypeIcon }}" ng-class="{'icon-autofill': model.parameter.dataTypeIcon == null}" aria-hidden="true"></i>
<umb-icon icon="{{model.parameter.dataTypeIcon || 'icon-autofill'}}" class="icon {{model.parameter.dataTypeIcon || 'icon-autofill'}}"></umb-icon>
</div>
<div class="editor-details">