From 9231e666125b206addcf6e715066e62770ded61a Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 3 Feb 2019 11:10:52 -0800
Subject: [PATCH] fix: fix pressed color on media dialog buttons (#931)

---
 src/routes/_components/IconButton.html        | 40 ++++++-------------
 .../dialog/components/MediaDialog.html        |  2 +-
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/routes/_components/IconButton.html b/src/routes/_components/IconButton.html
index 9655db07..51d5de83 100644
--- a/src/routes/_components/IconButton.html
+++ b/src/routes/_components/IconButton.html
@@ -55,19 +55,20 @@
     fill: var(--action-button-fill-color-hover);
   }
 
-  .icon-button.not-pressable:active .icon-button-svg {
+  .icon-button.not-pressable:active .icon-button-svg,
+  .icon-button.same-pressed:active .icon-button-svg {
     fill: var(--action-button-fill-color-active);
   }
 
-  .icon-button.pressed .icon-button-svg {
+  .icon-button.pressed.not-same-pressed .icon-button-svg {
     fill: var(--action-button-fill-color-pressed);
   }
 
-  .icon-button.pressed:hover .icon-button-svg {
+  .icon-button.pressed.not-same-pressed:hover .icon-button-svg {
     fill: var(--action-button-fill-color-pressed-hover);
   }
 
-  .icon-button.pressed:active .icon-button-svg {
+  .icon-button.pressed.not-same-pressed:active .icon-button-svg {
     fill: var(--action-button-fill-color-pressed-active);
   }
 
@@ -83,38 +84,23 @@
     fill: var(--action-button-deemphasized-fill-color-hover);
   }
 
-  .icon-button.muted-style.not-pressable:active .icon-button-svg {
+  .icon-button.muted-style.not-pressable:active .icon-button-svg,
+  .icon-button.muted-style.same-pressed:active .icon-button-svg {
     fill: var(--action-button-deemphasized-fill-color-active);
   }
 
-  .icon-button.muted-style.pressed .icon-button-svg {
+  .icon-button.muted-style.pressed.not-same-pressed .icon-button-svg {
     fill: var(--action-button-deemphasized-fill-color-pressed);
   }
 
-  .icon-button.muted-style.pressed:hover .icon-button-svg {
+  .icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg {
     fill: var(--action-button-deemphasized-fill-color-pressed-hover);
   }
 
-  .icon-button.muted-style.pressed:active .icon-button-svg {
+  .icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg {
     fill: var(--action-button-deemphasized-fill-color-pressed-active);
   }
 
-  /*
-   * disable the separate press color (noPressColor)
-   */
-  .icon-button.pressed.no-press-color .icon-button-svg {
-    fill: var(--action-button-fill-color);
-  }
-
-  .icon-button.pressed.no-press-color:hover .icon-button-svg {
-    fill: var(--action-button-fill-color-hover);
-  }
-
-  .icon-button.pressed.no-press-color:active .icon-button-svg {
-    fill: var(--action-button-fill-color-active);
-  }
-
-
 </style>
 <script>
   import { classname } from '../_utils/classname'
@@ -131,18 +117,18 @@
       pressed: false,
       className: void 0,
       delegateKey: void 0,
-      noPressColor: false
+      sameColorWhenPressed: false
     }),
     store: () => store,
     computed: {
-      computedClass: ({ pressable, pressed, big, muted, noPressColor, className }) => {
+      computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => {
         return classname(
           'icon-button',
           !pressable && 'not-pressable',
           pressed && 'pressed',
           big && 'big-icon',
           muted && 'muted-style',
-          noPressColor && 'no-press-color',
+          sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
           className
         )
       }
diff --git a/src/routes/_components/dialog/components/MediaDialog.html b/src/routes/_components/dialog/components/MediaDialog.html
index e5bd0044..331d374b 100644
--- a/src/routes/_components/dialog/components/MediaDialog.html
+++ b/src/routes/_components/dialog/components/MediaDialog.html
@@ -33,7 +33,7 @@
             label="Show {nth(i)} media"
             pressed={i === scrolledItem}
             href={i === scrolledItem ? '#fa-circle' : '#fa-circle-o'}
-            noPressColor={true}
+            sameColorWhenPressed={true}
             on:click="onClick(i)"
           />
         {/each}