Add announcement display with placeholder messages
This commit is contained in:
parent
2e3d4d7728
commit
e067783a30
@ -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 },
|
||||
|
13
src/components/announcement/announcement.js
Normal file
13
src/components/announcement/announcement.js
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
const Announcement = {
|
||||
props: {
|
||||
announcement: Object
|
||||
},
|
||||
computed: {
|
||||
content () {
|
||||
return this.announcement.content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Announcement
|
19
src/components/announcement/announcement.vue
Normal file
19
src/components/announcement/announcement.vue
Normal 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>
|
42
src/components/announcements_page/announcements_page.js
Normal file
42
src/components/announcements_page/announcements_page.js
Normal 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
|
21
src/components/announcements_page/announcements_page.vue
Normal file
21
src/components/announcements_page/announcements_page.vue
Normal 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>
|
@ -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'],
|
||||
|
@ -71,5 +71,10 @@ export const ROOT_ITEMS = {
|
||||
anon: true,
|
||||
icon: 'info-circle',
|
||||
label: 'nav.about'
|
||||
},
|
||||
announcements: {
|
||||
route: 'announcements',
|
||||
icon: 'bullhorn',
|
||||
label: 'nav.announcements'
|
||||
}
|
||||
}
|
||||
|
@ -191,6 +191,19 @@
|
||||
/> {{ $t("nav.administration") }}
|
||||
</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"
|
||||
|
Loading…
Reference in New Issue
Block a user