From 6e4f6a7bae526c9b5d7466dd4da67410df2a5873 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 20 May 2015 10:23:37 +0200
Subject: [PATCH] Html and styles for toolbar

---
 .../src/less/pages/documentTypeEditor.less    | 35 ++++++++++++++++---
 .../src/views/documenttype/edit.html          | 19 +++++++++-
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less b/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less
index 53c96eb246..3a2990e74f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/pages/documentTypeEditor.less
@@ -20,10 +20,9 @@
   }
 
   .editors-document-type-canvas{
-    padding: 40px 80px;
+    padding: 0 80px;
     @media screen and (max-width: 1500px) {
-      padding-left: 0;
-      padding-right: 0;
+      padding: 0;
     }
   }
 
@@ -40,12 +39,40 @@
 	display: none;
   }
 
-  .no-style-list{
+  .no-style-list {
 	padding: 0;
 	margin: 0;
 	list-style: none;
   }
 
+  /* ---------- TOOLBAR ---------- */
+
+  .toolbar {
+    padding: 20px;
+    width: 100%;
+    list-style: none;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+    .toolbar-tools {
+      float: right;
+      .toolbar-tool {
+        display: inline-block;
+        padding: 10px 15px;
+        &:hover {
+          text-decoration: none;
+          background: @grayLighter;
+        }
+        &:focus {
+          text-decoration: none;
+        }
+        .icon {
+          font-size: 25px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
   /* ---------- TABS ---------- */
 
   .edt-tab{
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
index ce6d307bea..e19a73e6c5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
@@ -9,13 +9,30 @@
                 name="contentType.name"
                 menu="page.menu"
                 actions="page.actions">
-
         </umb-editor-header>
 
         <umb-editor-container class="editors-document-type-container">
 
             <div class="editors-document-type-canvas">
 
+                <!-- TOOLBAR -->
+                <div class="toolbar clearfix">
+                    <div class="toolbar-tools">
+
+                        <a href="" class="toolbar-tool">
+                            <i class="icon icon-merge"></i>
+                            <span>Compositions</span>
+                        </a>
+
+                        <a href="" class="toolbar-tool">
+                            <i class="icon icon-navigation"></i>
+                            <span>Reorder</span>
+                        </a>
+
+                    </div>
+                </div>
+
+                <!-- TABS -->
                 <ul ui-sortable="sortableOptionsTab" ng-model="contentType.groups" class="no-style-list">
 
                     <li ng-repeat="tab in contentType.groups">