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

Merge pull request #8849 from umbraco/v8/feature/property-label-on-top

Browse Source 
Feature: Property label on top
This commit is contained in:
Warren Buckley
2020-11-30 11:55:55 +00:00
committed by GitHub
parent 23a31f56e7 eeae4afe0b
commit 39d66bae47
33 changed files with 175 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -323,12 +323,12 @@
filterAvailableCompositions(selectedContentType, newSelection).then(function () {
deferred.resolve({ selectedContentType, newSelection });
// TODO: Here we could probably re-enable selection if we previously showed a throbber or something
}, function () {
}, function () {
deferred.reject();
});
}
return deferred.promise;
return deferred.promise;
}
};
@@ -353,7 +353,7 @@
}),
//get where used document types
whereUsedContentTypeResource(scope.model.id).then(function (whereUsed) {
//pass to the dialog model the content type eg documentType or mediaType
//pass to the dialog model the content type eg documentType or mediaType
scope.compositionsDialogModel.section = scope.contentType;
//pass the list of 'where used' document types
scope.compositionsDialogModel.whereCompositionUsed = whereUsed;
@@ -566,6 +566,7 @@
property.isSensitiveValue = propertyModel.isSensitiveValue;
property.allowCultureVariant = propertyModel.allowCultureVariant;
property.allowSegmentVariant = propertyModel.allowSegmentVariant;
property.labelOnTop = propertyModel.labelOnTop;
// update existing data types
if (model.updateSameDataTypes) {
@@ -647,7 +648,8 @@
mandatoryMessage: null,
pattern: null,
patternMessage: null
}
},
labelOnTop: false
};
// check if there already is an init property

6
src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js
View File

