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