cleanup + brought back quick actions styles

src/components/status_action_buttons/action_button.js

@@ -9,12 +9,14 @@ import {
   faTimes,
   faWrench,
 
+  faChevronRight,
+  faChevronUp,
+
   faReply,
   faRetweet,
   faStar,
   faSmileBeam,
 
-  faEllipsisH,
   faBookmark,
   faEyeSlash,
   faThumbtack,
@@ -33,13 +35,15 @@ library.add(
   faTimes,
   faWrench,
 
+  faChevronRight,
+  faChevronUp,
+
   faReply,
   faRetweet,
   faStar,
   faStarRegular,
   faSmileBeam,
 
-  faEllipsisH,
   faBookmark,
   faEyeSlash,
   faThumbtack,
@@ -67,14 +71,23 @@ export default {
   },
   computed: {
     buttonClass () {
+      if (!this.extra) console.log(this.button.name)
+      return [
+        this.button.name + '-button',
+        {
+          '-with-extra': this.button.name === 'bookmark',
+          '-extra': this.extra,
+          '-quick': !this.extra
+        }
+      ]
+    },
+    buttonInnerClass () {
       if (!this.extra) console.log(this.button.name)
       return [
         this.button.name + '-button',
         {
           'main-button': this.extra,
           'button-unstyled': !this.extra,
-          '-extra': this.extra,
-          '-quick': !this.extra,
           '-active': this.button.active?.(this.funcArg),
           disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
         }

src/components/status_action_buttons/action_button.scss

@@ -1,41 +1,63 @@
 @import "../../mixins";
 /* stylelint-disable declaration-no-important */
 
-.action-button {
+.quick-action {
   display: grid;
+  grid-template-columns: max-content;
+  grid-gap: 0.25em;
 
-  &.-with-extra {
+  &.-pin {
-    grid-template-columns: 1fr calc(var(--__line-height) + 2 * var(--__horizontal-gap));
+    margin: calc(-2px - 0.25em);
+    padding: 0.25em;
+    border: 2px dashed var(--icon);
+    border-radius: var(--roundness);
+    grid-template-columns: 1fr auto;
   }
 
-  &.-quick {
+  .action-button-inner,
+  .extra-button {
+    margin: -0.5em;
+    padding: 0.5em;
+  }
+
+  .action-button-inner {
     display: grid;
-    grid-template-columns: max-content auto;
     grid-gap: 1em;
+    grid-template-columns: max-content max-content;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
     align-items: center;
   }
 
-  &.disabled {
+  .extra-button {
-    cursor: not-allowed;
+    border-left: 1px solid var(--icon);
   }
+}
 
-  &:hover,
+.action-button {
-  &.-active {
+  display: grid;
-    &.reply-button:not(.disabled) {
+  grid-auto-flow: column;
-      .svg-inline--fa {
+  padding: 0;
-        color: var(--cBlue);
+
+  .action-button-inner {
+    &:hover,
+    &.-active {
+      &.reply-button:not(.disabled) {
+        .svg-inline--fa {
+          color: var(--cBlue);
+        }
       }
-    }
 
-    &.retweet-button:not(.disabled) {
+      &.retweet-button:not(.disabled) {
-      .svg-inline--fa {
+        .svg-inline--fa {
-        color: var(--cGreen);
+          color: var(--cGreen);
+        }
       }
-    }
 
-    &.favorite-button:not(.disabled) {
+      &.favorite-button:not(.disabled) {
-      .svg-inline--fa {
+        .svg-inline--fa {
-        color: var(--cOrange);
+          color: var(--cOrange);
+        }
       }
     }
   }

src/components/status_action_buttons/action_button.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     class="action-button"
-    :class="{ '-with-extra': button.name === 'bookmark' }"
+    :class="buttonClass"
   >
     <component
       :is="getComponent(button)"
       class="action-button-inner"
-      :class="buttonClass"
+      :class="buttonInnerClass"
       role="menuitem"
       :tabindex="0"
       :disabled="buttonClass.disabled"
@@ -58,13 +58,13 @@
         v-if="button.dropdown?.()"
         class="chevron-icon"
         size="lg"
-        icon="chevron-right"
+        :icon="extra ? 'chevron-right' : 'chevron-up'"
         fixed-width
       />
     </component>
     <Popover
       trigger="hover"
-      placement="right"
+      :placement="extra ? 'right' : 'top'"
       :trigger-attrs="{ class: 'extra-button' }"
       v-if="button.name === 'bookmark'"
     >
@@ -72,7 +72,7 @@
         <FAIcon
           class="chevron-icon"
           size="lg"
-          icon="chevron-right"
+          :icon="extra ? 'chevron-right' : 'chevron-up'"
           fixed-width
         />
       </template>

src/components/status_action_buttons/action_button_container.vue

@@ -1,14 +1,14 @@
 <template>
   <Popover
     trigger="hover"
-    placement="right"
+    :placement="$attrs.extra ? 'right' : 'top'"
     v-if="button.dropdown?.()"
   >
     <template #trigger>
       {{ props }}
       <ActionButton
         :button="button"
-        v-bind="$attrs"
+        v-bind.prop="$attrs"
       />
     </template>
     <template #content>

src/components/status_action_buttons/status_action_buttons.scss

@@ -11,14 +11,11 @@
   }
 }
 // popover
-/* stylelint-disable no-descending-specificity */
 .extra-action-buttons {
   .extra-action {
-    .pin-action-button {
+    margin: 0;
-      margin: 0;
+    padding-top: 0;
-      padding: var(--__horizontal-gap) var(--__horizontal-gap);
+    padding-bottom: 0;
-    }
+    padding-right: 0;
   }
 }
-
-/* stylelint-enable no-descending-specificity */

src/components/status_action_buttons/status_action_buttons.vue

@@ -8,6 +8,7 @@
         :key="button.name"
       >
         <ActionButtonContainer
+          :class="{ '-pin': showPin }"
           :button="button"
           :status="status"
           :extra="false"
@@ -92,7 +93,7 @@
               <button
                 v-if="showPin && currentUser"
                 type="button"
-                class="button-unstyled pin-action-button"
+                class="button-unstyled pin-action-button extra-button"
                 :title="$t('general.pin')"
                 :aria-pressed="false"
                 @click.stop.prevent="pin(button)"