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

Tweaks the composition dialog in the content type editor (#12698)

Browse Source 
* Tweaks the composition dialog in the content type editor

- removes the search field if no content types is available
- change the styling on the info text regarding missing content types
- moves the search field closer to the content type list

* fixes filter - needed vm binding, probably due to introducing ng-if and related scope trickery
tweaked css on checkbox list icon to improve alignment

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
This commit is contained in:
Søren Kottal
2022-07-19 03:35:52 +02:00
committed by GitHub
parent c2c87a0d72
commit 29e8fd786d
2 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
View File

@@ -47,6 +47,7 @@
.umb-checkbox-list__item-icon-wrapper {
position: relative;
display: flex;
.umb-button__progress {
width: 10px;

61
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
View File

@@ -16,55 +16,62 @@
<umb-box>
<umb-box-content>
<div class="umb-control-group">
<umb-search-filter
input-id="composition-search"
model="searchTerm"
label-key="placeholders_filter"
text="Type to filter..."
css-class="w-100"
auto-focus="true">
</umb-search-filter>
<div ng-if="model.availableCompositeContentTypes.length !== 0">
<div class="mb2">
<localize key="contentTypeEditor_compositionsDescription">
Inherit tabs and properties from an existing Document Type. New tabs will be added to the current Document Type or
merged if a tab with an identical name exists.
</localize>
</div>
<div class="umb-control-group">
<localize key="contentTypeEditor_compositionsDescription">Inherit tabs and properties from an existing Document Type. New tabs will be added to the current Document Type or
merged if a tab with an identical name exists.</localize>
<umb-search-filter input-id="composition-search"
model="vm.searchTerm"
label-key="placeholders_filter"
text="Type to filter..."
css-class="w-100"
auto-focus="true">
</umb-search-filter>
</div>
<umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
position="center">
</div>
<div ng-if="model.availableCompositeContentTypes.length === 0">
<div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1">
<localize key="contentTypeEditor_noAvailableCompositions">There are no Content Types available to use as a composition.</localize>
</umb-empty-state>
</div>
<umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
<div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
<localize key="contentTypeEditor_compositionInUse">This Content Type is used in a composition, and therefore cannot be composed itself.</localize>
</umb-empty-state>
</div>
<div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
<div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
<h5><localize key="contentTypeEditor_compositionUsageHeading">Where is this composition used?</localize></h5>
<p><localize key="contentTypeEditor_compositionUsageSpecification">This composition is currently used in the composition of the following Content Types:</localize></p>
<ul class="umb-checkbox-list">
<li class="umb-checkbox-list__item"
ng-repeat="contentTypeEntity in model.whereCompositionUsed">
<a ng-click="vm.openContentType(contentTypeEntity.contentType, model.section)">
<umb-icon icon="{{contentTypeEntity.contentType.icon}}"></umb-icon>
&nbsp;{{contentTypeEntity.contentType.name}}
</a>
</li>
<li class="umb-checkbox-list__item"
ng-repeat="contentTypeEntity in model.whereCompositionUsed">
<a ng-click="vm.openContentType(contentTypeEntity.contentType, model.section)">
<umb-icon icon="{{contentTypeEntity.contentType.icon}}"></umb-icon>
&nbsp;{{contentTypeEntity.contentType.name}}
</a>
</li>
</ul>
</div>
</div>
<div class="umb-control-group -no-border" ng-if="vm.availableGroups.length > 0">
<ul class="umb-checkbox-list" ng-repeat="group in vm.availableGroups | filter:searchTerm">
<ul class="umb-checkbox-list" ng-repeat="group in vm.availableGroups | filter:vm.searchTerm">
<li ng-show="vm.availableGroups.length > 1">
<umb-icon icon="icon-folder" class="umb-checkbox-list__item-icon"></umb-icon>
{{group.containerPath}}
</li>
<li class="umb-checkbox-list__item"
ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:searchTerm"
ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:vm.searchTerm"
ng-class="{'-disabled': (compositeContentType.allowed === false && !compositeContentType.selected) || compositeContentType.inherited, '-selected': compositeContentType.selected}">
<div class="umb-checkbox-list__item-checkbox" ng-class="{'-selected': compositeContentType.selected }">