UX improvements for Gateway Status and Diagnostics

- implements #51 - compact redirect and gateway status
ipfs · Jan 28, 2016 · f6c7d33 · f6c7d33
1 parent e532520
commit f6c7d33
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 15 deletions.
diff --git a/data/panel.html b/data/panel.html
@@ -3,9 +3,6 @@
 <head>
   <meta charset="utf-8">
   <style type="text/css" media="all">
-  body {
-    background: url('icon-off-64.png') no-repeat right 1em top 1em;
-  }
 
   p > img {
     vertical-align: middle;
@@ -14,18 +11,16 @@
   ul {
     list-style-type: none;
     margin: 0;
-    padding: 0.25em;
+    padding: 0.25rem;
     background-color: rgba(222, 222, 222, 0.75);
   }
 
   li {
-    padding: 0.5em;
+    padding: 0.5rem;
     cursor: default;
   }
   li.header {
     font-weight: bold;
-    /*background: url('icon-on-16.png') no-repeat left 0.5em top 0.5em;
-    padding-left: 2em;*/
   }
   li.action {
     background: rgba(238, 238, 238, 0.5);
@@ -42,16 +37,38 @@
     color: #fff;
   }
 
+  #gateway-status {
+    padding: 0.5rem;
+    min-height: 3em;
+  }
+  #gateway-status > li {
+    font-size: small;
+    padding: 0;
+  }
   #gateway-status > li > span:nth-of-type(2) {
     font-weight: bold;
     display: inline-block;
     float: right;
   }
-
+  #icon {
+    float: right;
+    margin-left: 1rem;
+    height: 64px;
+    width: 64px;
+  }
+  #enable-gateway-redirect {
+    font-weight: bold;
+  }
+  #enable-gateway-redirect::before {
+    content:url('icon-on-16.png');
+    vertical-align: middle;
+    padding-right: 0.5rem;
+  }
   </style>
 </head>
 
 <body>
+  <img src="icon-off-64.png" id="icon"/>
   <ul id="gateway-status">
     <li id="gateway-address"><span data-l10n-id="panel_status-gateway-address"></span><span id="gateway-address-val">⋯</span></li>
     <li id="gateway-version"><span data-l10n-id="panel_status-gateway-version"></span><span id="gateway-version-val">⋯</span></li>
@@ -62,7 +79,10 @@
     <li class="header" data-l10n-id="panel_operations-header"></li>
     <li class="action" id="open-webui" data-l10n-id="panel_open-webui"></li>
     <li class="action" id="open-preferences" data-l10n-id="panel_open-preferences"></li>
-    <li class="action" id="toggle-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect"></li>
+    <li class="action" id="toggle-gateway-redirect">
+      <span id="enable-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect-enable"></span>
+      <span id="disable-gateway-redirect" data-l10n-id="panel_toggle-gateway-redirect-disable"></span>
+    </li>
   </ul>
 
   <ul id="ipfs-resource-actions">

diff --git a/data/panel.js b/data/panel.js
@@ -1,9 +1,9 @@
 /* global self */
-let getById = (id) => {
+function getById (id) {
   return document.getElementById(id)
 }
 
-let renderGatewayAddress = (prefs) => {
+function renderGatewayAddress (prefs) {
   if (prefs.useCustomGateway) {
     return prefs.customGatewayHost + ':' + prefs.customGatewayPort
   } else {
@@ -15,18 +15,26 @@ function showIf(id, condition) {
   getById(id).style.display = condition ? 'block' : 'none'
 }
 
+function setIconState(enable) {
+  getById('icon').src = enable ? 'icon-on-64.png' : 'icon-off-64.png'
+}
+
 // incoming
 self.port.on('show', function (context) {
   // console.log('show event received by panel.js (ipfsResource='+ipfsResource+')')
   let prefs = context.preferences
 
   // render diagnostic info
   getById('gateway-address-val').innerHTML = renderGatewayAddress(prefs)
+  setIconState(prefs.useCustomGateway)
 
   // if current page is pinnable
   showIf('ipfs-resource-actions', context.isPinnable)
 
   // if custom gateway is used
+  showIf('enable-gateway-redirect', !prefs.useCustomGateway)
+  showIf('disable-gateway-redirect', prefs.useCustomGateway)
+  showIf('open-webui', prefs.useCustomGateway)
   showIf('open-webui', prefs.useCustomGateway)
   showIf('gateway-version', prefs.useCustomGateway)
   showIf('swarm-peers', prefs.useCustomGateway)

diff --git a/locale/en-US.properties b/locale/en-US.properties
@@ -19,14 +19,15 @@ customApiPort_description=Used for pinning (on the Gateway host)
 linkify_title=Extended IPFS Link Support
 linkify_description=(EXPERIMENTAL) Rewrite links to /ip(f|n)s/* paths on every page to point to IPFS gateway. Make plaintext IPFS links clickable.
 
-panel_status-gateway-address=Gateway
+panel_status-gateway-address=Gateway Redirect
 panel_status-gateway-version=Version
 panel_status-swarm-peers=Swarm Peers
 
 panel_operations-header=Operations
 panel_open-webui=Open WebUI
 panel_open-preferences=Open Preferences
-panel_toggle-gateway-redirect=Toggle Gateway Redirect
+panel_toggle-gateway-redirect-enable=Enable Gateway Redirect
+panel_toggle-gateway-redirect-disable=Disable Gateway Redirect
 
 panel_ipfs-only-header=Actions for current address
 panel_pin-current-ipfs-address=Pin IPFS Resource

diff --git a/locale/pl-PL.properties b/locale/pl-PL.properties
@@ -19,14 +19,15 @@ customApiPort_description=Używany do przypinania (na hoście Bramy)
 linkify_title=Rozszerzone wsparcie linków IPFS
 linkify_description=(EKSPERYMENT) Przepisuje linki do zasobów /ip(f|n)s/* na każdej stronie tak, aby wskazywały na Bramę. Dodatkowo sprawia, że czysto-tekstowe adresy IPFS są klikalne.
 
-panel_status-gateway-address=Brama
+panel_status-gateway-address=Przekierowanie do bramy
 panel_status-gateway-version=Wersja
 panel_status-swarm-peers=Połączenia
 
 panel_operations-header=Operacje
 panel_open-webui=Otwórz WebUI
 panel_open-preferences=Otwórz Preferencje
-panel_toggle-gateway-redirect=Przełącz przekierowanie
+panel_toggle-gateway-redirect-enable=Włącz przekierowanie
+panel_toggle-gateway-redirect-disable=Wyłącz przekierowanie
 
 panel_ipfs-only-header=Operacje dla tego zasobu
 panel_pin-current-ipfs-address=Przypnij zasób IPFS