mirror of https://github.com/requarks/wiki
Nicolas Giard
2 years ago
parent
0adb4dc3e3
commit
72eccb7a2a
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,234 @@
|
||||
<template lang="pug">
|
||||
.page-header.row
|
||||
//- PAGE ICON
|
||||
.col-auto.q-pl-md.flex.items-center
|
||||
q-btn.rounded-borders(
|
||||
v-if='editorStore.isActive'
|
||||
padding='none'
|
||||
size='37px'
|
||||
:icon='pageStore.icon'
|
||||
color='primary'
|
||||
flat
|
||||
)
|
||||
q-menu(content-class='shadow-7')
|
||||
icon-picker-dialog(v-model='pageStore.icon')
|
||||
q-icon.rounded-borders(
|
||||
v-else
|
||||
:name='pageStore.icon'
|
||||
size='64px'
|
||||
color='primary'
|
||||
)
|
||||
//- PAGE HEADER
|
||||
.col.q-pa-md
|
||||
.text-h4.page-header-title
|
||||
span {{pageStore.title}}
|
||||
template(v-if='editorStore.isActive')
|
||||
span.text-grey(v-if='!pageStore.title') {{ t(`editor.props.title`)}}
|
||||
q-btn.acrylic-btn.q-ml-md(
|
||||
icon='las la-pen'
|
||||
flat
|
||||
padding='xs'
|
||||
size='sm'
|
||||
)
|
||||
q-popup-edit(
|
||||
v-model='pageStore.title'
|
||||
auto-save
|
||||
v-slot='scope'
|
||||
)
|
||||
q-input(
|
||||
outlined
|
||||
style='width: 450px;'
|
||||
v-model='scope.value'
|
||||
dense
|
||||
autofocus
|
||||
@keyup.enter='scope.set'
|
||||
:label='t(`editor.props.title`)'
|
||||
)
|
||||
.text-subtitle2.page-header-subtitle
|
||||
span {{ pageStore.description }}
|
||||
template(v-if='editorStore.isActive')
|
||||
span.text-grey(v-if='!pageStore.description') {{ t(`editor.props.shortDescription`)}}
|
||||
q-btn.acrylic-btn.q-ml-md(
|
||||
icon='las la-pen'
|
||||
flat
|
||||
padding='none xs'
|
||||
size='xs'
|
||||
)
|
||||
q-popup-edit(
|
||||
v-model='pageStore.description'
|
||||
auto-save
|
||||
v-slot='scope'
|
||||
)
|
||||
q-input(
|
||||
outlined
|
||||
style='width: 450px;'
|
||||
v-model='scope.value'
|
||||
dense
|
||||
autofocus
|
||||
@keyup.enter='scope.set'
|
||||
:label='t(`editor.props.shortDescription`)'
|
||||
)
|
||||
//- PAGE ACTIONS
|
||||
.col-auto.q-pa-md.flex.items-center.justify-end
|
||||
template(v-if='!editorStore.isActive')
|
||||
q-btn.q-mr-md(
|
||||
flat
|
||||
dense
|
||||
icon='las la-bell'
|
||||
color='grey'
|
||||
aria-label='Watch Page'
|
||||
)
|
||||
q-tooltip Watch Page
|
||||
q-btn.q-mr-md(
|
||||
flat
|
||||
dense
|
||||
icon='las la-bookmark'
|
||||
color='grey'
|
||||
aria-label='Bookmark Page'
|
||||
)
|
||||
q-tooltip Bookmark Page
|
||||
q-btn.q-mr-md(
|
||||
flat
|
||||
dense
|
||||
icon='las la-share-alt'
|
||||
color='grey'
|
||||
aria-label='Share'
|
||||
)
|
||||
q-tooltip Share
|
||||
social-sharing-menu
|
||||
q-btn.q-mr-md(
|
||||
flat
|
||||
dense
|
||||
icon='las la-print'
|
||||
color='grey'
|
||||
aria-label='Print'
|
||||
)
|
||||
q-tooltip Print
|
||||
template(v-if='editorStore.isActive || editorStore.hasPendingChanges')
|
||||
q-btn.acrylic-btn.q-mr-sm(
|
||||
flat
|
||||
icon='las la-times'
|
||||
color='negative'
|
||||
label='Discard'
|
||||
aria-label='Discard'
|
||||
no-caps
|
||||
@click='discardChanges'
|
||||
)
|
||||
q-btn.acrylic-btn(
|
||||
flat
|
||||
icon='las la-check'
|
||||
color='positive'
|
||||
label='Save Changes'
|
||||
aria-label='Save Changes'
|
||||
no-caps
|
||||
@click='saveChanges'
|
||||
)
|
||||
template(v-else)
|
||||
q-btn.acrylic-btn(
|
||||
flat
|
||||
icon='las la-edit'
|
||||
color='deep-orange-9'
|
||||
label='Edit'
|
||||
aria-label='Edit'
|
||||
no-caps
|
||||
@click='editPage'
|
||||
)
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useQuasar } from 'quasar'
|
||||
import { computed, defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useEditorStore } from 'src/stores/editor'
|
||||
import { useFlagsStore } from 'src/stores/flags'
|
||||
import { usePageStore } from 'src/stores/page'
|
||||
import { useSiteStore } from 'src/stores/site'
|
||||
import { useUserStore } from 'src/stores/user'
|
||||
|
||||
import IconPickerDialog from 'src/components/IconPickerDialog.vue'
|
||||
import SocialSharingMenu from 'src/components/SocialSharingMenu.vue'
|
||||
|
||||
// QUASAR
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
// STORES
|
||||
|
||||
const editorStore = useEditorStore()
|
||||
const flagsStore = useFlagsStore()
|
||||
const pageStore = usePageStore()
|
||||
const siteStore = useSiteStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// ROUTER
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// COMPUTED
|
||||
|
||||
const editMode = computed(() => {
|
||||
return pageStore.mode === 'edit'
|
||||
})
|
||||
const editCreateMode = computed(() => {
|
||||
return pageStore.mode === 'edit' && pageStore.mode === 'create'
|
||||
})
|
||||
const editUrl = computed(() => {
|
||||
let pagePath = siteStore.useLocales ? `${pageStore.locale}/` : ''
|
||||
pagePath += !pageStore.path ? 'home' : pageStore.path
|
||||
return `/_edit/${pagePath}`
|
||||
})
|
||||
|
||||
// METHODS
|
||||
|
||||
async function discardChanges () {
|
||||
$q.loading.show()
|
||||
try {
|
||||
editorStore.$patch({
|
||||
isActive: false,
|
||||
editor: ''
|
||||
})
|
||||
await pageStore.pageLoad({ id: pageStore.id })
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Page has been reverted to the last saved state.'
|
||||
})
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to reload page state.'
|
||||
})
|
||||
}
|
||||
$q.loading.hide()
|
||||
}
|
||||
|
||||
async function saveChanges () {
|
||||
$q.loading.show()
|
||||
try {
|
||||
await pageStore.pageSave()
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Page saved successfully.'
|
||||
})
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to save page changes.'
|
||||
})
|
||||
}
|
||||
$q.loading.hide()
|
||||
}
|
||||
|
||||
function editPage () {
|
||||
editorStore.$patch({
|
||||
isActive: true,
|
||||
editor: 'markdown'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
const protanopia = {
|
||||
negative: '#fb8c00',
|
||||
positive: '#2196f3',
|
||||
primary: '#1976D2',
|
||||
secondary: '#2196f3'
|
||||
}
|
||||
|
||||
const deuteranopia = {
|
||||
negative: '#ef6c00',
|
||||
positive: '#2196f3',
|
||||
primary: '#1976D2',
|
||||
secondary: '#2196f3'
|
||||
}
|
||||
|
||||
const tritanopia = {
|
||||
primary: '#e91e63',
|
||||
secondary: '#02C39A'
|
||||
}
|
||||
|
||||
export function getAccessibleColor (name, base, cvd) {
|
||||
switch (cvd) {
|
||||
case 'protanopia': {
|
||||
return protanopia[name] ?? base
|
||||
}
|
||||
case 'deuteranopia': {
|
||||
return deuteranopia[name] ?? base
|
||||
}
|
||||
case 'tritanopia': {
|
||||
return tritanopia[name] ?? base
|
||||
}
|
||||
}
|
||||
return base
|
||||
}
|
||||
Loading…
Reference in new issue