From 7b99d98c553f40ec4d633d0d4fdf65f275c80e77 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 12:32:42 +0200
Subject: Replace all use of <a> + href='#' with proper buttons

---
 src/components/retweet_button/retweet_button.js  |  5 ---
 src/components/retweet_button/retweet_button.vue | 48 ++++++++++++------------
 2 files changed, 23 insertions(+), 30 deletions(-)

(limited to 'src/components/retweet_button')

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 5ee4179a..2103fd0b 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -24,11 +24,6 @@ const RetweetButton = {
     }
   },
   computed: {
-    classes () {
-      return {
-        '-repeated': this.status.repeated
-      }
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b234f3d9..5d4915aa 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,29 +1,29 @@
 <template>
-  <div v-if="loggedIn">
-    <template v-if="visibility !== 'private' && visibility !== 'direct'">
+  <div>
+    <button
+      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+      class="button-unstyled -padded RetweetButton -interactive"
+      :class="status.repeated && '-repeated'"
+    >
       <FAIcon
-        :class="classes"
-        class="RetweetButton fa-scale-110 fa-old-padding -interactive"
+        class="fa-scale-110 fa-old-padding"
         icon="retweet"
         :spin="animated"
         :title="$t('tool_tip.repeat')"
         @click.prevent="retweet()"
       />
-      <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
-    </template>
-    <template v-else>
-      <FAIcon
-        :class="classes"
-        class="RetweetButton fa-scale-110 fa-old-padding"
-        icon="lock"
-        :title="$t('timeline.no_retweet_hint')"
-      />
-    </template>
-  </div>
-  <div v-else-if="!loggedIn">
+    </button>
+    <FAIcon
+      v-else-if="loggedIn"
+      :class="classes"
+      class="RetweetButton fa-scale-110 fa-old-padding"
+      icon="lock"
+      :title="$t('timeline.no_retweet_hint')"
+    />
     <FAIcon
+      v-else
       :class="classes"
-      class="fa-scale-110 fa-old-padding"
+      class="RetweetButton fa-scale-110 fa-old-padding"
       icon="retweet"
       :title="$t('tool_tip.repeat')"
     />
@@ -38,18 +38,16 @@
 
 .RetweetButton {
   &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
   }
-
-  &.-repeated {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From bee77ffdb284601720b9a13a19ca029af258d617 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 26 Nov 2020 18:23:53 +0200
Subject: fix retweet event handler, fix text being selectable for status
 action counters

---
 src/App.scss                                       |  5 ----
 src/components/favorite_button/favorite_button.vue | 24 ++++++++++++---
 src/components/notifications/notifications.vue     |  2 +-
 src/components/reply_button/reply_button.vue       | 25 ++++++++++++----
 src/components/retweet_button/retweet_button.vue   | 34 +++++++++++++++-------
 5 files changed, 65 insertions(+), 25 deletions(-)

(limited to 'src/components/retweet_button')

diff --git a/src/App.scss b/src/App.scss
index b2c7be13..cdc3209c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -173,11 +173,6 @@ a {
     color: var(--link, $fallback--link);
   }
 
-  &.-padded {
-    padding: 10px;
-    margin: -10px;
-  }
-
   &.-fullwidth {
     width: 100%;
   }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index d54ae78c..9fc4f9d8 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="FavoriteButton">
     <button
       v-if="loggedIn"
-      class="FavoriteButton -interactive button-unstyled -padded"
+      class="button-unstyled interactive"
       :class="status.favorited && '-favorited'"
       :title="$t('tool_tip.favorite')"
       @click.prevent="favorite()"
@@ -19,7 +19,12 @@
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
     />
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
+      class="action-counter"
+    >
+      {{ status.fave_num }}
+    </span>
   </div>
 </template>
 
@@ -29,8 +34,19 @@
 @import '../../_variables.scss';
 
 .FavoriteButton {
-  &.-interactive {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -5px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
 
+  .interactive {
     .svg-inline--fa {
       animation-duration: 0.6s;
     }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 725d1ad4..4cdb436c 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -43,7 +43,7 @@
         </div>
         <button
           v-else-if="!loading"
-          class="button-unstyled -link -fullwidth"
+          class="button-unstyled -link -block"
           @click.prevent="fetchOlderNotifications()"
         >
           <div class="new-status-notification text-center panel-footer">
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 1b02881a..fb010278 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="ReplyButton">
     <button
       v-if="loggedIn"
-      class="button-unstyled ReplyButton -padded -interactive"
+      class="button-unstyled interactive"
       :class="{'-active': replying}"
       :title="$t('tool_tip.reply')"
       @click.prevent="$emit('toggle')"
@@ -15,10 +15,13 @@
     <FAIcon
       v-else
       icon="reply"
-      class="ReplyButton fa-scale-110 fa-old-padding"
+      class="fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.reply')"
     />
-    <span v-if="status.replies_count > 0">
+    <span
+      v-if="status.replies_count > 0"
+      class="action-counter"
+    >
       {{ status.replies_count }}
     </span>
   </div>
@@ -30,13 +33,25 @@
 @import '../../_variables.scss';
 
 .ReplyButton {
-  &.-interactive {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -5px -10px -10px;
+  }
 
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
     &:hover .svg-inline--fa,
     &.-active .svg-inline--fa {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }
   }
+
 }
 </style>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 5d4915aa..2a7301ce 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,33 +1,36 @@
 <template>
-  <div>
+  <div class="RetweetButton">
     <button
       v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
-      class="button-unstyled -padded RetweetButton -interactive"
+      class="button-unstyled interactive"
       :class="status.repeated && '-repeated'"
+      :title="$t('tool_tip.repeat')"
+      @click.prevent="retweet()"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="retweet"
         :spin="animated"
-        :title="$t('tool_tip.repeat')"
-        @click.prevent="retweet()"
       />
     </button>
     <FAIcon
       v-else-if="loggedIn"
-      :class="classes"
-      class="RetweetButton fa-scale-110 fa-old-padding"
+      class="fa-scale-110 fa-old-padding"
       icon="lock"
       :title="$t('timeline.no_retweet_hint')"
     />
     <FAIcon
       v-else
-      :class="classes"
-      class="RetweetButton fa-scale-110 fa-old-padding"
+      class="fa-scale-110 fa-old-padding"
       icon="retweet"
       :title="$t('tool_tip.repeat')"
     />
-    <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
+      class="no-event"
+    >
+      {{ status.repeat_num }}
+    </span>
   </div>
 </template>
 
@@ -37,8 +40,19 @@
 @import '../../_variables.scss';
 
 .RetweetButton {
-  &.-interactive {
+  display: flex;
+
+  > :first-child {
+    padding: 10px;
+    margin: -10px -5px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
 
+  .interactive {
     .svg-inline--fa {
       animation-duration: 0.6s;
     }
-- 
cgit v1.2.3-70-g09d2


From 276ef31145c4f485c0b899f5243c49e2cbf80cc1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 26 Nov 2020 23:01:16 +0200
Subject: fix alternative icons having wrong offsets

---
 src/components/favorite_button/favorite_button.vue | 15 ++++++------
 src/components/reply_button/reply_button.vue       | 15 ++++++------
 src/components/retweet_button/retweet_button.vue   | 28 ++++++++++++----------
 3 files changed, 31 insertions(+), 27 deletions(-)

(limited to 'src/components/retweet_button')

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 9fc4f9d8..dce25e24 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -13,12 +13,13 @@
         :spin="animated"
       />
     </button>
-    <FAIcon
-      v-else
-      class="FavoriteButton fa-scale-110 fa-old-padding"
-      :title="$t('tool_tip.favorite')"
-      :icon="['far', 'star']"
-    />
+    <span v-else>
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.favorite')"
+        :icon="['far', 'star']"
+      />
+    </span>
     <span
       v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
       class="action-counter"
@@ -38,7 +39,7 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -5px -10px -10px;
+    margin: -10px -8px -10px -10px;
   }
 
   .action-counter {
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index fb010278..c17041da 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -12,12 +12,13 @@
         icon="reply"
       />
     </button>
-    <FAIcon
-      v-else
-      icon="reply"
-      class="fa-scale-110 fa-old-padding"
-      :title="$t('tool_tip.reply')"
-    />
+    <span v-else>
+      <FAIcon
+        icon="reply"
+        class="fa-scale-110 fa-old-padding"
+        :title="$t('tool_tip.reply')"
+      />
+    </span>
     <span
       v-if="status.replies_count > 0"
       class="action-counter"
@@ -37,7 +38,7 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -5px -10px -10px;
+    margin: -10px -8px -10px -10px;
   }
 
   .action-counter {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 2a7301ce..859ce499 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -13,18 +13,20 @@
         :spin="animated"
       />
     </button>
-    <FAIcon
-      v-else-if="loggedIn"
-      class="fa-scale-110 fa-old-padding"
-      icon="lock"
-      :title="$t('timeline.no_retweet_hint')"
-    />
-    <FAIcon
-      v-else
-      class="fa-scale-110 fa-old-padding"
-      icon="retweet"
-      :title="$t('tool_tip.repeat')"
-    />
+    <span v-else-if="loggedIn">
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="lock"
+        :title="$t('timeline.no_retweet_hint')"
+      />
+    </span>
+    <span v-else>
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="retweet"
+        :title="$t('tool_tip.repeat')"
+      />
+    </span>
     <span
       v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
       class="no-event"
@@ -44,7 +46,7 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -5px -10px -10px;
+    margin: -10px -8px -10px -10px;
   }
 
   .action-counter {
-- 
cgit v1.2.3-70-g09d2