From f450abb5c28514ffc3eee239dd806162e6700eb2 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 30 Aug 2018 19:42:30 +0200
Subject: [PATCH] wip clean up doc type editor

---
 .../less/components/umb-group-builder.less    | 126 ++++++------------
 .../views/components/umb-groups-builder.html  |  71 ++++------
 .../Umbraco/config/lang/en_us.xml             |   3 +-
 3 files changed, 62 insertions(+), 138 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index 2eb2735279..53531a2f4a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -8,13 +8,12 @@
 
 .umb-group-builder__group {
   min-height: 86px;
-  margin: 50px 0 0 0;
-  border: 2px solid @gray-7;
-  border-radius: 0 10px 10px 10px;
-  padding: 10px 10px 5px 10px;
+  border: 1px solid transparent;
+  border-radius: @baseBorderRadius;
   box-sizing: border-box;
   background-color: @white;
-  position:relative;  
+  position: relative;
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
 }
 
 .umb-group-builder__group.-active {
@@ -24,6 +23,7 @@
 .umb-group-builder__group.-inherited {
   border-color: @gray-9;
   animation: fadeIn 0.5s;
+  box-shadow: none;
 }
 
 .umb-group-builder__group.-placeholder {
@@ -32,10 +32,11 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border: 1px dashed @gray-8;
+  border: 1px dashed @gray-7;
   color: @turquoise-d1;
   font-weight: bold;
   position: relative;
+  box-shadow: none;
 }
 
 .umb-group-builder__group.-sortable {
@@ -57,9 +58,8 @@
 }
 
 .umb-group-builder__group-remove {
-  position: absolute;
-  top: -30px;
-  right: 20px;
+  position: relative;
+  margin-left: auto;
   font-size: 18px;
 }
 
@@ -71,28 +71,15 @@
 .umb-group-builder__group-title-wrapper {
   display: flex;
   align-items: center;
-  margin-left: -12px;
-  margin-top: -55px;
-}
-
-.umb-group-builder__group-title-wrapper.-placeholder {
-  position: absolute;
-  left: -1px;
-  top: -44px;
-  margin-left: 0;
-  margin-top: 0;
+  border-bottom: 1px solid @gray-9;
+  padding: 10px 15px;
 }
 
 .umb-group-builder__group-title {
-  padding: 5px 9px 0 9px;
-  height: 38px;
-  background: @white;
-  border: 2px solid @gray-7;
-  border-bottom: none;
-  border-radius: 10px 10px 0 0;
   font-weight: bold;
   display: flex;
   align-items: center;
+  color: @black;
 }
 
 .umb-group-builder__group-title-icon {
@@ -117,10 +104,14 @@ input.umb-group-builder__group-title-input {
   border-color: transparent;
   background: transparent;
   font-weight: bold;
-  color: @gray-3;
+  color: @black;
   margin-bottom: 0;
 }
 
+input.umb-group-builder__group-title-input:disabled:hover {
+  border: none;
+}
+
 .umb-group-builder__group-title-input:hover {
   border-color: @inputBorder;
 }
@@ -131,17 +122,16 @@ input.umb-group-builder__group-title-input {
 
 .umb-group-builder__group-inherited-label {
   font-size: 13px;
-  color: @gray-8;
   display: inline-block;
   position: relative;
   top: 2px;
-  margin-left: 10px;
 }
 
 .umb-group-builder__group-sort-order {
     display: flex;
     align-items: center;
     margin-left: 10px;
+    margin-left: auto;
 }
 
 /* ---------- PROPERTIES ---------- */
@@ -149,7 +139,7 @@ input.umb-group-builder__group-title-input {
 .umb-group-builder__properties {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 15px;
   min-height: 35px; // the height of a sortable property
 }
 
@@ -157,35 +147,23 @@ input.umb-group-builder__group-title-input {
   position: relative;
   display: flex;
   flex-flow: row;
-  margin-bottom: 5px;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  padding: 5px;
   box-sizing: border-box;
+  border-bottom: 1px solid @gray-10; 
+  padding: 10px 0;
 }
 
-.umb-group-builder__property:hover {
-  border: 1px dashed @inputBorder;
+.umb-group-builder__property:first-of-type {
+  padding-top: 0;
 }
 
-.umb-group-builder__property.-placeholder {
-  background: @white;
-  border: 1px dashed @gray-8;
-  border-radius: 5px;
-  cursor: pointer;
-  align-items: center;
-  animation: fadeIn 0.5s;
+.umb-group-builder__property:last-of-type {
+  margin-bottom: 15px;
 }
 
 .umb-group-builder__property.-inherited {
-  border: transparent;
   animation: fadeIn 0.5s;
 }
 
-.umb-group-builder__property.-inherited:hover {
-  border: transparent;
-}
-
 .umb-group-builder__property.-locked {
   border: transparent;
   animation: fadeIn 0.5s;
@@ -198,14 +176,16 @@ input.umb-group-builder__group-title-input {
 .umb-group-builder__property.-sortable,
 .umb-group-builder__property.-sortable-locked {
     min-height: 35px;
-    border-radius: 5px;
+    border-radius: @baseBorderRadius;
     border: none;
     animation: none;
     align-items: center;
+    padding: 5px 10px;
+    margin-bottom: 5px;
 }
 
 .umb-group-builder__property.-sortable {
-  background: @gray-9;
+  background: @gray-10;
   color: @gray-1;
   cursor: move;
 }
@@ -217,16 +197,17 @@ input.umb-group-builder__group-title-input {
 
 
 .umb-group-builder__property-meta {
-  flex: 0 0 175px;
+  flex: 0 0 250px;
   margin-right: 20px;
 }
 
 .umb-group-builder__property-meta.-full-width {
   flex: 1;
+  margin-right: 0;
 }
 
 .umb-group-builder__property-meta-alias {
-  font-size: 10px;
+  font-size: 12px;
   color: @gray-3;
   word-break: break-word;
   line-height: 1.5;
@@ -273,7 +254,7 @@ input.umb-group-builder__group-title-input {
   overflow: hidden;
   position: relative;
   padding: 35px 10px 25px 10px;
-  background: url("../img/checkered-background-20.png");
+  background-color: @gray-10;
 }
 
 .umb-group-builder__property-preview:hover {
@@ -357,42 +338,6 @@ input.umb-group-builder__group-title-input {
     margin-right: 3px;
 }
 
-
-/* ---------- PLACEHOLDER BOX ---------- */
-
-.umb-group-builder__placeholder-box {
-  background: @gray-9;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  font-weight: bold;
-  color: @turquoise-d1;
-}
-
-.umb-group-builder__placeholder-box.-input {
-  height: 10px;
-  margin-bottom: 5px;
-}
-
-.umb-group-builder__placeholder-box.-input-small {
-  height: 5px;
-  margin-bottom: 5px;
-  width: 25%;
-}
-
-.umb-group-builder__placeholder-box.-text-full-width {
-  height: 3px;
-  margin-bottom: 3px;
-}
-
-.umb-group-builder__placeholder-box.-text-short {
-  height: 3px;
-  margin-bottom: 3px;
-  width: 75%;
-}
-
 /* ---------- SORTABLE ---------- */
 
 .umb-group-builder__group-sortable-placeholder {
@@ -418,6 +363,11 @@ input.umb-group-builder__group-title-input {
   text-align: center;
 }
 
+input.umb-group-builder__group-sort-value {
+  margin-bottom: 0;
+  margin-left: auto;
+}
+
 
 /* ---------- DIALOGS ---------- */
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index 4aa0072b6f..1b55efd1cc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -38,29 +38,12 @@
 
             <!-- TAB INIT STATE -->
             <a href="" class="umb-group-builder__group -placeholder" hotkey="alt+shift+t" ng-click="addGroup(tab)" ng-if="tab.tabState=='init' && !sortingMode" data-element="group-add">
-
-                <div class="umb-group-builder__group-title-wrapper -placeholder">
-                  <div class="umb-group-builder__group-title -placeholder"></div>
-                </div>
-
-                <localize ng-if="model.groups.length === 1" key="contentTypeEditor_addNewTab"></localize>
-                <localize ng-if="model.groups.length > 1" key="contentTypeEditor_addAnotherTab"></localize>
-
+                <localize key="contentTypeEditor_addGroup"></localize>
             </a>
 
             <!-- TAB ACTIVE OR INACTIVE STATE -->
             <div class="umb-group-builder__group" ng-if="tab.tabState !== 'init'" ng-class="{'-active':tab.tabState=='active', '-inherited': tab.inherited, 'umb-group-builder__group-handle -sortable': sortingMode && !tab.inherited}" ng-click="activateGroup(tab)">
 
-                <div class="umb-group-builder__group-remove" ng-if="!sortingMode && tab.properties.length <= 1">
-                    <i class="icon-trash" ng-click="togglePrompt(tab)"></i>
-                    <umb-confirm-action
-                        ng-if="tab.deletePrompt"
-                        direction="left"
-                        on-confirm="removeGroup($index)"
-                        on-cancel="hidePrompt(tab)">
-                    </umb-confirm-action>
-                </div>
-
                 <div class="umb-group-builder__group-title-wrapper">
 
                     <ng-form name="groupNameForm" data-element="group-name">
@@ -89,6 +72,15 @@
                         </div>
                     </ng-form>
 
+                    <div class="umb-group-builder__group-inherited-label" ng-if="tab.inherited">
+                        <i class="icon icon-merge"></i>
+                        <localize key="contentTypeEditor_inheritedFrom"></localize>: {{ tab.inheritedFromName }}
+                        <span ng-repeat="contentTypeName in tab.parentTabContentTypeNames">
+                            <a href="#/settings/documentTypes/edit/{{tab.contentTypeId}}">{{ contentTypeName }}</a>
+                            <span ng-if="!$last">, </span>
+                        </span>
+                    </div>
+
                     <ng-form name="groupSortOrderForm">
                         <div class="umb-group-builder__group-sort-order" ng-if="sortingMode">
                             <input name="groupSortOrder" type="number" class="umb-property-editor-tiny" style="margin-bottom: 0;" ng-model="tab.sortOrder" ng-disabled="tab.inherited" on-blur="changeSortOrderValue(tab)" required />
@@ -101,14 +93,14 @@
                         </div>
                     </ng-form>
 
-                    <div class="umb-group-builder__group-inherited-label" ng-if="tab.inherited">
-                        <i class="icon icon-merge"></i>
-                        <localize key="contentTypeEditor_inheritedFrom"></localize> {{ tab.inheritedFromName }}
-
-                        <span ng-repeat="contentTypeName in tab.parentTabContentTypeNames">
-                            <a href="#/settings/documentTypes/edit/{{tab.contentTypeId}}">{{ contentTypeName }}</a>
-                            <span ng-if="!$last">, </span>
-                        </span>
+                    <div class="umb-group-builder__group-remove" ng-if="!sortingMode">
+                        <i class="icon-trash" ng-click="togglePrompt(tab)"></i>
+                        <umb-confirm-action
+                            ng-if="tab.deletePrompt"
+                            direction="left"
+                            on-confirm="removeGroup($index)"
+                            on-cancel="hidePrompt(tab)">
+                        </umb-confirm-action>
                     </div>
 
                 </div>
@@ -117,34 +109,17 @@
 
                     <li data-element="property-{{property.alias}}" ng-class="{'umb-group-builder__property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
 
-                        <!-- Init property / Property placeholder / add new property -->
+                        <!-- Add new property -->
                         <a href=""
                             data-element="property-add"
-                            class="umb-group-builder__property -placeholder"
+                            class="btn btn-info"
                             ng-if="property.propertyState=='init' && !sortingMode"
-                            ng-class="{'-placeholder': property.propertyState=='init'}"
                             hotkey="alt+shift+p"
                             hotkey-when="{{tab.tabState === 'active' && property.propertyState=='init'}}"
                             ng-click="addProperty(property, tab)"
                             on-focus="activateGroup(tab)"
                             focus-when="{{property.focus}}">
-
-                            <div class="umb-group-builder__property-meta">
-                                <div class="umb-group-builder__placeholder-box -input-small"></div>
-                                <div class="umb-group-builder__placeholder-box -input"></div>
-                                <div class="umb-group-builder__placeholder-box-group">
-                                    <div class="umb-group-builder__placeholder-box -text-full-width"></div>
-                                    <div class="umb-group-builder__placeholder-box -text-full-width"></div>
-                                    <div class="umb-group-builder__placeholder-box -text-short"></div>
-                                </div>
-                            </div>
-
-                            <div class="umb-group-builder__property-preview umb-group-builder__placeholder-box">
-                                <localize key="contentTypeEditor_addProperty"></localize>
-                            </div>
-
-                            <div class="umb-group-builder__property-actions"></div>
-
+                            <localize key="contentTypeEditor_addProperty"></localize>
                         </a>
 
                         <div class="umb-group-builder__property" ng-if="property.propertyState!=='init'" ng-class="{'-active': property.dialogIsOpen, '-active': property.propertyState=='active', '-inherited': property.inherited, '-locked': property.locked, 'umb-group-builder__property-handle -sortable': sortingMode && !property.inherited, '-sortable-locked': sortingMode && property.inherited}">
@@ -194,11 +169,11 @@
                                     </div>
                                 </ng-form>
 
-                                <div ng-if="sortingMode">
+                                <div ng-if="sortingMode" class="flex items-center">
                                     <i class="icon icon-navigation" ng-if="!property.inherited"></i>
                                     <span class="umb-group-builder__property-meta-label">{{ property.label }}</span>
                                     <span class="umb-group-builder__property-meta-alias">({{ property.alias }})</span>
-                                    <span ng-show="sortingMode"><input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="property.sortOrder" ng-disabled="property.inherited" /></span>
+                                    <input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="property.sortOrder" ng-disabled="property.inherited" />
                                 </div>
 
                             </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 5ab335429d..025dd3767a 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -1634,8 +1634,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <area alias="contentTypeEditor">
         <key alias="compositions">Compositions</key>
         <key alias="noTabs">You have not added any tabs</key>
-        <key alias="addNewTab">Add new tab</key>
-        <key alias="addAnotherTab">Add another tab</key>
+        <key alias="addGroup">Add Group</key>
         <key alias="inheritedFrom">Inherited from</key>
         <key alias="addProperty">Add property</key>
         <key alias="requiredLabel">Required label</key>