Use umb-icon component for icons in content type groups and tabs

This commit is contained in:
Bjarne Fyrstenborg
2021-09-01 22:16:46 +02:00
committed by Nathan Woulfe
parent 7043d1cc0f
commit c7f342a6dd
3 changed files with 30 additions and 21 deletions

View File

@@ -3,7 +3,10 @@
<ng-form name="groupNameForm" data-element="group-name">
<div class="umb-group-builder__group-title control-group -no-margin" ng-class="{'-inherited': vm.group.inherited}">
<i class="umb-group-builder__group-title-icon icon-navigation" ng-if="vm.sorting && !vm.group.inherited"></i>
<umb-icon icon="icon-navigation"
class="umb-group-builder__group-title-icon"
ng-if="vm.sorting && !vm.group.inherited">
</umb-icon>
<input data-element="group-name-field"
class="umb-group-builder__group-title-input"
type="text"
@@ -30,7 +33,7 @@
<div class="umb-group-builder__group-title-right">
<div class="umb-group-builder__group-inherited-label" ng-if="vm.group.inherited">
<i class="icon icon-merge"></i>
<umb-icon icon="icon-merge" class="icon"></umb-icon>
<localize key="contentTypeEditor_inheritedFrom"></localize>: {{ vm.group.inheritedFromName }}
<span ng-repeat="contentTypeName in vm.group.parentTabContentTypeNames">
<button type="button" class="btn-link btn-small p0" ng-click="vm.clickComposition(vm.group.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
@@ -52,7 +55,7 @@
</div>
<div class="umb-group-builder__group-remove" ng-if="vm.allowRemove">
<i class="icon-trash" ng-click="vm.removeGroup()"></i>
<umb-icon icon="icon-trash" ng-click="vm.removeGroup()"></umb-icon>
</div>
</div>

View File

@@ -46,7 +46,7 @@
</ng-form>
<div ng-if="vm.sortable" class="flex items-center">
<i class="icon icon-navigation" ng-if="!vm.property.inherited" style="margin-right: 10px;"></i>
<umb-icon icon="icon-navigation" class="icon" ng-if="!vm.property.inherited" style="margin-right: 10px;"></umb-icon>
<span class="umb-group-builder__property-meta-label">{{ vm.property.label }}</span>
<span class="umb-group-builder__property-meta-alias" style="margin-bottom: 0; margin-left: 5px; margin-top: 1px;">({{ vm.property.alias }})</span>
<input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="vm.property.sortOrder" ng-disabled="vm.property.inherited" ng-blur="vm.changeSortOrderValue()" />
@@ -65,32 +65,32 @@
</span>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.validation.mandatory">
<i class="umb-group-builder__property-tag-icon">*</i>
<span class="umb-group-builder__property-tag-icon">*</span>
<localize key="general_mandatory"></localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.showOnMemberProfile">
<i class="icon-eye umb-group-builder__property-tag-icon"></i>
<umb-icon icon="icon-eye" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_showOnMemberProfile"></localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.memberCanEdit">
<i class="icon-edit umb-group-builder__property-tag-icon"></i>
<umb-icon icon="icon-edit" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_memberCanEdit"></localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.isSensitiveData">
<i class="icon-lock umb-group-builder__property-tag-icon"></i>
<umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_isSensitiveData"></localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowCultureVariant">
<i class="icon-shuffle umb-group-builder__property-tag-icon"></i>
<umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_cultureVariantLabel"></localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowSegmentVariant">
<i class="icon-shuffle umb-group-builder__property-tag-icon"></i>
<umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_segmentVariantLabel"></localize>
</div>
@@ -99,13 +99,13 @@
<div class="umb-group-builder__property-tags -right">
<div class="umb-group-builder__property-tag" ng-if="vm.property.inherited">
<umb-icon icon="icon-merge" class="icon-merge"></umb-icon>
<umb-icon icon="icon-merge"></umb-icon>
<span style="margin-right: 3px"><localize key="contentTypeEditor_inheritedFrom"></localize></span>
{{vm.property.contentTypeName}}
</div>
<div class="umb-group-builder__property-tag" ng-if="vm.property.locked">
<umb-icon icon="icon-lock" class="icon-lock"></umb-icon>
<umb-icon icon="icon-lock"></umb-icon>
<localize key="general_locked"></localize>
</div>
@@ -119,7 +119,7 @@
</umb-property-editor>
</ng-form>
<button aria-label="Open settings" class="umb-group-builder__open-settings" ng-if="!vm.property.inherited && !vm.property.locked" ng-click="vm.edit()"></button>
<button type="button" aria-label="Open settings" class="umb-group-builder__open-settings" ng-if="!vm.property.inherited && !vm.property.locked" ng-click="vm.edit()"></button>
</div>
@@ -130,15 +130,15 @@
<!-- settings for property -->
<div class="umb-group-builder__property-action">
<button aria-label="Open settings" class="btn-icon" ng-click="vm.edit()" localize="title" title="@general_edit">
<umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
<button type="button" aria-label="Open settings" class="btn-icon" ng-click="vm.edit()" localize="title" title="@general_edit">
<umb-icon icon="icon-settings"></umb-icon>
</button>
</div>
<!-- delete property -->
<div ng-if="!vm.property.locked" class="umb-group-builder__property-action">
<button aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
<umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
<button type="button" aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
<umb-icon icon="icon-trash"></umb-icon>
</button>
</div>
@@ -146,4 +146,4 @@
</div>
</div>
</div>

View File

@@ -19,8 +19,14 @@
</span>
</div>
<div class="umb-group-builder__tab-title-wrapper">
<i class="umb-group-builder__tab-title-icon icon-navigation" ng-if="vm.sorting && !vm.tab.inherited"></i>
<i class="umb-group-builder__tab-title-icon icon-merge" ng-if="vm.tab.inherited"></i>
<umb-icon icon="icon-navigation"
class="umb-group-builder__tab-title-icon"
ng-if="vm.sorting && !vm.tab.inherited">
</umb-icon>
<umb-icon icon="icon-merge"
class="umb-group-builder__tab-title-icon"
ng-if="vm.tab.inherited">
</umb-icon>
<ng-form name="tabNameForm" data-element="tab-name">
<div class="umb-group-builder__tab-name" ng-if="vm.tab.inherited" title="{{vm.tab.alias}}">{{ vm.tab.name }}</div>
<input
@@ -65,7 +71,7 @@
</div>
<div class="umb-group-builder__tab-remove" ng-if="vm.allowRemove">
<button type="button" class="btn-reset" ng-click="vm.removeTab()">
<i class="icon-trash"></i>
<umb-icon icon="icon-trash"></umb-icon>
</button>
</div>
</div>