diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less b/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less index b7285cb02b..53c96eb246 100644 --- a/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less +++ b/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less @@ -1,4 +1,3 @@ - .editors-document-type-container{ .handle{visibility: hidden;} @@ -20,48 +19,12 @@ font-weight: 400 } - - .tab-title{ - padding: 0 25px 0 25px; - position: absolute; - left: -2px; - top: -36px; - height: 34px; - background: white; - border: 2px solid #cccccc; - border-bottom: none; - border-radius: 5px 5px 0 0; - -webkit-transition: width 0.5s; /* Safari */ - transition: width 0.5s; - font-weight: bold; - .tab-title-input { - border-color: #ffffff; - width: 27px; - font-weight: bold; - &:hover { - border-color: @inputBorder; - } - } - .tab-title-text { - position: relative; - top: 10px; - font-size: 14px; - } - } - .editors-document-type-canvas{ - /* - min-height: 200px; - position: absolute; - top: 0; - right: 0; - left: 0; - - bottom: 0; - overflow: auto; - */ padding: 40px 80px; - + @media screen and (max-width: 1500px) { + padding-left: 0; + padding-right: 0; + } } .editors-document-type-sidebar{ @@ -83,305 +46,349 @@ list-style: none; } - .edt-props-sortable{min-height: 5px} + /* ---------- TABS ---------- */ - .properties-placeholder{ - //text-align: center; - background: @grayLighter; - border: 1px dashed @grayLight; - padding: 20px; - margin: 30px 20px 30px 20px; - } - -} - -/* ---------- TABS ---------- */ - -.edt-tab{ - margin: 50px 20px 70px 20px; - border: 2px solid #cccccc; - padding: 0; - box-shadow: 0 5px 1px 0 rgba(0,0,0,0.1); - border-radius: 0 5px 5px 5px; - &:hover { + .edt-tab{ + margin: 50px 20px 70px 20px; + min-height: 145px; + border: 2px solid #454A52; + padding: 0; + box-shadow: 0 3px 0px 0 rgba(0,0,0,0.1); + border-radius: 0 10px 10px 10px; + &:hover { + .edt-tab-actions { + visibility: visible; + opacity: 1; + -webkit-transition: opacity 0.5s; /* Safari */ + transition: opacity 0.5s; + } + } .edt-tab-actions { - visibility: visible; - opacity: 1; - -webkit-transition: opacity 0.5s; /* Safari */ - transition: opacity 0.5s; + position: absolute; + top: 5px; + right: 5px; + visibility: hidden; + opacity: 0; + z-index: 10; + .tab-action { + display: inline-block; + } } } - .edt-tab-actions { - position: absolute; - top: 5px; - right: 5px; - visibility: hidden; - opacity: 0; - z-index: 10; - .tab-action { - display: inline-block; - } - } -} -.edt-tab-center-text { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - text-align: center; -} - -.edt-tab:hover > h4 > .handle{ - visibility: visible; -} - -.edt-property-group{ - position: relative; - padding: 60px 20px 0 20px; -} - -.edt-property-group:hover > h5 > .handle{ - visibility: visible; -} - -.edt-property-group-sizer{ - bottom: 0; - top: 0; - right: -10px; - width: 15px; - position: absolute; - cursor: e-resize; -} - -.span12 .edt-property-group-sizer{ - cursor: w-resize; -} - - -.edt-props-sortable{ - margin-left: 0px; -} - -// tab is in init state -.edt-tab.tab-state-init { - cursor: pointer; - border: 2px dashed @grayLight; - height: 100px; - box-shadow: none !important; .tab-title{ - border: 2px dashed @grayLight; + padding: 10px 25px 0 25px; + position: absolute; + left: -2px; + top: -50px; + height: 38px; + background: white; + border: 2px solid #454A52; border-bottom: none; - } - &:hover { - //border-style: solid; - .tab-title { - //border-style: solid; - //border-bottom-style: none; + border-radius: 10px 10px 0 0; + font-weight: bold; + .tab-title-input { + border-color: #ffffff; + min-width: 80px; + font-weight: bold; + color: #515151; + margin-bottom: 0; + height: 25px !important; + &:hover { + border-color: @inputBorder; + } + &.tab-title-placeholder { + border: 1px dashed #979797 !important; + } + } + .tab-title-text { + position: relative; + top: 7px; + font-size: 14px; + } + } + + .edt-tab-center-text { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-weight: bold; + color: #00759D; + } + + // tab is in init state + .edt-tab.tab-state-init { + cursor: pointer; + border: 2px dashed @grayLight; + box-shadow: none !important; + -webkit-transition: all 0.5s; + transition: all 0.5s; + .tab-title{ + border: 2px dashed @grayLight; + border-bottom: none; + width: 70px; + } + &:hover { + border-color: @blueLight; + .tab-title { + border-color: @blueLight; + } } } -} -// tab is active -.edt-tab.tab-state-active { + // tab is active + .edt-tab.tab-state-active { + border-color: @blue; + + .tab-title{ + border-color: @blue; + } + + .edt-property-group{ + padding-top: 60px; + } + + .edt-property { + margin-bottom: 20px + } + } + + + // tab is inactive + .edt-tab.tab-state-inactive { + + cursor: pointer; + + .edt-property-group{ + padding-top: 20px; + } + + .edt-property { + height: 50px; + margin-bottom: 10px; + background: @grayLighter; + color: @grayDarker; + border-radius: @baseBorderRadius; + padding-top: 0; + padding-bottom: 0; + } + + .edt-property-meta { + margin: 15px 0 0 10px; + } + + .edt-property-actions { + width: 150px; + text-align: right; + margin: 7px 10px 0 0; + .property-action { + display: inline-block; + } + } + + .ui-sortable-placeholder { + height: 50px !important; + padding: 0 !important; + margin-bottom: 10px; + } + + .edt-property-actions { + .property-action { + display: inline-block; + } + } + + } + + /* ---------- PROPERTY ---------- */ .edt-property-group{ - padding-top: 60px; + position: relative; + padding: 60px 20px 0 20px; } - .edt-property { - margin-bottom: 20px - } -} - - -// tab is inactive -.edt-tab.tab-state-inactive { - - cursor: pointer; - - .edt-property-group{ - padding-top: 20px; - } - - .edt-property { - height: 50px; - margin-bottom: 10px; - background: @grayLighter; - color: @grayDarker; - border-radius: @baseBorderRadius; - padding-top: 0; - padding-bottom: 0; + .edt-property{ + position: relative; + display: flex; + flex-flow: row; + padding: 20px 30px; } .edt-property-meta { - margin: 15px 0 0 10px; - } - - .edt-property-actions { - width: 150px; - text-align: right; - margin: 7px 10px 0 0; - .property-action { + width: 300px; + margin-right: 50px; + .property-meta-group { display: inline-block; } } - .ui-sortable-placeholder { - height: 50px !important; - padding: 0 !important; - margin-bottom: 10px; + .edt-property-preview{ + flex: 2; + max-height: 100px; + overflow: hidden; + position: relative; } - .edt-property-actions { - .property-action { - display: inline-block; - } - } - -} - -/* ---------- PROPERTY ---------- */ - -.edt-property{ - position: relative; - display: flex; - flex-flow: row; - padding: 20px 30px; - /* - &:hover, - &.active { + .edt-property-preview:after { + content:""; + position:absolute; + top:0px; + left:0; + height:100%; + width:100%; background: @grayLighter; - -webkit-transition: background 0.5s; - transition: background 0.5s; + opacity: 0.3; } - */ -} -// property state init - property placeholder -.edt-property.property-state-init { - border: 2px dashed @grayLight; - border-radius: 5px; - cursor: pointer; -} - -.edt-property-meta { - width: 300px; - .property-meta-group { - display: inline-block; - } -} - -.edt-property-inner{ - flex: 2; - max-height: 100px; - overflow: hidden; - position: relative; - /* - opacity: 0.7; - padding: 10px; - border: 1px dashed @grayLight; - */ - /* - &:hover { - cursor: pointer; - .edt-property-inner-overlay { - display: block; + .edt-property-preview-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + background: rgba(0,0,0,0.1); + .overlay-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: @grayDark; + display: none; } } - */ - div { - padding-top: 10px; + + .edt-property-preview-label{ + font-size: 11px; + position: absolute; + top: 0; + left: 0; + text-transform: uppercase; + z-index: 15; + background: @grayLighter; + padding: 3px; + line-height: 12px; + opacity: 0.8 } -} -.edt-property-actions { - width: 50px; - text-align: center; - visibility: hidden; - opacity: 0; -} -.edt-property:hover { .edt-property-actions { - visibility: visible; - opacity: 1; - -webkit-transition: opacity 0.5s; /* Safari */ - transition: opacity 0.5s; + width: 50px; + text-align: center; + margin: 15px 0 0 0; + .property-action { + margin: 0 0 5px 0; + display: block; + &:hover { + text-decoration: none; + } + .icon { + font-size: 25px; + color: @gray; + } + } } -} -.edt-property-inner-overlay { - background-color: @grayLighter; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - display: none; - .overlay-text { + // property state init - property placeholder + .edt-property.property-state-init { + border: 2px dashed @grayLight; + border-radius: 5px; + cursor: pointer; + &:hover { + border-color: @blueLight; + } + } + + + /* ---------- INPUTS ---------- */ + + .invisible-field { + input, + textarea { + border-color: transparent; + background: transparent; + } + } + + .edt-property-meta-alias { + input { + font-size: 12px; + color: @gray; + border-color: #fff; + margin-bottom: 0; + height: 10px; + } + } + + .edt-property-meta-label { + input { + font-size: 16px; + font-weight: bold; + border-color: #fff; + margin-bottom: 0; + color: @grayDarker; + } + } + + .edt-property-meta-description { + textarea { + font-size: 12px; + color: @grayDark; + } + } + + + /* ---------- PLACEHOLDERS ----------- */ + + .placeholder { + background: @grayLight; + display: block; + width: 100%; + margin-bottom: 5px; + height: 60px; + } + + .placeholder-text { + color: @gray; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - color: @grayDark; + font-weight: bold; } -} -.edt-property-label{ - font-size: 11px; - position: absolute; - top: 0px; - left: 0px; - text-transform: uppercase; - z-index: 15; - background: @grayLighter; - padding: 3px; - line-height: 12px; - opacity: 0.8 -} - -.edt-property-inner:after { - content:""; - position:absolute; - top:0px; - left:0; - height:100%; - width:100%; - background: @grayLighter; - opacity: 0.3; -} - -.invisible-input { - border-color: transparent; - &:hover { - border-color: @inputBorder; + .placeholder-input-small { + background: @grayLight; + display: block; + height: 10px; + margin-bottom: 5px; + width: 25%; } -} + .placeholder-input { + background: @grayLight; + display: block; + height: 20px; + margin-bottom: 5px; + } -/* ---------- PLACEHOLDERS ----------- */ -.placeholder { - background: #e5e5e5; - display: block; - width: 100%; - margin-bottom: 5px; - height: 50px; -} + .placeholder-text-group { + .placeholder-text-line-full { + background: @grayLight; + display: block; + height: 5px; + margin-bottom: 5px; + } + .placeholder-text-line-short { + background: @grayLight; + display: block; + height: 5px; + margin-bottom: 5px; + width: 75%; + } + } -.placeholder-input-small { - background: #e5e5e5; - display: block; - height: 15px; - width: 200px; - margin-bottom: 5px; -} - -.placeholder-input { - background: #cccccc; - display: block; - height: 25px; - width: 200px; } 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 7a431a521f..09461bf339 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 @@ -33,7 +33,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont $scope.addTab = function(tab){ - tab.tabState = "active"; + $scope.activateTab(tab); // push new init tab to the scope addInitTab; @@ -45,7 +45,17 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont }; $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) { @@ -69,6 +79,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont $scope.contentType.groups.push({ groups: [], properties:[], + name: "", tabState: "init" }); } @@ -97,7 +108,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont }; */ - $scope.changePropertyName = function(property) { + $scope.changePropertyLabel = function(property) { var str = property.label; @@ -172,10 +183,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont $scope.dialogModel.dataTypes = $scope.dataTypes; $scope.dialogModel.view = "views/documentType/dialogs/property.html"; - $scope.dialogModel.close = function(model){ - $scope.dialogModel = null; - $scope.showDialog = false; - }; + property.dialogIsOpen = true; $scope.dialogModel.selectDataType = function(selectedDataType) { @@ -201,6 +209,11 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont }; + $scope.dialogModel.close = function(model){ + $scope.dialogModel = null; + $scope.showDialog = false; + }; + }; $scope.addItems = function(tab){ 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 deb4877630..ce6d307bea 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html @@ -25,7 +25,7 @@
- Tab +
@@ -41,12 +41,8 @@
- - - + {{ tab.name }} @@ -69,43 +65,9 @@
- - - - - -
-
  • @@ -115,17 +77,17 @@
    +
    +
    +
    +
    +
    -
    - +
    - - Preview - - Click to add property + Add property
    -
    @@ -134,9 +96,6 @@
    -
    @@ -144,14 +103,16 @@
    -
    - - +
    +
    -
    - - +
    + +
    + +
    +
    @@ -165,13 +126,13 @@
    -
    +
    - + Choose property type - + {{property.dataType.name}} Preview @@ -183,39 +144,15 @@
    - -
    -
    - -
    + + + + - - -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    + + + +