From 098270100ca8830eef588ebb060153c54a066e4b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 21 May 2015 21:35:57 +0200 Subject: [PATCH] Started on compositions + restyled some elements --- .../src/less/listview.less | 6 +- .../src/less/pages/document-type-editor.less | 122 +++++++++-------- .../compositions/compositions.controller.js | 15 +++ .../dialogs/compositions/compositions.html | 15 +++ .../editPropertySettings.html | 84 +++++------- .../src/views/documenttype/edit.controller.js | 123 +++++++++++++++++- .../src/views/documenttype/edit.html | 37 +++--- 7 files changed, 266 insertions(+), 136 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less index f033ee2d5b..2c8c186f94 100644 --- a/src/Umbraco.Web.UI.Client/src/less/listview.less +++ b/src/Umbraco.Web.UI.Client/src/less/listview.less @@ -32,7 +32,11 @@ } .umb-sub-header { - padding: 0 0 20px 0 + padding: 0 0 20px 0; +} + +.umb-sub-header .header-content-right { + float: right; } .umb-listview table form { 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 61630a897d..b5ae73bd3b 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 @@ -47,40 +47,12 @@ list-style: none; } - /* ---------- TOOLBAR ---------- */ - - .toolbar { - width: 100%; - list-style: none; - box-sizing: border-box; - margin-bottom: 70px; - .toolbar-tools { - float: right; - .toolbar-tool { - display: inline-block; - padding: 10px 15px; - &:hover, - &.is-active { - text-decoration: none; - background: @grayLighter; - } - &:focus { - text-decoration: none; - } - .icon { - font-size: 25px; - vertical-align: middle; - } - } - } - } - /* ---------- TABS ---------- */ .edt-tab{ - margin: 0 0 70px 0; + margin: 50px 0 0 0; min-height: 145px; - border: 2px solid #454A52; + border: 2px solid #CCCCCC; padding: 0; box-shadow: 0 3px 0 0 rgba(0,0,0,0.1); border-radius: 0 10px 10px 10px; @@ -108,20 +80,21 @@ } .tab-title{ - padding: 10px 25px 0 25px; + padding: 10px 20px 0 20px; position: absolute; left: -2px; top: -50px; height: 38px; background: white; - border: 2px solid #454A52; + border: 2px solid #CCCCCC; border-bottom: none; border-radius: 10px 10px 0 0; font-weight: bold; -webkit-transition: all 0.5s; transition: all 0.5s; .tab-title-input { - border-color: #ffffff; + border-color: transparent; + background: transparent; min-width: 80px; font-weight: bold; color: #515151; @@ -134,12 +107,6 @@ border: 1px dashed #979797 !important; } } - .icon { - position: absolute; - left: -40px; - font-size: 25px; - top: 18px; - } .tab-title-text { position: relative; top: 7px; @@ -190,6 +157,26 @@ } + // tab is inherited from compositions + + .edt-tab.tab-is-inherited { + background: #F2F2F2; + border-color: #F2F2F2; + box-shadow: none; + .tab-title{ + border-color: #F2F2F2; + background: #F2F2F2; + } + } + + .edt-tab-inherited-from { + font-size: 13px; + color: @grayLight; + .icon { + font-size: 15px; + } + } + /* ---------- PROPERTY ---------- */ .edt-property-group{ @@ -197,6 +184,9 @@ padding: 40px 20px 30px 20px; -webkit-transition: all 0.5s; transition: all 0.5s; + @media screen and (max-width: 1500px) { + padding: 20px 20px 10px 20px; + } } .edt-property-list { @@ -207,26 +197,35 @@ position: relative; display: flex; flex-flow: row; - padding: 20px 30px; -webkit-transition: all 0.5s; transition: all 0.5s; + margin-bottom: 10px; + padding: 10px 0; + border: 1px solid transparent; + &:hover { + border: 1px solid @inputBorder; + } } .edt-property-meta { width: 300px; margin-right: 50px; + -webkit-transition: all 0.5s; + transition: all 0.5s; .property-meta-group { display: inline-block; } - -webkit-transition: all 0.5s; - transition: all 0.5s; + @media screen and (max-width: 1500px) { + width: 200px; + } } .edt-property-preview{ flex: 2; - max-height: 100px; + height: 50px; overflow: hidden; position: relative; + padding: 25px 10px; &:hover { cursor: pointer; } @@ -253,7 +252,9 @@ width: 100%; height: 100%; z-index: 10; - background: rgba(0,0,0,0.1); + border-radius: 10px; + background: url("../img/checkered-background.png"); + opacity: 0.2; .overlay-text { position: absolute; top: 50%; @@ -289,7 +290,7 @@ text-decoration: none; } .icon { - font-size: 25px; + font-size: 15px; color: @gray; } } @@ -303,6 +304,15 @@ &:hover { border-color: @blueLight; } + + .edt-property-meta { + padding: 0 0 0 10px; + } + + .edt-property-preview { + background: @grayLight; + } + } @@ -339,9 +349,17 @@ width: auto; flex: 1; .icon { - font-size: 25px; + font-size: 15px; vertical-align: middle; - margin-right: 10px; + margin-right: 5px; + } + } + + .tab-title{ + .icon { + font-size: 15px; + position: relative; + top: 4px; } } @@ -388,7 +406,6 @@ input { font-size: 12px; color: @gray; - border-color: #fff; margin-bottom: 0; height: 10px; } @@ -398,7 +415,6 @@ input { font-size: 16px; font-weight: bold; - border-color: #fff; margin-bottom: 0; color: @grayDarker; } @@ -414,14 +430,6 @@ /* ---------- PLACEHOLDERS ----------- */ - .placeholder { - background: @grayLight; - display: block; - width: 100%; - margin-bottom: 5px; - height: 60px; - } - .placeholder-text { color: @gray; position: absolute; diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.controller.js new file mode 100644 index 0000000000..01f28b50a8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.controller.js @@ -0,0 +1,15 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.DocumentType.PropertyController + * @function + * + * @description + * The controller for the content type editor property dialog + */ +function CompositionsController($scope, contentTypeResource) { + + + +} + +angular.module("umbraco").controller("Umbraco.Editors.DocumentType.CompositionsController", CompositionsController); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html new file mode 100644 index 0000000000..7513cce7b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/compositions/compositions.html @@ -0,0 +1,15 @@ +
+
+ +
+
+ + +
+
+ + 
{{ model.availableCompositeContentTypes | json }}
+ +
+
+ diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editPropertySettings/editPropertySettings.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editPropertySettings/editPropertySettings.html index e8aabd9ce7..c0128e2d5a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editPropertySettings/editPropertySettings.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editPropertySettings/editPropertySettings.html @@ -3,68 +3,44 @@
-
+
Property settings
-
Property settings
+ + -
- -
- -
-
+ + -
- -
- -
-
+ + -
- -
- -
-
+
Validation
-
Validation
- -
- - -
- -
- -
- -
-
- -
Property type
- -
-
- - {{ model.property.dataType.name }} - {{ model.property.view }} -
- -
- - 
{{ model | json }}
+ + + Lorem ipsum dolor + +
+
+
Property type
+ +
+ + {{ model.property.dataType.name }} + {{ model.property.view }} +
+ + + 
{{ model | json }}
+
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 cc339fea02..d6e27c0174 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 @@ -17,13 +17,20 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont $scope.contentType = dt; - // set all tab to active + // 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 + addInitProperty(group); + }); } + // add init tab addInitTab(); }); @@ -34,6 +41,99 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont $scope.sortingMode = !$scope.sortingMode; }; + $scope.openCompositionsDialog = function() { + $scope.dialogModel = {}; + $scope.dialogModel.title = "Compositions"; + $scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes; + $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) { + + contentTypeResource.getById(compositeContentType.id).then(function(contentType){ + + compositeContentType.contentType = contentType; + + switch (compositeContentType.isSelected) { + + case true: + + var test = $scope.contentType.groups.length; + var positionToPush = test - 1; + + console.log(test); + console.log(positionToPush); + + angular.forEach(compositeContentType.contentType.groups, function(group){ + + // set inherited state on tab + group.inherited = true; + group.inheritedFromId = compositeContentType.id; + group.inheritedFromName = compositeContentType.name; + + // set inherited state on properties + angular.forEach(group.properties, function(property){ + property.inherited = true; + property.inheritedFromId = compositeContentType.id; + property.inheritedFromName = compositeContentType.name; + }); + + // set tab state + group.tabState = "inActive"; + + // push groups to content type + $scope.contentType.groups.splice(positionToPush,0,group); + //$scope.contentType.groups.push(group); + + }); + + break; + + case false: + + var newGroupsArray = []; + + angular.forEach($scope.contentType.groups, function(group){ + + if( group.inheritedFromId === compositeContentType.id ) { + + var newProperties = false; + + // check if group contains properties that are not inherited + angular.forEach(group.properties, function(property){ + if(property.inherited === false) { + newProperties = true; + } + }); + + // if new properties keep tab in array + if(newProperties) { + newGroupsArray.push(group); + } + + } else { + + newGroupsArray.push(group); + + } + + }); + + $scope.contentType.groups = newGroupsArray; + + break; + } + + }); + + } + + }; /* ---------- TABS ---------- */ @@ -42,7 +142,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont $scope.activateTab(tab); // push new init tab to the scope - addInitTab; + addInitTab(); }; @@ -92,9 +192,22 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont } function addInitProperty(tab) { - tab.properties.push({ - propertyState: "init" + + var addInitProperty = true; + + // check if there already is an init property + angular.forEach(tab.properties, function(property){ + if(property.propertyState === "init") { + addInitProperty = false; + } }); + + if(addInitProperty) { + tab.properties.push({ + propertyState: "init" + }); + } + } /* ---------- PROPERTIES ---------- */ @@ -266,4 +379,4 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont } -angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditController", DocumentTypeEditController); \ No newline at end of file +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 8bf726af5d..49f7da2e00 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html @@ -15,19 +15,16 @@
- -
-
+
+
- - - Compositions - + - - - Reorder - +
@@ -54,11 +51,13 @@ -
+
Inherited from {{ tab.inheritedFromName }}
+ +
- +