refactor: cleanup documentation page
This commit is contained in:
liyasthomas
@@ -50,7 +50,7 @@
|
||||
<span class="truncate"> {{ request.name }} </span>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
v-if="!saveRequest"
|
||||
v-if="!saveRequest && !doc"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
icon="replay"
|
||||
:title="$t('restore')"
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<span class="truncate"> {{ request.name }} </span>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
v-if="!saveRequest"
|
||||
v-if="!saveRequest && !doc"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
icon="replay"
|
||||
:title="$t('restore')"
|
||||
|
||||
@@ -203,8 +203,8 @@
|
||||
"variable_count": "Variable {count}",
|
||||
"value_count": "Value {count}",
|
||||
"send_request_first": "Send a request first",
|
||||
"generate_docs": "Generate Documentation",
|
||||
"generate_docs_message": "Import any Hoppscotch Collection to Generate Documentation on-the-go.",
|
||||
"generate_docs": "Generate documentation",
|
||||
"generate_docs_message": "Import any Hoppscotch collection to generate API documentation on-the-go.",
|
||||
"generate_docs_first": "Generate documentation first",
|
||||
"docs_generated": "Documentation generated",
|
||||
"import_collections": "Import collections",
|
||||
|
||||
@@ -1,17 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<Splitpanes :dbl-click-splitter="false" vertical>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<Splitpanes :dbl-click-splitter="false" horizontal>
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="import">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("collection") }}</label>
|
||||
<p>
|
||||
<div class="flex p-4 items-start justify-between">
|
||||
<label class="font-semibold">
|
||||
{{ $t("generate_docs_message") }}
|
||||
</p>
|
||||
<div class="flex flex-1">
|
||||
<label for="collectionUpload">
|
||||
</label>
|
||||
<span
|
||||
class="
|
||||
bg-accentLight
|
||||
rounded
|
||||
font-semibold
|
||||
text-primary
|
||||
py-1
|
||||
px-2
|
||||
inline-flex
|
||||
"
|
||||
>
|
||||
BETA
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex
|
||||
top-0
|
||||
z-10
|
||||
items-start
|
||||
justify-between
|
||||
sticky
|
||||
"
|
||||
>
|
||||
<label for="collectionUpload" class="font-semibold">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
@@ -27,7 +50,6 @@
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
@@ -35,22 +57,32 @@
|
||||
@click.native="collectionJSON = '[]'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
v-model="collectionJSON"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: 16,
|
||||
minLines: 8,
|
||||
maxLines: Infinity,
|
||||
minLines: 16,
|
||||
fontSize: '12px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
icon="topic"
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
flex
|
||||
p-4
|
||||
bottom-0
|
||||
z-10
|
||||
justify-between
|
||||
items-start
|
||||
sticky
|
||||
"
|
||||
>
|
||||
<ButtonPrimary
|
||||
:label="$t('generate_docs')"
|
||||
@click.native="getDoc"
|
||||
/>
|
||||
@@ -60,22 +92,48 @@
|
||||
<Pane class="hide-scrollbar !overflow-auto">
|
||||
<AppSection label="documentation">
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("documentation") }}</label>
|
||||
<p v-if="items.length === 0">
|
||||
<div
|
||||
v-if="items.length === 0"
|
||||
class="
|
||||
flex flex-col
|
||||
text-secondaryLight
|
||||
p-4
|
||||
items-center
|
||||
justify-center
|
||||
"
|
||||
>
|
||||
<i class="opacity-75 pb-2 material-icons">topic</i>
|
||||
<span class="text-center">
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div v-else class="flex flex-1">
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
p-4
|
||||
top-0
|
||||
z-10
|
||||
sticky
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
? `${$t('login_with_github_to')} ${$t(
|
||||
'create_secret_gist'
|
||||
).toLowerCase()}`
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: null
|
||||
? `${$t('login_with_github_to')} ${$t(
|
||||
'create_secret_gist'
|
||||
).toLowerCase()}`
|
||||
: 'Beta'
|
||||
"
|
||||
>
|
||||
<ButtonSecondary
|
||||
<ButtonPrimary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -83,19 +141,16 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment"
|
||||
label="$t('create_secret_gist')"
|
||||
:label="$t('create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
<div
|
||||
v-for="(collection, index) in items"
|
||||
:key="`collection-${index}`"
|
||||
>
|
||||
<DocsCollection :collection="collection" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AppSection>
|
||||
@@ -119,7 +174,6 @@
|
||||
</aside>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user