logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

action_button.vue (2998B)

    

  1. <template>
  2.   <div
  3.     class="action-button"
  4.     :class="buttonClass"
  5.   >
  6.     <component
  7.       :is="getComponent(button)"
  8.       class="action-button-inner"
  9.       :class="buttonInnerClass"
  10.       role="menuitem"
  11.       type="button"
  12.       target="_blank"
  13.       :tabindex="0"
  14.       :disabled="buttonClass.disabled"
  15.       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
  16.       @click="doActionWrap(button, close)"
  17.     >
  18.       <FALayers>
  19.         <FAIcon
  20.           class="fa-scale-110"
  21.           :icon="button.icon(funcArg)"
  22.           :spin="!extra && getComponent(button) == 'button' && button.animated?.() && animationState"
  23.           :style="{ '--fa-animation-duration': '750ms' }"
  24.           fixed-width
  25.         />
  26.         <template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
  27.           <FAIcon
  28.             v-if="button.active(funcArg)"
  29.             class="active-marker"
  30.             transform="shrink-6 up-9 right-15"
  31.             :icon="button.activeIndicator?.(funcArg) || 'check'"
  32.           />
  33.           <FAIcon
  34.             v-if="!button.active(funcArg)"
  35.             class="focus-marker"
  36.             transform="shrink-6 up-9 right-15"
  37.             :icon="button.openIndicator?.(funcArg) || 'plus'"
  38.           />
  39.           <FAIcon
  40.             v-else
  41.             class="focus-marker"
  42.             transform="shrink-6 up-9 right-15"
  43.             :icon="button.closeIndicator?.(funcArg) || 'minus'"
  44.           />
  45.         </template>
  46.       </FALayers>
  47.       <span
  48.         v-if="extra"
  49.         class="action-label"
  50.       >
  51.         {{ $t(button.label(funcArg)) }}
  52.       </span>
  53.       <span
  54.         v-if="!extra && button.counter?.(funcArg) > 0"
  55.         class="action-counter"
  56.       >
  57.         {{ button.counter?.(funcArg) }}
  58.       </span>
  59.       <FAIcon
  60.         v-if="button.dropdown?.()"
  61.         class="chevron-icon"
  62.         size="lg"
  63.         :icon="extra ? 'chevron-right' : 'chevron-up'"
  64.         fixed-width
  65.       />
  66.     </component>
  67.     <span
  68.       v-if="!extra && button.name === 'bookmark'"
  69.       class="separator"
  70.     />
  71.     <Popover
  72.       v-if="button.name === 'bookmark'"
  73.       trigger="hover"
  74.       :placement="extra ? 'right' : 'top'"
  75.       :offset="{ y: 5 }"
  76.       :trigger-attrs="{ class: 'extra-button' }"
  77.     >
  78.       <template #trigger>
  79.         <FAIcon
  80.           class="chevron-icon"
  81.           size="lg"
  82.           :icon="extra ? 'chevron-right' : 'chevron-up'"
  83.           fixed-width
  84.         />
  85.       </template>
  86.       <template #content>
  87.         <StatusBookmarkFolderMenu
  88.           v-if="button.name === 'bookmark'"
  89.           :status="status"
  90.         />
  91.       </template>
  92.     </Popover>
  94.     <EmojiPicker
  95.       v-if="button.name === 'emoji'"
  96.       ref="picker"
  97.       :enable-sticker-picker="false"
  98.       :hide-custom-emoji="hideCustomEmoji"
  99.       class="emoji-picker-panel"
  100.       @emoji="addReaction"
  101.     />
  102.   </div>
  103. </template>
  105. <script src="./action_button.js" />
  107. <style lang="scss" src="./action_button.scss" />