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