logo

pleroma-fe

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

draft.vue (4199B)

    

  1. <template>
  2.   <article class="Draft">
  3.     <div
  4.       v-if="!editing"
  5.       class="status-content"
  6.     >
  7.       <div>
  8.         <i18n-t
  9.           v-if="draft.type === 'reply' || draft.type === 'edit'"
  10.           tag="span"
  11.           :keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
  12.         >
  13.           <template #statusLink>
  14.             <router-link
  15.               class="faint-link"
  16.               :to="{ name: 'conversation', params: { id: draft.refId } }"
  17.             >
  18.               {{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
  19.             </router-link>
  20.           </template>
  21.         </i18n-t>
  22.         <StatusContent
  23.           v-if="draft.refId && refStatus"
  24.           class="status-content"
  25.           :status="refStatus"
  26.           :compact="true"
  27.         />
  28.       </div>
  29.       <div class="status-preview">
  30.         <span class="status_content">
  31.           <p v-if="draft.spoilerText">
  32.             <i>
  33.               {{ draft.spoilerText }}:
  34.             </i>
  35.           </p>
  36.           <p v-if="draft.status">{{ draft.status }}</p>
  37.           <p
  38.             v-else
  39.             class="faint"
  40.           >{{ $t('drafts.empty') }}</p>
  41.         </span>
  42.         <gallery
  43.           v-if="draft.files?.length !== 0"
  44.           class="attachments media-body"
  45.           :compact="true"
  46.           :nsfw="nsfwClickthrough"
  47.           :attachments="draft.files"
  48.           :limit="1"
  49.           size="small"
  50.           @play="$emit('mediaplay', attachment.id)"
  51.           @pause="$emit('mediapause', attachment.id)"
  52.         />
  53.         <div
  54.           v-if="draft.poll.options"
  55.           class="poll-indicator-container"
  56.           :title="$t('drafts.poll_tooltip')"
  57.         >
  58.           <div class="poll-indicator">
  59.             <FAIcon
  60.               icon="poll-h"
  61.               size="3x"
  62.             />
  63.           </div>
  64.         </div>
  65.       </div>
  66.     </div>
  67.     <div v-if="editing">
  68.       <PostStatusForm
  69.         v-if="draft.type !== 'edit'"
  70.         :hide-draft="true"
  71.         v-bind="postStatusFormProps"
  72.       />
  73.       <EditStatusForm
  74.         v-else
  75.         :hide-draft="true"
  76.         :params="postStatusFormProps"
  77.       />
  78.     </div>
  79.     <teleport to="#modal">
  80.       <confirm-modal
  81.         v-if="showingConfirmDialog"
  82.         :title="$t('drafts.abandon_confirm_title')"
  83.         :confirm-text="$t('drafts.abandon_confirm_accept_button')"
  84.         :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
  85.         @accepted="doAbandon"
  86.         @cancelled="hideConfirmDialog"
  87.       >
  88.         {{ $t('drafts.abandon_confirm') }}
  89.       </confirm-modal>
  90.     </teleport>
  91.     <div class="actions">
  92.       <button
  93.         class="btn button-default"
  94.         :aria-expanded="editing"
  95.         @click.prevent.stop="toggleEditing"
  96.       >
  97.         {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
  98.       </button>
  99.       <button
  100.         class="btn button-default"
  101.         @click.prevent.stop="abandon"
  102.       >
  103.         {{ $t('drafts.abandon') }}
  104.       </button>
  105.     </div>
  106.   </article>
  107. </template>
  109. <script src="./draft.js"></script>
  111. <style lang="scss">
  112. .Draft {
  113.   position: relative;
  115.   .status-content {
  116.     padding: 0.5em;
  117.     margin: 0.5em 0;
  118.   }
  120.   .status-preview {
  121.     display: grid;
  122.     grid-template-columns: 1fr;
  123.     grid-auto-columns: 10em;
  124.     grid-auto-flow: column;
  125.     grid-gap: 0.5em;
  126.     align-items: start;
  127.     max-width: 100%;
  129.     p {
  130.       word-wrap: break-word;
  131.       white-space: normal;
  132.       overflow-x: hidden;
  133.     }
  135.     .poll-indicator-container {
  136.       border-radius: var(--roundness);
  137.       display: grid;
  138.       justify-items: center;
  139.       align-items: center;
  140.       align-self: start;
  141.       height: 0;
  142.       padding-bottom: 62.5%;
  143.       position: relative;
  144.     }
  146.     .poll-indicator {
  147.       box-sizing: border-box;
  148.       border: 1px solid var(--border);
  149.       position: absolute;
  150.       top: 0;
  151.       bottom: 0;
  152.       left: 0;
  153.       right: 0;
  154.       display: grid;
  155.       justify-items: center;
  156.       align-items: center;
  157.       width: 100%;
  158.       height: 100%;
  159.     }
  160.   }
  162.   .actions {
  163.     display: flex;
  164.     flex-direction: row;
  165.     justify-content: space-evenly;
  167.     .btn {
  168.       flex: 1;
  169.       margin-left: 1em;
  170.       margin-right: 1em;
  171.     }
  172.   }
  173. }
  174. </style>