mirror of https://github.com/requarks/wiki
NGPixel
2 years ago
parent
7f4417ee62
commit
a806aa3466
@ -0,0 +1,330 @@
|
||||
<template lang="pug">
|
||||
q-layout(view='hHh Lpr lff')
|
||||
header-nav
|
||||
q-page-container.layout-search
|
||||
.layout-search-card
|
||||
.layout-search-sd
|
||||
.text-header {{ t('search.sortBy') }}
|
||||
q-list(dense, padding)
|
||||
q-item(clickable, active)
|
||||
q-item-section(side)
|
||||
q-icon(name='las la-stream', color='primary')
|
||||
q-item-section
|
||||
q-item-label Relevance
|
||||
q-item-section(side)
|
||||
q-icon(name='mdi-chevron-double-down', size='sm', color='primary')
|
||||
q-item(clickable)
|
||||
q-item-section(side)
|
||||
q-icon(name='las la-heading')
|
||||
q-item-section Title
|
||||
q-item(clickable)
|
||||
q-item-section(side)
|
||||
q-icon(name='las la-calendar')
|
||||
q-item-section Last Updated
|
||||
.text-header {{ t('search.filters') }}
|
||||
.q-pa-sm
|
||||
q-input(
|
||||
outlined
|
||||
dense
|
||||
placeholder='Path starting with...'
|
||||
prefix='/'
|
||||
v-model='state.filterPath'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-caret-square-right', size='xs')
|
||||
q-input.q-mt-sm(
|
||||
outlined
|
||||
dense
|
||||
placeholder='Tags'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-hashtag', size='xs')
|
||||
q-input.q-mt-sm(
|
||||
outlined
|
||||
dense
|
||||
placeholder='Last updated...'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-calendar', size='xs')
|
||||
q-input.q-mt-sm(
|
||||
outlined
|
||||
dense
|
||||
placeholder='Last edited by...'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-user-edit', size='xs')
|
||||
q-select.q-mt-sm(
|
||||
outlined
|
||||
v-model='state.filterLocale'
|
||||
emit-value
|
||||
map-options
|
||||
dense
|
||||
:aria-label='t(`admin.groups.ruleLocales`)'
|
||||
:options='siteStore.locales.active'
|
||||
option-value='code'
|
||||
option-label='name'
|
||||
multiple
|
||||
:display-value='t(`admin.groups.selectedLocales`, { n: state.filterLocale.length > 0 ? state.filterLocale[0].toUpperCase() : state.filterLocale.length }, state.filterLocale.length)'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-language', size='xs')
|
||||
q-select.q-mt-sm(
|
||||
outlined
|
||||
v-model='state.filterEditor'
|
||||
emit-value
|
||||
map-options
|
||||
dense
|
||||
aria-label='Editor'
|
||||
:options='editors'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-pen-nib', size='xs')
|
||||
q-select.q-mt-sm(
|
||||
outlined
|
||||
v-model='state.filterPublishState'
|
||||
emit-value
|
||||
map-options
|
||||
dense
|
||||
aria-label='Publish State'
|
||||
:options='publishStates'
|
||||
)
|
||||
template(v-slot:prepend)
|
||||
q-icon(name='las la-traffic-light', size='xs')
|
||||
q-page(:style-fn='pageStyle')
|
||||
.text-header.flex
|
||||
span {{t('search.results')}}
|
||||
q-space
|
||||
span.text-caption #[strong 12] results
|
||||
q-list(separator, padding)
|
||||
q-item(v-for='item of 12', clickable)
|
||||
q-item-section(avatar)
|
||||
q-avatar(color='primary' text-color='white' rounded icon='las la-file-alt')
|
||||
q-item-section
|
||||
q-item-label Page ABC def {{ item }}
|
||||
q-item-label(caption) Lorem ipsum beep boop foo bar
|
||||
q-item-label(caption) ...Abc def #[span.text-highlight home] efg hig klm...
|
||||
q-item-section(side)
|
||||
.flex
|
||||
q-chip(
|
||||
v-for='tag of 3'
|
||||
square
|
||||
:color='$q.dark.isActive ? `dark-2` : `grey-3`'
|
||||
:text-color='$q.dark.isActive ? `grey-4` : `grey-8`'
|
||||
icon='las la-hashtag'
|
||||
size='sm'
|
||||
) tag {{ tag }}
|
||||
.flex
|
||||
.text-caption.q-mr-sm.text-grey /beep/boop/hello
|
||||
.text-caption 2023-01-25
|
||||
|
||||
q-inner-loading(:showing='state.loading > 0')
|
||||
main-overlay-dialog
|
||||
footer-nav
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useMeta, useQuasar } from 'quasar'
|
||||
import { computed, onMounted, reactive, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
import { useFlagsStore } from 'src/stores/flags'
|
||||
import { useSiteStore } from 'src/stores/site'
|
||||
import { useUserStore } from 'src/stores/user'
|
||||
|
||||
import HeaderNav from 'src/components/HeaderNav.vue'
|
||||
import FooterNav from 'src/components/FooterNav.vue'
|
||||
import MainOverlayDialog from 'src/components/MainOverlayDialog.vue'
|
||||
|
||||
// QUASAR
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
// STORES
|
||||
|
||||
const flagsStore = useFlagsStore()
|
||||
const siteStore = useSiteStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// ROUTER
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// META
|
||||
|
||||
useMeta({
|
||||
titleTemplate: title => `${title} - ${t('profile.title')} - Wiki.js`
|
||||
})
|
||||
|
||||
// DATA
|
||||
|
||||
const state = reactive({
|
||||
loading: 0,
|
||||
filterPath: '',
|
||||
filterTags: [],
|
||||
filterLocale: ['en'],
|
||||
filterEditor: '',
|
||||
filterPublishState: ''
|
||||
})
|
||||
|
||||
const editors = computed(() => {
|
||||
return [
|
||||
{ label: 'Any editor', value: '' },
|
||||
{ label: 'AsciiDoc', value: 'asciidoc' },
|
||||
{ label: 'Markdown', value: 'markdown' },
|
||||
{ label: 'Visual Editor', value: 'wysiwyg' }
|
||||
]
|
||||
})
|
||||
|
||||
const publishStates = computed(() => {
|
||||
return [
|
||||
{ label: 'Any publish state', value: '' },
|
||||
{ label: 'Draft', value: 'draft' },
|
||||
{ label: 'Published', value: 'published' },
|
||||
{ label: 'Scheduled', value: 'scheduled' }
|
||||
]
|
||||
})
|
||||
|
||||
// WATCHERS
|
||||
|
||||
watch(() => route.query, async (newQueryObj) => {
|
||||
if (newQueryObj.q) {
|
||||
siteStore.search = newQueryObj.q
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// METHODS
|
||||
|
||||
function pageStyle (offset, height) {
|
||||
return {
|
||||
'min-height': `${height - 100 - offset}px`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-search {
|
||||
@at-root .body--light & {
|
||||
background-color: $grey-3;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-6;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 200px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: radial-gradient(ellipse at bottom, $dark-3, $dark-6);
|
||||
border-bottom: 1px solid #FFF;
|
||||
|
||||
@at-root .body--dark & {
|
||||
border-bottom-color: $dark-3;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
width: 100%;
|
||||
background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.1) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
&-card {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 1400px;
|
||||
margin: 50px auto;
|
||||
box-shadow: $shadow-2;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
@at-root .body--light & {
|
||||
background-color: #FFF;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-3;
|
||||
}
|
||||
}
|
||||
|
||||
&-sd {
|
||||
flex: 0 0 300px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
overflow: hidden;
|
||||
|
||||
@at-root .body--light & {
|
||||
background-color: $grey-1;
|
||||
border-right: 1px solid rgba($dark-3, .1);
|
||||
box-shadow: inset -1px 0 0 #FFF;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-4;
|
||||
border-right: 1px solid rgba(#FFF, .12);
|
||||
box-shadow: inset -1px 0 0 rgba($dark-6, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.text-header {
|
||||
padding: .75rem 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
@at-root .body--light & {
|
||||
background-color: $grey-1;
|
||||
border-bottom: 1px solid $grey-3;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-3;
|
||||
border-bottom: 1px solid $dark-2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-highlight {
|
||||
background-color: rgba($yellow-7, .5);
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.q-page {
|
||||
flex: 1 1;
|
||||
|
||||
.text-header:first-child {
|
||||
border-top-right-radius: 7px;
|
||||
}
|
||||
|
||||
@at-root .body--light & {
|
||||
border-left: 1px solid #FFF;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
border-left: 1px solid rgba($dark-6, .75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.body--dark {
|
||||
background-color: $dark-6;
|
||||
}
|
||||
|
||||
.q-footer {
|
||||
.q-bar {
|
||||
@at-root .body--light & {
|
||||
background-color: $grey-3;
|
||||
color: $grey-7;
|
||||
}
|
||||
@at-root .body--dark & {
|
||||
background-color: $dark-4;
|
||||
color: rgba(255,255,255,.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue