mirror of https://github.com/requarks/wiki
Nicolas Giard
2 years ago
parent
f05a73dccb
commit
24b1984919
|
After Width: | Height: | Size: 288 B |
|
After Width: | Height: | Size: 876 B |
|
After Width: | Height: | Size: 1020 B |
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,169 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-layout(view='hHh lpR fFf', container)
|
||||||
|
q-header.card-header
|
||||||
|
q-toolbar(dark)
|
||||||
|
q-icon(name='img:/_assets/icons/fluent-folder.svg', left, size='md')
|
||||||
|
span {{t(`fileman.title`)}}
|
||||||
|
q-toolbar(dark)
|
||||||
|
q-input(
|
||||||
|
dark
|
||||||
|
v-model='state.search'
|
||||||
|
standout='bg-white text-dark'
|
||||||
|
dense
|
||||||
|
ref='searchField'
|
||||||
|
style='width: 100%;'
|
||||||
|
label='Search folder...'
|
||||||
|
)
|
||||||
|
template(v-slot:prepend)
|
||||||
|
q-icon(name='las la-search')
|
||||||
|
template(v-slot:append)
|
||||||
|
q-icon.cursor-pointer(
|
||||||
|
name='las la-times'
|
||||||
|
@click='state.search=``'
|
||||||
|
v-if='state.search.length > 0'
|
||||||
|
:color='$q.dark.isActive ? `blue` : `grey-4`'
|
||||||
|
)
|
||||||
|
q-toolbar(dark)
|
||||||
|
q-space
|
||||||
|
q-btn.q-mr-sm(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color='blue-4'
|
||||||
|
:aria-label='t(`common.actions.upload`)'
|
||||||
|
icon='las la-plus-circle'
|
||||||
|
@click=''
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.upload`)}}
|
||||||
|
q-btn(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color='positive'
|
||||||
|
:aria-label='t(`common.actions.upload`)'
|
||||||
|
icon='las la-cloud-upload-alt'
|
||||||
|
@click=''
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.upload`)}}
|
||||||
|
q-separator.q-mx-sm(vertical, dark, inset)
|
||||||
|
q-btn.q-mr-sm(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color='blue-grey-4'
|
||||||
|
:aria-label='t(`common.actions.upload`)'
|
||||||
|
icon='las la-check-square'
|
||||||
|
@click=''
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.upload`)}}
|
||||||
|
q-btn.q-mr-sm(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color='blue-grey-4'
|
||||||
|
:aria-label='t(`common.actions.upload`)'
|
||||||
|
icon='las la-list'
|
||||||
|
@click=''
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.upload`)}}
|
||||||
|
q-btn(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color='blue-grey-4'
|
||||||
|
:aria-label='t(`common.actions.refresh`)'
|
||||||
|
icon='las la-redo-alt'
|
||||||
|
@click=''
|
||||||
|
:loading='state.loading > 0'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.refresh`)}}
|
||||||
|
q-separator.q-mx-sm(vertical, dark, inset)
|
||||||
|
q-btn(
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color='white'
|
||||||
|
:aria-label='t(`common.actions.close`)'
|
||||||
|
icon='las la-times'
|
||||||
|
@click='close'
|
||||||
|
)
|
||||||
|
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.close`)}}
|
||||||
|
q-drawer.bg-blue-grey-1(:model-value='true', :width='350')
|
||||||
|
q-list(padding, v-if='state.loading < 1')
|
||||||
|
q-drawer.bg-grey-1(:model-value='true', :width='350', side='right')
|
||||||
|
q-list(padding, v-if='state.loading < 1')
|
||||||
|
q-page-container
|
||||||
|
q-page.bg-white
|
||||||
|
q-bar.bg-grey-1
|
||||||
|
small.text-caption.text-grey-7 / foo / bar
|
||||||
|
q-list.fileman-filelist
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-icon(name='img:/_assets/icons/fluent-folder.svg', size='xl')
|
||||||
|
q-item-section
|
||||||
|
q-item-label Beep Boop
|
||||||
|
q-item-label(caption) 19 Items
|
||||||
|
q-item-section(side)
|
||||||
|
.text-caption 1
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-icon(name='img:/_assets/icons/fluent-folder.svg', size='xl')
|
||||||
|
q-item-section
|
||||||
|
q-item-label Beep Boop
|
||||||
|
q-item-label(caption) 19 Items
|
||||||
|
q-item-section(side)
|
||||||
|
.text-caption 1
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-icon(name='img:/_assets/icons/color-document.svg', size='xl')
|
||||||
|
q-item-section
|
||||||
|
q-item-label Beep Boop
|
||||||
|
q-item-label(caption) Markdown
|
||||||
|
q-item-section(side)
|
||||||
|
.text-caption 1
|
||||||
|
q-item(clickable)
|
||||||
|
q-item-section(avatar)
|
||||||
|
q-icon(name='img:/_assets/icons/color-pdf.svg', size='xl')
|
||||||
|
q-item-section
|
||||||
|
q-item-label Beep Boop
|
||||||
|
q-item-label(caption) 4 pages
|
||||||
|
q-item-section(side)
|
||||||
|
.text-caption 2022/01/01
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: 0,
|
||||||
|
search: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
function close () {
|
||||||
|
siteStore.overlay = null
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.fileman {
|
||||||
|
&-filelist {
|
||||||
|
padding: 8px 12px;
|
||||||
|
|
||||||
|
> .q-item {
|
||||||
|
padding: 8px 6px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
<template lang='pug'>
|
||||||
|
q-page.admin-icons
|
||||||
|
.row.q-pa-md.items-center
|
||||||
|
.col-auto
|
||||||
|
img.admin-icon.admin-icons-icon.animated.fadeInLeft(src='/_assets/icons/fluent-spring.svg')
|
||||||
|
.col.q-pl-md
|
||||||
|
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.icons.title') }}
|
||||||
|
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.icons.subtitle') }}
|
||||||
|
.col-auto
|
||||||
|
q-btn.acrylic-btn.q-mr-sm(
|
||||||
|
icon='las la-question-circle'
|
||||||
|
flat
|
||||||
|
color='grey'
|
||||||
|
:href='siteStore.docsBase + `/system/icons`'
|
||||||
|
target='_blank'
|
||||||
|
type='a'
|
||||||
|
)
|
||||||
|
q-btn.acrylic-btn(
|
||||||
|
icon='las la-redo-alt'
|
||||||
|
flat
|
||||||
|
color='secondary'
|
||||||
|
:loading='state.loading > 0'
|
||||||
|
@click='load'
|
||||||
|
)
|
||||||
|
q-separator(inset)
|
||||||
|
.row.q-pa-md.q-col-gutter-md
|
||||||
|
.col-12
|
||||||
|
q-card.shadow-1 Beep boop
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useMeta, useQuasar } from 'quasar'
|
||||||
|
import { computed, onMounted, reactive, watch } from 'vue'
|
||||||
|
|
||||||
|
import { useAdminStore } from 'src/stores/admin'
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// META
|
||||||
|
|
||||||
|
useMeta({
|
||||||
|
title: t('admin.icons.title')
|
||||||
|
})
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
extensions: []
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
async function load () {
|
||||||
|
state.loading++
|
||||||
|
$q.loading.show()
|
||||||
|
const resp = await APOLLO_CLIENT.query({
|
||||||
|
query: gql`
|
||||||
|
query fetchExtensions {
|
||||||
|
systemExtensions {
|
||||||
|
key
|
||||||
|
title
|
||||||
|
description
|
||||||
|
isInstalled
|
||||||
|
isInstallable
|
||||||
|
isCompatible
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
fetchPolicy: 'network-only'
|
||||||
|
})
|
||||||
|
state.extensions = cloneDeep(resp?.data?.systemExtensions)
|
||||||
|
$q.loading.hide()
|
||||||
|
state.loading--
|
||||||
|
}
|
||||||
|
|
||||||
|
// MOUNTED
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss'>
|
||||||
|
.admin-icons {
|
||||||
|
&-icon {
|
||||||
|
animation: fadeInLeft .6s forwards, flower-rotate 30s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flower-rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue