logo

pleroma-fe

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

status_action_buttons.vue (3965B)

    

  1. <template>
  2.   <div class="StatusActionButtons">
  3.     <span class="quick-action-buttons">
  4.       <span
  5.         v-for="button in quickButtons"
  6.         :key="button.name"
  7.         class="quick-action"
  8.         :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
  9.       >
  10.         <ActionButtonContainer
  11.           :class="{ '-pin': showPin }"
  12.           :button="button"
  13.           :status="status"
  14.           :extra="false"
  15.           :func-arg="funcArg"
  16.           :get-class="getClass"
  17.           :get-component="getComponent"
  18.           :close="() => {}"
  19.           :do-action="doAction"
  20.         />
  21.         <button
  22.           v-if="showPin && currentUser"
  23.           type="button"
  24.           class="button-unstyled pin-action-button"
  25.           :title="$t('general.unpin')"
  26.           :aria-pressed="true"
  27.           @click.stop.prevent="unpin(button)"
  28.         >
  29.           <FAIcon
  30.             v-if="showPin && currentUser"
  31.             fixed-width
  32.             class="fa-scale-110"
  33.             icon="thumbtack"
  34.           />
  35.         </button>
  36.       </span>
  37.       <Popover
  38.         trigger="click"
  39.         :trigger-attrs="triggerAttrs"
  40.         :tabindex="0"
  41.         placement="top"
  42.         :offset="{ y: 5 }"
  43.         remove-padding
  44.         @close="onExtraClose"
  45.       >
  46.         <template #trigger>
  47.           <FAIcon
  48.             class="fa-scale-110 "
  49.             icon="ellipsis-h"
  50.           />
  51.         </template>
  52.         <template #content="{close, resize}">
  53.           <div
  54.             :id="`popup-menu-${randomSeed}`"
  55.             class="dropdown-menu extra-action-buttons"
  56.             role="menu"
  57.           >
  58.             <div
  59.               v-if="currentUser"
  60.               class="menu-item dropdown-item extra-action -icon"
  61.             >
  62.               <button
  63.                 class="main-button"
  64.                 role="menuitem"
  65.                 :tabindex="0"
  66.                 @click.stop="() => { resize(); showPin = !showPin }"
  67.               >
  68.                 <FAIcon
  69.                   class="fa-scale-110"
  70.                   fixed-width
  71.                   icon="wrench"
  72.                 /><span>{{ $t('nav.edit_pinned') }}</span>
  73.               </button>
  74.             </div>
  75.             <div
  76.               v-for="button in extraButtons"
  77.               :key="button.name"
  78.               class="menu-item dropdown-item extra-action -icon"
  79.               :disabled="getClass(button).disabled"
  80.               :class="{ disabled: getClass(button).disabled }"
  81.             >
  82.               <ActionButtonContainer
  83.                 :button="button"
  84.                 :status="status"
  85.                 :extra="true"
  86.                 :func-arg="funcArg"
  87.                 :get-class="getClass"
  88.                 :get-component="getComponent"
  89.                 :close="close"
  90.                 :do-action="doAction"
  91.               />
  92.               <button
  93.                 v-if="showPin && currentUser"
  94.                 type="button"
  95.                 class="button-unstyled pin-action-button extra-button"
  96.                 :title="$t('general.pin')"
  97.                 :aria-pressed="false"
  98.                 @click.stop.prevent="pin(button)"
  99.               >
  100.                 <FAIcon
  101.                   v-if="showPin && currentUser"
  102.                   fixed-width
  103.                   class="fa-scale-110"
  104.                   transform="rotate-45"
  105.                   icon="thumbtack"
  106.                 />
  107.               </button>
  108.             </div>
  109.           </div>
  110.         </template>
  111.       </Popover>
  112.     </span>
  114.     <teleport to="#modal">
  115.       <confirm-modal
  116.         v-if="showingConfirmDialog"
  117.         :title="currentConfirmTitle"
  118.         :confirm-text="currentConfirmOkText"
  119.         :cancel-text="currentConfirmCancelText"
  120.         @accepted="currentConfirmAction"
  121.         @cancelled="showingConfirmDialog = false"
  122.       >
  123.         {{ currentConfirmBody }}
  124.       </confirm-modal>
  125.     </teleport>
  126.   </div>
  127. </template>
  129. <script src="./status_action_buttons.js"></script>
  131. <style lang="scss" src="./status_action_buttons.scss"></style>