pleroma-fe

commit: 7bab1e42591bc421242f4c122638a8469a743fef
parent 8912664ab33a56464929a6086294ce91508bb117
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 19 Feb 2025 16:22:10 +0200

improvements for bookmark button

Diffstat:
M
src/components/popover/popover.scss
1
+
M
src/components/status_action_buttons/action_button.js
2
+-
M
src/components/status_action_buttons/action_button.vue
5
+++--
M
src/components/status_action_buttons/status_action_buttons.vue
2
+-
M
src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
9
++++++---
A
src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.scss
9
+++++++++
M
src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
9
++++++---

7 files changed, 27 insertions(+), 10 deletions(-)
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
@@ -54,6 +54,7 @@
     grid-template-columns: 1fr;
     grid-auto-flow: column;
     grid-auto-columns: auto;
+    grid-gap: 0.5em;
 
     .popover-wrapper {
       box-sizing: border-box;
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
@@ -65,7 +65,7 @@ export default {
     'getClass',
     'getComponent',
     'doAction',
-    'close'
+    'outerClose'
   ],
   components: {
     StatusBookmarkFolderMenu,
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
@@ -14,7 +14,7 @@
       :tabindex="0"
       :disabled="buttonClass.disabled"
       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
-      @click="doActionWrap(button, close)"
+      @click="doActionWrap(button, outerClose)"
     >
       <FALayers>
         <FAIcon
@@ -84,10 +84,11 @@
           fixed-width
         />
       </template>
-      <template #content>
+      <template #content="{close}">
         <StatusBookmarkFolderMenu
           v-if="button.name === 'bookmark'"
           :status="status"
+          :close="() => { close(); outerClose() }"
         />
       </template>
     </Popover>
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
@@ -86,7 +86,7 @@
                 :func-arg="funcArg"
                 :get-class="getClass"
                 :get-component="getComponent"
-                :close="close"
+                :outerClose="close"
                 :do-action="doAction"
               />
               <button
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
@@ -2,19 +2,22 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
 import { mapState } from 'vuex'
 
-import Popover from '../popover/popover.vue'
+import Popover from 'src/components/popover/popover.vue'
+import StillImage from 'src/components/still-image/still-image.vue'
 
 library.add(faChevronRight, faFolder)
 
 const StatusBookmarkFolderMenu = {
   props: [
-    'status'
+    'status',
+    'close'
   ],
   data () {
     return {}
   },
   components: {
-    Popover
+    Popover,
+    StillImage
   },
   computed: {
     ...mapState({
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.scss b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.scss
@@ -0,0 +1,9 @@
+.bookmark-folder-menu {
+  --__horizontal-gap: 0.5em;
+  --_still-image-label-visibility: hidden;
+
+  .emoji {
+    width: var(--__line-height);
+    height: var(--__line-height);
+  }
+}
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu bookmark-folder-menu">
     <div
       v-for="folder in folders"
       :key="folder.id"
-      class="menu-item dropdown-item -icon"
+      class="menu-item dropdown-item -icon-double"
     >
       <button
         class="main-button"
         @click="toggleFolder(folder.id)"
+        @click.stop="close"
       >
         <span
           class="input menu-checkbox -radio"
           :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
         />
-        {{ folder.name }}
+        <StillImage :src="folder.emoji_url" class="emoji" />
+        {{ ' ' + folder.name }}
       </button>
     </div>
   </div>
 </template>
 
 <script src="./status_bookmark_folder_menu.js"></script>
+<stlye src="./status_bookmark_folder_menu.scss" />