You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/client/themes/default/components/page.vue

249 lines
7.4 KiB

<template lang="pug">
v-app(v-scroll='upBtnScroll')
nav-header
v-navigation-drawer.primary(
dark
app
clipped
:mini-variant='$vuetify.breakpoint.md || $vuetify.breakpoint.sm'
mini-variant-width='80'
mobile-break-point='600'
:temporary='$vuetify.breakpoint.xs'
v-model='navShown'
)
nav-sidebar
slot(name='sidebar')
v-content
template(v-if='path !== `home`')
v-toolbar(color='grey lighten-3', flat, dense)
v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
v-icon(color='grey darken-2', left) menu
span Navigation
v-breadcrumbs.breadcrumbs-nav.pl-0(
v-else
:items='breadcrumbs'
divider='/'
)
template(slot='item', slot-scope='props')
v-icon(v-if='props.item.path === "/"', small) home
v-btn.ma-0(v-else, :href='props.item.path', small, flat) {{props.item.name}}
template(v-if='!isPublished')
v-spacer
.caption.red--text Unpublished
status-indicator.ml-3(negative, pulse)
v-divider
v-layout(row)
v-flex(xs12, lg9, xl10)
v-toolbar(color='grey lighten-4', flat, :height='90')
div
.headline.grey--text.text--darken-3 {{title}}
.caption.grey--text.text--darken-1 {{description}}
v-divider
.contents(ref='container')
slot(name='contents')
v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
v-toolbar(color='grey lighten-4', flat, :height='90')
div
.caption.grey--text.text--lighten-1 Last edited by
.body-2.grey--text.text--darken-3 {{ authorName }}
.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
v-spacer
v-tooltip(left)
v-btn.btn-animate-edit(icon, slot='activator', :href='"/e/" + path')
v-icon(color='grey') edit
span Edit Page
v-divider
template(v-if='toc.length')
v-list.grey.lighten-3.pb-3(dense)
v-subheader.pl-4.primary--text Table of contents
template(v-for='(tocItem, tocIdx) in toc')
v-list-tile(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey') arrow_right
v-list-tile-title.pl-3 {{tocItem.title}}
v-divider.ml-4(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
template(v-for='tocSubItem in tocItem.children')
v-list-tile(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
v-icon.pl-3(color='grey lighten-1') arrow_right
v-list-tile-title.pl-3.caption {{tocSubItem.title}}
v-divider(inset, v-if='tocIdx < toc.length - 1')
v-divider
v-list.grey.lighten-4(dense)
v-subheader.pl-4.yellow--text.text--darken-4 Rating
.text-xs-center
v-rating(
v-model='rating'
color='yellow darken-3'
background-color='grey lighten-1'
half-increments
hover
)
.pb-2.caption.grey--text 5 votes
v-divider
v-list.grey.lighten-3(dense)
v-subheader.pl-4.teal--text Tags
v-list-tile
v-list-tile-avatar: v-icon(color='teal') label
v-list-tile-title Astrophysics
v-divider(inset)
v-list-tile
v-list-tile-avatar: v-icon(color='teal') label
v-list-tile-title Space
v-divider(inset)
v-list-tile
v-list-tile-avatar: v-icon(color='teal') label
v-list-tile-title Planets
v-divider
v-toolbar(color='grey lighten-4', flat, dense)
v-spacer
v-tooltip(bottom)
v-btn(icon, slot='activator'): v-icon(color='grey') bookmark
span Bookmark
v-tooltip(bottom)
v-btn(icon, slot='activator'): v-icon(color='grey') share
span Share
v-tooltip(bottom)
v-btn(icon, slot='activator'): v-icon(color='grey') print
span Print Format
v-spacer
nav-footer
v-fab-transition
v-btn(v-if='upBtnShown', fab, fixed, bottom, right, small, @click='$vuetify.goTo(0, scrollOpts)', color='primary')
v-icon arrow_upward
</template>
<script>
import { StatusIndicator } from 'vue-status-indicator'
import Prism from '@/libs/prism/prism.js'
export default {
components: {
StatusIndicator
},
props: {
locale: {
type: String,
default: 'en'
},
path: {
type: String,
default: 'home'
},
title: {
type: String,
default: 'Untitled Page'
},
description: {
type: String,
default: ''
},
createdAt: {
type: String,
default: ''
},
updatedAt: {
type: String,
default: ''
},
tags: {
type: Array,
default: () => ([])
},
authorName: {
type: String,
default: 'Unknown'
},
authorId: {
type: Number,
default: 0
},
isPublished: {
type: Boolean,
default: false
},
toc: {
type: Array,
default: () => []
}
},
data() {
return {
navOpen: false,
upBtnShown: false,
scrollOpts: {
duration: 1500,
offset: -75,
easing: 'easeInOutCubic'
},
breadcrumbs: [
{ path: '/', name: 'Home' },
{ path: '/universe', name: 'Universe' },
{ path: '/universe/galaxy', name: 'Galaxy' },
{ path: '/universe/galaxy/solar-system', name: 'Solar System' },
{ path: '/universe/galaxy/solar-system/planet-earth', name: 'Planet Earth' }
]
}
},
computed: {
navShown: {
get() { return this.navOpen || this.$vuetify.breakpoint.smAndUp },
set(val) { this.navOpen = val }
},
rating: {
get () {
return 3.5
},
set (val) {
}
}
},
created() {
this.$store.commit('page/SET_AUTHOR_ID', this.authorId)
this.$store.commit('page/SET_AUTHOR_NAME', this.authorName)
this.$store.commit('page/SET_CREATED_AT', this.createdAt)
this.$store.commit('page/SET_DESCRIPTION', this.description)
this.$store.commit('page/SET_IS_PUBLISHED', this.isPublished)
this.$store.commit('page/SET_LOCALE', this.locale)
this.$store.commit('page/SET_PATH', this.path)
this.$store.commit('page/SET_TAGS', this.tags)
this.$store.commit('page/SET_TITLE', this.title)
this.$store.commit('page/SET_UPDATED_AT', this.updatedAt)
this.$store.commit('page/SET_MODE', 'view')
},
mounted () {
Prism.highlightAllUnder(this.$refs.container)
},
methods: {
toggleNavigation () {
this.navOpen = !this.navOpen
},
upBtnScroll () {
const scrollOffset = window.pageYOffset || document.documentElement.scrollTop
this.upBtnShown = scrollOffset > window.innerHeight * 0.33
}
}
}
</script>
<style lang="scss">
.breadcrumbs-nav {
.v-btn {
min-width: 0;
&__content {
text-transform: none;
}
}
.v-breadcrumbs__divider:nth-child(2n) {
padding: 0 6px;
}
.v-breadcrumbs__divider:nth-child(2) {
padding: 0 6px 0 12px;
}
}
</style>