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

✨ Tabs

Browse Source
This commit is contained in:
Liyas Thomas
2020-03-07 18:40:37 +05:30
parent bc3bdb835e
commit 33f5474033
7 changed files with 632 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/styles.scss
View File

@@ -551,7 +551,6 @@ fieldset.yellow legend {
input[type="file"], input[type="file"],
input[type="radio"], input[type="radio"],
.tab,
.hide-on-large-screen, .hide-on-large-screen,
#installPWA, #installPWA,
.hidden { .hidden {
@@ -827,33 +826,6 @@ section {
border-radius: 16px; border-radius: 16px;
} }
.tab {
width: 100%;
order: 1;
}
input[type="radio"] + label {
padding: 8px 16px;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease-in-out;
&:hover,
&:active,
&:focus {
border-color: var(--brd-color);
}
}
input[type="radio"]:checked + label {
border-color: var(--fg-color);
color: var(--fg-color);
}
input[type="radio"]:checked + label + .tab {
display: block;
}
.toasted-container .toasted { .toasted-container .toasted {
justify-content: flex-start !important; justify-content: flex-start !important;
} }

36
components/ui/tab.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div v-if="isActive">
<slot></slot>
</div>
</template>
<style scoped lang="scss"></style>
<script>
export default {
props: {
name: {
required: true,
},
selected: {
default: false,
},
},
data() {
return {
isActive: false,
}
},
// computed: {
// href() {
// return `#${this.name.toLowerCase().replace(/ /g, "-")}`
// },
// },
mounted() {
this.isActive = this.selected
},
}
</script>

84
components/ui/tabs.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<div class="tabs-wrapper">
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
</template>
<style scoped lang="scss">
.tabs-wrapper {
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
.tabs {
-webkit-overflow-scrolling: touch;
display: flex;
white-space: nowrap;
overflow: auto;
ul {
display: flex;
width: 0px;
}
li {
display: inline-flex;
a {
display: flex;
padding: 8px 16px;
color: var(--fg-light-color);
border-radius: 4px;
cursor: pointer;
&:hover {
color: var(--fg-color);
}
}
&.is-active a {
background-color: var(--brd-color);
color: var(--fg-color);
}
}
}
}
@media (max-width: 768px) {
ul,
ol {
flex-flow: row nowrap;
}
}
</style>
<script>
export default {
data() {
return {
tabs: [],
}
},
created() {
this.tabs = this.$children
},
methods: {
selectTab({ name }) {
this.tabs.forEach(tab => {
tab.isActive = tab.name == name
})
},
},
}
</script>

4
pages/doc.vue
View File

@@ -262,9 +262,9 @@
<style scoped lang="scss"> <style scoped lang="scss">
.collection, .collection,
.doc-desc,
.folder, .folder,
.request, .request {
.doc-desc {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;

60
pages/graphql.vue
View File

@@ -261,69 +261,31 @@
<aside class="sticky-inner inner-right"> <aside class="sticky-inner inner-right">
<pw-section class="purple" :label="$t('docs')" ref="docs"> <pw-section class="purple" :label="$t('docs')" ref="docs">
<section> <section>
<input <tabs>
v-if="queryFields.length > 0" <tab v-if="queryFields.length > 0" :name="$t('queries')" :selected="true">
id="queries-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="queryFields.length > 0" for="queries-tab">
{{ $t("queries") }}
</label>
<div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name"> <div v-for="field in queryFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" /> <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div> </div>
</div> </tab>
<input <tab v-if="mutationFields.length > 0" :name="$t('mutations')">
v-if="mutationFields.length > 0"
id="mutations-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="mutationFields.length > 0" for="mutations-tab">
{{ $t("mutations") }}
</label>
<div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name"> <div v-for="field in mutationFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" /> <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div> </div>
</div> </tab>
<input <tab v-if="subscriptionFields.length > 0" :name="$t('subscriptions')">
v-if="subscriptionFields.length > 0"
id="subscriptions-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab">
{{ $t("subscriptions") }}
</label>
<div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name"> <div v-for="field in subscriptionFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" /> <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div> </div>
</div> </tab>
<input <tab v-if="gqlTypes.length > 0" :name="$t('types')">
v-if="gqlTypes.length > 0"
id="gqltypes-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">
{{ $t("types") }}
</label>
<div v-if="gqlTypes.length > 0" class="tab">
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`"> <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" /> <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
</div> </div>
</div> </tab>
</tabs>
</section> </section>
<p <p
@@ -374,6 +336,8 @@ export default {
autocomplete: () => import("../components/ui/autocomplete"), autocomplete: () => import("../components/ui/autocomplete"),
Editor: AceEditor, Editor: AceEditor,
QueryEditor: QueryEditor, QueryEditor: QueryEditor,
tabs: () => import("../components/ui/tabs"),
tab: () => import("../components/ui/tab"),
}, },
data() { data() {
return { return {

48
pages/index.vue
View File

@@ -511,9 +511,8 @@
</pw-section> </pw-section>
<section id="options"> <section id="options">
<input id="tab-one" type="radio" name="options" checked="checked" /> <tabs>
<label for="tab-one">{{ $t("authentication") }}</label> <tab :name="$t('authentication')" :selected="true">
<div class="tab">
<pw-section class="cyan" :label="$t('authentication')" ref="authentication"> <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
<ul> <ul>
<li> <li>
@@ -715,11 +714,9 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </tab>
<input id="tab-two" type="radio" name="options" /> <tab :name="$t('headers')">
<label for="tab-two">{{ $t("headers") }}</label>
<div class="tab">
<pw-section class="orange" label="Headers" ref="headers"> <pw-section class="orange" label="Headers" ref="headers">
<ul> <ul>
<li> <li>
@@ -798,11 +795,9 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </tab>
<input id="tab-three" type="radio" name="options" /> <tab :name="$t('parameters')">
<label for="tab-three">{{ $t("parameters") }}</label>
<div class="tab">
<pw-section class="pink" label="Parameters" ref="parameters"> <pw-section class="pink" label="Parameters" ref="parameters">
<ul> <ul>
<li> <li>
@@ -878,7 +873,8 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </tab>
</tabs>
<!-- <div class="flex-wrap"> <!-- <div class="flex-wrap">
<span></span> <span></span>
@@ -993,27 +989,20 @@
<aside v-if="activeSidebar" class="sticky-inner inner-right"> <aside v-if="activeSidebar" class="sticky-inner inner-right">
<section> <section>
<input id="history-tab" type="radio" name="side" checked="checked" /> <tabs>
<label for="history-tab">{{ $t("history") }}</label> <tab :name="$t('history')" :selected="true">
<div class="tab">
<history @useHistory="handleUseHistory" ref="historyComponent" /> <history @useHistory="handleUseHistory" ref="historyComponent" />
</div> </tab>
<input id="collection-tab" type="radio" name="side" /> <tab :name="$t('collections')">
<label for="collection-tab">{{ $t("collections") }}</label>
<div class="tab">
<collections /> <collections />
</div> </tab>
<input id="environment-tab" type="radio" name="side" /> <tab :name="$t('environment')">
<label for="environment-tab">{{ $t("environment") }}</label>
<div class="tab">
<environments @use-environment="useSelectedEnvironment($event)" /> <environments @use-environment="useSelectedEnvironment($event)" />
</div> </tab>
<input id="sync-tab" type="radio" name="side" /> <tab :name="$t('notes')">
<label for="sync-tab">{{ $t("notes") }}</label>
<div class="tab">
<pw-section class="pink" :label="$t('notes')" ref="sync"> <pw-section class="pink" :label="$t('notes')" ref="sync">
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
<inputform /> <inputform />
@@ -1030,7 +1019,8 @@
</ul> </ul>
</div> </div>
</pw-section> </pw-section>
</div> </tab>
</tabs>
</section> </section>
</aside> </aside>
@@ -1384,6 +1374,8 @@ export default {
inputform: () => import("../components/firebase/inputform"), inputform: () => import("../components/firebase/inputform"),
notes: () => import("../components/firebase/feeds"), notes: () => import("../components/firebase/feeds"),
login: () => import("../components/firebase/login"), login: () => import("../components/firebase/login"),
tabs: () => import("../components/ui/tabs"),
tab: () => import("../components/ui/tab"),
}, },
data() { data() {
return { return {

30
pages/realtime.vue
View File

@@ -1,9 +1,8 @@
<template> <template>
<div class="page"> <div class="page">
<section id="options"> <section id="options">
<input id="tab-one" type="radio" name="options" checked="checked" /> <tabs>
<label for="tab-one">{{ $t("websocket") }}</label> <tab :name="$t('websocket')" :selected="true">
<div class="tab">
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request">
<ul> <ul>
<li> <li>
@@ -20,7 +19,12 @@
<div> <div>
<li> <li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label> <label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection"> <button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }} {{ !connectionState ? $t("connect") : $t("disconnect") }}
<span> <span>
<i class="material-icons"> <i class="material-icons">
@@ -64,10 +68,9 @@
</div> </div>
</ul> </ul>
</pw-section> </pw-section>
</div> </tab>
<input id="tab-two" type="radio" name="options" />
<label for="tab-two">{{ $t("sse") }}</label> <tab :name="$t('sse')">
<div class="tab">
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request">
<ul> <ul>
<li> <li>
@@ -109,13 +112,12 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </tab>
<input id="tab-three" type="radio" name="options" /> <tab :name="$t('socketio')">
<label for="tab-three">{{ $t("socketio") }}</label>
<div class="tab">
<socketio /> <socketio />
</div> </tab>
</tabs>
</section> </section>
</div> </div>
</template> </template>
@@ -128,6 +130,8 @@ export default {
components: { components: {
"pw-section": () => import("../components/layout/section"), "pw-section": () => import("../components/layout/section"),
socketio: () => import("../components/realtime/socketio"), socketio: () => import("../components/realtime/socketio"),
tabs: () => import("../components/ui/tabs"),
tab: () => import("../components/ui/tab"),
realtimeLog, realtimeLog,
}, },
data() { data() {