From 8b775f94a99b4cdda2c8581d1803a0599c8b0e3a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 14:52:01 +0200
Subject: more fixes, add fullwidth

---
 src/components/popover/popover.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 9b8680e5..3868ec96 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -3,12 +3,13 @@
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
-    <div
+    <button
       ref="trigger"
+      class="button-unstyled -fullwidth"
       @click="onClick"
     >
       <slot name="trigger" />
-    </div>
+    </button>
     <div
       v-if="!hidden"
       ref="content"
-- 
cgit v1.2.3-70-g09d2


From 1d178b7341d9848b64d5f2eb27338ac26f046a2a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 21:35:14 +0200
Subject: fix too big hide button, fix weird 28px hack

---
 src/components/attachment/attachment.vue       | 4 ++--
 src/components/popover/popover.vue             | 6 +++++-
 src/components/timeline_menu/timeline_menu.vue | 1 -
 3 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index b072b170..2c1c1682 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -44,7 +44,7 @@
     </a>
     <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="button-unstyled -padded hider"
+      class="button-unstyled hider"
       @click.prevent="toggleHidden"
     >
       <FAIcon icon="times" />
@@ -233,7 +233,7 @@
     position: absolute;
     right: 0;
     margin: 10px;
-    padding: 5px;
+    padding: 0;
     z-index: 4;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 3868ec96..020eab05 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,7 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled -fullwidth"
+      class="button-unstyled -fullwidth popover-trigger-button"
       @click="onClick"
     >
       <slot name="trigger" />
@@ -31,6 +31,10 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.popover-trigger-button {
+  display: block;
+}
+
 .popover {
   z-index: 8;
   position: absolute;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index f8f79be9..c46531be 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -84,7 +84,6 @@
   margin-right: auto;
   min-width: 0;
   width: 24rem;
-  height: 28px;
 
   .timeline-menu-popover-wrap {
     overflow: hidden;
-- 
cgit v1.2.3-70-g09d2


From 46320090e34073d349e1bcf8e9babd3c36657130 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 3 Dec 2020 11:57:17 +0200
Subject: move external source button to extra buttons, make expand button
 easier to click and highlight on hover

---
 src/components/extra_buttons/extra_buttons.js  |  6 ++++--
 src/components/extra_buttons/extra_buttons.vue | 29 +++++++++++++++++++-------
 src/components/popover/popover.vue             |  1 +
 src/components/status/status.js                |  2 --
 src/components/status/status.scss              | 14 +++++++++++++
 src/components/status/status.vue               | 23 +++++++-------------
 src/i18n/en.json                               |  4 +++-
 7 files changed, 51 insertions(+), 28 deletions(-)

(limited to 'src/components/popover/popover.vue')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 1a8eef72..b5b29e8a 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -5,7 +5,8 @@ import {
   faBookmark,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as faBookmarkReg
@@ -17,7 +18,8 @@ library.add(
   faBookmarkReg,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt
 )
 
 const ExtraButtons = {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index e687d487..dc790cad 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,5 +1,6 @@
 <template>
   <Popover
+    class="ExtraButtons"
     trigger="click"
     placement="top"
     :offset="{ y: 5 }"
@@ -96,11 +97,23 @@
             icon="share-alt"
           /><span>{{ $t("status.copy_link") }}</span>
         </button>
+        <a
+          v-if="!status.is_local"
+          class="button-default dropdown-item dropdown-item-icon"
+          title="Source"
+          :href="status.external_url"
+          target="_blank"
+        >
+          <FAIcon
+            fixed-width
+            icon="external-link-alt"
+          /><span>{{ $t("status.external_source") }}</span>
+        </a>
       </div>
     </div>
     <span
       slot="trigger"
-      class="ExtraButtons"
+      class="popover-trigger"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
@@ -116,13 +129,15 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
-  position: static;
-  padding: 10px;
-  margin: -10px;
+  .popover-trigger {
+    position: static;
+    padding: 10px;
+    margin: -10px;
 
-  &:hover .svg-inline--fa {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 }
 </style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 020eab05..2252c68f 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -95,6 +95,7 @@
     box-shadow: none;
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
 
     --btnText: var(--popoverText, $fallback--text);
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 142e1fc6..f9c710ab 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -26,7 +26,6 @@ import {
   faTimes,
   faRetweet,
   faReply,
-  faExternalLinkSquareAlt,
   faPlusSquare,
   faSmileBeam,
   faEllipsisH,
@@ -44,7 +43,6 @@ library.add(
   faTimes,
   faRetweet,
   faReply,
-  faExternalLinkSquareAlt,
   faPlusSquare,
   faStar,
   faSmileBeam,
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 70c6d03d..58b55bc8 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -139,6 +139,20 @@ $status-margin: 0.75em;
   .heading-right {
     display: flex;
     flex-shrink: 0;
+
+    .button-unstyled {
+      padding: 5px;
+      margin: -5px;
+
+      &:hover svg {
+        color: $fallback--lightText;
+        color: var(--lightText, $fallback--lightText);
+      }
+    }
+
+    .svg-inline--fa {
+      margin-left: 0.25em;
+    }
   }
 
   .timeago {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 896635ee..6ee8117f 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -184,30 +184,20 @@
                   :title="status.visibility | capitalize"
                 >
                   <FAIcon
-                    class="fa-scale-110 fa-old-padding"
+                    fixed-width
+                    class="fa-scale-110"
                     :icon="visibilityIcon(status.visibility)"
                   />
                 </span>
-                <a
-                  v-if="!status.is_local && !isPreview"
-                  :href="status.external_url"
-                  target="_blank"
-                  class="source_url"
-                  title="Source"
-                >
-                  <FAIcon
-                    class="fa-scale-110 fa-old-padding"
-                    icon="external-link-square-alt"
-                  />
-                </a>
                 <button
                   v-if="expandable && !isPreview"
                   class="button-unstyled"
-                  title="Expand"
+                  :title="$t('status.expand')"
                   @click.prevent="toggleExpanded"
                 >
                   <FAIcon
-                    class="fa-scale-110 fa-old-padding"
+                    fixed-width
+                    class="fa-scale-110"
                     icon="plus-square"
                   />
                 </button>
@@ -217,8 +207,9 @@
                   @click.prevent="toggleMute"
                 >
                   <FAIcon
+                    fixed-width
                     icon="eye-slash"
-                    class="fa-scale-110 fa-old-padding"
+                    class="fa-scale-110"
                   />
                 </button>
               </span>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ef23efd6..64425259 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -661,6 +661,7 @@
     "unmute_conversation": "Unmute conversation",
     "status_unavailable": "Status unavailable",
     "copy_link": "Copy link to status",
+    "external_source": "External source",
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
     "show_full_subject": "Show full subject",
@@ -668,7 +669,8 @@
     "show_content": "Show content",
     "hide_content": "Hide content",
     "status_deleted": "This post was deleted",
-    "nsfw": "NSFW"
+    "nsfw": "NSFW",
+    "expand": "Expand"
   },
   "user_card": {
     "approve": "Approve",
-- 
cgit v1.2.3-70-g09d2