fix: avoid UI jitter by keeping disabled menu items

#500 (comment)
ipfs · Jun 18, 2018 · 8bc5b7a · 8bc5b7a
1 parent 1d29ba9
commit 8bc5b7a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/add-on/src/popup/browser-action/context-actions.js b/add-on/src/popup/browser-action/context-actions.js
@@ -6,6 +6,7 @@ const html = require('choo/html')
 const navItem = require('./nav-item')
 
 module.exports = function contextActions ({
+  active,
   ipfsNodeType,
   isIpfsContext,
   isPinning,
@@ -19,7 +20,7 @@ module.exports = function contextActions ({
   onUnPin
 }) {
   if (!isIpfsContext) return null
-  const showPinControls = isIpfsOnline && isApiAvailable && (ipfsNodeType !== 'embedded')
+  const activePinControls = active && isIpfsOnline && isApiAvailable && (ipfsNodeType !== 'embedded') && !(isPinning || isUnPinning)
   return html`
     <div class='fade-in pv1'>
       ${navItem({
@@ -30,17 +31,17 @@ module.exports = function contextActions ({
         text: browser.i18n.getMessage('panel_copyCurrentPublicGwUrl'),
         onClick: onCopyPublicGwAddr
       })}
-      ${showPinControls && !isPinned ? (
+      ${!isPinned ? (
         navItem({
           text: browser.i18n.getMessage('panel_pinCurrentIpfsAddress'),
-          disabled: isPinning,
+          disabled: !activePinControls,
           onClick: onPin
         })
       ) : null}
-      ${showPinControls && isPinned ? (
+      ${isPinned ? (
         navItem({
           text: browser.i18n.getMessage('panel_unpinCurrentIpfsAddress'),
-          disabled: isUnPinning,
+          disabled: !activePinControls,
           onClick: onUnPin
         })
       ) : null}

diff --git a/add-on/src/popup/browser-action/nav-item.js b/add-on/src/popup/browser-action/nav-item.js
@@ -4,8 +4,13 @@
 const html = require('choo/html')
 
 function navItem ({ icon, text, bold, disabled, onClick }) {
-  let className = 'button-reset db w-100 black bg-white bg-near-white--hover b--none outline-0--focus pointer pv2 ph3 f5 tl'
+  let className = 'button-reset db w-100 bg-white b--none outline-0--focus pv2 ph3 f5 tl'
   if (bold) className += ' b'
+  if (disabled) {
+    className += ' silver'
+  } else {
+    className += ' pointer black bg-near-white--hover'
+  }
 
   return html`
     <button class="${className}" onclick=${disabled ? null : onClick} ${disabled ? 'disabled' : ''}>

diff --git a/add-on/src/popup/browser-action/operations.js b/add-on/src/popup/browser-action/operations.js
@@ -16,38 +16,36 @@ module.exports = function operations ({
   onOpenPrefs,
   onToggleRedirect
 }) {
-  const showQuickUpload = isIpfsOnline && isApiAvailable
-  const showWebUI = isIpfsOnline && ipfsNodeType === 'external'
-  const showGatewaySwitch = active && ipfsNodeType === 'external'
+  const activeQuickUpload = active && isIpfsOnline && isApiAvailable
+  const activeWebUI = active && isIpfsOnline && ipfsNodeType === 'external'
+  const activeGatewaySwitch = active && ipfsNodeType === 'external'
+
   return html`
     <div class="fade-in pv1">
+      ${navItem({
+        text: browser.i18n.getMessage('panel_quickUpload'),
+        bold: true,
+        disabled: !activeQuickUpload,
+        onClick: onQuickUpload
+      })}
+      ${navItem({
+        text: browser.i18n.getMessage(
+          redirectEnabled && activeGatewaySwitch
+            ? 'panel_switchToPublicGateway'
+            : 'panel_switchToCustomGateway'
+        ),
+        disabled: !activeGatewaySwitch,
+        onClick: onToggleRedirect
+      })}
       ${navItem({
         text: browser.i18n.getMessage('panel_openPreferences'),
         onClick: onOpenPrefs
       })}
-      ${showWebUI ? (
-        navItem({
-          text: browser.i18n.getMessage('panel_openWebui'),
-          onClick: onOpenWebUi
-        })
-      ) : null}
-      ${showGatewaySwitch ? (
-        navItem({
-          text: browser.i18n.getMessage(
-            redirectEnabled
-              ? 'panel_switchToPublicGateway'
-              : 'panel_switchToCustomGateway'
-          ),
-          onClick: onToggleRedirect
-        })
-      ) : null}
-      ${showQuickUpload ? (
-        navItem({
-          text: browser.i18n.getMessage('panel_quickUpload'),
-          bold: true,
-          onClick: onQuickUpload
-        })
-      ) : null}
+      ${navItem({
+        text: browser.i18n.getMessage('panel_openWebui'),
+        disabled: !activeWebUI,
+        onClick: onOpenWebUi
+      })}
     </div>
   `
 }