Clean up header + used directives - remove $parent, set more focus on name field, place alias inside name field to show relation.

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -127,8 +127,6 @@ input.umb-group-builder__group-title-input {
 
 .umb-group-builder__group-title-input.-placeholder {
   border: 1px dashed #979797 !important;
-  min-width: 110px;
-  width: 0;
 }
 
 .umb-group-builder__group-inherited-label {

src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less

@@ -2,6 +2,12 @@
   font-size: 13px;
   color: #ccc;
   position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.umb-locked-field__toggle {
+  margin-right: 3px;
 }
 
 .umb-locked-field__toggle:hover,
@@ -11,17 +17,15 @@
 
 .umb-locked-field__lock-icon {
   color: #ccc;
-  vertical-align: top;
+  //vertical-align: top;
 }
 
 input.umb-locked-field__input {
   background: transparent;
   border: none;
-  line-height: 13px;
   font-size: 13px;
   padding: 0;
-  margin-bottom: 2px;
-  min-width: 125px;
+  margin-bottom: 0;
   color: #ccc;
 }
 

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -121,10 +121,12 @@
     line-height: 22px;
 }
 
+/*
 .umb-panel-header i {
     font-size: 13px;
     vertical-align: middle;
 }
+*/
 
 .umb-panel-header-meta {
     height: 50px;
@@ -362,15 +364,14 @@
 .umb-panel-meta {
   display: flex;
   align-items: center;
+  flex: 1;
 }
 
-// icon
-
 .umb-panel-header-icon {
   cursor: pointer;
   margin-right: 5px;
-  width: 50px;
-  height: 50px;
+  //width: 50px;
+  height: 55px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -378,6 +379,19 @@
   border: 1px solid #ECECEC;
   border-radius: 5px;
   animation: fadeIn 0.5s;
+  flex: 0 0 55px;
+}
+
+.umb-panel-header-title-wrapper {
+  flex: 1;
+  margin-right: 70px;
+  position: relative;
+}
+
+.umb-panel-header-alias {
+  position: absolute;
+  top: 5px;
+  right: 10px;
 }
 
 .umb-panel-header-icon.-placeholder {
@@ -395,24 +409,16 @@
   font-size: 10px;
 }
 
-.umb-panel-header-name-wrapper {
-  display: flex;
-  align-items: center;
-}
-
 input.umb-panel-header-name {
-  height: 35px !important;
-  min-width: 0;
-  line-height: 35px;
-  padding-top: 0;
-  padding-bottom: 0;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  background: transparent;
-  font-size: 16px;
+  border-color: #ECECEC;
+  font-size: 15px;
   color: #000000;
-  margin: 0 5px 0 0;
+  margin-bottom: 0;
   font-weight: bold;
+  box-sizing: border-box;
+  height: 30px;
+  line-height: 30px;
+  width: 100%;
   &:hover {
     background: #ffffff;
     border: 1px solid #cccccc;
@@ -420,29 +426,19 @@ input.umb-panel-header-name {
 }
 
 input.umb-panel-header-name.name-is-empty {
-  min-width: 200px;
   border: 1px dashed @grayLight;
   background: #ffffff;
 }
 
-.umb-panel-header-alias {
-  font-size: 13px;
-  color: #cccccc;
-  cursor: pointer;
-  .icon {
-    margin-right: 5px;
-  }
-}
-
 input.umb-panel-header-description {
   background: transparent;
   border-color: transparent;
-  width: 35%;
-  min-width: 300px;
-  margin: 0;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  margin-bottom: 0;
   font-size: 12px;
+  box-sizing: border-box;
+  height: 25px;
+  line-height: 25px;
+  width: 100%;
   &:hover {
     background: #ffffff;
     border-color: #cccccc;

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html

@@ -17,13 +17,12 @@
                         ng-model="name">
                 </umb-content-name>
                 -->
-                <div class="umb-panel-header-name-wrapper">
-                    <!-- ng-show and umb-auto-focus does not work together - we will have to find a better solution --->
-                    <input ng-if="name!==undefined" type="text" class="umb-panel-header-name" ng-model="$parent.name" placeholder="Enter name..." ng-class="{'name-is-empty': name===null || name===''}" umb-auto-resize umb-auto-focus />
-                    <umb-generate-alias ng-show="alias!==undefined" alias="alias" alias-from="name" enable-lock="true"></umb-generate-alias>
-                </div>
+                <input type="text" class="umb-panel-header-name" placeholder="Enter name..." ng-show="name!==undefined" ng-disabled="content.isSystem == 1" ng-model="name"  ng-class="{'name-is-empty': name===null || name===''}" umb-auto-focus />
+
+                <umb-generate-alias class="umb-panel-header-alias" ng-show="alias!==undefined" alias="alias" alias-from="name" enable-lock="true"></umb-generate-alias>
 
                 <input type="text" class="umb-panel-header-description" placeholder="Enter description..." ng-show="description!==undefined" ng-model="description" />
+
             </div>
 
         </div>
@@ -35,10 +34,6 @@
             <umb-editor-navigation ng-if="navigation" navigation="navigation"></umb-editor-navigation>
         </div>
 
-        <!--
-        <div ng-transclude></div>
-        -->
-
     </div>
 
     <umb-overlay

src/Umbraco.Web.UI.Client/src/views/components/umb-generate-alias.html

@@ -1,9 +1,10 @@
 <div>
-    <span ng-if="!enableLock">{{ alias }}</span>
+    <span ng-show="!enableLock">{{ alias }}</span>
+    <div ng-show="enableLock">
     <umb-locked-field
-      ng-if="enableLock"
-      locked="$parent.locked"
-      ng-model="$parent.alias"
-      placeholder-text="$parent.placeholderText">
+      locked="locked"
+      ng-model="alias"
+      placeholder-text="placeholderText">
     </umb-locked-field>
+    </div>
 </div>