commit: e067783a30be41644abe1aecca631ef31cf476a8
parent 2e3d4d772835b5de8750db2e8669c1abc4903994
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 17 Mar 2022 12:59:10 -0400
Add announcement display with placeholder messages
Diffstat:
8 files changed, 119 insertions(+), 2 deletions(-)
diff --git a/src/boot/routes.js b/src/boot/routes.js
@@ -24,6 +24,7 @@ import Lists from 'components/lists/lists.vue'
import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
import ListsEdit from 'components/lists_edit/lists_edit.vue'
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
+import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
export default (store) => {
const validateAuthenticatedRoute = (to, from, next) => {
@@ -76,6 +77,7 @@ export default (store) => {
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
{ name: 'about', path: '/about', component: About },
+ { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
{ name: 'user-profile', path: '/users/:name', component: UserProfile },
{ name: 'legacy-user-profile', path: '/:name', component: UserProfile },
{ name: 'lists', path: '/lists', component: Lists },
diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
@@ -0,0 +1,13 @@
+
+const Announcement = {
+ props: {
+ announcement: Object
+ },
+ computed: {
+ content () {
+ return this.announcement.content
+ }
+ }
+}
+
+export default Announcement
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
@@ -0,0 +1,19 @@
+<template>
+ <div class="announcement">
+ <rich-content :html="content" />
+ </div>
+</template>
+
+<script src="./announcement.js"></script>
+
+<style lang="scss">
+@import "../../variables";
+
+.announcement {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--border, $fallback--border);
+ border-radius: 0;
+ padding: var(--status-margin, $status-margin);
+}
+</style>
diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
@@ -0,0 +1,42 @@
+import Announcement from '../announcement/announcement.vue'
+
+const AnnouncementsPage = {
+ components: {
+ Announcement
+ },
+ computed: {
+ announcements () {
+ return [{
+ "id": "8",
+ "content": "<p>Looks like there was an issue processing audio attachments without embedded art since yesterday due to an experimental new feature. That issue has now been fixed, so you may see older posts with audio from other servers pop up in your feeds now as they are being finally properly processed. Sorry!</p>",
+ "starts_at": null,
+ "ends_at": null,
+ "all_day": false,
+ "published_at": "2020-07-03T01:27:38.726Z",
+ "updated_at": "2020-07-03T01:27:38.752Z",
+ "read": true,
+ "mentions": [],
+ "statuses": [],
+ "tags": [],
+ "emojis": [],
+ "reactions": []
+ }, {
+ "id": "8",
+ "content": "<p>Looks like there was an issue processing audio attachments without embedded art since yesterday due to an experimental new feature. That issue has now been fixed, so you may see older posts with audio from other servers pop up in your feeds now as they are being finally properly processed. Sorry!</p>",
+ "starts_at": null,
+ "ends_at": null,
+ "all_day": false,
+ "published_at": "2020-07-03T01:27:38.726Z",
+ "updated_at": "2020-07-03T01:27:38.752Z",
+ "read": true,
+ "mentions": [],
+ "statuses": [],
+ "tags": [],
+ "emojis": [],
+ "reactions": []
+ }]
+ }
+ }
+}
+
+export default AnnouncementsPage
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="panel panel-default announcements-page">
+ <div class="panel-heading">
+ <span>
+ {{ $t('announcements.page_header') }}
+ </span>
+ </div>
+ <div class="panel-body">
+ <section
+ v-for="announcement in announcements"
+ :key="announcement.id"
+ >
+ <announcement
+ :announcement="announcement"
+ />
+ </section>
+ </div>
+ </div>
+</template>
+
+<script src="./announcements_page.js"></script>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
@@ -18,7 +18,8 @@ import {
faBell,
faInfoCircle,
faStream,
- faList
+ faList,
+ faBullhorn
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -32,7 +33,8 @@ library.add(
faBell,
faInfoCircle,
faStream,
- faList
+ faList,
+ faBullhorn
)
const NavPanel = {
props: ['forceExpand', 'forceEditMode'],
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
@@ -71,5 +71,10 @@ export const ROOT_ITEMS = {
anon: true,
icon: 'info-circle',
label: 'nav.about'
+ },
+ announcements: {
+ route: 'announcements',
+ icon: 'bullhorn',
+ label: 'nav.announcements'
}
}
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
@@ -192,6 +192,19 @@
</a>
</li>
<li
+ @click="toggleDrawer"
+ >
+ <router-link
+ :to="{ name: 'announcements' }"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="bullhorn"
+ /> {{ $t("nav.announcements") }}
+ </router-link>
+ </li>
+ <li
v-if="currentUser"
@click="toggleDrawer"
>
