pleroma-fe/src/components/draft/draft.vue

<template>
  <article class="Draft">
    <div
      v-if="!editing"
      class="status-content"
    >
      <div>
        <i18n-t
          v-if="draft.type === 'reply' || draft.type === 'edit'"
          tag="span"
          :keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
        >
          <template #statusLink>
            <router-link
              class="faint-link"
              :to="{ name: 'conversation', params: { id: draft.refId } }"
            >
              {{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
            </router-link>
          </template>
        </i18n-t>
        <StatusContent
          v-if="draft.refId && refStatus"
          class="status-content"
          :status="refStatus"
          :compact="true"
        />
      </div>
      <div class="status-preview">
        <p v-if="draft.status">{{ draft.status }}</p>
        <p v-else class="faint">{{ $t('drafts.empty') }}</p>
        <gallery
          v-if="draft.files?.length !== 0"
          class="attachments media-body"
          :compact="true"
          :nsfw="nsfwClickthrough"
          :attachments="draft.files"
          :limit="1"
          size="small"
          @play="$emit('mediaplay', attachment.id)"
          @pause="$emit('mediapause', attachment.id)"
        />
        <div
          v-if="draft.poll.options"
          class="poll-indicator-container"
          :title="$t('drafts.poll_tooltip')"
        >
          <div class="poll-indicator">
            <FAIcon
              icon="poll-h"
              size="3x"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-if="editing">
      <PostStatusForm
        v-if="draft.type !== 'edit'"
        :disable-draft="true"
        v-bind="postStatusFormProps"
      />
      <EditStatusForm
        v-else
        :disable-draft="true"
        :params="postStatusFormProps"
      />
    </div>
    <teleport to="#modal">
      <confirm-modal
        v-if="showingConfirmDialog"
        :title="$t('drafts.abandon_confirm_title')"
        :confirm-text="$t('drafts.abandon_confirm_accept_button')"
        :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
        @accepted="doAbandon"
        @cancelled="hideConfirmDialog"
      >
        {{ $t('drafts.abandon_confirm') }}
      </confirm-modal>
    </teleport>
    <div class="actions">
      <button
        class="btn button-default"
        :aria-expanded="editing"
        @click.prevent.stop="toggleEditing"
      >
        {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
      </button>
      <button
        class="btn button-default"
        @click.prevent.stop="abandon"
      >
        {{ $t('drafts.abandon') }}
      </button>
    </div>
  </article>
</template>

<script src="./draft.js"></script>

<style lang="scss">
.Draft {
  position: relative;

  .status-content {
    padding: 0.5em;
    margin: 0.5em 0;
  }

  .status-preview {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-columns: 10em;
    grid-auto-flow: column;
    grid-gap: 0.5em;
    align-items: start;
    max-width: 100%;

    p {
      word-wrap: break-word;
      white-space: normal;
      overflow-x: hidden;
    }

    .poll-indicator-container {
      border-radius: var(--roundness);
      display: grid;
      justify-items: center;
      align-items: center;
      align-self: start;
      height: 0;
      padding-bottom: 62.5%;
      position: relative;
    }

    .poll-indicator {
      box-sizing: border-box;
      border: 1px solid var(--border);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: grid;
      justify-items: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }

  .actions {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    .btn {
      flex: 1;
      margin-left: 1em;
      margin-right: 1em;
    }
  }
}
</style>