refactor: use pane layout component in pages
This commit is contained in:
liyasthomas
@@ -1,132 +1,103 @@
|
||||
<template>
|
||||
<Splitpanes
|
||||
class="smart-splitter"
|
||||
:rtl="SIDEBAR_ON_LEFT && mdAndLarger"
|
||||
:class="{
|
||||
'!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
|
||||
}"
|
||||
:horizontal="!mdAndLarger"
|
||||
>
|
||||
<Pane
|
||||
size="75"
|
||||
min-size="65"
|
||||
class="hide-scrollbar !overflow-auto flex flex-col"
|
||||
>
|
||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||
<Pane
|
||||
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||
class="hide-scrollbar !overflow-auto flex flex-col"
|
||||
<AppPaneLayout>
|
||||
<template #primary>
|
||||
<div class="flex items-start justify-between p-4">
|
||||
<label>
|
||||
{{ $t("documentation.generate_message") }}
|
||||
</label>
|
||||
<span
|
||||
class="inline-flex px-2 py-1 rounded bg-accentDark text-accentContrast"
|
||||
>
|
||||
<div class="flex items-start justify-between p-4">
|
||||
<label>
|
||||
{{ $t("documentation.generate_message") }}
|
||||
</label>
|
||||
<span
|
||||
class="inline-flex px-2 py-1 rounded bg-accentDark text-accentContrast"
|
||||
>
|
||||
BETA
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="sticky top-0 z-10 flex items-start justify-between border-b bg-primary border-dividerLight"
|
||||
>
|
||||
<label for="collectionUpload">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
svg="folder"
|
||||
class="!rounded-none"
|
||||
:label="$t('import.collections')"
|
||||
@click.native="$refs.collectionUpload.click()"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
class="input"
|
||||
name="collectionUpload"
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.clear')"
|
||||
svg="trash-2"
|
||||
@click.native="collectionJSON = '[]'"
|
||||
/>
|
||||
</div>
|
||||
<textarea-autosize
|
||||
id="import-curl"
|
||||
v-model="collectionJSON"
|
||||
class="w-full p-4 font-mono bg-primary"
|
||||
autofocus
|
||||
rows="8"
|
||||
BETA
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="sticky top-0 z-10 flex items-start justify-between border-b bg-primary border-dividerLight"
|
||||
>
|
||||
<label for="collectionUpload">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
svg="folder"
|
||||
class="!rounded-none"
|
||||
:label="$t('import.collections')"
|
||||
@click.native="$refs.collectionUpload.click()"
|
||||
/>
|
||||
<div
|
||||
class="sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b bg-primary border-dividerLight"
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
class="input"
|
||||
name="collectionUpload"
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.clear')"
|
||||
svg="trash-2"
|
||||
@click.native="collectionJSON = '[]'"
|
||||
/>
|
||||
</div>
|
||||
<textarea-autosize
|
||||
id="import-curl"
|
||||
v-model="collectionJSON"
|
||||
class="w-full p-4 font-mono bg-primary"
|
||||
autofocus
|
||||
rows="8"
|
||||
/>
|
||||
<div
|
||||
class="sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b bg-primary border-dividerLight"
|
||||
>
|
||||
<ButtonPrimary
|
||||
:label="$t('documentation.generate')"
|
||||
@click.native="getDoc"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #secondary>
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
v-if="items.length === 0"
|
||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
||||
>
|
||||
<i class="pb-2 opacity-75 material-icons">topic</i>
|
||||
<span class="text-center">
|
||||
{{ $t("helpers.generate_documentation_first") }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="sticky top-0 z-10 flex flex-1 p-4 border-b bg-primary border-dividerLight"
|
||||
>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('export.require_github')
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('export.require_github')
|
||||
: 'Beta'
|
||||
"
|
||||
>
|
||||
<ButtonPrimary
|
||||
:label="$t('documentation.generate')"
|
||||
@click.native="getDoc"
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
:label="$t('export.create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</div>
|
||||
</Pane>
|
||||
<Pane
|
||||
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||
class="hide-scrollbar !overflow-auto flex flex-col"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
v-if="items.length === 0"
|
||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
||||
>
|
||||
<i class="pb-2 opacity-75 material-icons">topic</i>
|
||||
<span class="text-center">
|
||||
{{ $t("helpers.generate_documentation_first") }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="sticky top-0 z-10 flex flex-1 p-4 border-b bg-primary border-dividerLight"
|
||||
>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('export.require_github')
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('export.require_github')
|
||||
: 'Beta'
|
||||
"
|
||||
>
|
||||
<ButtonPrimary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
:label="$t('export.create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(collection, index) in items"
|
||||
:key="`collection-${index}`"
|
||||
>
|
||||
<DocsCollection :collection="collection" />
|
||||
</div>
|
||||
</div>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane
|
||||
v-if="SIDEBAR"
|
||||
size="25"
|
||||
min-size="20"
|
||||
class="hide-scrollbar !overflow-auto flex flex-col"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div v-for="(collection, index) in items" :key="`collection-${index}`">
|
||||
<DocsCollection :collection="collection" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #sidebar>
|
||||
<aside>
|
||||
<Collections
|
||||
:selected="selected"
|
||||
@@ -135,35 +106,23 @@
|
||||
@remove-collection="removeSelectedCollection($event)"
|
||||
/>
|
||||
</aside>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</template>
|
||||
</AppPaneLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { Splitpanes, Pane } from "splitpanes"
|
||||
import "splitpanes/dist/splitpanes.css"
|
||||
import Mustache from "mustache"
|
||||
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
|
||||
import { currentUser$ } from "~/helpers/fb/auth"
|
||||
import DocsTemplate from "~/assets/md/docs.md"
|
||||
import folderContents from "~/assets/md/folderContents.md"
|
||||
import folderBody from "~/assets/md/folderBody.md"
|
||||
import { useSetting } from "~/newstore/settings"
|
||||
import { useReadonlyStream } from "~/helpers/utils/composables"
|
||||
|
||||
export default defineComponent({
|
||||
components: { Splitpanes, Pane },
|
||||
setup() {
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
const mdAndLarger = breakpoints.greater("md")
|
||||
|
||||
return {
|
||||
mdAndLarger,
|
||||
SIDEBAR: useSetting("SIDEBAR"),
|
||||
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
|
||||
currentUser: useReadonlyStream(currentUser$, null),
|
||||
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user