From 2d337923a3c4f94be387eb893c7478fb6497ef9f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 8 Feb 2018 13:42:42 +0100
Subject: [PATCH] adjustments to editor header layout

---
 .../src/less/components/editor.less           |   2 +-
 .../components/umb-editor-navigation.less     |   6 +
 src/Umbraco.Web.UI.Client/src/less/panel.less |  17 ++-
 .../src/less/variables.less                   |   2 +-
 .../components/editor/umb-editor-header.html  | 132 ++++++++----------
 .../editor/umb-editor-navigation.html         |  30 ++--
 6 files changed, 89 insertions(+), 100 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
index b5006caaf9..285dd219af 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -71,7 +71,7 @@
 	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.16);
 	width: 100%;
 	box-sizing: border-box;
-	height: 60px;
+	height: @editorHeaderHeight;
 }
 
 .umb-editor-header__back {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
index e7cde9e909..267ea1b5b0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
@@ -13,6 +13,11 @@
   min-width: 70px;
   border-right: 1px solid @gray-9;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
 
 .umb-sub-views-nav-item:focus {
@@ -36,6 +41,7 @@
   font-size: 24px;
   display: block;
   text-align: center;
+  margin-bottom: 5px;
 }
 
 .umb-sub-views-nav-item-text {
diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index 75df57ec06..9b439c2d60 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -373,7 +373,7 @@
 .umb-panel-header-icon {
   cursor: pointer;
   margin-right: 5px;
-  height: 55px;
+  height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -381,7 +381,7 @@
   border: 1px solid @gray-8;
   animation: fadeIn 0.5s;
   border-radius: 3px;
-  width: 55px;
+  width: 50px;
 }
 
 .umb-panel-header-title-wrapper {
@@ -418,7 +418,7 @@
 }
 
 .umb-panel-header-icon .icon {
-  font-size: 35px;
+  font-size: 30px;
   color: @gray-7;
 }
 
@@ -449,8 +449,8 @@ input.umb-panel-header-description {
   margin-bottom: 0;
   font-size: 13px;
   box-sizing: border-box;
-  height: 25px;
-  line-height: 25px;
+  height: 22px;
+  line-height: 22px;
   width: 100%;
   &:hover {
     background: @white;
@@ -460,8 +460,7 @@ input.umb-panel-header-description {
 
 .umb-panel-header-locked-description {
     font-size: 12px;
-    margin-left: 2px;
-    margin-top: 3px;
-    height: 25px;
-    line-height: 25px;
+    margin-top: 2px;
+    height: 22px;
+    line-height: 22px;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 6223a88591..0c93ad027b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -107,7 +107,7 @@
 @bodyBackground:        @gray-10;
 @textColor:             @gray-2;
 
-@editorHeaderHeight:    60px;
+@editorHeaderHeight:    70px;
 @editorFooterHeight:    50px;
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index 85e81e5e99..9cf0a47217 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -8,7 +8,7 @@
             </a>
         </div>
 
-        <div style="flex: 1;">
+        <div class="flex items-center" style="flex: 1;">
 
             <ng-form data-element="editor-icon" name="iconForm">
                 <div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}"
@@ -20,43 +20,68 @@
                 </div>
             </ng-form>
 
-            <div class="umb-editor-header__name-wrapper">
-                <ng-form name="headerNameForm">
-                    <input
-                        data-element="editor-name-field"
-                        title="{{key}}"
-                        type="text"
-                        class="umb-editor-header__name-input"
-                        localize="placeholder"
-                        placeholder="@placeholders_entername"
-                        name="headerName"
-                        ng-show="!nameLocked"
-                        ng-model="name"
-                        ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
-                        umb-auto-focus
-                        val-server-field="Name"
-                        required />
-                </ng-form>
-                
-                <a ng-if="variants.length > 0" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
-                    <span>{{vm.currentVariant.cultureDisplayName}}</span>
-                    <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
-                </a>
+            <div style="flex: 1 1 auto;">
 
-                <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
-                    <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.current}" ng-repeat="variant in variants">
-                        <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
-                            <span class="umb-variant-switcher__name">{{variant.cultureDisplayName}}</span>
-                            <span class="umb-variant-switcher__state">{{variant.state}}</span>
-                        </a>
-                        <div ng-if="splitViewOpen !== true" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
-                    </umb-dropdown-item>
-                </umb-dropdown>
+                <div class="umb-editor-header__name-wrapper">
+                    <ng-form name="headerNameForm">
+                        <input
+                            data-element="editor-name-field"
+                            title="{{key}}"
+                            type="text"
+                            class="umb-editor-header__name-input"
+                            localize="placeholder"
+                            placeholder="@placeholders_entername"
+                            name="headerName"
+                            ng-show="!nameLocked"
+                            ng-model="name"
+                            ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
+                            umb-auto-focus
+                            val-server-field="Name"
+                            required />
+                    </ng-form>
+
+                    <umb-generate-alias
+                        data-element="editor-alias"
+                        class="umb-panel-header-alias"
+                        ng-if="!hideAlias"
+                        alias="$parent.alias"
+                        alias-from="$parent.name"
+                        enable-lock="true"
+                        server-validation-field="Alias">
+                    </umb-generate-alias>
+                    
+                    <a ng-if="variants.length > 0" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
+                        <span>{{vm.currentVariant.cultureDisplayName}}</span>
+                        <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
+                    </a>
+
+                    <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
+                        <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.current}" ng-repeat="variant in variants">
+                            <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
+                                <span class="umb-variant-switcher__name">{{variant.cultureDisplayName}}</span>
+                                <span class="umb-variant-switcher__state">{{variant.state}}</span>
+                            </a>
+                            <div ng-if="splitViewOpen !== true" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
+                        </umb-dropdown-item>
+                    </umb-dropdown>
+
+                </div>
+
+                <div class="umb-panel-header-name" ng-if="nameLocked" title="{{key}}">{{ name }}</div>
+
+                <input
+                    data-element="editor-description"
+                    type="text"
+                    class="umb-panel-header-description"
+                    localize="placeholder"
+                    placeholder="@placeholders_enterDescription"
+                    ng-if="!hideDescription && !descriptionLocked"
+                    ng-model="$parent.description" />
+        
+                <div class="umb-panel-header-locked-description" ng-show="descriptionLocked">{{ description }}</div>
 
             </div>
 
-            <div class="umb-panel-header-name" ng-if="nameLocked" title="{{key}}">{{ name }}</div>
-
         </div>
 
         <div ng-if="splitViewOpen" style="margin-left: 20px;">
@@ -82,44 +107,6 @@
 
     </div>
 
-    <!--
-
-    <umb-generate-alias
-        data-element="editor-alias"
-        class="umb-panel-header-alias"
-        ng-if="!hideAlias"
-        alias="$parent.alias"
-        alias-from="$parent.name"
-        enable-lock="true"
-        server-validation-field="Alias">
-    </umb-generate-alias>
-
-    <input
-        data-element="editor-description"
-        type="text"
-        class="umb-panel-header-description"
-        localize="placeholder"
-        placeholder="@placeholders_enterDescription"
-        ng-if="!hideDescription && !descriptionLocked"
-        ng-model="$parent.description" />
-
-    <div class="umb-panel-header-locked-description" ng-show="descriptionLocked">{{ description }}</div>
-
-    <div class="umb-editor-header__actions-menu">
-        <umb-editor-menu
-            data-element="editor-actions"
-            ng-if="menu.currentNode"
-            current-node="menu.currentNode"
-            current-section="{{menu.currentSection}}">
-        </umb-editor-menu>
-    </div>
-
-    <umb-tabs-nav
-        data-element="editor-tabs"
-        ng-if="tabs"
-        model="tabs">
-    </umb-tabs-nav>
-
     <umb-overlay
         data-element="editor-overlay-icon-picker"
         ng-if="dialogModel.show"
@@ -127,6 +114,5 @@
         position="right"
         view="dialogModel.view">
     </umb-overlay>
-    -->
 
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
index 55afc72aae..26cc7c794d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
@@ -1,16 +1,14 @@
-<div>
-  <ul class="umb-sub-views-nav" ng-if="showNavigation">
-      <li ng-repeat="item in navigation">
-         <a data-element="sub-view-{{item.alias}}"
-         tabindex="-1"
-         class="umb-sub-views-nav-item"
-         href=""
-         ng-click="clickNavigationItem(item)"
-         hotkey="{{$index+1}}"
-         ng-class="{'is-active': item.active, '-has-error': item.hasError}">
-            <i class="icon {{ item.icon }}"></i>
-            <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
-         </a>
-      </li>
-  </ul>
-</div>
+<ul class="umb-sub-views-nav" ng-if="showNavigation">
+    <li ng-repeat="item in navigation">
+        <a data-element="sub-view-{{item.alias}}"
+        tabindex="-1"
+        class="umb-sub-views-nav-item"
+        href=""
+        ng-click="clickNavigationItem(item)"
+        hotkey="{{$index+1}}"
+        ng-class="{'is-active': item.active, '-has-error': item.hasError}">
+          <i class="icon {{ item.icon }}"></i>
+          <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
+        </a>
+    </li>
+</ul>