[expand button]: initial PR (#129)

Adds the expand button for HUD:
Glimpse · Jun 27, 2017 · 5ff5faf · 5ff5faf
1 parent c01c047
commit 5ff5faf
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 10 deletions.
diff --git a/src/index.js b/src/index.js
@@ -12,6 +12,7 @@ var timingView = require('./views/timing');
 var ajaxView = require('./views/ajax');
 var dataView = require('./views/data');
 var logsView = require('./views/logs');
+var expandButtonView = require('./views/expand-button-view');
 var util = require('./lib/util');
 
 const state = {
@@ -23,11 +24,13 @@ function render(state) {
         <div class="glimpse-hud">
             <div class="glimpse-hud-data" data-glimpse-expanded="${state.expanded}">
                 ${versionView.render()}
+                ${expandButtonView.render()}
                 ${timingView.render()}
                 ${logsView.render()}
                 ${dataView.render()}
                 ${ajaxView.render()}
                 <div class="glimpse-hud-popup">
+                    ${expandButtonView.renderPopup()}
                     ${timingView.renderPopup()}
                     ${logsView.renderPopup()}
                     ${dataView.renderPopup()}
@@ -40,16 +43,21 @@ function render(state) {
 }
 
 function postRender(initPromise) {
+    var hudData = document.querySelector('.glimpse-hud-data');
+    var expandButton = document.querySelector('#js-glimpse-expand-button');
+    var collapseButton = document.querySelector('#js-glimpse-collapse-button');
+
     ajaxView.postRender(initPromise);
-    logsView.postRender(initPromise)
+    logsView.postRender(initPromise);
 
-    var hudData = document.querySelector('.glimpse-hud-data');
+    var setOpenState = function(panelState) {
+      util.localSet(state, 'expanded', panelState, function() {
+          hudData.setAttribute('data-glimpse-expanded', panelState);
+      });
+    };
 
-    hudData.addEventListener('click', function() {
-        util.localSet(state, 'expanded', !state.expanded, function() {
-            hudData.setAttribute('data-glimpse-expanded', state.expanded);
-        });
-    });
+    expandButton.addEventListener('click', function() { setOpenState(true); });
+    collapseButton.addEventListener('click', function() { setOpenState(false); });
 }
 
 function preInit(initPromise) {

diff --git a/src/index.scss b/src/index.scss
@@ -84,7 +84,7 @@ $popup-delay: 0s;
 
     &[data-glimpse-expanded="true"] {
         border-color: transparent !important;
-        transition-delay: 0s !important;        
+        transition-delay: 0s !important;
 
         > :not(.glimpse-hud-popup) {
             background-color: transparent !important;
@@ -307,7 +307,7 @@ $popup-delay: 0s;
     white-space: nowrap !important;
     text-overflow: ellipsis !important;
     overflow: hidden !important;
-    
+
     &:last-child {
         text-align: right !important;
     }
@@ -354,15 +354,19 @@ $popup-delay: 0s;
 
 .glimpse-hud-popup-section {
     padding: 10px !important;
+    padding-right: 15px !important;
 
     ~ * {
         border-left: 1px solid #999 !important;
-        margin-left: 5px !important;
     }
 
     &.-ajax {
         flex-grow: 1 !important;
     }
+
+    &:last-of-type {
+        padding-right: 10px !important;
+    }
 }
 
 .glimpse-hud-field {
@@ -445,3 +449,41 @@ $popup-delay: 0s;
     max-height: 150px !important;
     overflow-y: auto !important;
 }
+
+$expandHoverColor: #3c3c3c;
+$collapseHoverColor: #353535;
+.glimpse-expand-button,
+.glimpse-hud-popup-section--arrow {
+    position: relative !important;
+    padding: 0 8px !important;
+
+    $arrowSize: 4px;
+    &::after {
+        content: "" !important;
+        position: absolute !important;
+        left: 50% !important;
+        top: 50% !important;
+        border: $arrowSize solid transparent !important;
+        margin-top: -$arrowSize !important;
+        margin-left: -$arrowSize/4 !important;
+        border-left-color: white !important;
+    }
+
+    &:hover {
+        background-color: $expandHoverColor !important;
+        cursor: pointer !important;
+    }
+}
+
+.glimpse-hud-popup-section--arrow {
+    background-color: $expandHoverColor !important;
+
+    &::after {
+        transform: rotate(45deg) translateX(-1px) !important;
+    }
+
+    &:hover {
+        background-color: $collapseHoverColor !important;
+        cursor: pointer !important;
+    }
+}
diff --git a/src/views/expand-button-view.js b/src/views/expand-button-view.js
@@ -0,0 +1,14 @@
+module.exports = {
+    render: function() {
+        return `
+            <div class="glimpse-section glimpse-expand-button" id="js-glimpse-expand-button" title="expand">
+            </div>
+        `;
+    },
+    renderPopup: function() {
+        return `
+            <div class="glimpse-hud-popup-section glimpse-hud-popup-section--arrow" id="js-glimpse-collapse-button" title="collapse">
+            </div>
+        `;
+    }
+};