From 18935b4a696231b1007c65e05ecc2d0ca5755446 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 21 Sep 2017 13:41:47 +0200
Subject: [PATCH] update control icons and do only show them on fieldset hover

---
 app/less/archetype.less          | 35 +++++++++++++++++++++-----------
 app/views/archetype.default.html |  8 ++++----
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/less/archetype.less b/app/less/archetype.less
index f6303e1..b337078 100644
--- a/app/less/archetype.less
+++ b/app/less/archetype.less
@@ -36,7 +36,6 @@
     .fieldsetIcon {
         float: left;
         padding: 0 10px 0 0;
-        color: #333;
         vertical-align: text-bottom;
     }
 
@@ -152,10 +151,11 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                 }
-                &.dimmed {
-                    i, span {
-                        color: #d9d9d9 !important;
-                    }
+            }
+
+            &.dimmed {
+                label {
+                    color: #d9d9d9 !important;
                 }
             }
 
@@ -166,6 +166,10 @@
                 top: 50%;
                 margin-top: -15px;
                 padding: 0;
+                opacity: 0;
+                transition: opacity .15s ease-in-out;
+                -moz-transition: opacity .15s ease-in-out;
+                -webkit-transition: opacity .15s ease-in-out;
 
                 .icon {
                     display: inline-block;
@@ -179,28 +183,35 @@
                     font-size: 16px;
                     text-align: center;
                     margin-left: 4px;
+
                     &:hover {
-                        color: #333;
+                        background: #35c786;
+                        border-color: #35c786;
+                        color: white;
                     }
-                    &.icon-delete:hover {
-                        color: #b94a48;
+                    &.icon-trash:hover {
+                        background: #fe5b57;
+                        border-color: #fe5b57;
                     }
                     &.icon-disabled {
                         cursor: default;
                         &:hover {
                             color: #ddd;
+                            background: white;
+                            border-color: #b6b6b6;
                         }
                     }
                     &.icon-active {
-                        color: #333;
+                        color: #bbb;
                         &:hover {
-                            color: #333;
+                            color: white;
                         }
                     }
                 }
             }
-            
-            &:hover {
+
+            &:hover .archetypeEditorControls {
+                opacity: 1;
             }
         }
 
diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html
index 087b09d..3478bfa 100644
--- a/app/views/archetype.default.html
+++ b/app/views/archetype.default.html
@@ -22,10 +22,10 @@
     <ul ui-sortable="sortableOptions" class="archetypeSortable" ng-class="{archetypeEmpty: model.value.fieldsets.length === 0 || sortingLastItem(), archetypeCrossDraggable: model.config.enableCrossDragging}" ng-model="model.value.fieldsets">
         <li ng-repeat="fieldset in model.value.fieldsets">
             <fieldset ng-class="['archetype-fieldset-' + fieldset.alias, (getFieldsetValidity(fieldset) == false ? 'archetypeFieldsetError' : '')]" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
-                <div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing}">
+                <div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing, dimmed: isDisabled(fieldset)}">
                     <div ng-click="focusFieldset(fieldset)" class="label-sub module-label">
                         <span class="caret" ng-class="{'caret-right': isCollapsed(fieldset)}" ng-show="model.config.enableCollapsing"></span>
-                        <label ng-class="{dimmed: isDisabled(fieldset)}">
+                        <label>
                             <i class="fieldsetIcon icon ng-class:fieldsetConfigModel.icon"></i>
                             <span ng-bind="getFieldsetTitle(fieldsetConfigModel, $index)"></span>
                         </label>
@@ -34,9 +34,9 @@
                         <i class="icon icon-add" ng-show="canAdd()" ng-click="openFieldsetPicker($index, $event)"></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="{'icon-active': fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="showDisableIcon(fieldset)"></i>
+                        <i class="icon icon-eye" ng-class="{'icon-active': fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="showDisableIcon(fieldset)"></i>
                         <i class="icon icon-time icon-disabled" ng-class="{'icon-active': isDisabledByPublishing(fieldset)}" ng-show="showPublishingIcon(fieldset)"></i>
-                        <i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
+                        <i class="icon icon-trash" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                     </div>
                 </div>
                 <div class="archetypeCollapser animate-hide" ng-hide="model.config.enableCollapsing && isCollapsed(fieldset)" ng-if="isLoaded(fieldset)">