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 (3069B)

    

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