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

Added property way of seeing composition (#11811)

Browse Source
This commit is contained in:
patrickdemooij9
2022-02-27 10:09:35 +01:00
committed by GitHub
parent a24b099831
commit fa0027d4f1
7 changed files with 128 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypegroup.component.js
View File

@@ -45,9 +45,9 @@
vm.onChangeSortOrderValue( {group: vm.group});
}
}
function clickComposition (documentTypeId) {
function clickComposition (contentTypeId) {
if (vm.onClickComposition) {
vm.onClickComposition({documentTypeId: documentTypeId});
vm.onClickComposition({contentTypeId: contentTypeId});
}
}
}

8
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypeproperty.component.js
View File

@@ -12,6 +12,7 @@
vm.edit = edit;
vm.remove = remove;
vm.changeSortOrderValue = changeSortOrderValue;
vm.clickComposition = clickComposition;
function edit () {
if (vm.onEdit) {
@@ -31,6 +32,12 @@
}
}
function clickComposition(contentTypeId) {
if (vm.onClickComposition) {
vm.onClickComposition({ contentTypeId: contentTypeId });
}
}
}
const umbContentTypePropertyComponent = {
@@ -41,6 +48,7 @@
onEdit: '&',
onRemove: '&',
onChangeSortOrderValue: '&',
onClickComposition: '&?',
valServerFieldAlias: '@',
valServerFieldLabel: '@',
valTabAlias: '@'

4
src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
View File

@@ -59,9 +59,9 @@
}
}
function clickComposition (documentTypeId) {
function clickComposition(contentTypeId) {
if (vm.onClickComposition) {
vm.onClickComposition({documentTypeId: documentTypeId});
vm.onClickComposition({ contentTypeId: contentTypeId});
}
}

4
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -484,9 +484,9 @@
};
scope.openDocumentType = (documentTypeId) => {
scope.openContentType = (contentTypeId) => {
const editor = {
id: documentTypeId,
id: contentTypeId,
submit: () => {
const args = { node: scope.model };
eventsService.emit("editors.documentType.reload", args);

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

@@ -714,7 +714,7 @@ input.umb-group-builder__group-title-input:disabled:hover {
}
.umb-group-builder__property-tags.-right {
right: 0;
right: 4px;
left: auto;
}

221
src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-property.html
View File

@@ -3,147 +3,144 @@
<!-- property meta text -->
<div class="umb-group-builder__property-meta" ng-class="{'-full-width': vm.sortable}" data-element="{{vm.valTabAlias}}">
<ng-form name="propertyTypeForm">
<div class="control-group -no-margin" ng-if="!vm.sortable">
<ng-form name="propertyTypeForm">
<div class="control-group -no-margin" ng-if="!vm.sortable">
<div class="umb-group-builder__property-meta-alias umb-locked-field__text cursor-not-allowed" style="padding-left: 1px" ng-if="vm.property.inherited || vm.property.locked">{{ vm.property.alias }}</div>
<umb-locked-field
ng-if="!vm.property.inherited && !vm.property.locked"
locked="locked"
ng-model="vm.property.alias"
placeholder-text="'Alias...'"
server-validation-field="{{ vm.valServerFieldAlias }}">
</umb-locked-field>
<div class="umb-group-builder__property-meta-alias umb-locked-field__text cursor-not-allowed" style="padding-left: 1px" ng-if="vm.property.inherited || vm.property.locked">{{ vm.property.alias }}</div>
<umb-locked-field ng-if="!vm.property.inherited && !vm.property.locked"
locked="locked"
ng-model="vm.property.alias"
placeholder-text="'Alias...'"
server-validation-field="{{ vm.valServerFieldAlias }}">
</umb-locked-field>
<div class="umb-group-builder__property-meta-label">
<textarea localize="placeholder"
placeholder="@placeholders_label"
ng-model="vm.property.label"
ng-disabled="vm.property.inherited || vm.property.locked"
name="groupName"
umb-auto-resize
required
val-server-field="{{ vm.valServerFieldLabel }}">
<div class="umb-group-builder__property-meta-label">
<textarea localize="placeholder"
placeholder="@placeholders_label"
ng-model="vm.property.label"
ng-disabled="vm.property.inherited || vm.property.locked"
name="groupName"
umb-auto-resize
required
val-server-field="{{ vm.valServerFieldLabel }}">
</textarea>
<div ng-messages="propertyTypeForm.groupName.$error" show-validation-on-submit>
<div class="umb-validation-label" ng-message="valServerField">{{propertyTypeForm.groupName.errorMsg}}</div>
<div class="umb-validation-label" ng-message="required"><localize key="contentTypeEditor_requiredLabel">Required label</localize></div>
</div>
</div>
<div class="umb-group-builder__property-meta-description">
<textarea
localize="placeholder"
placeholder="@placeholders_enterDescription"
ng-model="vm.property.description"
ng-disabled="vm.property.inherited || vm.property.locked"
umb-auto-resize>
</textarea>
</div>
<div ng-messages="propertyTypeForm.groupName.$error" show-validation-on-submit>
<div class="umb-validation-label" ng-message="valServerField">{{propertyTypeForm.groupName.errorMsg}}</div>
<div class="umb-validation-label" ng-message="required"><localize key="contentTypeEditor_requiredLabel">Required label</localize></div>
</div>
</ng-form>
<div ng-if="vm.sortable" class="flex items-center">
<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()" />
</div>
<div class="umb-group-builder__property-meta-description">
<textarea localize="placeholder"
placeholder="@placeholders_enterDescription"
ng-model="vm.property.description"
ng-disabled="vm.property.inherited || vm.property.locked"
umb-auto-resize>
</textarea>
</div>
</div>
</ng-form>
<div ng-if="vm.sortable" class="flex items-center">
<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()" />
</div>
</div>
<div tabindex="-1" class="umb-group-builder__property-preview" ng-if="!vm.sortable" ng-class="{'-not-clickable': !vm.sortable && (vm.property.inherited || vm.property.locked)}">
<div class="umb-group-builder__property-tags">
<div class="umb-group-builder__property-tags">
<span class="umb-group-builder__property-tag -white">
<span ng-if="vm.property.dataTypeName !== undefined">{{vm.property.dataTypeName}}</span>
<span ng-if="vm.property.dataTypeName == undefined"><localize key="general_preview">Preview</localize></span>
</span>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.validation.mandatory">
<span class="umb-group-builder__property-tag-icon">*</span>
<localize key="general_mandatory">Mandatory</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.showOnMemberProfile">
<umb-icon icon="icon-eye" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_showOnMemberProfile">Show on member profile</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.memberCanEdit">
<umb-icon icon="icon-edit" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_memberCanEdit">Member can edit</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.isSensitiveData">
<umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_isSensitiveData">Is sensitive data</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowCultureVariant">
<umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_cultureVariantLabel">Vary by culture</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowSegmentVariant">
<umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_segmentVariantLabel">Vary by segments</localize>
</div>
<span class="umb-group-builder__property-tag -white">
<span ng-if="vm.property.dataTypeName !== undefined">{{vm.property.dataTypeName}}</span>
<span ng-if="vm.property.dataTypeName == undefined"><localize key="general_preview">Preview</localize></span>
</span>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.validation.mandatory">
<span class="umb-group-builder__property-tag-icon">*</span>
<localize key="general_mandatory">Mandatory</localize>
</div>
<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="umb-group-builder__property-tag-icon"></umb-icon>
<span style="margin-right: 3px"><localize key="contentTypeEditor_inheritedFrom">Inherited from</localize></span>
{{vm.property.contentTypeName}}
</div>
<div class="umb-group-builder__property-tag" ng-if="vm.property.locked">
<umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="general_locked">Locked</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.showOnMemberProfile">
<umb-icon icon="icon-eye" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_showOnMemberProfile">Show on member profile</localize>
</div>
<ng-form inert class="umb-group-builder__property-preview-form" name="propertyEditorPreviewForm" umb-disable-form-validation ng-click="vm.edit()" tabindex="-1">
<umb-property-editor
ng-if="vm.property.view !== undefined"
model="vm.property"
preview="true">
</umb-property-editor>
</ng-form>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.memberCanEdit">
<umb-icon icon="icon-edit" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_memberCanEdit">Member can edit</localize>
</div>
<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 class="umb-group-builder__property-tag -white" ng-if="vm.property.isSensitiveData">
<umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_isSensitiveData">Is sensitive data</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowCultureVariant">
<umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_cultureVariantLabel">Vary by culture</localize>
</div>
<div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowSegmentVariant">
<umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="contentTypeEditor_segmentVariantLabel">Vary by segments</localize>
</div>
</div>
<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="umb-group-builder__property-tag-icon"></umb-icon>
<span style="margin-right: 3px"><localize key="contentTypeEditor_inheritedFrom">Inherited from</localize></span>
<button type="button" class="btn btn-small btn-link p0" ng-click="vm.clickComposition(vm.property.contentTypeId)">
{{vm.property.contentTypeName}}
</button>
</div>
<div class="umb-group-builder__property-tag" ng-if="vm.property.locked">
<umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
<localize key="general_locked">Locked</localize>
</div>
</div>
<ng-form inert class="umb-group-builder__property-preview-form" name="propertyEditorPreviewForm" umb-disable-form-validation ng-click="vm.edit()" tabindex="-1">
<umb-property-editor ng-if="vm.property.view !== undefined"
model="vm.property"
preview="true">
</umb-property-editor>
</ng-form>
<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>
<!-- row tools -->
<div class="umb-group-builder__property-actions" ng-if="!vm.sortable">
<div ng-if="!vm.property.inherited">
<!-- settings for property -->
<div class="umb-group-builder__property-action">
<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 type="button" aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
<umb-icon icon="icon-trash"></umb-icon>
</button>
</div>
<div ng-if="!vm.property.inherited">
<!-- settings for property -->
<div class="umb-group-builder__property-action">
<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 type="button" aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
<umb-icon icon="icon-trash"></umb-icon>
</button>
</div>
</div>
</div>
</div>

6
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -22,7 +22,7 @@
tab="tab"
is-open="tab.alias === openTabAlias"
on-click="changeTab(tab)"
on-click-composition="openDocumentType(documentTypeId)"
on-click-composition="openContentType(contentTypeId)"
sorting="sortingMode"
allow-remove="canRemoveTab(tab) && !sortingMode"
on-remove="removeTab(tab, tabIndex)"
@@ -105,6 +105,7 @@
sortable="sortingMode"
on-edit="editPropertyTypeSettings(property)"
on-remove="deleteProperty(tab.properties, property)"
on-click-composition="openContentType(contentTypeId)"
val-server-field-alias="{{'Groups[' + tab.serverValidationIndex + '].Properties[' + propertyIndex + '].Alias'}}"
val-server-field-label="{{'Groups[' + tab.serverValidationIndex + '].Properties[' + propertyIndex + '].Label'}}"
on-change-sort-order-value="onChangePropertySortOrderValue(tab)"
@@ -143,7 +144,7 @@
allow-name="true"
group="group"
allow-remove="canRemoveGroup(group) && !sortingMode"
on-click-composition="openDocumentType(documentTypeId)"
on-click-composition="openContentType(contentTypeId)"
on-remove="removeGroup(group)"
on-update-name="onChangeGroupName(group)"
sorting="sortingMode"
@@ -159,6 +160,7 @@
sortable="sortingMode"
on-edit="editPropertyTypeSettings(property)"
on-remove="deleteProperty(group.properties, property)"
on-click-composition="openContentType(contentTypeId)"
on-change-sort-order-value="onChangePropertySortOrderValue(group)"
val-server-field-alias="{{'Groups[' + group.serverValidationIndex + '].Properties[' + propertyIndex + '].Alias'}}"
val-server-field-label="{{'Groups[' + group.serverValidationIndex + '].Properties[' + propertyIndex + '].Label'}}"