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

use infinite editing in content type editors instead of overlays

Browse Source
This commit is contained in:
Mads Rasmussen
2018-05-03 10:19:14 +02:00
parent c308b081a1
commit 4eca4ac291
12 changed files with 920 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js
View File

@@ -12,6 +12,8 @@
function addEditor(editor) {
editor.animating = true;
showOverlayOnPrevEditor();
// start collapsing editors to make room for new ones
@@ -58,7 +60,7 @@
return (index + 1) * 80;
},
easing: 'easeInOutQuint',
duration: 600
duration: 500
});
*/
@@ -92,7 +94,12 @@
translateX: [100 + '%', 0],
opacity: [0, 1],
easing: 'easeInOutQuint',
duration: 600
duration: 500,
complete: function() {
$timeout(function(){
editor.animating = false;
});
}
});
});
@@ -101,6 +108,8 @@
function removeEditor(editor) {
editor.animating = true;
$timeout(function(){
var editorsElement = el[0];
@@ -111,7 +120,7 @@
translateX: [0, 100 + '%'],
opacity: [1, 0],
easing: 'easeInOutQuint',
duration: 600,
duration: 500,
complete: function(a) {
$timeout(function(){
scope.editors.splice(-1,1);
@@ -162,7 +171,7 @@
}
},
easing: 'easeInOutQuint',
duration: 600,
duration: 500,
completed: function() {
}

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

@@ -1,7 +1,7 @@
(function() {
'use strict';
function GroupsBuilderDirective(contentTypeHelper, contentTypeResource, mediaTypeResource, dataTypeHelper, dataTypeResource, $filter, iconHelper, $q, $timeout, notificationsService, localizationService) {
function GroupsBuilderDirective(contentTypeHelper, contentTypeResource, mediaTypeResource, dataTypeHelper, dataTypeResource, $filter, iconHelper, $q, $timeout, notificationsService, localizationService, editorService) {
function link(scope, el, attr, ctrl) {
@@ -491,13 +491,73 @@
if (!property.inherited) {
scope.propertySettingsDialogModel = {};
scope.propertySettingsDialogModel.title = "Property settings";
scope.propertySettingsDialogModel.property = property;
scope.propertySettingsDialogModel.contentType = scope.contentType;
scope.propertySettingsDialogModel.contentTypeName = scope.model.name;
scope.propertySettingsDialogModel.view = "views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html";
scope.propertySettingsDialogModel.show = true;
var oldPropertyModel = angular.copy(property);
var propertySettings = {
title: "Property settings",
property: property,
contentType: scope.contentType,
contentTypeName: scope.model.name,
view: "views/pickers/propertysettings/propertysettings.html",
size: "small",
submit: function(model) {
property.inherited = false;
property.dialogIsOpen = false;
// update existing data types
if(model.updateSameDataTypes) {
updateSameDataTypes(property);
}
// close the editor
editorService.close();
// push new init property to group
addInitProperty(group);
// set focus on init property
var numberOfProperties = group.properties.length;
group.properties[numberOfProperties - 1].focus = true;
// push new init tab to the scope
addInitGroup(scope.model.groups);
},
close: function() {
// reset all property changes
property.label = oldPropertyModel.label;
property.alias = oldPropertyModel.alias;
property.description = oldPropertyModel.description;
property.config = oldPropertyModel.config;
property.editor = oldPropertyModel.editor;
property.view = oldPropertyModel.view;
property.dataTypeId = oldPropertyModel.dataTypeId;
property.dataTypeIcon = oldPropertyModel.dataTypeIcon;
property.dataTypeName = oldPropertyModel.dataTypeName;
property.validation.mandatory = oldPropertyModel.validation.mandatory;
property.validation.pattern = oldPropertyModel.validation.pattern;
property.showOnMemberProfile = oldPropertyModel.showOnMemberProfile;
property.memberCanEdit = oldPropertyModel.memberCanEdit;
property.isSensitiveValue = oldPropertyModel.isSensitiveValue;
// because we set state to active, to show a preview, we have to check if has been filled out
// label is required so if it is not filled we know it is a placeholder
if(oldPropertyModel.editor === undefined || oldPropertyModel.editor === null || oldPropertyModel.editor === "") {
property.propertyState = "init";
} else {
property.propertyState = oldPropertyModel.propertyState;
}
// remove the editor
editorService.close();
}
};
// open property settings editor
editorService.open(propertySettings);
// set state to active to access the preview
property.propertyState = "active";
@@ -505,64 +565,6 @@
// set property states
property.dialogIsOpen = true;
scope.propertySettingsDialogModel.submit = function(model) {
property.inherited = false;
property.dialogIsOpen = false;
// update existing data types
if(model.updateSameDataTypes) {
updateSameDataTypes(property);
}
// remove dialog
scope.propertySettingsDialogModel.show = false;
scope.propertySettingsDialogModel = null;
// push new init property to group
addInitProperty(group);
// set focus on init property
var numberOfProperties = group.properties.length;
group.properties[numberOfProperties - 1].focus = true;
// push new init tab to the scope
addInitGroup(scope.model.groups);
};
scope.propertySettingsDialogModel.close = function(oldModel) {
// reset all property changes
property.label = oldModel.property.label;
property.alias = oldModel.property.alias;
property.description = oldModel.property.description;
property.config = oldModel.property.config;
property.editor = oldModel.property.editor;
property.view = oldModel.property.view;
property.dataTypeId = oldModel.property.dataTypeId;
property.dataTypeIcon = oldModel.property.dataTypeIcon;
property.dataTypeName = oldModel.property.dataTypeName;
property.validation.mandatory = oldModel.property.validation.mandatory;
property.validation.pattern = oldModel.property.validation.pattern;
property.showOnMemberProfile = oldModel.property.showOnMemberProfile;
property.memberCanEdit = oldModel.property.memberCanEdit;
property.isSensitiveValue = oldModel.property.isSensitiveValue;
// because we set state to active, to show a preview, we have to check if has been filled out
// label is required so if it is not filled we know it is a placeholder
if(oldModel.property.editor === undefined || oldModel.property.editor === null || oldModel.property.editor === "") {
property.propertyState = "init";
} else {
property.propertyState = oldModel.property.propertyState;
}
// remove dialog
scope.propertySettingsDialogModel.show = false;
scope.propertySettingsDialogModel = null;
};
}
};

4
src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
View File

@@ -26,6 +26,10 @@
.umb-editor--small {
width: 500px;
left: auto;
.umb-editor-container {
max-width: 500px;
}
}
.umb-editor__overlay {

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

@@ -13,6 +13,7 @@
border-radius: 0 10px 10px 10px;
padding: 10px 10px 5px 10px;
box-sizing: border-box;
background-color: @white;
}
.umb-group-builder__group.-active {
@@ -536,4 +537,4 @@ input.umb-group-builder__group-title-input {
label.checkbox.no-indent {
width: 100%;
}
}
}

4
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor.html
View File

@@ -1,5 +1,5 @@
<div class="umb-editor" ng-style="model.style" ng-class="{'umb-editor--small': model.size === 'small'}">
<div ng-if="!model.view" ng-transclude></div>
<div ng-if="model.view" ng-include="model.view"></div>
<div ng-if="!model.view && !model.animating" ng-transclude></div>
<div ng-if="model.view && !model.animating" ng-include="model.view"></div>
<div ng-if="model.showOverlay" class="umb-editor__overlay"></div>
</div>

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

@@ -300,12 +300,4 @@
view="compositionsDialogModel.view">
</umb-overlay>
<umb-overlay
data-element="overlay-property-settings"
ng-if="propertySettingsDialogModel.show"
model="propertySettingsDialogModel"
position="right"
view="propertySettingsDialogModel.view">
</umb-overlay>
</div>

214
src/Umbraco.Web.UI.Client/src/views/pickers/datatypepicker/datatypepicker.controller.js Normal file
View File

@@ -0,0 +1,214 @@
/**
* @ngdoc controller
* @name Umbraco.Editors.DataTypePickerController
* @function
*
* @description
* The controller for the content type editor data type picker dialog
*/
(function() {
"use strict";
function DataTypePicker($scope, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) {
var vm = this;
if (!$scope.model.title) {
$scope.model.title = localizationService.localize("defaultdialogs_selectEditor");
}
vm.searchTerm = "";
vm.showTabs = false;
vm.tabsLoaded = 0;
vm.typesAndEditors = [];
vm.userConfigured = [];
vm.loading = false;
vm.tabs = [{
active: true,
id: 1,
label: localizationService.localize("contentTypeEditor_availableEditors"),
alias: "Default",
typesAndEditors: []
}, {
active: false,
id: 2,
label: localizationService.localize("contentTypeEditor_reuse"),
alias: "Reuse",
userConfigured: []
}];
vm.filterItems = filterItems;
vm.showDetailsOverlay = showDetailsOverlay;
vm.hideDetailsOverlay = hideDetailsOverlay;
vm.pickEditor = pickEditor;
vm.pickDataType = pickDataType;
vm.close = close;
function activate() {
getGroupedDataTypes();
getGroupedPropertyEditors();
}
function getGroupedPropertyEditors() {
vm.loading = true;
dataTypeResource.getGroupedPropertyEditors().then(function(data) {
vm.tabs[0].typesAndEditors = data;
vm.typesAndEditors = data;
vm.tabsLoaded = vm.tabsLoaded + 1;
checkIfTabContentIsLoaded();
});
}
function getGroupedDataTypes() {
vm.loading = true;
dataTypeResource.getGroupedDataTypes().then(function(data) {
vm.tabs[1].userConfigured = data;
vm.userConfigured = data;
vm.tabsLoaded = vm.tabsLoaded + 1;
checkIfTabContentIsLoaded();
});
}
function checkIfTabContentIsLoaded() {
if (vm.tabsLoaded === 2) {
vm.loading = false;
vm.showTabs = true;
}
}
function filterItems() {
// clear item details
$scope.model.itemDetails = null;
if (vm.searchTerm) {
vm.showFilterResult = true;
vm.showTabs = false;
} else {
vm.showFilterResult = false;
vm.showTabs = true;
}
}
function showDetailsOverlay(property) {
var propertyDetails = {};
propertyDetails.icon = property.icon;
propertyDetails.title = property.name;
$scope.model.itemDetails = propertyDetails;
}
function hideDetailsOverlay() {
$scope.model.itemDetails = null;
}
function pickEditor(editor) {
var parentId = -1;
dataTypeResource.getScaffold(parentId).then(function(dataType) {
// set alias
dataType.selectedEditor = editor.alias;
// set name
var nameArray = [];
if ($scope.model.contentTypeName) {
nameArray.push($scope.model.contentTypeName);
}
if ($scope.model.property.label) {
nameArray.push($scope.model.property.label);
}
if (editor.name) {
nameArray.push(editor.name);
}
// make name
dataType.name = nameArray.join(" - ");
// get pre values
dataTypeResource.getPreValues(dataType.selectedEditor).then(function(preValues) {
dataType.preValues = preValues;
openDataTypeEditor(dataType, true);
});
});
}
function pickDataType(selectedDataType) {
dataTypeResource.getById(selectedDataType.id).then(function(dataType) {
contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) {
submit(dataType, propertyType, false);
});
});
}
function openDataTypeEditor(dataType, isNew) {
var dataTypeSettings = {
title: localizationService.localize("contentTypeEditor_editorSettings"),
dataType: dataType,
create: isNew,
view: "views/pickers/datatypesettings/datatypesettings.html",
submit: function(model) {
var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
dataTypeResource.save(model.dataType, preValues, isNew).then(function(newDataType) {
contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function(propertyType) {
submit(newDataType, propertyType, true);
editorService.close();
});
});
},
close: function() {
editorService.close();
}
};
editorService.open(dataTypeSettings);
}
function submit(dataType, propertyType, isNew) {
// update property
$scope.model.property.config = propertyType.config;
$scope.model.property.editor = propertyType.editor;
$scope.model.property.view = propertyType.view;
$scope.model.property.dataTypeId = dataType.id;
$scope.model.property.dataTypeIcon = dataType.icon;
$scope.model.property.dataTypeName = dataType.name;
$scope.model.updateSameDataTypes = isNew;
$scope.model.submit($scope.model);
}
function close() {
if($scope.model.close) {
$scope.model.close();
}
}
activate();
}
angular.module("umbraco").controller("Umbraco.Editors.DataTypePickerController", DataTypePicker);
})();

138
src/Umbraco.Web.UI.Client/src/views/pickers/datatypepicker/datatypepicker.html Normal file
View File

@@ -0,0 +1,138 @@
<umb-editor-view ng-controller="Umbraco.Editors.DataTypePickerController as vm">
<form novalidate name="DataTypePickerForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<!-- FILTER -->
<div class="umb-control-group -no-border">
<div class="form-search">
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-change="vm.filterItems()"
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
</div>
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<!-- TABS -->
<div ng-if="vm.showTabs">
<umb-tabs-nav model="vm.tabs"></umb-tabs-nav>
<umb-tabs-content>
<umb-tab id="tab{{tab.id}}" ng-repeat="tab in vm.tabs" rel="{{tab.id}}">
<div ng-if="tab.alias==='Default'">
<div ng-repeat="(key,value) in tab.typesAndEditors">
<h5>{{key}}</h5>
<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="systemDataType in value | orderBy:'name'"
data-element="editor-{{systemDataType.name}}"
ng-mouseover="vm.showDetailsOverlay(systemDataType)"
ng-click="vm.pickEditor(systemDataType)"
class="-four-in-row">
<a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
{{ systemDataType.name }}
</a>
</li>
</ul>
</div>
</div>
<div ng-if="tab.alias==='Reuse'">
<div ng-repeat="(key,value) in tab.userConfigured">
<h5>{{key}}</h5>
<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="dataType in value | orderBy:'name'"
data-element="editor-{{dataType.name}}"
ng-mouseover="vm.showDetailsOverlay(dataType)"
ng-click="vm.pickDataType(dataType)"
class="-four-in-row">
<a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
{{ dataType.name }}
</a>
</li>
</ul>
</div>
</div>
</umb-tab>
</umb-tabs-content>
</div>
<!-- FILTER RESULTS -->
<div ng-if="vm.showFilterResult">
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
<div ng-repeat="(key,value) in vm.userConfigured">
<div ng-if="(value | filter:vm.searchTerm).length > 0">
<h5>{{key}}</h5>
<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="dataType in value | orderBy:'name' | filter: vm.searchTerm"
ng-mouseover="vm.showDetailsOverlay(dataType)"
ng-click="vm.pickDataType(dataType)"
class="-four-in-row">
<a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
<i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
{{ dataType.name }}
</a>
</li>
</ul>
</div>
</div>
<h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
<div ng-repeat="(key,value) in vm.typesAndEditors">
<div ng-if="(value | filter:vm.searchTerm).length > 0">
<h5>{{key}}</h5>
<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
<li ng-repeat="systemDataType in value | orderBy:'name' | filter: vm.searchTerm"
ng-mouseover="vm.showDetailsOverlay(systemDataType)"
ng-click="vm.pickEditor(systemDataType)"
class="-four-in-row">
<a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
<i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
{{ systemDataType.name }}
</a>
</li>
</ul>
</div>
</div>
</div>
<umb-overlay
ng-if="vm.editorSettingsOverlay.show"
data-element="overlay-editor-settings"
model="vm.editorSettingsOverlay"
position="right"
view="vm.editorSettingsOverlay.view">
</umb-overlay>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
action="vm.close()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>

36
src/Umbraco.Web.UI.Client/src/views/pickers/datatypesettings/datatypesettings.controller.js Normal file
View File

@@ -0,0 +1,36 @@
/**
* @ngdoc controller
* @name Umbraco.Editors.DataTypeSettingsController
* @function
*
* @description
* The controller for the content type editor data type settings dialog
*/
(function () {
"use strict";
function DataTypeSettingsController($scope) {
var vm = this;
vm.close = close;
vm.submit = submit;
function close() {
if ($scope.model && $scope.model.close) {
$scope.model.close();
}
}
function submit() {
if ($scope.model && $scope.model.submit) {
$scope.model.submit($scope.model);
}
}
}
angular.module("umbraco").controller("Umbraco.Editors.DataTypeSettingsController", DataTypeSettingsController);
})();

62
src/Umbraco.Web.UI.Client/src/views/pickers/datatypesettings/datatypesettings.html Normal file
View File

@@ -0,0 +1,62 @@
<umb-editor-view ng-controller="Umbraco.Editors.DataTypeSettingsController as vm">
<form novalidate name="dataTypeSettingsForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<div class="umb-control-group" ng-if="model.dataType.id !== 0">
<i class="icon-alert red"></i>
<strong class="red"><localize key="contentTypeEditor_allDocumentTypes"></localize></strong> using this editor will get updated with the new settings.
</div>
<div class="control-group umb-control-group">
<div class="umb-el-wrap">
<label class="control-label" for="dataTypeName">
<localize key="name"></localize>
</label>
<div class="controls">
<input type="text" ng-model="model.dataType.name" class="umb-property-editor" umb-auto-focus focus-on-filled="true" required />
</div>
</div>
</div>
<h5><localize key="contentTypeEditor_configuration"></localize></h5>
<umb-property property="preValue" ng-repeat="preValue in model.dataType.preValues">
<umb-property-editor model="preValue" is-pre-value="true"></umb-property-editor>
</umb-property>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
action="vm.close()">
</umb-button>
<umb-button
type="button"
button-style="success"
label-key="general_submit"
action="vm.submit(model)">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>

215
src/Umbraco.Web.UI.Client/src/views/pickers/propertysettings/propertysettings.controller.js Normal file
View File

@@ -0,0 +1,215 @@
/**
* @ngdoc controller
* @name Umbraco.Editors.PropertySettingsController
* @function
*
* @description
* The controller for the content type editor property settings dialog
*/
(function () {
"use strict";
function PropertySettingsEditor($scope, contentTypeResource, dataTypeResource, dataTypeHelper, localizationService, userService, editorService) {
var vm = this;
vm.showValidationPattern = false;
vm.focusOnPatternField = false;
vm.focusOnMandatoryField = false;
vm.selectedValidationType = {};
vm.validationTypes = [
{
"name": localizationService.localize("validation_validateAsEmail"),
"key": "email",
"pattern": "[a-zA-Z0-9_\.\+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-\.]+",
"enableEditing": true
},
{
"name": localizationService.localize("validation_validateAsNumber"),
"key": "number",
"pattern": "^[0-9]*$",
"enableEditing": true
},
{
"name": localizationService.localize("validation_validateAsUrl"),
"key": "url",
"pattern": "https?\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,}",
"enableEditing": true
},
{
"name": localizationService.localize("validation_enterCustomValidation"),
"key": "custom",
"pattern": "",
"enableEditing": true
}
];
vm.changeValidationType = changeValidationType;
vm.changeValidationPattern = changeValidationPattern;
vm.openDataTypePicker = openDataTypePicker;
vm.openDataTypeSettings = openDataTypeSettings;
vm.submit = submit;
vm.close = close;
userService.getCurrentUser().then(function(user) {
vm.showSensitiveData = user.userGroups.indexOf("sensitiveData") != -1;
});
function activate() {
matchValidationType();
}
function changeValidationPattern() {
matchValidationType();
}
function openDataTypePicker(property) {
vm.focusOnMandatoryField = false;
var dataTypePicker = {
property: $scope.model.property,
contentTypeName: $scope.model.contentTypeName,
view: "views/pickers/datatypepicker/datatypepicker.html",
size: "small",
submit: function(model) {
$scope.model.updateSameDataTypes = model.updateSameDataTypes;
vm.focusOnMandatoryField = true;
// update property
property.config = model.property.config;
property.editor = model.property.editor;
property.view = model.property.view;
property.dataTypeId = model.property.dataTypeId;
property.dataTypeIcon = model.property.dataTypeIcon;
property.dataTypeName = model.property.dataTypeName;
editorService.close();
},
close: function(model) {
editorService.close();
}
};
editorService.open(dataTypePicker);
}
function openDataTypeSettings(property) {
vm.focusOnMandatoryField = false;
// get data type
dataTypeResource.getById(property.dataTypeId).then(function (dataType) {
var dataTypeSettings = {
title: "Data type settings",
view: "views/pickers/datatypesettings/datatypesettings.html",
dataType: dataType,
submit: function(model) {
var preValues = dataTypeHelper.createPreValueProps(model.dataType.preValues);
dataTypeResource.save(model.dataType, preValues, false).then(function (newDataType) {
contentTypeResource.getPropertyTypeScaffold(newDataType.id).then(function (propertyType) {
// update editor
property.config = propertyType.config;
property.editor = propertyType.editor;
property.view = propertyType.view;
property.dataTypeId = newDataType.id;
property.dataTypeIcon = newDataType.icon;
property.dataTypeName = newDataType.name;
// set flag to update same data types
$scope.model.updateSameDataTypes = true;
vm.focusOnMandatoryField = true;
editorService.close();
});
});
},
close: function() {
editorService.close();
}
};
editorService.open(dataTypeSettings);
});
}
function submit() {
if($scope.model.submit) {
$scope.model.submit($scope.model);
}
}
function close() {
if($scope.model.close) {
$scope.model.close();
}
}
function matchValidationType() {
if ($scope.model.property.validation.pattern !== null && $scope.model.property.validation.pattern !== "" && $scope.model.property.validation.pattern !== undefined) {
var match = false;
// find and show if a match from the list has been chosen
angular.forEach(vm.validationTypes, function (validationType, index) {
if ($scope.model.property.validation.pattern === validationType.pattern) {
vm.selectedValidationType = vm.validationTypes[index];
vm.showValidationPattern = true;
match = true;
}
});
// if there is no match - choose the custom validation option.
if (!match) {
angular.forEach(vm.validationTypes, function (validationType) {
if (validationType.key === "custom") {
vm.selectedValidationType = validationType;
vm.showValidationPattern = true;
}
});
}
}
}
function changeValidationType(selectedValidationType) {
if (selectedValidationType) {
$scope.model.property.validation.pattern = selectedValidationType.pattern;
vm.showValidationPattern = true;
// set focus on textarea
if (selectedValidationType.key === "custom") {
vm.focusOnPatternField = true;
}
} else {
$scope.model.property.validation.pattern = "";
vm.showValidationPattern = false;
}
}
activate();
}
angular.module("umbraco").controller("Umbraco.Editors.PropertySettingsController", PropertySettingsEditor);
})();

166
src/Umbraco.Web.UI.Client/src/views/pickers/propertysettings/propertysettings.html Normal file
View File

@@ -0,0 +1,166 @@
<umb-editor-view ng-controller="Umbraco.Editors.PropertySettingsController as vm">
<form novalidate name="propertySettingsForm" val-form-manager>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<div class="content-type-editor-dialog edit-property-settings">
<div class="umb-control-group" ng-if="!model.property.locked">
<div class="control-group">
<textarea class="editor-label"
data-element="property-name"
name="propertyLabel"
ng-model="model.property.label"
localize="placeholder"
placeholder="@placeholders_entername"
umb-auto-focus
focus-on-filled="true"
umb-auto-resize
required
overlay-submit-on-enter>
</textarea>
<div class="umb-validation-label" val-msg-for="propertyLabel" val-toggle-msg="required">Required label</div>
</div>
<div class="control-group -no-margin">
<umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
</div>
</div>
<div class="umb-control-group control-group">
<textarea
data-element="property-description"
class="editor-description"
ng-model="model.property.description"
localize="placeholder"
placeholder="@placeholders_enterDescription"
overlay-submit-on-enter
umb-auto-resize>
</textarea>
</div>
<div class="editor-wrapper umb-control-group control-group" ng-model="model.property.editor" val-require-component ng-if="!model.property.locked">
<a data-element="editor-add" href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openDataTypePicker(model.property)">
<localize key="shortcuts_addEditor"></localize>
</a>
<div class="editor clearfix" ng-if="model.property.editor">
<a href="" class="editor-icon-wrapper" ng-click="vm.openDataTypePicker(model.property)">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
</a>
<div class="editor-details">
<a href="" class="editor-name" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.dataTypeName }}</a>
<a href="" class="editor-editor" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.editor }}</a>
</div>
<a href class="editor-settings-icon pull-right"
ng-click="vm.openDataTypeSettings(model.property)"
hotkey="alt+shift+d"
ng-if="model.property.editor">
<i class="icon icon-settings"></i>
</a>
</div>
</div>
<div class="umb-control-group clearfix" ng-if="!model.property.locked">
<h5><localize key="validation_validation"></localize></h5>
<label class="checkbox no-indent">
<input type="checkbox" ng-model="model.property.validation.mandatory" focus-when="{{vm.focusOnMandatoryField}}">
<localize key="validation_fieldIsMandatory"></localize>
</label>
<select class="umb-dropdown" ng-options="validationType.name for validationType in vm.validationTypes" ng-model="vm.selectedValidationType" ng-change="vm.changeValidationType(vm.selectedValidationType)">
<option value=""><localize key="validation_validation">Validation</localize></option>
</select>
<textarea
class="editor-validation-pattern"
localize="placeholder"
placeholder="@validation_validationRegExp"
ng-model="model.property.validation.pattern"
ng-change="vm.changeValidationPattern()"
ng-if="vm.showValidationPattern"
umb-auto-resize
focus-when="{{vm.focusOnPatternField}}"
overlay-submit-on-enter>
</textarea>
</div>
<div class="umb-control-group clearfix" ng-if="model.contentType === 'memberType'">
<h5><localize key="general_options"></localize></h5>
<label class="checkbox no-indent">
<input type="checkbox" ng-model="model.property.showOnMemberProfile">
<localize key="contentTypeEditor_showOnMemberProfile"></localize>
<small><localize key="contentTypeEditor_showOnMemberProfileDescription"></localize></small>
</label>
<label class="checkbox no-indent">
<input type="checkbox" ng-model="model.property.memberCanEdit">
<localize key="contentTypeEditor_memberCanEdit"></localize>
<small><localize key="contentTypeEditor_memberCanEditDescription"></localize></small>
</label>
<label ng-if="vm.showSensitiveData" class="checkbox no-indent">
<input type="checkbox" ng-model="model.property.isSensitiveData">
<localize key="contentTypeEditor_isSensitiveData"></localize>
<small><localize key="contentTypeEditor_isSensitiveDataDescription"></localize></small>
</label>
</div>
</div>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
action="vm.close()">
</umb-button>
<umb-button
type="button"
button-style="success"
label-key="general_submit"
action="vm.submit(model)">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</form>
</umb-editor-view>