fix: don't rely on colour for boost/favourite state (#2234)

By changing the shape it means no matter what the colour difference between
pressed and non-pressed it'll be possible to know the state.

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

src/routes/_components/IconButton.html

@@ -12,9 +12,13 @@
         ref:node
 >
   <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
+  {#if checked}
+    <SvgIcon className="icon-button-svg icon-button-check" ref:check href="#fa-check" />
+  {/if}
 </button>
 <style>
   .icon-button {
+    position: relative;
     padding: 6px 10px;
     background: none;
     border: none;
@@ -31,6 +35,14 @@
     pointer-events: none; /* hack for Edge */
   }
 
+  :global(.icon-button-check) {
+    position: absolute;
+    top: 0;
+    right: 1px;
+    height: 12px;
+    width: 12px;
+  }
+
   :global(.icon-button.big-icon .icon-button-svg) {
     width: 32px;
     height: 32px;
@@ -128,7 +140,8 @@
       className: undefined,
       sameColorWhenPressed: false,
       ariaHidden: false,
-      clickListener: true
+      clickListener: true,
+      checked: false
     }),
     store: () => store,
     computed: {
@@ -144,8 +157,11 @@
       ariaLabel: ({ pressable, pressed, label, pressedLabel }) => ((pressable && pressed) ? pressedLabel : label)
     },
     methods: {
-      animate (animation) {
+      animate (animation, checkmarkAnimation) {
         this.refs.svg.animate(animation)
+        if (checkmarkAnimation && this.get().checked) {
+          this.refs.check.animate(checkmarkAnimation)
+        }
       },
       onClick (e) {
         this.fire('click', e)

src/routes/_components/status/StatusToolbar.html

@@ -14,6 +14,7 @@
     pressedLabel="Unboost"
     pressable={!reblogDisabled}
     pressed={reblogged}
+    checked={reblogged}
     disabled={reblogDisabled}
     href={reblogIcon}
     clickListener={false}
@@ -25,6 +26,7 @@
     pressedLabel="{intl.unfavorite}"
     pressable={true}
     pressed={favorited}
+    checked={favorited}
     href="#fa-star"
     clickListener={false}
     elementId={favoriteKey}
@@ -75,7 +77,7 @@
   import { setReblogged } from '../../_actions/reblog.js'
   import { importShowStatusOptionsDialog } from '../dialog/asyncDialogs/importShowStatusOptionsDialog.js'
   import { updateProfileAndRelationship } from '../../_actions/accounts.js'
-  import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations.js'
+  import { CHECKMARK_ANIMATION, FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations.js'
   import { on } from '../../_utils/eventBus.js'
   import { announceAriaLivePolite } from '../../_utils/announceAriaLivePolite.js'
 
@@ -118,7 +120,7 @@
         const newFavoritedValue = !favorited
         /* no await */ setFavorited(originalStatusId, newFavoritedValue)
         if (newFavoritedValue) {
-          this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
+          this.refs.favoriteIcon.animate(FAVORITE_ANIMATION, CHECKMARK_ANIMATION)
         }
         if (announce) {
           announceAriaLivePolite(newFavoritedValue ? 'intl.favorited' : 'intl.unfavorited')
@@ -129,7 +131,7 @@
         const newRebloggedValue = !reblogged
         /* no await */ setReblogged(originalStatusId, newRebloggedValue)
         if (newRebloggedValue) {
-          this.refs.reblogIcon.animate(REBLOG_ANIMATION)
+          this.refs.reblogIcon.animate(REBLOG_ANIMATION, CHECKMARK_ANIMATION)
         }
         if (announce) {
           announceAriaLivePolite(newRebloggedValue ? 'intl.reblogged' : 'intl.unreblogged')

src/routes/_static/animations.js

@@ -1,39 +1,37 @@
-export const FAVORITE_ANIMATION = [
-  {
-    properties: [
-      { transform: 'scale(1)' },
-      { transform: 'scale(2)' },
-      { transform: 'scale(1)' }
-    ],
-    options: {
-      duration: 333,
-      easing: 'ease-in-out'
-    }
-  },
-  {
-    properties: [
-      { fill: 'var(--action-button-fill-color)' },
-      { fill: 'var(--action-button-fill-color-pressed)' }
-    ],
-    options: {
-      duration: 333,
-      easing: 'linear'
-    }
+const growBigThenSmall = {
+  properties: [
+    { transform: 'scale(1)' },
+    { transform: 'scale(2)' },
+    { transform: 'scale(1)' }
+  ],
+  options: {
+    duration: 333,
+    easing: 'ease-in-out'
   }
+}
+
+const fadeColorToPressedState = {
+  properties: [
+    { fill: 'var(--action-button-fill-color)' },
+    { fill: 'var(--action-button-fill-color-pressed)' }
+  ],
+  options: {
+    duration: 333,
+    easing: 'linear'
+  }
+}
+
+export const FAVORITE_ANIMATION = [
+  growBigThenSmall,
+  fadeColorToPressedState
 ]
 
 export const REBLOG_ANIMATION = FAVORITE_ANIMATION
 
 export const FOLLOW_BUTTON_ANIMATION = [
-  {
-    properties: [
-      { transform: 'scale(1)' },
-      { transform: 'scale(2)' },
-      { transform: 'scale(1)' }
-    ],
-    options: {
-      duration: 333,
-      easing: 'ease-in-out'
-    }
-  }
+  growBigThenSmall
+]
+
+export const CHECKMARK_ANIMATION = [
+  fadeColorToPressedState
 ]

tests/spec/007-account-profile.js

@@ -41,8 +41,8 @@ test('shows account profile 3', async t => {
     .expect(accountProfileName.innerText).contains('foobar')
     .expect(accountProfileUsername.innerText).contains('@foobar')
     // can't follow or be followed by your own account
-    .expect(accountProfileFollowedBy.innerText).eql('')
-    .expect($('.account-profile .account-profile-follow').innerText).eql('')
+    .expect(accountProfileFollowedBy.innerText).match(/\s*/)
+    .expect($('.account-profile .account-profile-follow').innerText).match(/\s*/)
 })
 
 test('shows account profile statuses', async t => {