From 838699d884790cfc7f204cdfd1335c1aa2ef2b4a Mon Sep 17 00:00:00 2001
From: per ploug <pph@umbraco.dk>
Date: Tue, 10 Jun 2014 15:05:33 +0200
Subject: [PATCH] Variants button+ menu changes

---
 src/Umbraco.Web.UI.Client/src/less/panel.less | 20 +++---
 .../src/views/content/edit.html               | 61 ++++++++++++++++---
 .../views/directives/umb-content-name.html    |  2 +-
 3 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index 70e9d6fdb6..b2613724e7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -48,7 +48,6 @@
   margin: 15px 0 0 20px;
   padding: 3px 5px;
   height: auto;
-  width: 100%;
   border: 1px solid @grayLighter;
 }
 
@@ -268,12 +267,18 @@
 // to be the stying for 'editors' 
 .umb-segment-selector {
     position:absolute;    
-    right:0px;
+    left:20px;
     z-index:2345;
     top:15px;
-    /*top:-500px;  to hide it completely, we cannot set display:none as normal css trans don't work then (could use keyframes though but is more code) */
-    /*opacity: 0;*/     
+    width: 100%;
 }
+
+.umb-segment-selector .dropdown-toggle:hover *, 
+.umb-segment-selector .dropdown-toggle{
+  text-decoration: none !important;
+  outline: none;
+}
+
 /*.umb-panel-header .umb-content-headline:hover .umb-segment-selector {    
     top:15px;
     transition: opacity .5s ease-in;
@@ -284,10 +289,11 @@
     padding: 0;
     border-radius: 0;
     box-shadow: none;
+    width:100%;
 }
 
-.umb-segment-selector .icon-add {
-    color:@green;
+.umb-segment-selector ul i {
+    color:@blue;
 }
 
 .umb-segment-selector li.trashed a, .umb-segment-selector li.trashed i, .umb-segment-selector li.trashed span{
@@ -301,4 +307,4 @@
 }
 .umb-content-headline > small span{
     color:@blue;
-}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
index 74aa693b2d..f3ff8d90c7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
@@ -9,7 +9,10 @@
 
             <div class="span7 umb-content-headline">
                 
-                <small ng-if="content.masterDocId != null">Variant: <span>{{content.variantKey}}</span></small>
+                <!--
+                <small ng-if="content.masterDocId != null">
+                    Variant: <span>{{content.variantKey}}</span>
+                </small>
 
                 <div class="umb-segment-selector" ng-if="content.masterDocId != null">
                     <a class="btn" href="" ng-click="toMasterDoc()">
@@ -17,28 +20,68 @@
                         <span class="caret caret-reversed"></span>
                     </a>
                 </div>
+-->
 
-                <div class="umb-segment-selector" ng-if="content.variants.length > 0">
+
+                <div class="umb-segment-selector" 
+                    ng-if="content.variants.length > 0 || content.masterDocId != null">
+                    
+                    <a href style="float: right" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
+                        <i class="icon-globe"></i>
+                        <span class="caret"></span>
+                    </a>
+
+
+<!--
                     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                         <small>Variants</small>
                         <span class="caret"></span>
                     </a>
-                    <ul class="dropdown-menu umb-actions pull-right" role="menu">
-                        <li ng-repeat="item in content.variants" ng-class="{'trashed' : item.isTrashed}">
+-->                    
+                    <ul class="dropdown-menu umb-actions" role="menu">
+                        
+                        <li class="action seb" ng-if="content.masterDocId != null">
+                            <a style="padding-left: 20px" href="" ng-click="toMasterDoc()">
+                                <i class="icon icon-reply-arrow"></i> 
+
+                                <div class="menu-label ng-binding">
+                                    Back to master document
+                                    
+                                    <small>
+                                         
+                                    </small>
+                                </div>
+                            </a>
+                        </li>
+
+                        <li
+                            class="action" 
+                            ng-repeat="item in content.variants" 
+                            ng-class="{'trashed' : item.isTrashed}">
                             
                             <ng-form name="itemCompare">
                                 
                                 <a href=""
+                                    style="padding-left: 20px"
                                    ng-attr-title="{{item.exists ? 'Edit variant' : 'Create variant' }}"
                                    ng-click="selectVariant(item)">
-
-                                    <i class="icon" ng-class="item.isTrashed ? 'icon-trash' : item.exists ? 'icon-edit' : 'icon-add'"></i>
+                                    
+                                    <i class="icon" 
+                                        ng-class="item.isTrashed ? 'icon-trash' : item.exists ? 'icon-edit' : 'icon-add'"></i>
+                                    
 
                                     <div class="menu-label ng-binding">
-                                        {{item.name}}
-                                        <small ng-if="item.lastUpdated">Updated: {{item.lastUpdated | date : 'medium'}}</small>
-                                        <small ng-if="!item.lastUpdated">Create new variant</small>
+                                        {{content.name}} - <span style="opacity: 0.8">{{item.name}}</span>
+
+                                        <small 
+                                            ng-if="item.lastUpdated">Updated: {{item.lastUpdated | date : 'medium'}}
+                                        </small>
+                                        
+                                        <small 
+                                            ng-if="!item.lastUpdated">Create new variant
+                                        </small>
                                     </div>
+
                                 </a>
                             </ng-form>
                         </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-content-name.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-content-name.html
index 85005093e0..19a0e7a0d5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-content-name.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-content-name.html
@@ -9,7 +9,7 @@
             <input type="text"
                    name="name"
                    localize="placeholder"
-                   class="umb-headline"
+                   class="umb-headline input-block-level"
                    localize="placeholder"
                    select-on-focus
                    placeholder="{{placeholder}}"