Adding status icons (#124)

* Adding status icons * Fixing icon alignment
Glimpse · Jun 27, 2017 · c01c047 · c01c047
1 parent bce76a5
commit c01c047
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/src/assets/icons.js b/src/assets/icons.js
@@ -1,3 +1,28 @@
+const colors = {
+    error: '#b03b00',
+    informational: '#1ba1e2',
+    other: '#b5b5b5',
+    redirection: '#f8a800',
+    success: '#78b24c'
+};
+
+export function statusIcon(statusCode) {
+    let path;
+
+    if (statusCode < 200 || statusCode >= 400) {
+        var fill = statusCode < 200
+            ? colors.informational
+            : colors.error;
+        path = `<path d="M1023,512c282.7,0,512,229.3,512,512s-229.3,512-512,512s-512-229.3-512-512S740.3,512,1023,512z" fill="${fill}"></path>`;
+    } else if (statusCode < 300) {
+        path = `<path d="M511,512H1535V1536H511V512Z" fill="${colors.success}"></path>`;
+    } else if (statusCode < 400) {
+        path = `<path d="M1024,512L512,1536h1024L1024,512z" fill="${colors.redirection}"></path>`;
+    }
+
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" class="glimpse-status-icon">${path}</svg>`;
+}
+
 const icons = {
     client: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" class="glimpse-agent-type-icon">

diff --git a/src/index.scss b/src/index.scss
@@ -318,9 +318,22 @@ $popup-delay: 0s;
         flex-grow: 1;
     }
 
+    &[data-glimpse-type="status"] {
+        padding-left: 12px !important;
+        position: relative !important;
+    }
+
     + .glimpse-ajax-text {
         margin-left: 5px !important;
     }
+
+    > .glimpse-status-icon {
+        $status-icon-height: type-scale(-1);
+        position: absolute !important;
+        left: 0 !important;
+        height: $status-icon-height !important;
+        top: calc(50% - #{$status-icon-height / 2}) !important;
+    }
 }
 .glimpse-ajax-uri {
     text-overflow: ellipsis !important;
@@ -395,7 +408,8 @@ $popup-delay: 0s;
     text-decoration: none !important;
 }
 
-.glimpse-agent-type-icon {
+.glimpse-agent-type-icon,
+.glimpse-status-icon {
     display: inline-block !important;
     height: type-scale(-1) !important;
     margin-right: 2px !important;

diff --git a/src/views/ajax.js b/src/views/ajax.js
@@ -3,6 +3,7 @@ const ajaxProxy = require('../proxy/ajax');
 const dom = require('../lib/dom');
 const arrowIcon = require('./open').arrowIcon;
 const icons = require('../assets/icons').default;
+const statusIcon = require('../assets/icons').statusIcon;
 
 const state = {
     count: 0,
@@ -70,6 +71,7 @@ function rowPopupTemplate(request) {
                     ${request.method}
                 </span>
                 <span class="glimpse-ajax-text" data-glimpse-type="status">
+                    ${statusIcon(request.status)}
                     ${request.status} - ${request.statusText}
                 </span>
                 <span class="glimpse-ajax-text glimpse-size-kb" data-glimpse-type="size">