@@ -83,7 +83,7 @@
});
var saveProperties = _.map(realProperties, function (p) {
var saveProperty = _.pick(p, 'id', 'alias', 'description', 'validation', 'label', 'sortOrder', 'dataTypeId', 'groupId', 'memberCanEdit', 'showOnMemberProfile', 'isSensitiveData', 'allowCultureVariant', 'allowSegmentVariant');
var saveProperty = _.pick(p, 'id', 'alias', 'description', 'validation', 'label', 'sortOrder', 'dataTypeId', 'groupId', 'memberCanEdit', 'showOnMemberProfile', 'isSensitiveData', 'allowCultureVariant', 'allowSegmentVariant', 'labelOnTop');
return saveProperty;
});
@@ -404,7 +404,7 @@
if (displayModel.variants && displayModel.variants.length > 1) {
// Collect all invariant properties from the variants that are either the
// default language variant or the default segment variant.
var defaultVariants = _.filter(displayModel.variants, function (variant) {
var defaultVariants = _.filter(displayModel.variants, function (variant) {
var isDefaultLanguage = variant.language && variant.language.isDefault;
var isDefaultSegment = variant.segment == null;
@@ -433,7 +433,7 @@
return variant !== defaultVariant;
});
// now assign this same invariant property instance to the same index of the other variants property array
// now assign this same invariant property instance to the same index of the other variants property array
_.each(otherVariants, function (variant) {
_.each(invariantProps, function (invProp) {
var tab = variant.tabs[invProp.tabIndex];

23
src/Umbraco.Web.UI.Client/src/less/main.less
View File

@@ -228,6 +228,7 @@ umb-property:last-of-type .umb-control-group {
padding-top: 5px;
padding-bottom: 0;
text-align: left;
margin-bottom: 5px;
.control-label {
width: auto;
@@ -237,7 +238,7 @@ umb-property:last-of-type .umb-control-group {
.control-description {
max-width:480px;// avoiding description becoming too wide when its placed on top of property.
margin-bottom: 10px;
margin-bottom: 5px;
}
}
@media (max-width: 767px) {
@@ -245,9 +246,27 @@ umb-property:last-of-type .umb-control-group {
.form-horizontal .umb-control-group .control-header {
float: none;
width: 100%;
&::after {
content: "";
display: table;
clear: both;
}
}
}
.form-horizontal .umb-control-group.--label-on-top > .umb-el-wrap {
& > .control-header {
float: none;
width: 100%;
&::after {
content: "";
display: table;
clear: both;
}
}
& > .controls {
margin-left: 0;
}
}
/* LABELS*/

36
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.controller.js
View File

@@ -35,6 +35,7 @@
vm.toggleShowOnMemberProfile = toggleShowOnMemberProfile;
vm.toggleMemberCanEdit = toggleMemberCanEdit;
vm.toggleIsSensitiveData = toggleIsSensitiveData;
vm.toggleLabelOnTop = toggleLabelOnTop;
function onInit() {
@@ -42,23 +43,24 @@
vm.showSensitiveData = user.userGroups.indexOf("sensitiveData") != -1;
});
//make the default the same as the content type
//make the default the same as the content type
if (!$scope.model.property.dataTypeId) {
$scope.model.property.allowCultureVariant = $scope.model.contentTypeAllowCultureVariant;
}
loadValidationTypes();
}
function loadValidationTypes() {
var labels = [
"validation_validateAsEmail",
"validation_validateAsNumber",
"validation_validateAsUrl",
"validation_validateAsEmail",
"validation_validateAsNumber",
"validation_validateAsUrl",
"validation_enterCustomValidation",
"validation_fieldIsMandatory"
"validation_fieldIsMandatory",
"contentTypeEditor_displaySettingsLabelOnTop"
];
localizationService.localizeMany(labels)
@@ -69,6 +71,7 @@
vm.labels.validateAsUrl = data[2];
vm.labels.customValidation = data[3];
vm.labels.fieldIsMandatory = data[4];
vm.labels.displaySettingsLabelOnTop = data[5];
vm.validationTypes = [
{
@@ -121,7 +124,7 @@
$scope.model.updateSameDataTypes = model.updateSameDataTypes;
vm.focusOnMandatoryField = true;
// update property
property.config = model.property.config;
property.editor = model.property.editor;
@@ -179,7 +182,7 @@
if(event && event.keyCode === 13) {
submit();
}
}
}
function submit() {
if($scope.model.submit) {
@@ -245,28 +248,31 @@
return !settingValue;
}
function toggleAllowCultureVariants() {
function toggleAllowCultureVariants() {
$scope.model.property.allowCultureVariant = toggleValue($scope.model.property.allowCultureVariant);
}
function toggleAllowSegmentVariants() {
function toggleAllowSegmentVariants() {
$scope.model.property.allowSegmentVariant = toggleValue($scope.model.property.allowSegmentVariant);
}
function toggleValidation() {
$scope.model.property.validation.mandatory = toggleValue($scope.model.property.validation.mandatory);
$scope.model.property.validation.mandatory = toggleValue($scope.model.property.validation.mandatory);
}
function toggleShowOnMemberProfile() {
$scope.model.property.showOnMemberProfile = toggleValue($scope.model.property.showOnMemberProfile);
$scope.model.property.showOnMemberProfile = toggleValue($scope.model.property.showOnMemberProfile);
}
function toggleMemberCanEdit() {
$scope.model.property.memberCanEdit = toggleValue($scope.model.property.memberCanEdit);
$scope.model.property.memberCanEdit = toggleValue($scope.model.property.memberCanEdit);
}
function toggleIsSensitiveData() {
$scope.model.property.isSensitiveData = toggleValue($scope.model.property.isSensitiveData);
$scope.model.property.isSensitiveData = toggleValue($scope.model.property.isSensitiveData);
}
function toggleLabelOnTop() {
$scope.model.property.labelOnTop = toggleValue($scope.model.property.labelOnTop);
}
onInit();

15
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/propertysettings/propertysettings.html
View File

@@ -135,6 +135,21 @@
ng-if="vm.showValidationPattern"
ng-keypress="vm.submitOnEnter($event)" />
</div>
<div class="umb-control-group clearfix" ng-if="!model.property.locked">
<h5><localize key="contentTypeEditor_displaySettingsHeadline"></localize></h5>
<umb-toggle data-element="displaySettings_labelOnTop"
checked="model.property.labelOnTop"
on-click="vm.toggleLabelOnTop()"
label-on="{{vm.labels.displaySettingsLabelOnTop}}"
label-off="{{vm.labels.displaySettingsLabelOnTop}}"
show-labels="true"
label-position="right"
class="mb1">
</umb-toggle>
</div>
<div class="umb-control-group clearfix -no-border" ng-if="model.contentType === 'documentType' && model.contentTypeAllowCultureVariant">

2
src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
View File

@@ -1,7 +1,7 @@
<div class="umb-property">
<ng-form name="propertyForm">
<div class="control-group umb-control-group"
ng-class="{hidelabel:vm.property.hideLabel, 'umb-control-group__listview': vm.property.alias === '_umb_containerView'}">
ng-class="{'hidelabel':vm.property.hideLabel, '--label-on-top':vm.property.labelOnTop, 'umb-control-group__listview': vm.property.alias === '_umb_containerView'}">
<val-property-msg></val-property-msg>