AJAX Row + Server Call Details Styling Tweaks (#134)

* AJAX Row + Server Call Details Styling Tweaks * Load-- * Moving the status icon * Fixing status icon size * We need TS in here
Glimpse · Jun 27, 2017 · dd5c54d · dd5c54d
1 parent 4021e14
commit dd5c54d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 23 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -3,12 +3,15 @@ $max-ajax-rows: 7;
 $color-primary: #3399ff;
 $color-border: #999;
 $type-scales: (
+    -2: 9px,
     -1: 11px,
     0: 14px,
     1: 17px,
 );
 $border-height: 3px;
 $popup-delay: 0s;
+$expandHoverColor: #3c3c3c;
+$collapseHoverColor: #353535;
 
 @function type-scale($level) {
     @return map-get($type-scales, $level);
@@ -297,11 +300,7 @@ $popup-delay: 0s;
     justify-content: flex-start !important;
     align-items: center !important;
     height: type-scale(1) !important;
-    font-size: type-scale(0) !important;
-
-    &--secondary {
-        font-size: type-scale(-1) !important;
-    }
+    font-size: type-scale(-1) !important;
 }
 .glimpse-ajax-cell {
     white-space: nowrap !important;
@@ -315,7 +314,9 @@ $popup-delay: 0s;
 .glimpse-ajax-text {
     &[data-glimpse-type="uri"],
     &[data-glimpse-type="status"] {
-        flex-grow: 1;
+        flex-grow: 1 !important;
+        white-space: nowrap !important;
+        text-overflow: ellipsis !important;
     }
 
     &[data-glimpse-type="status"] {
@@ -377,15 +378,11 @@ $popup-delay: 0s;
         padding-bottom: 5px !important;
         padding-top: 2px !important;
         opacity: 0.5 !important;
+
         span {
-            font-size: 10px !important;
-            white-space: nowrap !important;
-            padding-right: 5px !important;
-            float: left !important;
-            padding-top: 1px !important;
-        }
-        div {
-            clear: both !important;
+            font-size: type-scale(-2) !important;
+            line-height: type-scale(-1) !important;
+            display: block !important;
         }
     }
     > .glimpse-hud-field {
@@ -417,6 +414,7 @@ $popup-delay: 0s;
     display: inline-block !important;
     height: type-scale(-1) !important;
     margin-right: 2px !important;
+    vertical-align: middle !important;
 }
 
 .glimpse-logs {
@@ -447,11 +445,16 @@ $popup-delay: 0s;
 #glimpse-ajax-popup-rows {
     height: 150px !important;
     max-height: 150px !important;
+    width: 220px !important;
     overflow-y: auto !important;
 }
 
-$expandHoverColor: #3c3c3c;
-$collapseHoverColor: #353535;
+.glimpse-hud-field-listing {
+    .glimpse-status-icon {
+        height: type-scale(-2) !important;
+    }
+}
+
 .glimpse-expand-button,
 .glimpse-hud-popup-section--arrow {
     position: relative !important;

diff --git a/src/views/data.js b/src/views/data.js
@@ -1,6 +1,7 @@
 const dom = require('../lib/dom');
 const summaryRepository = require('../repository/summary');
 const icons = require('../assets/icons').default;
+const statusIcon = require('../assets/icons').statusIcon;
 
 const supportedStatusCodes = [ '200', '400', '500' ];
 const supportedOperationCategories = [ 'Create', 'Read', 'Update', 'Delete', 'Other' ];
@@ -63,23 +64,25 @@ function updateValue(target, summary) {
     if (summary.total > 0) {
         dom.addClass(element, 'glimpse-time-ms');
 
-        content += ' / ' + summary.time;
+        content += ' &middot; ' + summary.time;
     }
     element.innerHTML = content;
 }
 function updateListingWebServices(target, statusCodes) {
-    updateCoreListing(target, Object.assign({}, statusCodes), supportedStatusCodes, 's');
+    updateCoreListing(target, Object.assign({}, statusCodes), supportedStatusCodes, true);
 }
 function updateListingDataStore(target, operationCategories) {
-    updateCoreListing(target, Object.assign({}, operationCategories), supportedOperationCategories, '');
+    updateCoreListing(target, Object.assign({}, operationCategories), supportedOperationCategories, false);
 }
-function updateCoreListing(target, data, supportedRecords, postfix) {
+function updateCoreListing(target, data, supportedRecords, isStatusCode) {
     // run through supported status codes so order is maintained
     let content = '';
     supportedRecords.forEach(function(record) {
         const recordLower = record.toLowerCase();
+        const prefix = isStatusCode ? statusIcon(record) : '';
+        const suffix = isStatusCode ? 's' : '';
         if (data[recordLower]) {
-            content += `<span>${data[recordLower]} ${record}${postfix}</span>`;
+            content += `<span>${data[recordLower]} &middot; ${prefix}${record}${suffix}</span>`;
             delete data[recordLower];
         }
     });
@@ -89,7 +92,7 @@ function updateCoreListing(target, data, supportedRecords, postfix) {
         .reduce((acc, key) => acc + data[key], 0);
 
     if (otherCount > 0) {
-        content += `<span>${otherCount} Others</span>`;
+        content += `<span>${otherCount} &middot; Others</span>`;
     }
 
     const targetElement = document.getElementById(target);

diff --git a/src/views/timing.js b/src/views/timing.js
@@ -25,7 +25,7 @@ module.exports = {
         return `
             <div class="glimpse-hud-popup-section">
                 <div class="glimpse-hud-field">
-                    <div class="glimpse-hud-field-label">Load load time</div>
+                    <div class="glimpse-hud-field-label">Load time</div>
                     <div class="glimpse-hud-field-value glimpse-time-ms">${timings.pageLoad}</div>
                     <div class="glimpse-hud-field">
                         <div class="glimpse-hud-field-label">Network connection</div>