diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js index 1ddb089632..64b80412f5 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js @@ -4,22 +4,20 @@ angular.module("umbraco.directives") restrict: 'E', replace: true, templateUrl: 'views/components/editor/umb-editor-sub-views.html', + scope: { + subViews: "=", + model: "=" + }, link: function (scope, element, attrs, ctrl) { - scope.tools = []; scope.activeView = {}; // set toolbar from selected navigation item - function setToolBar(items) { - - scope.tools = []; + function setActiveView(items) { for (var index = 0; index < items.length; index++) { - var item = items[index]; - if(item.active && item.tools) { - scope.tools = item.tools; - } + var item = items[index]; if(item.active && item.view) { scope.activeView = item; @@ -28,10 +26,9 @@ angular.module("umbraco.directives") } // watch for navigation changes - scope.$watch('page.navigation', function(newValue, oldValue) { + scope.$watch('subViews', function(newValue, oldValue) { if (newValue) { - - setToolBar(newValue); + setActiveView(newValue); } },true); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortoolbar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortoolbar.directive.js new file mode 100644 index 0000000000..0e6e390fbc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortoolbar.directive.js @@ -0,0 +1,11 @@ +angular.module("umbraco.directives") + .directive('umbEditorToolbar', function () { + return { + restrict: 'E', + replace: true, + templateUrl: 'views/components/editor/umb-editor-toolbar.html', + scope: { + tools: "=" + } + }; + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 36152e0b6c..4c2ed6a436 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -92,6 +92,7 @@ @import "components/umb-sub-views.less"; @import "components/umb-editor-navigation.less"; @import "components/umb-editor-sub-views.less"; +@import "components/umb-editor-toolbar.less"; @import "components/umb-file-dropzone.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less index a85300c957..ac034cf33b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-sub-views.less @@ -20,18 +20,4 @@ .sub-view-column-section { margin-bottom: 20px; -} - -/* ---------- TOOLS ---------- */ - -.umb-editor-sub-views-tools { - display: flex; - justify-content: flex-end; - margin-bottom: 20px; - height: 25px; -} - -.umb-editor-sub-views-tool { - margin-left: 20px; - cursor: pointer; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-toolbar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-toolbar.less new file mode 100644 index 0000000000..f2b6995f49 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-toolbar.less @@ -0,0 +1,11 @@ +.umb-editor-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 20px; + height: 25px; +} + +.umb-editor-toolbar-tool { + margin-left: 20px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html index a25918474b..fefe12e233 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html @@ -1,13 +1,5 @@
- -
-
- {{ tool.name }} -
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-toolbar.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-toolbar.html new file mode 100644 index 0000000000..e66cb510d2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-toolbar.html @@ -0,0 +1,5 @@ +
+
+ {{ tool.name }} +
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js index 2dd88f312b..3080acac45 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js @@ -6,169 +6,163 @@ * @description * The controller for the content type editor */ -function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, contentTypeResource, entityResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper, dataTypeHelper) { +(function() { + 'use strict'; - $scope.page = {actions: [], menu: [], subViews: [] }; - $scope.currentNode = null; //the editors affiliated node + function DocumentTypeEditController($routeParams, contentTypeResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper) { - $scope.page.navigation = [ - { - "name": "Design", - "icon": "document-dashed-line", - "view": "views/documentType/views/design/design.html", - "active": true, - "tools": [ + var vm = this; + + vm.save = save; + + vm.currentNode = null; + vm.contentType = {}; + vm.page = {}; + vm.page.navigation = [ { - "name": "Compositions", - "icon": "merge", - "action": function() { - $scope.page.openCompositionsDialog(); - } + "name": "Design", + "icon": "document-dashed-line", + "view": "views/documentType/views/design/design.html", + "active": true }, { - "name": "Reorder", - "icon": "navigation", - "action": function() { - $scope.page.toggleSortingMode(); - } + "name": "List view", + "icon": "list", + "view": "views/documentType/views/listview/listview.html" + }, + { + "name": "Permissions", + "icon": "keychain", + "view": "views/documentType/views/permissions/permissions.html" + }, + { + "name": "Templates", + "icon": "layout", + "view": "views/documentType/views/templates/templates.html" } - ] - }, - { - "name": "List view", - "icon": "list", - "view": "views/documentType/views/listview/listview.html" - }, - { - "name": "Permissions", - "icon": "keychain", - "view": "views/documentType/views/permissions/permissions.html" - }, - { - "name": "Templates", - "icon": "layout", - "view": "views/documentType/views/templates/templates.html" - } - ]; - - if ($routeParams.create) { - //we are creating so get an empty data type item - contentTypeResource.getScaffold($routeParams.id) - .then(function(dt) { - init(dt); - }); - } - else { - contentTypeResource.getById($routeParams.id).then(function(dt){ - init(dt); - - syncTreeNode($scope.contentType, dt.path, true); - }); - } - - - /* ---------- SAVE ---------- */ - - $scope.save = function() { - - //perform any pre-save logic here - - contentTypeResource.save($scope.contentType).then(function(dt){ - - formHelper.resetForm({ scope: $scope, notifications: dt.notifications }); - contentEditingHelper.handleSuccessfulSave({ - scope: $scope, - savedContent: dt, - rebindCallback: function() { - - } - }); - - //post save logic here -the saved doctype returns as a new object - init(dt); - - syncTreeNode($scope.contentType, dt.path); - }); - }; + ]; - function init(contentType){ - - $scope.contentType = contentType; - - // set all tab to inactive - if( $scope.contentType.groups.length !== 0 ) { - angular.forEach($scope.contentType.groups, function(group){ - // set state - group.tabState = "inActive"; - - // push init/placeholder property - contentTypeHelper.addInitProperty(group); - - angular.forEach(group.properties, function(property){ - - // get data type detaisl for each property - getDataTypeDetails(property); - + if ($routeParams.create) { + //we are creating so get an empty data type item + contentTypeResource.getScaffold($routeParams.id) + .then(function(dt) { + init(dt); }); + } + else { + contentTypeResource.getById($routeParams.id).then(function(dt){ + init(dt); - + syncTreeNode(vm.contentType, dt.path, true); }); } - // convert legacy icons - convertLegacyIcons(); - //set a shared state - editorState.set($scope.contentType); + /* ---------- SAVE ---------- */ - // add init tab - contentTypeHelper.addInitTab($scope.contentType); + function save() { - } + //perform any pre-save logic here - function convertLegacyIcons() { + contentTypeResource.save(vm.contentType).then(function(dt){ - // convert icons for composite content types - iconHelper.formatContentTypeIcons($scope.contentType.availableCompositeContentTypes); + formHelper.resetForm({ scope: vm, notifications: dt.notifications }); + contentEditingHelper.handleSuccessfulSave({ + scope: vm, + savedContent: dt, + rebindCallback: function() { - // make array to store contentType icon - var contentTypeArray = []; - - // push icon to array - contentTypeArray.push({"icon":$scope.contentType.icon}); - - // run through icon method - iconHelper.formatContentTypeIcons(contentTypeArray); - - // set icon back on contentType - $scope.contentType.icon = contentTypeArray[0].icon; - - } - - function getDataTypeDetails(property) { - - if( property.propertyState !== 'init' ) { - - dataTypeResource.getById(property.dataTypeId) - .then(function(dataType) { - property.dataTypeIcon = dataType.icon; - property.dataTypeName = dataType.name; + } }); + + //post save logic here -the saved doctype returns as a new object + init(dt); + + syncTreeNode(vm.contentType, dt.path); + }); + } + + + function init(contentType){ + + vm.contentType = contentType; + + // set all tab to inactive + if( vm.contentType.groups.length !== 0 ) { + angular.forEach(vm.contentType.groups, function(group){ + // set state + group.tabState = "inActive"; + + // push init/placeholder property + contentTypeHelper.addInitProperty(group); + + angular.forEach(group.properties, function(property){ + + // get data type detaisl for each property + getDataTypeDetails(property); + + }); + + + }); + } + + // convert legacy icons + convertLegacyIcons(); + + //set a shared state + editorState.set(vm.contentType); + + // add init tab + contentTypeHelper.addInitTab(vm.contentType); + + } + + function convertLegacyIcons() { + + // convert icons for composite content types + iconHelper.formatContentTypeIcons(vm.contentType.availableCompositeContentTypes); + + // make array to store contentType icon + var contentTypeArray = []; + + // push icon to array + contentTypeArray.push({"icon":vm.contentType.icon}); + + // run through icon method + iconHelper.formatContentTypeIcons(contentTypeArray); + + // set icon back on contentType + vm.contentType.icon = contentTypeArray[0].icon; + + } + + function getDataTypeDetails(property) { + + if( property.propertyState !== 'init' ) { + + dataTypeResource.getById(property.dataTypeId) + .then(function(dataType) { + property.dataTypeIcon = dataType.icon; + property.dataTypeName = dataType.name; + }); + } } - } - /** Syncs the content type to it's tree node - this occurs on first load and after saving */ - function syncTreeNode(dt, path, initialLoad) { + /** Syncs the content type to it's tree node - this occurs on first load and after saving */ + function syncTreeNode(dt, path, initialLoad) { - navigationService.syncTree({ tree: "documenttype", path: path.split(","), forceReload: initialLoad !== true }).then(function (syncArgs) { - $scope.currentNode = syncArgs.node; - }); + navigationService.syncTree({ tree: "documenttype", path: path.split(","), forceReload: initialLoad !== true }).then(function (syncArgs) { + vm.currentNode = syncArgs.node; + }); + + } } -} + angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditController", DocumentTypeEditController); -angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditController", DocumentTypeEditController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html index 5c7b2dc3df..38b7e5a3e1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html @@ -1,23 +1,24 @@ -
+
+ name="vm.contentType.name" + alias="vm.contentType.alias" + description="vm.contentType.description" + navigation="vm.page.navigation" + icon="vm.contentType.icon">
- + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js index 0a199e653f..4ac2cc1717 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js @@ -6,277 +6,303 @@ * @description * The controller for the content type editor list view section */ -function DesignController($scope, contentTypeResource, dataTypeResource, contentTypeHelper, dataTypeHelper) { +(function() { + 'use strict'; - $scope.sortingMode = false; + function DesignController($scope, contentTypeResource, dataTypeResource, contentTypeHelper, dataTypeHelper) { - /* ---------- TOOLBAR ---------- */ + var vm = this; - $scope.page.toggleSortingMode = function() { - $scope.sortingMode = !$scope.sortingMode; - }; + vm.addTab = addTab; + vm.removeTab = removeTab; + vm.activateTab = activateTab; + vm.updateTabTitle = updateTabTitle; + vm.toggleGroupSize = toggleGroupSize; + vm.editPropertyTypeSettings = editPropertyTypeSettings; + vm.choosePropertyType = choosePropertyType; + vm.configDataType = configDataType; + vm.deleteProperty = deleteProperty; - $scope.page.openCompositionsDialog = function() { - $scope.dialogModel = {}; - $scope.dialogModel.title = "Compositions"; - $scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes; - $scope.dialogModel.compositeContentTypes = $scope.contentType.compositeContentTypes; - $scope.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html"; - $scope.showDialog = true; - - $scope.dialogModel.close = function(){ - $scope.showDialog = false; - $scope.dialogModel = null; - }; - - $scope.dialogModel.selectCompositeContentType = function(compositeContentType) { - - if( $scope.contentType.compositeContentTypes.indexOf(compositeContentType.alias) === -1 ) { - - //merge composition with content type - contentTypeHelper.mergeCompositeContentType($scope.contentType, compositeContentType); - - } else { - - // split composition from content type - contentTypeHelper.splitCompositeContentType($scope.contentType, compositeContentType); - - } - - } - - }; - - /* ---------- TABS ---------- */ - - $scope.addTab = function(tab){ - - $scope.activateTab(tab); - - // push new init tab to the scope - contentTypeHelper.addInitTab($scope.contentType); - - }; - - $scope.removeTab = function(tabIndex) { - $scope.contentType.groups.splice(tabIndex, 1); - }; - - $scope.activateTab = function(tab) { - - // set all other tabs that are inactive to active - angular.forEach($scope.contentType.groups, function(group){ - // skip init tab - if(group.tabState !== "init") { - group.tabState = "inActive"; - } - }); - - tab.tabState = "active"; - - }; - - $scope.updateTabTitle = function(tab) { - if(tab.properties.length === 0) { - contentTypeHelper.addInitProperty(tab); - } - }; - - /* ---------- PROPERTIES ---------- */ - - $scope.toggleGroupSize = function(group){ - if(group.columns !== 12){ - group.columns = 12; - }else{ - group.columns = 6; - } - }; - - $scope.editPropertyTypeSettings = function(property) { - - if(!property.inherited) { - - $scope.dialogModel = {}; - $scope.dialogModel.title = "Edit property type settings"; - $scope.dialogModel.property = property; - $scope.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html"; - $scope.showDialog = true; - - // set indicator on property to tell the dialog is open - is used to set focus on the element - property.dialogIsOpen = true; - - // set property to active - property.propertyState = "active"; - - $scope.dialogModel.changePropertyEditor = function(property) { - $scope.choosePropertyType(property); - }; - - $scope.dialogModel.editDataType = function(property) { - $scope.configDataType(property); - }; - - $scope.dialogModel.submit = function(model){ - - property.dialogIsOpen = false; - - $scope.showDialog = false; - $scope.dialogModel = null; - - // push new init property to scope - contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType); - - }; - - $scope.dialogModel.close = function(model){ - $scope.showDialog = false; - $scope.dialogModel = null; - - // push new init property to scope - contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType); - }; - - } - }; - - $scope.choosePropertyType = function(property) { - - $scope.dialogModel = {}; - $scope.dialogModel.title = "Choose property type"; - $scope.dialogModel.view = "views/documentType/dialogs/property.html"; - $scope.showDialog = true; - - property.dialogIsOpen = true; - - $scope.dialogModel.selectDataType = function(selectedDataType) { - - contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType){ - - property.config = propertyType.config; - property.editor = propertyType.editor; - property.view = propertyType.view; - property.dataTypeId = selectedDataType.id; - property.dataTypeIcon = selectedDataType.icon; - property.dataTypeName = selectedDataType.name; - - property.propertyState = "active"; - - console.log(property); - - // open data type configuration - $scope.editPropertyTypeSettings(property); - - // push new init tab to scope - contentTypeHelper.addInitTab($scope.contentType); - - }); - - }; - - $scope.dialogModel.close = function(model){ - $scope.editPropertyTypeSettings(property); - }; - - }; - - $scope.configDataType = function(property) { - - $scope.dialogModel = {}; - $scope.dialogModel.title = "Edit data type"; - $scope.dialogModel.dataType = {}; - $scope.dialogModel.property = property; - $scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html"; - $scope.dialogModel.multiActions = [ + vm.sortingMode = false; + vm.toolbar = [ { - label: "Save", - action: function(dataType) { - saveDataType(dataType, false); + "name": "Compositions", + "icon": "merge", + "action": function() { + openCompositionsDialog(); } }, { - label: "Save as new", - action: function(dataType) { - saveDataType(dataType, true); + "name": "Reorder", + "icon": "navigation", + "action": function() { + toggleSortingMode(); } } ]; - $scope.showDialog = true; + vm.sortableOptionsTab = { + distance: 10, + tolerance: "pointer", + opacity: 0.7, + scroll: true, + cursor: "move", + placeholder: "ui-sortable-tabs-placeholder", + zIndex: 6000, + handle: ".edt-tab-handle", + items: ".edt-tab-sortable", + start: function (e, ui) { + ui.placeholder.height(ui.item.height()); + }, + stop: function(e, ui){ - function saveDataType(dataType, isNew) { + } + }; + vm.sortableOptionsEditor = { + distance: 10, + tolerance: "pointer", + connectWith: ".edt-property-list", + opacity: 0.7, + scroll: true, + cursor: "move", + placeholder: "ui-sortable-properties-placeholder", + zIndex: 6000, + handle: ".edt-property-handle", + items: ".edt-property-sortable", + start: function (e, ui) { + ui.placeholder.height(ui.item.height()); + }, + stop: function(e, ui){ - var preValues = dataTypeHelper.createPreValueProps(dataType.preValues); + } + }; - dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) { + /* ---------- TOOLBAR ---------- */ - contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){ + function toggleSortingMode() { + vm.sortingMode = !vm.sortingMode; + } + + function openCompositionsDialog() { + vm.dialogModel = {}; + vm.dialogModel.title = "Compositions"; + vm.dialogModel.availableCompositeContentTypes = $scope.model.availableCompositeContentTypes; + vm.dialogModel.compositeContentTypes = $scope.model.compositeContentTypes; + vm.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html"; + vm.showDialog = true; + + vm.dialogModel.close = function(){ + vm.showDialog = false; + vm.dialogModel = null; + }; + + vm.dialogModel.selectCompositeContentType = function(compositeContentType) { + + if( $scope.model.compositeContentTypes.indexOf(compositeContentType.alias) === -1 ) { + + //merge composition with content type + contentTypeHelper.mergeCompositeContentType($scope.model, compositeContentType); + + } else { + + // split composition from content type + contentTypeHelper.splitCompositeContentType($scope.model, compositeContentType); + + } + + } + + } + + /* ---------- TABS ---------- */ + + function addTab(tab){ + + vm.activateTab(tab); + + // push new init tab to the scope + contentTypeHelper.addInitTab($scope.model); + + } + + function removeTab(tabIndex) { + $scope.model.groups.splice(tabIndex, 1); + } + + function activateTab(tab) { + + // set all other tabs that are inactive to active + angular.forEach($scope.model.groups, function(group){ + // skip init tab + if(group.tabState !== "init") { + group.tabState = "inActive"; + } + }); + + tab.tabState = "active"; + + } + + function updateTabTitle(tab) { + if(tab.properties.length === 0) { + contentTypeHelper.addInitProperty(tab); + } + } + + /* ---------- PROPERTIES ---------- */ + + function toggleGroupSize(group){ + if(group.columns !== 12){ + group.columns = 12; + }else{ + group.columns = 6; + } + } + + function editPropertyTypeSettings(property) { + + if(!property.inherited) { + + vm.dialogModel = {}; + vm.dialogModel.title = "Edit property type settings"; + vm.dialogModel.property = property; + vm.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html"; + vm.showDialog = true; + + // set indicator on property to tell the dialog is open - is used to set focus on the element + property.dialogIsOpen = true; + + // set property to active + property.propertyState = "active"; + + vm.dialogModel.changePropertyEditor = function(property) { + choosePropertyType(property); + }; + + vm.dialogModel.editDataType = function(property) { + configDataType(property); + }; + + vm.dialogModel.submit = function(model){ + + property.dialogIsOpen = false; + + vm.showDialog = false; + vm.dialogModel = null; + + // push new init property to scope + contentTypeHelper.addInitPropertyOnActiveTab($scope.model); + + }; + + vm.dialogModel.close = function(model){ + vm.showDialog = false; + vm.dialogModel = null; + + // push new init property to scope + contentTypeHelper.addInitPropertyOnActiveTab($scope.model); + }; + + } + } + + function choosePropertyType(property) { + + vm.dialogModel = {}; + vm.dialogModel.title = "Choose property type"; + vm.dialogModel.view = "views/documentType/dialogs/property.html"; + vm.showDialog = true; + + property.dialogIsOpen = true; + + vm.dialogModel.selectDataType = function(selectedDataType) { + + contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType){ property.config = propertyType.config; property.editor = propertyType.editor; property.view = propertyType.view; - property.dataTypeId = dataType.id; - property.dataTypeIcon = dataType.icon; - property.dataTypeName = dataType.name; + property.dataTypeId = selectedDataType.id; + property.dataTypeIcon = selectedDataType.icon; + property.dataTypeName = selectedDataType.name; - // open settings dialog - $scope.editPropertyTypeSettings(property); + property.propertyState = "active"; + + console.log(property); + + // open data type configuration + editPropertyTypeSettings(property); + + // push new init tab to scope + contentTypeHelper.addInitTab($scope.model); }); - }); + }; + + vm.dialogModel.close = function(model){ + editPropertyTypeSettings(property); + }; } - $scope.dialogModel.close = function(model){ - $scope.editPropertyTypeSettings(property); - }; + function configDataType(property) { - }; + vm.dialogModel = {}; + vm.dialogModel.title = "Edit data type"; + vm.dialogModel.dataType = {}; + vm.dialogModel.property = property; + vm.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html"; + vm.dialogModel.multiActions = [ + { + label: "Save", + action: function(dataType) { + saveDataType(dataType, false); + } + }, + { + label: "Save as new", + action: function(dataType) { + saveDataType(dataType, true); + } + } + ]; + vm.showDialog = true; - $scope.deleteProperty = function(tab, propertyIndex) { - tab.properties.splice(propertyIndex, 1); - }; + function saveDataType(dataType, isNew) { + var preValues = dataTypeHelper.createPreValueProps(dataType.preValues); - /* ---------- SORTING OPTIONS ---------- */ + dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) { - $scope.sortableOptionsTab = { - distance: 10, - tolerance: "pointer", - opacity: 0.7, - scroll: true, - cursor: "move", - placeholder: "ui-sortable-tabs-placeholder", - zIndex: 6000, - handle: ".edt-tab-handle", - items: ".edt-tab-sortable", - start: function (e, ui) { - ui.placeholder.height(ui.item.height()); - }, - stop: function(e, ui){ + contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){ + + property.config = propertyType.config; + property.editor = propertyType.editor; + property.view = propertyType.view; + property.dataTypeId = dataType.id; + property.dataTypeIcon = dataType.icon; + property.dataTypeName = dataType.name; + + // open settings dialog + editPropertyTypeSettings(property); + + }); + + }); + + } + + vm.dialogModel.close = function(model){ + editPropertyTypeSettings(property); + }; } - }; - - $scope.sortableOptionsEditor = { - distance: 10, - tolerance: "pointer", - connectWith: ".edt-property-list", - opacity: 0.7, - scroll: true, - cursor: "move", - placeholder: "ui-sortable-properties-placeholder", - zIndex: 6000, - handle: ".edt-property-handle", - items: ".edt-property-sortable", - start: function (e, ui) { - ui.placeholder.height(ui.item.height()); - }, - stop: function(e, ui){ + function deleteProperty(tab, propertyIndex) { + tab.properties.splice(propertyIndex, 1); } - }; + } -} - -angular.module("umbraco").controller("Umbraco.Editors.DocumentType.DesignController", DesignController); + angular.module("umbraco").controller("Umbraco.Editors.DocumentType.DesignController", DesignController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html index 52d89ce29b..214e8b1957 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html @@ -1,10 +1,13 @@ -
-
    +
    -
  • + + +
      + +
    • -
      +
      @@ -13,24 +16,24 @@
      - Add new tab - Add another tab + Add new tab + Add another tab
      -
      +
      -
      - +
      +
      - - + +
      @@ -46,10 +49,10 @@
        -
      • +
      • -
        +
        @@ -69,14 +72,14 @@
        -
        +
        Inherited from {{property.contentTypeName}}
        -
        +
        {{ property.alias }}
        @@ -90,7 +93,7 @@
        -
        +
        {{ property.label }} ({{ property.alias }}) @@ -99,7 +102,7 @@
        -
        +
        @@ -118,12 +121,12 @@
        - + - + @@ -149,11 +152,11 @@ + view="vm.dialogModel.view">
        \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js index 100c67eb4f..0e2f234c73 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.controller.js @@ -6,150 +6,162 @@ * @description * The controller for the content type editor list view section */ -function ListViewController($scope, contentTypeResource, dataTypeResource, dataTypeHelper) { +(function() { + 'use strict'; - /* ---------- SCOPE VARIABLES ---------- */ + function ListViewController($scope, contentTypeResource, dataTypeResource, dataTypeHelper) { - $scope.listView = {}; - $scope.listView.dataType = {}; - $scope.listView.editDataTypeSettings = false; - $scope.listView.customListViewCreated = false; + /* ---------- SCOPE VARIABLES ---------- */ + + var vm = this; + + vm.toggleListView = toggleListView; + vm.toggleEditListViewDataTypeSettings = toggleEditListViewDataTypeSettings; + vm.saveListViewDataType = saveListViewDataType; + vm.createCustomListViewDataType = createCustomListViewDataType; + vm.removeCustomListDataType = removeCustomListDataType; + + vm.dataType = {}; + vm.editDataTypeSettings = false; + vm.customListViewCreated = false; - /* ---------- INIT ---------- */ + /* ---------- INIT ---------- */ - init(); + init(); - function init() { + function init() { - if($scope.contentType.isContainer) { + if($scope.model.isContainer) { - contentTypeResource.getAssignedListViewDataType($scope.contentType.id) - .then(function(dataType) { + contentTypeResource.getAssignedListViewDataType($scope.model.id) + .then(function(dataType) { - $scope.listView.dataType = dataType; + vm.dataType = dataType; - $scope.listView.customListViewCreated = checkForCustomListView(); + vm.customListViewCreated = checkForCustomListView(); - }); + }); + } } + + /* ----------- LIST VIEW --------- */ + + function toggleListView() { + + if($scope.model.isContainer) { + + // add list view data type + contentTypeResource.getAssignedListViewDataType($scope.model.id) + .then(function(dataType) { + + vm.dataType = dataType; + + vm.customListViewCreated = checkForCustomListView(); + + }); + + } else { + + vm.dataType = {}; + + } + + } + + + /* ----------- LIST VIEW SETTINGS --------- */ + + function toggleEditListViewDataTypeSettings() { + + if(!vm.editDataTypeSettings) { + + // get dataType + dataTypeResource.getById(vm.dataType.id) + .then(function(dataType) { + + // store data type + vm.dataType = dataType; + + // show edit panel + vm.editDataTypeSettings = true; + + }); + + } else { + + // hide edit panel + vm.editDataTypeSettings = false; + + } + + } + + function saveListViewDataType() { + + var preValues = dataTypeHelper.createPreValueProps(vm.dataType.preValues); + + dataTypeResource.save(vm.dataType, preValues, false).then(function(dataType) { + + // store data type + vm.dataType = dataType; + + // hide settings panel + vm.editDataTypeSettings = false; + + }); + + } + + + /* ---------- CUSTOM LIST VIEW ---------- */ + + function createCustomListViewDataType() { + + dataTypeResource.createCustomListView($scope.model.alias).then(function(dataType) { + + // store data type + vm.dataType = dataType; + + // change state to custom list view + vm.customListViewCreated = true; + + // show settings panel + vm.editDataTypeSettings = true; + + }); + + } + + function removeCustomListDataType() { + + // delete custom list view data type + dataTypeResource.deleteById(vm.dataType.id).then(function(dataType) { + + // get default data type + contentTypeResource.getAssignedListViewDataType($scope.model.id) + .then(function(dataType) { + + // store data type + vm.dataType = dataType; + + // change state to default list view + vm.customListViewCreated = false; + + }); + + }); + + } + + + function checkForCustomListView() { + return vm.dataType.name === "List View - " + $scope.model.alias; + } + + } - /* ----------- LIST VIEW --------- */ + angular.module("umbraco").controller("Umbraco.Editors.DocumentType.ListViewController", ListViewController); - $scope.toggleListView = function() { - - if($scope.contentType.isContainer) { - - // add list view data type - contentTypeResource.getAssignedListViewDataType($scope.contentType.id) - .then(function(dataType) { - - $scope.listView.dataType = dataType; - - $scope.listView.customListViewCreated = checkForCustomListView(); - - }); - - } else { - - $scope.listView.dataType = {}; - - } - - }; - - - /* ----------- LIST VIEW SETTINGS --------- */ - - $scope.toggleEditListViewDataTypeSettings = function() { - - if(!$scope.listView.editDataTypeSettings) { - - // get dataType - dataTypeResource.getById($scope.listView.dataType.id) - .then(function(dataType) { - - // store data type - $scope.listView.dataType = dataType; - - // show edit panel - $scope.listView.editDataTypeSettings = true; - - }); - - } else { - - // hide edit panel - $scope.listView.editDataTypeSettings = false; - - } - - }; - - $scope.saveListViewDataType = function() { - - var preValues = dataTypeHelper.createPreValueProps($scope.listView.dataType.preValues); - - dataTypeResource.save($scope.listView.dataType, preValues, false).then(function(dataType) { - - // store data type - $scope.listView.dataType = dataType; - - // hide settings panel - $scope.listView.editDataTypeSettings = false; - - }); - - }; - - - /* ---------- CUSTOM LIST VIEW ---------- */ - - $scope.createCustomListViewDataType = function() { - - dataTypeResource.createCustomListView($scope.contentType.alias).then(function(dataType) { - - // store data type - $scope.listView.dataType = dataType; - - // change state to custom list view - $scope.listView.customListViewCreated = true; - - // show settings panel - $scope.listView.editDataTypeSettings = true; - - }); - - }; - - $scope.removeCustomListDataType = function() { - - // delete custom list view data type - dataTypeResource.deleteById($scope.listView.dataType.id).then(function(dataType) { - - // get default data type - contentTypeResource.getAssignedListViewDataType($scope.contentType.id) - .then(function(dataType) { - - // store data type - $scope.listView.dataType = dataType; - - // change state to default list view - $scope.listView.customListViewCreated = false; - - }); - - }); - - }; - - - function checkForCustomListView() { - return $scope.listView.dataType.name === "List View - " + $scope.contentType.alias; - } - - -} - -angular.module("umbraco").controller("Umbraco.Editors.DocumentType.ListViewController", ListViewController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html index 3a4c8f0844..ee70596f20 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/listview/listview.html @@ -1,4 +1,4 @@ -
        +
        Enable list view
        @@ -8,38 +8,38 @@
        -
        +
        -
        {{ listView.dataType.name }} (default)
        - +
        {{ vm.dataType.name }} (default)
        +
        - Create custom list view - Remove custom list view + Create custom list view + Remove custom list view
        -
        +
        - + - - + +
        diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.controller.js index 593d70e571..ecd0be1929 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.controller.js @@ -6,71 +6,80 @@ * @description * The controller for the content type editor property dialog */ -function PermissionsController($scope, contentTypeResource, $log, iconHelper) { +(function() { + 'use strict'; - /* ----------- SCOPE VARIABLES ----------- */ + function PermissionsController($scope, contentTypeResource, $log, iconHelper) { - $scope.contentTypes = []; + /* ----------- SCOPE VARIABLES ----------- */ - /* ---------- INIT ---------- */ + var vm = this; - init(); + vm.removeAllowedChildNode = removeAllowedChildNode; + vm.addItemOverlay = addItemOverlay; - function init() { + vm.contentTypes = []; - contentTypeResource.getAll().then(function(contentTypes){ - $scope.contentTypes = contentTypes; - }); + /* ---------- INIT ---------- */ + + init(); + + function init() { + + contentTypeResource.getAll().then(function(contentTypes){ + vm.contentTypes = contentTypes; + }); + + } + + function removeAllowedChildNode(selectedContentType) { + + // splice from array + var selectedContentTypeIndex = $scope.model.allowedContentTypes.indexOf(selectedContentType); + $scope.model.allowedContentTypes.splice(selectedContentTypeIndex, 1); + + } + + function addItemOverlay($event) { + + vm.showDialog = false; + vm.dialogModel = {}; + vm.dialogModel.title = "Choose content type"; + vm.dialogModel.contentTypes = vm.contentTypes; + vm.dialogModel.allowedContentTypes = $scope.model.allowedContentTypes; + vm.dialogModel.event = $event; + vm.dialogModel.view = "views/documentType/dialogs/contenttypes/contenttypes.html"; + vm.showDialog = true; + + vm.dialogModel.chooseContentType = function(selectedContentType) { + + // format content type to match service + var reformatedContentType = { + "name": selectedContentType.name, + "id": { + "m_boxed": { + "m_value": selectedContentType.id + } + }, + "icon": selectedContentType.icon, + "key": selectedContentType.key, + "alias": selectedContentType.alias + }; + + // push to content type model + $scope.model.allowedContentTypes.push(reformatedContentType); + + vm.showDialog = false; + vm.dialogModel = null; + }; + + vm.dialogModel.close = function(){ + vm.showDialog = false; + vm.dialogModel = null; + }; + } } - $scope.removeAllowedChildNode = function(selectedContentType) { - - // splice from array - var selectedContentTypeIndex = $scope.contentType.allowedContentTypes.indexOf(selectedContentType); - $scope.contentType.allowedContentTypes.splice(selectedContentTypeIndex, 1); - - }; - - $scope.addItemOverlay = function ($event) { - - $scope.showDialog = false; - $scope.dialogModel = {}; - $scope.dialogModel.title = "Choose content type"; - $scope.dialogModel.contentTypes = $scope.contentTypes; - $scope.dialogModel.allowedContentTypes = $scope.contentType.allowedContentTypes; - $scope.dialogModel.event = $event; - $scope.dialogModel.view = "views/documentType/dialogs/contenttypes/contenttypes.html"; - $scope.showDialog = true; - - $scope.dialogModel.chooseContentType = function(selectedContentType) { - - // format content type to match service - var reformatedContentType = { - "name": selectedContentType.name, - "id": { - "m_boxed": { - "m_value": selectedContentType.id - } - }, - "icon": selectedContentType.icon, - "key": selectedContentType.key, - "alias": selectedContentType.alias - }; - - // push to content type model - $scope.contentType.allowedContentTypes.push(reformatedContentType); - - $scope.showDialog = false; - $scope.dialogModel = null; - }; - - $scope.dialogModel.close = function(){ - $scope.showDialog = false; - $scope.dialogModel = null; - }; - }; - -} - -angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PermissionsController", PermissionsController); + angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PermissionsController", PermissionsController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.html index 6b67086d1f..563fa2cb70 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/permissions/permissions.html @@ -1,4 +1,5 @@ -
        +
        +
        @@ -7,7 +8,7 @@
        @@ -28,9 +29,9 @@
        - +
        - {{ contentType.name }} + {{ model.name }} (Current)
        @@ -38,7 +39,7 @@
        -
        +
        @@ -46,17 +47,17 @@ {{ allowedType.name }}
        - +
        -
        +
        Allow child node
        -
        +
        All content types are added as child nodes
        @@ -67,14 +68,13 @@
        - + view="vm.dialogModel.view">
        \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js index 8dffed859e..e20d2acf76 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js @@ -6,81 +6,91 @@ * @description * The controller for the content type editor templates sub view */ -function TemplatesController($scope, entityResource) { +(function() { + 'use strict'; - /* ----------- SCOPE VARIABLES ----------- */ + function TemplatesController($scope, entityResource) { - $scope.templates = {}; - $scope.templates.availableTemplates = []; + /* ----------- SCOPE VARIABLES ----------- */ + + var vm = this; + + vm.removeTemplate = removeTemplate; + vm.removeDefaultTemplate = removeDefaultTemplate; + vm.openTemplatesPicker = openTemplatesPicker; + vm.setAsDefaultTemplate = setAsDefaultTemplate; + + vm.availableTemplates =[]; - /* ---------- INIT ---------- */ + /* ---------- INIT ---------- */ - init(); + init(); - function init() { + function init() { - entityResource.getAll("Template").then(function(templates){ - $scope.templates.availableTemplates = templates; - }); + entityResource.getAll("Template").then(function(templates){ + vm.availableTemplates = templates; + }); + + } + + function removeTemplate(selectedTemplate) { + + // splice from array + var selectedTemplateIndex = $scope.model.allowedTemplates.indexOf(selectedTemplate); + $scope.model.allowedTemplates.splice(selectedTemplateIndex, 1); + + } + + function removeDefaultTemplate() { + + // remove default template from array - it will be the last template so we can clear the array + $scope.model.allowedTemplates = []; + + // remove as default template + $scope.model.defaultTemplate = null; + + } + + function openTemplatesPicker($event, setAsDefaultTemplateBool){ + vm.showDialog = false; + vm.dialogModel = {}; + vm.dialogModel.title = "Choose template"; + vm.dialogModel.availableTemplates = vm.availableTemplates; + vm.dialogModel.allowedTemplates = $scope.model.allowedTemplates; + vm.dialogModel.event = $event; + vm.dialogModel.view = "views/documentType/dialogs/templates/templates.html"; + vm.showDialog = true; + + vm.dialogModel.chooseTemplate = function(selectedTemplate) { + + // push template as allowed template + $scope.model.allowedTemplates.push(selectedTemplate); + + // if true set template as default template + if(setAsDefaultTemplateBool) { + setAsDefaultTemplate(selectedTemplate); + } + + // hide dialog + vm.showDialog = false; + vm.dialogModel = null; + }; + + vm.dialogModel.close = function(){ + vm.showDialog = false; + vm.dialogModel = null; + }; + + } + + function setAsDefaultTemplate(template) { + $scope.model.defaultTemplate = {}; + $scope.model.defaultTemplate = template; + } } - $scope.removeTemplate = function(selectedTemplate) { - - // splice from array - var selectedTemplateIndex = $scope.contentType.allowedTemplates.indexOf(selectedTemplate); - $scope.contentType.allowedTemplates.splice(selectedTemplateIndex, 1); - - }; - - $scope.removeDefaultTemplate = function() { - - // remove default template from array - it will be the last template so we can clear the array - $scope.contentType.allowedTemplates = []; - - // remove as default template - $scope.contentType.defaultTemplate = null; - - }; - - $scope.openTemplatesPicker = function($event, setAsDefaultTemplate){ - $scope.showDialog = false; - $scope.dialogModel = {}; - $scope.dialogModel.title = "Choose template"; - $scope.dialogModel.availableTemplates = $scope.templates.availableTemplates; - $scope.dialogModel.allowedTemplates = $scope.contentType.allowedTemplates; - $scope.dialogModel.event = $event; - $scope.dialogModel.view = "views/documentType/dialogs/templates/templates.html"; - $scope.showDialog = true; - - $scope.dialogModel.chooseTemplate = function(selectedTemplate) { - - // push template as allowed template - $scope.contentType.allowedTemplates.push(selectedTemplate); - - // if true set template as default template - if(setAsDefaultTemplate) { - $scope.setAsDefaultTemplate(selectedTemplate); - } - - // hide dialog - $scope.showDialog = false; - $scope.dialogModel = null; - }; - - $scope.dialogModel.close = function(){ - $scope.showDialog = false; - $scope.dialogModel = null; - }; - - }; - - $scope.setAsDefaultTemplate = function(template) { - $scope.contentType.defaultTemplate = {}; - $scope.contentType.defaultTemplate = template; - }; - -} - -angular.module("umbraco").controller("Umbraco.Editors.DocumentType.TemplatesController", TemplatesController); + angular.module("umbraco").controller("Umbraco.Editors.DocumentType.TemplatesController", TemplatesController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html index 8d080b90c8..fe129627e6 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.html @@ -1,4 +1,4 @@ -
        +
        Allowed Templates
        @@ -9,34 +9,34 @@
        -
        +
        - -
        {{ contentType.defaultTemplate.name }}
        + +
        {{ model.defaultTemplate.name }}
        (Default)
        - +
        -
        +
        {{ template.name }}
        - Set as default + Set as default
        - +
        -
        +
        -
        Choose template
        -
        Choose default template
        +
        Choose template
        +
        Choose default template
        -
        +
        All templates are added as allowed templates
        @@ -44,11 +44,11 @@ + view="vm.dialogModel.view">