pleroma-fe

commit: cafa8da357676cd50abe5575b830d567833e30be
parent edad925e64f63fd4caaa9f7c2b112eb78790fe40
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 26 Jan 2025 22:51:11 +0200

quick actions improvements

Diffstat:
M
src/components/status_action_buttons/action_button.scss
8
++++----
M
src/components/status_action_buttons/action_button.vue
16
++++++++--------
M
src/components/status_action_buttons/action_button_container.vue
2
+-

3 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
@@ -2,9 +2,7 @@
 /* stylelint-disable declaration-no-important */
 
 .quick-action {
-  display: grid;
-  grid-template-columns: minmax(max-content, 1fr);
-  grid-gap: 0.25em;
+  display: flex;
   align-items: center;
   height: 1.5em;
 
@@ -12,6 +10,7 @@
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-left: 1em;
   }
 
   .action-button-inner,
@@ -25,6 +24,7 @@
     align-self: stretch;
     width: 1px;
     background-color: var(--icon);
+    margin-left: 1em;
     margin-right: 0.5em;
   }
 
@@ -44,7 +44,7 @@
   .action-button-inner {
     display: grid;
     grid-gap: 1em;
-    grid-template-columns: max-content 1fr;
+    grid-template-columns: max-content;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     align-items: center;
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
@@ -50,12 +50,6 @@
       >
         {{ $t(button.label(funcArg)) }}
       </span>
-      <span
-        v-if="!extra && button.counter?.(funcArg) > 0"
-        class="action-counter"
-      >
-        {{ button.counter?.(funcArg) }}
-      </span>
       <FAIcon
         v-if="button.dropdown?.()"
         class="chevron-icon"
@@ -65,14 +59,20 @@
       />
     </component>
     <span
+      v-if="!extra && button.counter?.(funcArg) > 0"
+      class="action-counter"
+    >
+      {{ button.counter?.(funcArg) }}
+    </span>
+    <span
       v-if="!extra && button.name === 'bookmark'"
       class="separator"
     />
     <Popover
       v-if="button.name === 'bookmark'"
-      trigger="hover"
+      :trigger="extra ? 'hover' : 'click'"
       :placement="extra ? 'right' : 'top'"
-      :offset="{ y: 5 }"
+      :offset="extra ? { x: 10 } : { y: 10 }"
       :trigger-attrs="{ class: 'extra-button' }"
     >
       <template #trigger>
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
@@ -2,7 +2,7 @@
   <div>
     <Popover
       v-if="button.dropdown?.()"
-      trigger="hover"
+      trigger="click"
       :offset="{ y: 5 }"
       :placement="$attrs.extra ? 'right' : 'top'"
     >