Skip to content

W
wiki-js
Unverified Commit 0fd57490 authored by Nicolas Giard's avatar Nicolas Giard
Browse files
Options

feat: file manager (wip)

parent 24b19849
Hide whitespace changes
Inline Side-by-side
Showing with 455 additions and 5 deletions
ux/src/components/FileManager.vue
View file @ 0fd57490
......@@ -83,12 +83,29 @@ q-layout(view='hHh lpR fFf', container)
)
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-px-md.q-pb-sm
q-tree.fileman-toc(
:nodes='state.tree'
icon='las la-caret-right'
node-key='key'
dense
accordion
no-connectors
v-model:expanded='state.treeExpanded'
v-model:selected='state.treeSelected'
@click='openFolder'
)
q-drawer.bg-grey-1(:model-value='true', :width='350', side='right')
q-list(padding, v-if='state.loading < 1')
.q-pa-md
q-img.rounded-borders(
src='https://picsum.photos/id/134/340/340'
width='100%'
fit='cover'
:ratio='16/10'
)
q-page-container
q-page.bg-white
q-bar.bg-grey-1
q-bar.bg-blue-grey-1
small.text-caption.text-grey-7 / foo / bar
q-list.fileman-filelist
q-item(clickable)
......@@ -130,10 +147,12 @@ q-layout(view='hHh lpR fFf', container)
import { useI18n } from 'vue-i18n'
import { reactive } from 'vue'
import { usePageStore } from 'src/stores/page'
import { useSiteStore } from 'src/stores/site'
// STORES
const pageStore = usePageStore()
const siteStore = useSiteStore()
// I18N
......@@ -144,7 +163,34 @@ const { t } = useI18n()
const state = reactive({
loading: 0,
search: ''
search: '',
tree: [
{
key: 'root',
label: 'Root',
children: [
{
key: '1',
label: 'guides',
icon: 'las la-folder',
children: [
{
key: '3',
label: 'offline',
icon: 'las la-folder'
}
]
},
{
key: '2',
label: 'administration',
icon: 'las la-folder'
}
]
}
],
treeExpanded: ['root'],
treeSelected: []
})
// METHODS
......@@ -153,6 +199,10 @@ function close () {
siteStore.overlay = null
}
function openFolder (node, noder) {
console.info(node, noder)
}
</script>
<style lang="scss">
......@@ -165,5 +215,11 @@ function close () {
border-radius: 8px;
}
}
&-toc {
&.q-tree--dense .q-tree__node {
padding-bottom: 5px;
}
}
}
</style>
ux/src/components/TreeNav.vue 0 → 100644
View file @ 0fd57490
<template lang="pug">
.treenav
</template>
<script setup>
// PROPS
defineProps({
nodes: {
type: Array,
default: () => []
}
})
// EMITS
const emits = defineEmits(['selected'])
</script>
ux/src/css/page-contents.scss
View file @ 0fd57490
......@@ -2,6 +2,44 @@
color: #424242;
font-size: 14px;
> *:first-child {
margin-top: 0;
}
// ---------------------------------
// LINKS
// ---------------------------------
a {
color: $blue;
&.is-internal-link.is-invalid-page {
color: $red-8;
@at-root .body--dark & {
color: $red-2;
}
}
&.is-external-link {
padding-right: 3px;
&::after {
font-family: 'Line Awesome Free';
font-size: 24px/1;
padding-left: 3px;
display: inline-block;
content: "\f35d";
color: $grey-5;
text-decoration: none;
}
}
@at-root .body--dark & {
color: $blue-2;
}
}
// ---------------------------------
// HEADERS
// ---------------------------------
......@@ -59,4 +97,339 @@
text-decoration: none;
color: #666;
}
// ---------------------------------
// PARAGRAPHS
// ---------------------------------
p {
padding: 1rem 0 0 0;
margin: 0;
@at-root .page-contents > div > p:first-child {
padding-top: 0;
}
}
// ---------------------------------
// BLOCKQUOTES
// ---------------------------------
blockquote {
padding: 0 1rem 1rem 1rem;
background-color: $blue-grey-1;
border-left: 55px solid $blue-grey-5;
border-radius: .5rem;
margin: 1rem 0;
position: relative;
@at-root .body--dark & {
background-color: $blue-grey-9;
}
&::before {
display: inline-block;
font: normal normal normal 24px/1 "Line Awesome Free", sans-serif;
position: absolute;
margin-top: -12px;
top: 50%;
left: -38px;
color: rgba(255, 255, 255, .7);
content: "\F0757";
}
> p:first-child .emoji {
margin-right: .5rem;
}
&.valign-center > p {
display: flex;
align-items: center;
}
&.is-info {
background-color: $blue-1;
border-color: $blue-3;
color: $blue-9;
&::before {
content: "\F02FC";
}
code {
background-color: $blue-1;
color: $blue-8;
}
@at-root .body--dark & {
background-color: $blue-9;
color: $blue-5;
border-color: $blue-5;
}
}
&.is-warning {
background-color: $orange-1;
border-color: $orange-3;
color: darken($orange-9, 10%);
&::before {
content: "\F0026";
}
code {
background-color: $orange-1;
color: $orange-8;
}
@at-root .body--dark & {
background-color: darken($orange-9, 5%);
color: $orange-1;
border-color: $orange-5;
box-shadow: 0 0 2px 0 $grey-9;
}
}
&.is-danger {
background-color: $red-1;
border-color: $red-3;
color: $red-9;
&::before {
content: "\F0159";
}
code {
background-color: $red-1;
color: $red-8;
}
@at-root .body--dark & {
background-color: $red-9;
color: $red-1;
border-color: $red-5;
}
}
&.is-success {
background-color: $green-1;
border-color: $green-3;
color: $green-9;
&::before {
content: "\F0E1E";
}
code {
background-color: $green-1;
color: $green-8;
}
@at-root .body--dark & {
background-color: $green-9;
color: $green-5;
border-color: $green-5;
}
}
}
// ---------------------------------
// LISTS
// ---------------------------------
ol, ul:not(.tabset-tabs) {
padding-top: 1rem;
width: 100%;
@at-root .is-rtl & {
padding-left: 0;
padding-right: 1rem;
}
li > ul, li > ol {
padding-top: .5rem;
padding-left: 1rem;
@at-root .is-rtl & {
padding-left: 0;
padding-right: 1rem;
}
}
li + li {
margin-top: .5rem;
}
&.links-list {
padding-left: 0;
list-style-type: none;
@at-root .is-rtl & {
padding-right: 0;
}
li {
background-color: $grey-1;
background-image: linear-gradient(to bottom, #FFF, $grey-1);
border-right: 1px solid $grey-3;
border-bottom: 1px solid $grey-3;
border-left: 5px solid $grey-4;
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
padding: 1rem;
border-radius: 5px;
font-weight: 500;
@at-root .is-rtl & {
border-left-width: 1px;
border-right-width: 5px;
}
&:hover {
background-image: linear-gradient(to bottom, #FFF, lighten($blue-1, 4%));
border-left-color: $blue-5;
cursor: pointer;
@at-root .is-rtl & {
border-left-color: $grey-3;
border-right-width: $blue-5;
}
}
&::before {
content: '';
display: none;
}
> a {
display: block;
text-decoration: none;
margin: -1rem;
padding: 1rem;
> em {
font-weight: 400;
font-style: normal;
color: $grey-7;
display: inline-block;
padding-left: .5rem;
border-left: 1px solid $grey-4;
margin-left: .5rem;
&.is-block {
display: block;
padding-left: 0;
margin-left: 0;
border-left: none;
}
}
}
> em {
font-weight: 400;
font-style: normal;
}
@at-root .body--dark & {
background-color: $grey-1;
background-image: linear-gradient(to bottom, lighten($grey-9, 5%), $grey-9);
border-right: 1px solid $grey-9;
border-bottom: 1px solid $grey-9;
border-left: 5px solid $grey-7;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
@at-root .body--dark.is-rtl & {
border-left-width: 1px;
border-right-width: 5px;
}
&:hover {
background-image: linear-gradient(to bottom, lighten($grey-9, 2%), darken($grey-9, 3%));
border-left-color: mc('indigo', '300');
cursor: pointer;
@at-root .body--dark.is-rtl & {
border-left-color: $grey-9;
border-right-width: mc('indigo', '300');
}
}
}
}
}
&.grid-list {
margin: 1rem 0 0 0;
background-color: #FFF;
border: 1px solid $grey-3;
padding: 1px;
display: inline-block;
list-style-type: none;
@at-root .body--dark & {
background-color: #000;
border: 1px solid mc('grey', '800');
}
li {
background-color: $grey-1;
padding: .6rem 1rem;
display: block;
&:nth-child(odd) {
background-color: mc('grey', '100');
}
& + li {
margin-top: 0;
}
&::before {
content: '';
display: none;
}
@at-root .body--dark & {
background-color: $grey-9;
&:nth-child(odd) {
background-color: darken($grey-9, 5%);
}
}
}
}
}
ul:not(.tabset-tabs):not(.contains-task-list) {
list-style: none;
> li::before {
position: absolute;
left: -1.1rem;
content: '\25b8';
color: mc('grey', '600');
width: 1.35rem;
@at-root .is-rtl & {
right: -1.1rem;
content: '\25C3';
}
}
}
ol, ul:not(.tabset-tabs) {
> li {
position: relative;
> p {
display:inline-block;
vertical-align:top;
padding-top:0;
}
}
}
// ---------------------------------
// LEGACY
// ---------------------------------
.align-abstopright {
width: 100px;
max-height: 100px;
border: 2px dashed $red;
border-radius: 5px;
padding: 5px;
}
}
ux/src/stores/site.js
View file @ 0fd57490
......@@ -25,7 +25,7 @@ export const useSiteStore = defineStore('site', {
pageDataTemplates: [],
showSideNav: true,
showSidebar: true,
overlay: 'FileManager',
overlay: null,
theme: {
dark: false,
injectCSS: '',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment