btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: cleanup documentation page

Browse Source
This commit is contained in:
liyasthomas
2021-07-30 21:06:25 +05:30
parent 203b45f4d5
commit a1eac2f348
4 changed files with 171 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/collections/my/Request.vue
View File

@@ -50,7 +50,7 @@
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
</span> </span>
<ButtonSecondary <ButtonSecondary
v-if="!saveRequest" v-if="!saveRequest && !doc"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
icon="replay" icon="replay"
:title="$t('restore')" :title="$t('restore')"

2
components/collections/teams/Request.vue
View File

@@ -43,7 +43,7 @@
<span class="truncate"> {{ request.name }} </span> <span class="truncate"> {{ request.name }} </span>
</span> </span>
<ButtonSecondary <ButtonSecondary
v-if="!saveRequest" v-if="!saveRequest && !doc"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
icon="replay" icon="replay"
:title="$t('restore')" :title="$t('restore')"

4
lang/en-US.json
View File

@@ -203,8 +203,8 @@
"variable_count": "Variable {count}", "variable_count": "Variable {count}",
"value_count": "Value {count}", "value_count": "Value {count}",
"send_request_first": "Send a request first", "send_request_first": "Send a request first",
"generate_docs": "Generate Documentation", "generate_docs": "Generate documentation",
"generate_docs_message": "Import any Hoppscotch Collection to Generate Documentation on-the-go.", "generate_docs_message": "Import any Hoppscotch collection to generate API documentation on-the-go.",
"generate_docs_first": "Generate documentation first", "generate_docs_first": "Generate documentation first",
"docs_generated": "Documentation generated", "docs_generated": "Documentation generated",
"import_collections": "Import collections", "import_collections": "Import collections",

280
pages/documentation.vue
View File

@@ -1,125 +1,179 @@
<template> <template>
<div> <Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes :dbl-click-splitter="false" vertical> <Pane class="hide-scrollbar !overflow-auto">
<Pane class="hide-scrollbar !overflow-auto"> <Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes :dbl-click-splitter="false" horizontal> <Pane class="hide-scrollbar !overflow-auto">
<Pane class="hide-scrollbar !overflow-auto"> <AppSection label="import">
<AppSection label="import"> <div class="flex p-4 items-start justify-between">
<div class="flex flex-col"> <label class="font-semibold">
<label>{{ $t("collection") }}</label> {{ $t("generate_docs_message") }}
<p> </label>
{{ $t("generate_docs_message") }} <span
</p> class="
<div class="flex flex-1"> bg-accentLight
<label for="collectionUpload"> rounded
<ButtonSecondary font-semibold
v-tippy="{ theme: 'tooltip' }" text-primary
title="JSON" py-1
icon="folder" px-2
:label="$t('import_collections')" inline-flex
@click.native="$refs.collectionUpload.click()" "
/> >
</label> BETA
<input </span>
ref="collectionUpload" </div>
class="input" <div
name="collectionUpload" class="
type="file" bg-primary
@change="uploadCollection" border-b border-dividerLight
/> flex
<div> top-0
<ButtonSecondary z-10
v-tippy="{ theme: 'tooltip' }" items-start
:title="$t('clear')" justify-between
icon="clear_all" sticky
@click.native="collectionJSON = '[]'" "
/> >
</div> <label for="collectionUpload" class="font-semibold">
</div>
<SmartAceEditor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
:options="{
maxLines: 16,
minLines: 8,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
<ButtonSecondary <ButtonSecondary
icon="topic" v-tippy="{ theme: 'tooltip' }"
:label="$t('generate_docs')" title="JSON"
@click.native="getDoc" icon="folder"
:label="$t('import_collections')"
@click.native="$refs.collectionUpload.click()"
/> />
</div> </label>
</AppSection> <input
</Pane> ref="collectionUpload"
<Pane class="hide-scrollbar !overflow-auto"> class="input"
<AppSection label="documentation"> name="collectionUpload"
<div class="flex flex-col"> type="file"
<label>{{ $t("documentation") }}</label> @change="uploadCollection"
<p v-if="items.length === 0"> />
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="collectionJSON = '[]'"
/>
</div>
<SmartAceEditor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
:options="{
maxLines: Infinity,
minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/>
<div
class="
bg-primary
flex
p-4
bottom-0
z-10
justify-between
items-start
sticky
"
>
<ButtonPrimary
:label="$t('generate_docs')"
@click.native="getDoc"
/>
</div>
</AppSection>
</Pane>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="documentation">
<div class="flex flex-col">
<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") }} {{ $t("generate_docs_first") }}
</p> </span>
<div v-else class="flex flex-1"> </div>
<div <div
v-tippy="{ theme: 'tooltip' }" v-else
:title=" 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'
).toLowerCase()}`
: currentUser.provider !== 'github.com'
? `${$t('login_with_github_to')} ${$t(
'create_secret_gist'
).toLowerCase()}`
: 'Beta'
"
>
<ButtonPrimary
:disabled="
!currentUser !currentUser
? $t('login_with_github_to') + $t('create_secret_gist') ? true
: currentUser.provider !== 'github.com' : currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist') ? true
: null : false
" "
> :label="$t('create_secret_gist')"
<ButtonSecondary @click.native="createDocsGist"
:disabled=" />
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment"
label="$t('create_secret_gist')"
@click.native="createDocsGist"
/>
</div>
</div>
<div>
<span
v-for="(collection, index) in items"
:key="`collection-${index}`"
>
<DocsCollection :collection="collection" />
</span>
</div> </div>
</div> </div>
</AppSection> <div
</Pane> v-for="(collection, index) in items"
</Splitpanes> :key="`collection-${index}`"
</Pane> >
<Pane <DocsCollection :collection="collection" />
v-if="RIGHT_SIDEBAR" </div>
max-size="35" </div>
size="25" </AppSection>
min-size="20" </Pane>
class="hide-scrollbar !overflow-auto" </Splitpanes>
> </Pane>
<aside> <Pane
<Collections v-if="RIGHT_SIDEBAR"
:selected="selected" max-size="35"
:doc="true" size="25"
@use-collection="useSelectedCollection($event)" min-size="20"
@remove-collection="removeSelectedCollection($event)" class="hide-scrollbar !overflow-auto"
/> >
</aside> <aside>
</Pane> <Collections
</Splitpanes> :selected="selected"
</div> :doc="true"
@use-collection="useSelectedCollection($event)"
@remove-collection="removeSelectedCollection($event)"
/>
</aside>
</Pane>
</Splitpanes>
</template> </template>
<script> <script>