logo

pleroma-fe

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

announcement.vue (3144B)

    

  1. <template>
  2.   <div class="announcement">
  3.     <div class="heading">
  4.       <h4>{{ $t('announcements.title') }}</h4>
  5.     </div>
  6.     <div class="body">
  7.       <rich-content
  8.         v-if="!editing"
  9.         :html="content"
  10.         :emoji="announcement.emojis"
  11.         :handle-links="true"
  12.       />
  13.       <announcement-editor
  14.         v-else
  15.         :announcement="editedAnnouncement"
  16.       />
  17.     </div>
  18.     <div class="footer">
  19.       <div
  20.         v-if="!editing"
  21.         class="times"
  22.       >
  23.         <span v-if="publishedAt">
  24.           {{ $t('announcements.published_time_display', { time: publishedAt }) }}
  25.         </span>
  26.         <span v-if="startsAt">
  27.           {{ $t('announcements.start_time_display', { time: startsAt }) }}
  28.         </span>
  29.         <span v-if="endsAt">
  30.           {{ $t('announcements.end_time_display', { time: endsAt }) }}
  31.         </span>
  32.       </div>
  33.       <div
  34.         v-if="!editing"
  35.         class="actions"
  36.       >
  37.         <button
  38.           v-if="currentUser"
  39.           class="btn button-default"
  40.           :class="{ toggled: isRead }"
  41.           :disabled="inactive"
  42.           :title="inactive ? $t('announcements.inactive_message') : ''"
  43.           @click="markAsRead"
  44.         >
  45.           {{ $t('announcements.mark_as_read_action') }}
  46.         </button>
  47.         <button
  48.           v-if="canEditAnnouncement"
  49.           class="btn button-default"
  50.           @click="enterEditMode"
  51.         >
  52.           {{ $t('announcements.edit_action') }}
  53.         </button>
  54.         <button
  55.           v-if="canEditAnnouncement"
  56.           class="btn button-default"
  57.           @click="deleteAnnouncement"
  58.         >
  59.           {{ $t('announcements.delete_action') }}
  60.         </button>
  61.       </div>
  62.       <div
  63.         v-else
  64.         class="actions"
  65.       >
  66.         <button
  67.           class="btn button-default"
  68.           @click="submitEdit"
  69.         >
  70.           {{ $t('announcements.submit_edit_action') }}
  71.         </button>
  72.         <button
  73.           class="btn button-default"
  74.           @click="cancelEdit"
  75.         >
  76.           {{ $t('announcements.cancel_edit_action') }}
  77.         </button>
  78.         <div
  79.           v-if="editing && editError"
  80.           class="alert error"
  81.         >
  82.           {{ $t('announcements.edit_error', { error }) }}
  83.           <button
  84.             class="button-unstyled"
  85.             @click="clearError"
  86.           >
  87.             <FAIcon
  88.               class="fa-scale-110 fa-old-padding"
  89.               icon="times"
  90.               :title="$t('announcements.close_error')"
  91.             />
  92.           </button>
  93.         </div>
  94.       </div>
  95.     </div>
  96.   </div>
  97. </template>
  99. <script src="./announcement.js"></script>
  101. <style lang="scss">
  102. .announcement {
  103.   border-bottom: 1px solid var(--border);
  104.   border-radius: 0;
  105.   padding: var(--status-margin);
  107.   .heading,
  108.   .body {
  109.     margin-bottom: var(--status-margin);
  110.   }
  112.   .footer {
  113.     display: flex;
  114.     flex-direction: column;
  116.     .times {
  117.       display: flex;
  118.       flex-direction: column;
  119.     }
  120.   }
  122.   .footer .actions {
  123.     display: flex;
  124.     flex-direction: row;
  125.     justify-content: space-evenly;
  127.     .btn {
  128.       flex: 1;
  129.       margin: 1em;
  130.       max-width: 10em;
  131.     }
  132.   }
  133. }
  134. </style>