Add announcement display with placeholder messages

This commit is contained in:
Tusooa Zhu 2022-03-17 12:59:10 -04:00 committed by tusooa
parent 2e3d4d7728
commit e067783a30
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
8 changed files with 119 additions and 2 deletions

View File

@ -24,6 +24,7 @@ import Lists from 'components/lists/lists.vue'
import ListsTimeline from 'components/lists_timeline/lists_timeline.vue' import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
import ListsEdit from 'components/lists_edit/lists_edit.vue' import ListsEdit from 'components/lists_edit/lists_edit.vue'
import NavPanel from 'src/components/nav_panel/nav_panel.vue' import NavPanel from 'src/components/nav_panel/nav_panel.vue'
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
export default (store) => { export default (store) => {
const validateAuthenticatedRoute = (to, from, next) => { 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: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
{ name: 'about', path: '/about', component: About }, { name: 'about', path: '/about', component: About },
{ name: 'announcements', path: '/announcements', component: AnnouncementsPage },
{ name: 'user-profile', path: '/users/:name', component: UserProfile }, { name: 'user-profile', path: '/users/:name', component: UserProfile },
{ name: 'legacy-user-profile', path: '/:name', component: UserProfile }, { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
{ name: 'lists', path: '/lists', component: Lists }, { name: 'lists', path: '/lists', component: Lists },

View File

@ -0,0 +1,13 @@
const Announcement = {
props: {
announcement: Object
},
computed: {
content () {
return this.announcement.content
}
}
}
export default Announcement

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -18,7 +18,8 @@ import {
faBell, faBell,
faInfoCircle, faInfoCircle,
faStream, faStream,
faList faList,
faBullhorn
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
@ -32,7 +33,8 @@ library.add(
faBell, faBell,
faInfoCircle, faInfoCircle,
faStream, faStream,
faList faList,
faBullhorn
) )
const NavPanel = { const NavPanel = {
props: ['forceExpand', 'forceEditMode'], props: ['forceExpand', 'forceEditMode'],

View File

@ -71,5 +71,10 @@ export const ROOT_ITEMS = {
anon: true, anon: true,
icon: 'info-circle', icon: 'info-circle',
label: 'nav.about' label: 'nav.about'
},
announcements: {
route: 'announcements',
icon: 'bullhorn',
label: 'nav.announcements'
} }
} }

View File

@ -191,6 +191,19 @@
/> {{ $t("nav.administration") }} /> {{ $t("nav.administration") }}
</a> </a>
</li> </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 <li
v-if="currentUser" v-if="currentUser"
@click="toggleDrawer" @click="toggleDrawer"