From b2e482774102a4e92b79c21cc57353e6677adf13 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 16 Jan 2022 01:01:19 -0500
Subject: Add badges to status interacting buttons

Now, the following badges will be added:
0: (+) sign to reply, favourite, repeat, react and extra buttons
1: (-) sign to unfavourite and unrepeat
2: (x) sign to close reply form, close react popover, and close extra buttons popover
3: Check mark to favourited and repeated statuses

https://git.pleroma.social/pleroma/pleroma-fe/-/issues/1092
---
 src/components/react_button/react_button.js  | 17 ++++++++++++--
 src/components/react_button/react_button.vue | 35 ++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 7 deletions(-)

(limited to 'src/components/react_button')

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 37d6e7d0..5e052e1e 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,15 +1,21 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 import { trim } from 'lodash'
 
-library.add(faSmileBeam)
+library.add(
+  faPlus,
+  faTimes,
+  faSmileBeam
+)
 
 const ReactButton = {
   props: ['status'],
   data () {
     return {
-      filterWord: ''
+      filterWord: '',
+      expanded: false
     }
   },
   components: {
@@ -25,6 +31,13 @@ const ReactButton = {
       }
       close()
     },
+    onShow () {
+      this.expanded = true
+      this.focusInput()
+    },
+    onClose () {
+      this.expanded = false
+    },
     focusInput () {
       this.$nextTick(() => {
         const input = this.$el.querySelector('input')
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 5a809847..e30f6b68 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -7,7 +7,8 @@
     :bound-to="{ x: 'container' }"
     remove-padding
     popover-class="ReactButton popover-default"
-    @show="focusInput"
+    @show="onShow"
+    @close="onClose"
   >
     <template #content="{close}">
       <div class="reaction-picker-filter">
@@ -46,10 +47,24 @@
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
       >
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          :icon="['far', 'smile-beam']"
-        />
+        <FALayers>
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            :icon="['far', 'smile-beam']"
+          />
+          <FAIcon
+            v-if="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="plus"
+          />
+          <FAIcon
+            v-else
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="times"
+          />
+        </FALayers>
       </span>
     </template>
   </Popover>
@@ -125,6 +140,16 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+
+    .focus-marker {
+      visibility: hidden;
+    }
+
+    &:hover, &:focus {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 97951fccfdce726c350ab633acc45213d675adb9 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 19 Jan 2022 19:45:38 -0500
Subject: Use :focus-visible instead of :focus for focus markers

In this way, after the user clicked with a pointer and moved that
pointer away, the focus marker will no longer show a focused style.

As Safari remains the only major browser engine that does not support
:focus-visible, a fallback to :focus is used if there is no browser
support for :focus-visible.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
---
 src/components/extra_buttons/extra_buttons.vue     | 5 +++--
 src/components/favorite_button/favorite_button.vue | 9 +++++++--
 src/components/react_button/react_button.vue       | 5 +++--
 src/components/reply_button/reply_button.vue       | 5 +++--
 src/components/retweet_button/retweet_button.vue   | 9 +++++++--
 5 files changed, 23 insertions(+), 10 deletions(-)

(limited to 'src/components/react_button')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 23d74fce..d15e3102 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -168,11 +168,12 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 4015e1e6..01db63be 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -78,11 +78,16 @@
       color: var(--cOrange, $fallback--cOrange);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:focus:not(:focus-visible):not(:hover) .active-marker {
+      visibility: visible;
+    }
+
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index e30f6b68..885869f9 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -141,11 +141,12 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index d75e6fd9..0466ceb3 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -67,11 +67,12 @@
       color: var(--cBlue, $fallback--cBlue);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index ed84066d..d88adacc 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -85,11 +85,16 @@
       color: var(--cGreen, $fallback--cGreen);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:focus:not(:focus-visible):not(:hover) .active-marker {
+      visibility: visible;
+    }
+
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
-- 
cgit v1.2.3-70-g09d2


From 11672bc4907d41706ad164f1ca3c485f034061c1 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 19 Jan 2022 21:18:02 -0500
Subject: Fix styling on Safari

---
 src/_mixins.scss                                   | 17 +++++++++++++++++
 src/components/extra_buttons/extra_buttons.vue     | 10 ++++++----
 src/components/favorite_button/favorite_button.vue | 17 ++++++++++-------
 src/components/react_button/react_button.vue       | 10 ++++++----
 src/components/reply_button/reply_button.vue       | 10 ++++++----
 src/components/retweet_button/retweet_button.vue   | 17 ++++++++++-------
 6 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 src/_mixins.scss

(limited to 'src/components/react_button')

diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 00000000..1fed16c3
--- /dev/null
+++ b/src/_mixins.scss
@@ -0,0 +1,17 @@
+@mixin unfocused-style {
+  @content;
+
+  &:focus:not(:focus-visible):not(:hover) {
+    @content;
+  }
+}
+
+@mixin focused-style {
+  &:hover, &:focus {
+    @content;
+  }
+
+  &:focus-visible {
+    @content;
+  }
+}
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index d15e3102..ae50c316 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -151,6 +151,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ExtraButtons {
   /* override of popover internal stuff */
@@ -168,12 +169,13 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker,
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
-      visibility: hidden;
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 01db63be..74a1dfbb 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -53,6 +53,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .FavoriteButton {
   display: flex;
@@ -78,19 +79,21 @@
       color: var(--cOrange, $fallback--cOrange);
     }
 
-    .focus-marker,
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
-      visibility: hidden;
-    }
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
 
-    &:focus:not(:focus-visible):not(:hover) .active-marker {
-      visibility: visible;
+      .active-marker {
+        visibility: visible;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }
+
       .active-marker {
         visibility: hidden;
       }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 885869f9..8fa4d08b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -74,6 +74,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReactButton {
   .reaction-picker-filter {
@@ -141,12 +142,13 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker,
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
-      visibility: hidden;
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 0466ceb3..ea97fbaa 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -46,6 +46,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReplyButton {
   display: flex;
@@ -67,12 +68,13 @@
       color: var(--cBlue, $fallback--cBlue);
     }
 
-    .focus-marker,
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
-      visibility: hidden;
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index d88adacc..396d1200 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -60,6 +60,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .RetweetButton {
   display: flex;
@@ -85,19 +86,21 @@
       color: var(--cGreen, $fallback--cGreen);
     }
 
-    .focus-marker,
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
-      visibility: hidden;
-    }
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
 
-    &:focus:not(:focus-visible):not(:hover) .active-marker {
-      visibility: visible;
+      .active-marker {
+        visibility: visible;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }
+
       .active-marker {
         visibility: hidden;
       }
-- 
cgit v1.2.3-70-g09d2


From 5676b5cfc971edd1ce70763548b03c51963e8301 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 16 Apr 2022 15:27:35 -0400
Subject: Fix popover not popping up

Sometimes the "focus-marker" gets clicked. In this situation,
it will trigger an open, and then a close, because the original
focus-marker was removed from the dom, so $el.contains() no
longer thinks the marker is part of the trigger! We replaced the
v-if with v-show to resolve this problem.
---
 src/components/extra_buttons/extra_buttons.vue | 4 ++--
 src/components/react_button/react_button.vue   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/react_button')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index ae50c316..335aabb6 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -130,13 +130,13 @@
             icon="ellipsis-h"
           />
           <FAIcon
-            v-if="!expanded"
+            v-show="!expanded"
             class="focus-marker"
             transform="shrink-6 up-8 right-16"
             icon="plus"
           />
           <FAIcon
-            v-else
+            v-show="expanded"
             class="focus-marker"
             transform="shrink-6 up-8 right-16"
             icon="times"
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 8fa4d08b..feb95013 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -53,13 +53,13 @@
             :icon="['far', 'smile-beam']"
           />
           <FAIcon
-            v-if="!expanded"
+            v-show="!expanded"
             class="focus-marker"
             transform="shrink-6 up-9 right-17"
             icon="plus"
           />
           <FAIcon
-            v-else
+            v-show="expanded"
             class="focus-marker"
             transform="shrink-6 up-9 right-17"
             icon="times"
-- 
cgit v1.2.3-70-g09d2


From cd536157ee0e675f7a2d408043c2ddbbc30eaa3b Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 19 Aug 2022 08:45:59 -0400
Subject: Fix react & extra buttons not styled on tab-focus

---
 src/components/extra_buttons/extra_buttons.vue | 3 +++
 src/components/react_button/react_button.vue   | 3 +++
 2 files changed, 6 insertions(+)

(limited to 'src/components/react_button')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 335aabb6..011dff9b 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -169,6 +169,9 @@
       color: var(--text, $fallback--text);
     }
 
+  }
+
+  .popover-trigger-button {
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index feb95013..254c49db 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -142,6 +142,9 @@
       color: var(--text, $fallback--text);
     }
 
+  }
+
+  .popover-trigger-button {
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;
-- 
cgit v1.2.3-70-g09d2