From d7c39186cd252ab692fdd085c15c5d1e5087c3ee Mon Sep 17 00:00:00 2001
From: Hannu Pelkonen <hannu@sc5.io>
Date: Thu, 20 Nov 2014 13:12:55 +0200
Subject: [PATCH] Improve designer tool not to overflow over content

---
 lib/app/js/directives/design.js    |   5 --
 lib/app/sass/app.scss              | 113 +++++++++++++++++------------
 lib/app/views/main.html            |   4 +-
 lib/app/views/partials/design.html |   5 ++
 4 files changed, 74 insertions(+), 53 deletions(-)

diff --git a/lib/app/js/directives/design.js b/lib/app/js/directives/design.js
index 080b97e5..b0efd29f 100644
--- a/lib/app/js/directives/design.js
+++ b/lib/app/js/directives/design.js
@@ -20,11 +20,6 @@ angular.module('sgApp')
         scope.resetLocal = function() {
           Variables.resetLocal();
         }
-
-        scope.isColor = function(value) {
-          if (/^(#|rgb)/.test(value)) return true;
-          return false;
-        }
       }
     };
   }]);
diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
index 207f9df0..4e9a4929 100644
--- a/lib/app/sass/app.scss
+++ b/lib/app/sass/app.scss
@@ -313,6 +313,12 @@ $mobile: new-breakpoint(max-width 480px);
   }
 }
 
+.sg.wrapper.desigerToolVisible {
+  margin-right: $designer-tool-width;
+  padding-right: 30px;
+}
+
+
 // Header and footer
 //
 // The header and footer are included in all styleguide pages
@@ -378,6 +384,11 @@ $mobile: new-breakpoint(max-width 480px);
   &.error {
     background-color: #d2301c;
   }
+
+  &.desigerToolVisible .inner {
+    margin-right: $designer-tool-width;
+    padding-right: 30px;
+  }
 }
 
 // Footer
@@ -653,46 +664,6 @@ $mobile: new-breakpoint(max-width 480px);
     border-bottom: none;
     padding: 1em;
     position: relative;
-
-    .sg.label {
-      background: rgba(#FFF, 0.9);
-      position: absolute;
-      top: 0;
-      right: 0;
-      border: 1px solid $secondary-color;
-      border-top: none;
-      border-right: none;
-      z-index: 8000;
-
-      span, p {
-        padding: 0 0.8em 0 0;
-        text-decoration: none;
-        font-weight: 500;
-        display: inline;
-      }
-
-      a {
-        cursor: pointer;
-        display: inline-block;
-        padding: 0.4em 0.7em;
-        text-decoration: none;
-      }
-
-      a:hover {
-        i.fa {
-          color: rgba($primary-color, 0.7);
-          &:after {
-            opacity: 1;
-          }
-        }
-      }
-
-      i.fa {
-        cursor: pointer;
-        color: rgba($primary-color, 0.2);
-        @include transition(all 0.4s ease-out);
-      }
-    }
   }
 
   .sg.code-listing {
@@ -779,6 +750,46 @@ $mobile: new-breakpoint(max-width 480px);
   }
 }
 
+.sg.label {
+  background: rgba(#FFF, 0.9);
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 1px solid $secondary-color;
+  border-top: none;
+  border-right: none;
+  z-index: 8000;
+
+  span, p {
+    padding: 0 0.8em 0 0;
+    text-decoration: none;
+    font-weight: 500;
+    display: inline;
+  }
+
+  a {
+    cursor: pointer;
+    display: inline-block;
+    padding: 0.4em 0.7em;
+    text-decoration: none;
+  }
+
+  a:hover {
+    i.fa {
+      color: rgba($primary-color, 0.7);
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+
+  i.fa {
+    cursor: pointer;
+    color: rgba($primary-color, 0.2);
+    @include transition(all 0.4s ease-out);
+  }
+}
+
 // Designer tool
 //
 // Styles for styleguide designer tool
@@ -821,15 +832,12 @@ $mobile: new-breakpoint(max-width 480px);
   left: 100%;
   width: $designer-tool-width;
   height: 100%;
-  border-top: 1px solid rgba(#000, 0.3);
-  border-bottom: 1px solid rgba(#000, 0.3);
   border-left: 1px solid rgba(#000, 0.3);
-  z-index: 9000;
-
-  background: rgba(#fff, 1);
   @include transition(left 0.3s ease-out);
 
   .handle {
+    @include transition(left 0.3s ease-out);
+    @include transition-delay(0.3s);
     position: absolute;
     top: 220px;
     left: -30px;
@@ -848,12 +856,23 @@ $mobile: new-breakpoint(max-width 480px);
     @include transform-origin(left top);
   }
 
+  .close {
+    position: absolute;
+    padding: 10px;
+    right: 0;
+    top: 0;
+  }
+
   &.sg-hidden {
     left: 100%;
   }
 
   &.sg-visible {
-    left: 100% - $designer-tool-width;;
+    left: 100% - $designer-tool-width;
+
+    .handle {
+      left: 0;
+    }
   }
 }
 
@@ -864,6 +883,8 @@ $mobile: new-breakpoint(max-width 480px);
   width: 100%;
   height: 100%;
   padding: 1em;
+  z-index: 9000;
+  background: white;
 
   label {
     display: block;
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
index b2c474f8..6625f3b3 100644
--- a/lib/app/views/main.html
+++ b/lib/app/views/main.html
@@ -1,7 +1,7 @@
 <div id="socketDisconnection" class="sg disconnection-icon" title="no socket connection" ng-hide="socketService.isConnected()" ng-if="socketService.isAvailable()">
   <i class="fa fa-chain-broken"></i>
 </div>
-<header class="sg header" ng-class="status.compileError ? 'error' : '' ">
+<header class="sg header" ng-class="designerTool.isVisible ? 'desigerToolVisible' : ''" ng-class="status.compileError ? 'error' : '' ">
   <div class="inner">
     <div class="title">
       <a ng-href="/overview">
@@ -13,7 +13,7 @@ <h1 class="sg">{{ config.data.title }}
     </div>
   </div>
 </header>
-<div class="sg wrapper" ng-class="isNavCollapsed ? 'collapsed' : ''">
+<div class="sg wrapper" ng-class="designerTool.isVisible ? 'desigerToolVisible' : ''" ng-class="isNavCollapsed ? 'collapsed' : ''">
   <div class="sg side-nav-toggle"
     ng-click="isNavCollapsed = !isNavCollapsed">
     {{ isNavCollapsed ? "&gt;&gt;" : "&lt;&lt;" }}
diff --git a/lib/app/views/partials/design.html b/lib/app/views/partials/design.html
index 2b2fc784..b2f701eb 100644
--- a/lib/app/views/partials/design.html
+++ b/lib/app/views/partials/design.html
@@ -5,6 +5,11 @@
     Designer Tools
   </div>
   <div class="sg design-content" ng-click="$event.stopPropagation()">
+    <div class="sg label">
+      <a ng-click="designerTool.isVisible = false">
+        <i class="fa fa-close"></i>
+      </a>
+    </div>
     <a class="sg" ng-click="showRelated = true" ng-hide="showRelated">Show only related variables</a>
     <a class="sg" ng-click="showRelated = false" ng-show="showRelated">Show all variables</a>
     <h3 class="sg" ng-show="showRelated">{{currentReference.section.reference}} {{currentReference.section.header}}</h3>