improvement: adjust announcement section to fit new design (#982)

src/renderer/components/Announcements/AnnouncementsPost.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="AnnouncementsPost relative">
+  <div class="AnnouncementsPost flex flex-col md:flex-row items-top relative">
     <button
       v-show="!isRead"
-      class="AnnouncementsPost__close transition absolute pin-t pin-r cursor-pointer text-theme-page-text-light hover:text-theme-page-text p-2"
+      class="AnnouncementsPost__close absolute pin-t pin-r transition"
+      :disabled="isRead"
       @click="emitRead"
     >
       <SvgIcon
@@ -12,27 +13,58 @@
       />
     </button>
 
-    <h2
-      :class="isRead ? 'text-theme-page-text-light' : 'text-theme-page-text'"
-      class="text-2xl pr-8"
-    >
-      {{ title }}
-    </h2>
+    <div class="flex flex-col flex-none justify-start w-48">
+      <span class="AnnouncementsPost__date font-semibold">
+        {{ formattedDate }}
+        <span class="text-theme-page-text-light">
+          {{ weekday }}
+        </span>
+      </span>
 
-    <p
-      v-if="!isRead"
-      class="AnnouncementsPost__summary mt-2"
-    >
-      {{ summary }}
-    </p>
+      <a
+        :title="title"
+        class="hidden md:flex items-center mt-2 cursor-pointer"
+        @click="openInBrowser(url)"
+      >
+        <SvgIcon
+          class="mr-2"
+          name="open-external"
+          view-box="0 0 12 12"
+        />
 
-    <a
-      :title="title"
-      class="inline-block mt-4 cursor-pointer"
-      @click="openInBrowser(url)"
-    >
-      {{ $t('ANNOUNCEMENTS.READ_MORE') }} &#8594;
-    </a>
+        {{ $t('ANNOUNCEMENTS.READ_MORE') }}
+      </a>
+    </div>
+
+    <div class="pr-12">
+      <h2
+        :class="isRead ? 'text-theme-page-text-light' : 'text-theme-page-text'"
+        class="AnnouncementsPost__title text-2xl mt-4 md:mt-0"
+      >
+        {{ title }}
+      </h2>
+
+      <p
+        v-if="!isRead"
+        class="AnnouncementsPost__summary mt-2"
+      >
+        {{ summary }}
+      </p>
+
+      <a
+        :title="title"
+        class="flex md:hidden items-center mt-4 cursor-pointer"
+        @click="openInBrowser(url)"
+      >
+        <SvgIcon
+          class="mr-2"
+          name="open-external"
+          view-box="0 0 12 12"
+        />
+
+        {{ $t('ANNOUNCEMENTS.READ_MORE') }}
+      </a>
+    </div>
   </div>
 </template>
 
@@ -47,6 +79,10 @@ export default {
   },
 
   props: {
+    date: {
+      type: String,
+      required: true
+    },
     title: {
       type: String,
       required: true
@@ -64,6 +100,17 @@ export default {
       required: true
     }
   },
+
+  computed: {
+    formattedDate () {
+      return this.formatter_date(this.date, 'D MMMM')
+    },
+
+    weekday () {
+      return this.formatter_date(this.date, 'dddd')
+    }
+  },
+
   methods: {
     emitRead () {
       this.$emit('read', this.announcement)
@@ -79,9 +126,20 @@ export default {
 <style scoped>
 .AnnouncementsPost__close {
   /* The close button is shown only on hover over the entire announcement */
-  display: none;
+  margin-top: -1px;
+  opacity: 0;
 }
 .AnnouncementsPost:hover > .AnnouncementsPost__close {
-  display: block;
+  opacity: 1;
+  @apply .flex .cursor-pointer .text-theme-option-button-text .bg-theme-button .rounded .p-2;
+}
+.AnnouncementsPost:hover > .AnnouncementsPost__close:hover {
+  opacity: 0.5;
+}
+.AnnouncementsPost__date {
+  line-height: 1.75rem;
+}
+.AnnouncementsPost__title {
+  line-height: 1.75rem;
 }
 </style>

src/renderer/i18n/locales/en-US.js

@@ -34,7 +34,8 @@ export default {
 
   ANNOUNCEMENTS: {
     LATEST_NEWS: 'Latest News',
-    READ_MORE: 'Read more'
+    READ_MORE: 'Read more',
+    ALL_READ: 'Mark all as read'
   },
 
   INTRODUCTION: {

src/renderer/pages/Announcements.vue

@@ -1,15 +1,32 @@
 <template>
   <div class="Announcements relative overflow-y-auto bg-theme-feature rounded-lg">
-    <div class="Announcements--gradient-top sticky pin-t h-12" />
+    <div class="Announcements--gradient-top sticky pin-t h-10" />
 
-    <main class="flex-col px-12">
-      <h1 class="text-lg mb-5">
-        {{ $t('ANNOUNCEMENTS.LATEST_NEWS') }}
-      </h1>
+    <main class="flex-col px-10">
+      <div class="Announcements__header">
+        <h3 class>
+          {{ $t('ANNOUNCEMENTS.LATEST_NEWS') }}
+        </h3>
+
+        <button
+          v-if="showReadAll"
+          class="Announcements__ReadAll text-theme-feature-item-text hover:text-theme-page-text transition"
+          @click="readAll"
+        >
+          <SvgIcon
+            name="mark-all"
+            view-box="0 0 15 15"
+            class="mr-2"
+          />
+
+          {{ $t('ANNOUNCEMENTS.ALL_READ') }}
+        </button>
+      </div>
 
       <TransitionGroup
         tag="div"
         name="Announcements__posts"
+        class="mt-10"
       >
         <div
           v-for="(announcement, index) in announcements"
@@ -22,38 +39,44 @@
           />
 
           <div
-            v-if="index <= announcements.length - 2"
+            v-if="index < announcements.length - 1"
             class="Announcements__line-separator mt-6"
           />
         </div>
       </TransitionGroup>
     </main>
 
-    <div class="Announcements--gradient-bottom sticky pin-b h-12" />
+    <div class="Announcements--gradient-bottom sticky pin-b h-10" />
   </div>
 </template>
 
 <script>
 import { orderBy } from 'lodash'
 import { mapGetters } from 'vuex'
 import { AnnouncementsPost } from '@/components/Announcements'
+import SvgIcon from '@/components/SvgIcon'
 
 export default {
   name: 'Announcements',
 
   components: {
-    AnnouncementsPost
+    AnnouncementsPost,
+    SvgIcon
   },
 
   computed: {
     ...mapGetters({
       readAnnouncements: 'announcements/read',
       unreadAnnouncements: 'announcements/unread'
     }),
+
     announcements () {
-      const readSorted = orderBy(this.readAnnouncements, 'date', 'desc')
-      const unreadSorted = orderBy(this.unreadAnnouncements, 'date', 'desc')
-      return unreadSorted.concat(readSorted)
+      const all = this.unreadAnnouncements.concat(this.readAnnouncements)
+      return orderBy(all, ['isRead', 'date'], ['asc', 'desc'])
+    },
+
+    showReadAll () {
+      return this.unreadAnnouncements && this.unreadAnnouncements.length
     }
   },
 
@@ -67,12 +90,24 @@ export default {
   methods: {
     read (announcement) {
       this.$store.dispatch('announcements/markAsRead', announcement)
+    },
+
+    readAll () {
+      this.unreadAnnouncements.forEach(announcement => {
+        this.read(announcement)
+      })
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="postcss" scoped>
+.Announcements__header {
+  @apply .flex .items-center .justify-between;
+}
+.Announcements__header .Announcements__ReadAll {
+  @apply .flex .items-center .font-semibold;
+}
 .Announcements__line-separator {
   height: 1rem;
   background: linear-gradient(to right, var(--theme-line-separator) 50%, transparent 50%);