From 93b0991dc4037d02f3335c06d47d79d571c4604d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 8 Jun 2015 14:01:37 +0200 Subject: [PATCH] Add prototype for template section --- .../src/less/pages/document-type-editor.less | 58 ++++++++-- .../dialogs/templates/templates.controller.js | 14 +++ .../dialogs/templates/templates.html | 10 ++ .../src/views/documenttype/edit.controller.js | 2 +- .../views/templates/templates.controller.js | 109 ++++++++++++++++++ .../views/templates/templates.html | 50 +++++++- 6 files changed, 230 insertions(+), 13 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less index 0b6449953d..7c854faae1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less @@ -598,23 +598,59 @@ } -/* ---------- SUB VIEWS COLUMNS ----------- */ +/* ---------- TEMPLATES GRID ------------ */ -.sub-view-columns { +.templates-grid { display: flex; - margin-bottom: 40px; - h5 { - margin-top: 0; - } + flex-direction: row; + flex-wrap: wrap; } -.sub-view-column-left { - flex: 0 0 250px; - margin-right: 70px; +.template { + width: 125px; + height: 150px; + padding: 20px; + background: #f8f8f8; + border: 1px solid #CCCCCC; + text-align: center; + margin: 0 20px 20px 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; + animation: fadeIn 0.5s; + position: relative; } -.sub-view-column-right { - flex: 1; +.template .template-content .icon { + font-size: 50px; + color: #d9d9d9; +} + +.template .remove-template { + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; +} + +.template .template-default-label { + font-size: 11px; + color: #d9d9d9; +} + +.template .link-blue { + color: @blue; +} + +.template.template-default { + border-width: 2px; +} + +.template.template-placeholder { + border: 1px dashed #d9d9d9; + background: none; + cursor: pointer; } /* ---------- CHILD NODE TREE ---------- */ diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js new file mode 100644 index 0000000000..13645ab827 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.controller.js @@ -0,0 +1,14 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.DocumentType.PropertyController + * @function + * + * @description + * The controller for the content type editor property dialog + */ +function AvailableTemplatesController($scope) { + + +} + +angular.module("umbraco").controller("Umbraco.Editors.DocumentType.AvailableTemplatesController", AvailableTemplatesController); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html new file mode 100644 index 0000000000..9fdb0db4fc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/templates/templates.html @@ -0,0 +1,10 @@ +
+
+
+ + + {{ availableTemplate.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 037042da0d..918fb306d2 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 @@ -46,7 +46,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont }, { "name": "Templates", - "icon": "article", + "icon": "newspaper-alt", "view": "views/documentType/views/templates/templates.html" } ]; 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 new file mode 100644 index 0000000000..4cb4aec32d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/templates/templates.controller.js @@ -0,0 +1,109 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.DocumentType.TemplatesController + * @function + * + * @description + * The controller for the content type editor templates sub view + */ +function TemplatesController($scope, contentTypeResource) { + + /* ----------- SCOPE VARIABLES ----------- */ + + $scope.templates = {}; + $scope.templates.availableTemplates = []; + + + /* ---------- INIT ---------- */ + + init(); + + function init() { + + contentTypeResource.getAll().then(function(contentTypes){ + $scope.templates.availableTemplates = contentTypes; + + // we should be able to move this to a custom filter + angular.forEach($scope.templates.availableTemplates, function(template){ + + var exists = false; + + angular.forEach($scope.contentType.allowedTemplates, function(allowedTemplate){ + + if( template.alias === allowedTemplate.alias ) { + exists = true; + } + + }); + + if(exists) { + template.show = false; + } else { + template.show = true; + } + + }); + + }); + + } + + $scope.removeTemplate = function(selectedTemplate) { + + // splice from array + var selectedTemplateIndex = $scope.contentType.allowedTemplates.indexOf(selectedTemplate); + $scope.contentType.allowedTemplates.splice(selectedTemplateIndex, 1); + + // show content type in content types array + for (var templateIndex = 0; templateIndex < $scope.templates.availableTemplates.length; templateIndex++) { + + var template = $scope.templates.availableTemplates[templateIndex]; + + if( selectedTemplate.alias === template.alias ) { + template.show = true; + } + } + + }; + + $scope.openTemplatesPicker = function($event){ + $scope.showDialog = false; + $scope.dialogModel = {}; + $scope.dialogModel.title = "Choose template"; + $scope.dialogModel.templates = $scope.templates.availableTemplates; + $scope.dialogModel.event = $event; + $scope.dialogModel.view = "views/documentType/dialogs/templates/templates.html"; + $scope.showDialog = true; + + $scope.dialogModel.chooseTemplate = function(selectedTemplate) { + + $scope.contentType.allowedTemplates.push(selectedTemplate); + + for (var templateIndex = 0; templateIndex < $scope.templates.availableTemplates.length; templateIndex++) { + + var template = $scope.templates.availableTemplates[templateIndex]; + + if( selectedTemplate.alias === template.alias ) { + template.show = false; + } + } + + $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); 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 f8a268712f..730d0c0921 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 +1,49 @@ -templates +
+ +
+
Allowed Templates
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate velit a velit consectetur luctus. +
+ +
+ +
+ +
+
+ +
{{ contentType.defaultTemplate.name }}
+ (Default) +
+
+ +
+
+ +
{{ template.name }}
+ Set as default +
+ +
+ +
+
+
Choose template
+
+
+ +
+ +
+ + + + +
+