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

<template>
  <article class="Draft">
    <div class="actions">
      <button
        class="btn button-default"
        :class="{ toggled: editing }"
        :aria-expanded="editing"
        @click.prevent.stop="toggleEditing"
      >
        {{ $t('drafts.continue') }}
      </button>
      <button
        class="btn button-default"
        @click.prevent.stop="abandon"
      >
        {{ $t('drafts.abandon') }}
      </button>
    </div>
    <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.external_url }}
            </router-link>
          </template>
        </i18n-t>
        <StatusContent
          v-if="draft.refId"
          class="status-content"
          :status="refStatus"
          :compact="true"
        />
      </div>
      <p>{{ draft.status }}</p>
    </div>
    <div v-if="editing">
      <PostStatusForm
        v-bind="postStatusFormProps"
        @posted="handlePosted"
      />
    </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>
  </article>
</template>

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

<style lang="scss">
@import "src/variables";

.Draft {
  margin: 1em;

  .status-content {
    border: 1px solid $fallback--faint;
    border-color: var(--faint, $fallback--faint);
    border-radius: $fallback--inputRadius;
    border-radius: var(--inputRadius, $fallback--inputRadius);
    color: $fallback--text;
    color: var(--text, $fallback--text);
    padding: 0.5em;
    margin: 0.5em 0;
  }

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

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