From ea9604c2602033c2991d65802d44470543e346b5 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 23 Jun 2015 09:25:29 +0200
Subject: [PATCH] sorting: disable properties/tabs when inherited. Remove
 sorting animation.

---
 .../src/less/pages/document-type-editor.less  | 25 ++++++++++++++-----
 .../src/views/documenttype/edit.controller.js |  4 +--
 .../documenttype/views/design/design.html     | 14 +++++------
 3 files changed, 28 insertions(+), 15 deletions(-)

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 fc75244894..03ffb62f7f 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
@@ -336,7 +336,7 @@
 
   .edt-property-inherited-from {
     font-size: 11px;
-    background-color: #d9d9d9;
+    background-color: #E9E9E9;
     margin-left: 5px;
     position: absolute;
     right: 0;
@@ -371,17 +371,18 @@
 
     .edt-property {
       height: 40px;
-      margin-bottom: 10px;
       background: #E9E9E9;
       color: @grayDarker;
       border-radius: @baseBorderRadius;
       padding: 0;
       cursor: move;
       border: none;
+      display: flex;
+      align-items: center;
     }
 
     .edt-property-meta {
-      padding: 10px 0 0 10px;
+      padding: 0 0 0 10px;
       width: auto;
       flex: 1;
       .icon {
@@ -399,6 +400,17 @@
       }
     }
 
+    .property-name {
+      font-size: 12px;
+      font-weight: bold;
+      margin-right: 2px;
+    }
+
+    .item-alias {
+      font-size: 12px;
+      color: #cccccc;
+    }
+
     .edt-property-preview {
       display: none;
     }
@@ -412,6 +424,7 @@
     }
 
     .edt-property.property-is-inherited {
+      background: @grayLighter;
       cursor: auto;
       .icon-navigation {
         visibility: hidden;
@@ -427,15 +440,15 @@
   // sorting placeholders
   .ui-sortable-tabs-placeholder {
     background: transparent;
-    border: 2px solid #E9E9E9;
+    border: 1px dashed @grayLight;
     margin: 0 0 70px 0;
     border-radius: 10px;
   }
 
   .ui-sortable-properties-placeholder {
     background: transparent;
-    border: 2px solid #E9E9E9;
-    margin-bottom: 10px;
+    border: 1px dashed @grayLight;
+    margin-bottom: 5px;
   }
 
 
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 2594f493bc..f73dc00088 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
@@ -610,7 +610,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 
 	$scope.sortableOptionsTab = {
 		distance: 10,
-		revert: true,
 		tolerance: "pointer",
 		opacity: 0.7,
 		scroll: true,
@@ -618,6 +617,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		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());
 		},
@@ -628,7 +628,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 
 	$scope.sortableOptionsEditor = {
 		distance: 10,
-		revert: true,
 		tolerance: "pointer",
 		connectWith: ".edt-property-list",
 		opacity: 0.7,
@@ -637,6 +636,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
 		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());
 		},
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 f656b75ebe..dc8189a934 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,7 +1,7 @@
 <!-- TABS -->
 <ul ui-sortable="sortableOptionsTab" ng-model="contentType.groups" class="content-type-groups-list no-style-list">
 
-    <li ng-repeat="tab in contentType.groups">
+    <li ng-repeat="tab in contentType.groups" ng-class="{'edt-tab-sortable': sortingMode && !tab.inherited}">
 
         <!-- TAB INIT STATE -->
         <div class="edt-tab umb-card edt-tab-placeholder" ng-click="addTab(tab)" ng-show="tab.tabState=='init' && !sortingMode" ng-class="{'tab-state-init animated fadeIn': tab.tabState=='init'}">
@@ -20,7 +20,7 @@
         </div>
 
         <!-- TAB ACTIVE OR INACTIVE STATE -->
-        <div class="edt-tab umb-card" ng-class="{'tab-state-active':tab.tabState=='active', 'tab-state-inactive': tab.tabState=='inActive', 'tab-is-inherited': tab.inherited, 'edt-tab-handle': sortingMode}" ng-click="activateTab(tab)" ng-if="tab.tabState !== 'init'">
+        <div class="edt-tab umb-card" ng-class="{'tab-state-active':tab.tabState=='active', 'tab-state-inactive': tab.tabState=='inActive', 'tab-is-inherited': tab.inherited, 'edt-tab-handle': sortingMode && !tab.inherited}" ng-click="activateTab(tab)" ng-if="tab.tabState !== 'init'">
 
             <div class="tab-remove" ng-if="!sortingMode && tab.properties.length <= 1">
                 <i class="icon icon-trash" ng-click="removeTab($index)"></i>
@@ -29,7 +29,7 @@
             <div class="tab-title-wrapper">
 
                 <div class="tab-title">
-                    <i class="icon icon-navigation" ng-if="sortingMode"></i>
+                    <i class="icon icon-navigation" ng-if="sortingMode && !tab.inherited"></i>
                     <input class="tab-title-input" type="text" placeholder="Enter name..." ng-model="tab.name" ng-class="{'tab-title-placeholder': tab.name == ''}" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" ng-disabled="tab.inherited" umb-auto-focus umb-auto-resize />
                 </div>
 
@@ -46,7 +46,7 @@
             <div class="edt-property-group">
                 <ul class="edt-property-list no-style-list" ui-sortable="sortableOptionsEditor"
                     ng-model="tab.properties" class="no-style-list">
-                    <li ng-repeat="property in tab.properties">
+                    <li ng-class="{'edt-property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
 
                         <!-- Init property / Property placeholder / add new property -->
                         <div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="editPropertyTypeSettings(property)">
@@ -69,7 +69,7 @@
 
                         </div>
 
-                        <div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active', 'property-is-inherited': property.inherited, 'edt-property-handle': sortingMode}">
+                        <div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active', 'property-is-inherited': property.inherited, 'edt-property-handle': sortingMode && !property.inherited}">
 
                             <!-- property meta text -->
                             <div class="edt-property-meta">
@@ -92,8 +92,8 @@
 
                                 <div ng-if="sortingMode">
                                     <i class="icon icon-navigation"></i>
-                                    <span>{{ property.label }}</span>:
-                                    <span class="item-alias">{{ property.alias }}</span>
+                                    <span class="property-name">{{ property.label }}</span>
+                                    <span class="item-alias">({{ property.alias }})</span>
                                 </div>
 
                             </div>