From f3663055833f5996a3b7daeb845d87cce583bf3c Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <kja@vertica.dk>
Date: Tue, 18 Aug 2015 15:10:37 +0200
Subject: [PATCH] Overhaul WIP

---
 app/less/archetype.less          | 31 +++++++++++++++++++++----------
 app/views/archetype.default.html |  6 +++---
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/less/archetype.less b/app/less/archetype.less
index bb7d403..315bed0 100644
--- a/app/less/archetype.less
+++ b/app/less/archetype.less
@@ -23,19 +23,25 @@
     }
 
     .icon {
-        color: #333;
+        color: #ddd;
+        padding: 2px;
+        font-size: 16px;
+        &:hover {
+            color: #333;
+        }
     }
 
     .fieldsetIcon {
         float: left;
-        padding-right: 4px;
+        padding: 0 4px 0 0;
+        color: #333;
+        vertical-align: text-bottom;
     }
 
     fieldset {
-        border: 1px solid #dddddd;
+        border-bottom: 1px dashed #dddddd;
         padding: 0;
         margin-bottom: 5px;
-        background-color: #f1f1f1;
         clear: both;
         display: inline-block;
         width: 100%;
@@ -103,13 +109,13 @@
             }
 
             .caret {
-                margin: 8px 1px 0 15px;
+                margin: 8px 1px 0 2px;
                 position: absolute;
 
                 &.caret-right {
                     border-bottom: 4px solid transparent;
                     border-top: 4px solid transparent;
-                    border-left: 4px solid #000000;
+                    border-left: 4px solid #ddd;
                     content: "";
                     margin-top: 6px;
                 }
@@ -117,10 +123,10 @@
 
             label {
                 margin-bottom: 0;
-                margin-left: 38px;
+                margin-left: 14px;
                 white-space: nowrap;
                 padding: 0;
-                width: ~"calc(100% - 132px)";
+                width: ~"calc(100% - 142px)";
                 position: absolute;
                 span {
                     display: block;
@@ -138,6 +144,12 @@
                 right: 15px;
                 top: 0;
             }
+            
+            &:hover {
+                .caret-right {
+                    border-left-color: #333;
+                }
+            }
         }
 
         .archetypePropertyError {
@@ -157,9 +169,8 @@
         .archetypeCollapser {
             clear: both;
             height: 100%;
-            padding-top: 12px;
+            padding: 12px 0 0 20px;
             background-color: #fff;
-            border-top: 1px solid silver;
             border-radius: 0 0 0 5px;
 
             form {
diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html
index 6f330ed..2a53e1f 100644
--- a/app/views/archetype.default.html
+++ b/app/views/archetype.default.html
@@ -22,10 +22,10 @@
                                 </a>
                             </li>
                         </ul>
-                        <i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
-                        <i class="icon icon-remove" ng-click="removeRow($index)" ng-show="canRemove()"></i>
-                        <i class="icon icon-power" ng-class="{dimmed: fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
                         <i class="icon icon-navigation handle" ng-show="canSort()"></i>
+                        <i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
+                        <i class="icon icon-power" ng-class="{dimmed: fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
+                        <i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                     </div>
                 </div>
                 <div class="archetypeCollapser animate-hide" ng-hide="model.config.enableCollapsing && isCollapsed(fieldset)">