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

feat: introduce animations

Browse Source
This commit is contained in:
liyasthomas
2021-06-13 20:31:42 +05:30
parent 685f9d506d
commit ced2f1b911
7 changed files with 311 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/scss/styles.scss
View File

@@ -1,4 +1,4 @@
$responsiveWidth: 768px; $responsiveWidth: 767px;
*, *,
*::before, *::before,
@@ -52,6 +52,7 @@ body {
@apply transition-colors; @apply transition-colors;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply overflow-x-hidden;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;

2
components/app/Header.vue
View File

@@ -300,8 +300,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px;
.logo { .logo {
@apply text-xl; @apply text-xl;
@apply transition-colors; @apply transition-colors;

238
components/app/Sidenav.vue
View File

@@ -1,125 +1,127 @@
<template> <template>
<aside class="nav-first"> <TranslateSlideRight appear>
<nav class="primary-nav"> <aside class="nav-first">
<!-- <nav class="primary-nav">
<!--
We're using manual checks for linkActive because the query string We're using manual checks for linkActive because the query string
seems to mess up the nuxt-link active class. seems to mess up the nuxt-link active class.
--> -->
<nuxt-link <nuxt-link
v-tooltip.right="$t('home')" v-tooltip.right="$t('home')"
:to="localePath('index')" :to="localePath('index')"
:class="linkActive('/')" :class="linkActive('/')"
:aria-label="$t('home')" :aria-label="$t('home')"
>
<AppLogo alt class="material-icons" style="height: 24px" />
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('realtime')"
:to="localePath('realtime')"
:class="linkActive('/realtime')"
>
<i class="material-icons">language</i>
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('graphql')"
:to="localePath('graphql')"
:class="linkActive('/graphql')"
:aria-label="$t('graphql')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
viewBox="0 0 29.999 30"
> >
<path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" /> <AppLogo alt class="material-icons" style="height: 24px" />
<path d="M2.727 20.53h24.538v1.272H2.727z" /> </nuxt-link>
<path <nuxt-link
d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z" v-tooltip.right="$t('realtime')"
/> :to="localePath('realtime')"
<path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" /> :class="linkActive('/realtime')"
<path >
d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z" <i class="material-icons">language</i>
/> </nuxt-link>
<path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" /> <nuxt-link
<path v-tooltip.right="$t('graphql')"
d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347" :to="localePath('graphql')"
/> :class="linkActive('/graphql')"
</svg> :aria-label="$t('graphql')"
</nuxt-link> >
<nuxt-link <svg
v-tooltip.right="$t('documentation')" xmlns="http://www.w3.org/2000/svg"
:to="localePath('doc')" height="24"
:class="linkActive('/doc')" width="24"
:aria-label="$t('documentation')" viewBox="0 0 29.999 30"
> >
<i class="material-icons">topic</i> <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
</nuxt-link> <path d="M2.727 20.53h24.538v1.272H2.727z" />
<nuxt-link <path
v-tooltip.right="$t('settings')" d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
:to="localePath('settings')" />
:class="linkActive('/settings')" <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
:aria-label="$t('settings')" <path
> d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
<i class="material-icons">settings</i> />
</nuxt-link> <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
</nav> <path
<nav v-if="$route.path == '/'" class="secondary-nav"> d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"
<a v-tooltip.right="$t('request')" href="#request"> />
<i class="material-icons">cloud_upload</i> </svg>
</a> </nuxt-link>
<a v-tooltip.right="$t('options')" href="#options"> <nuxt-link
<i class="material-icons">toc</i> v-tooltip.right="$t('documentation')"
</a> :to="localePath('doc')"
<a v-tooltip.right="$t('response')" href="#response"> :class="linkActive('/doc')"
<i class="material-icons">cloud_download</i> :aria-label="$t('documentation')"
</a> >
</nav> <i class="material-icons">topic</i>
<nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav"> </nuxt-link>
<a v-tooltip.right="$t('request')" href="#request"> <nuxt-link
<i class="material-icons">cloud_upload</i> v-tooltip.right="$t('settings')"
</a> :to="localePath('settings')"
<a v-tooltip.right="$t('communication')" href="#response"> :class="linkActive('/settings')"
<i class="material-icons">cloud_download</i> :aria-label="$t('settings')"
</a> >
</nav> <i class="material-icons">settings</i>
<nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav"> </nuxt-link>
<a v-tooltip.right="$t('endpoint')" href="#endpoint"> </nav>
<i class="material-icons">cloud</i> <nav v-if="$route.path == '/'" class="secondary-nav">
</a> <a v-tooltip.right="$t('request')" href="#request">
<a v-tooltip.right="$t('schema')" href="#schema"> <i class="material-icons">cloud_upload</i>
<i class="material-icons">assignment_returned</i> </a>
</a> <a v-tooltip.right="$t('options')" href="#options">
<a v-tooltip.right="$t('query')" href="#query"> <i class="material-icons">toc</i>
<i class="material-icons">cloud_upload</i> </a>
</a> <a v-tooltip.right="$t('response')" href="#response">
<a v-tooltip.right="$t('response')" href="#response"> <i class="material-icons">cloud_download</i>
<i class="material-icons">cloud_download</i> </a>
</a> </nav>
</nav> <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
<nav v-else-if="$route.path.includes('/doc')" class="secondary-nav"> <a v-tooltip.right="$t('request')" href="#request">
<a v-tooltip.right="$t('import')" href="#import"> <i class="material-icons">cloud_upload</i>
<i class="material-icons">folder</i> </a>
</a> <a v-tooltip.right="$t('communication')" href="#response">
<a v-tooltip.right="$t('documentation')" href="#documentation"> <i class="material-icons">cloud_download</i>
<i class="material-icons">insert_drive_file</i> </a>
</a> </nav>
</nav> <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
<nav v-else-if="$route.path.includes('/settings')" class="secondary-nav"> <a v-tooltip.right="$t('endpoint')" href="#endpoint">
<a v-tooltip.right="$t('account')" href="#account"> <i class="material-icons">cloud</i>
<i class="material-icons">person</i> </a>
</a> <a v-tooltip.right="$t('schema')" href="#schema">
<a v-tooltip.right="$t('theme')" href="#theme"> <i class="material-icons">assignment_returned</i>
<i class="material-icons">brush</i> </a>
</a> <a v-tooltip.right="$t('query')" href="#query">
<a v-tooltip.right="$t('extensions')" href="#extensions"> <i class="material-icons">cloud_upload</i>
<i class="material-icons">extension</i> </a>
</a> <a v-tooltip.right="$t('response')" href="#response">
<a v-tooltip.right="$t('proxy')" href="#proxy"> <i class="material-icons">cloud_download</i>
<i class="material-icons">public</i> </a>
</a> </nav>
</nav> <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
</aside> <a v-tooltip.right="$t('import')" href="#import">
<i class="material-icons">folder</i>
</a>
<a v-tooltip.right="$t('documentation')" href="#documentation">
<i class="material-icons">insert_drive_file</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
<a v-tooltip.right="$t('account')" href="#account">
<i class="material-icons">person</i>
</a>
<a v-tooltip.right="$t('theme')" href="#theme">
<i class="material-icons">brush</i>
</a>
<a v-tooltip.right="$t('extensions')" href="#extensions">
<i class="material-icons">extension</i>
</a>
<a v-tooltip.right="$t('proxy')" href="#proxy">
<i class="material-icons">public</i>
</a>
</nav>
</aside>
</TranslateSlideRight>
</template> </template>
<script> <script>
@@ -154,7 +156,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px; $responsiveWidth: 767px;
.nav-first { .nav-first {
@apply h-screen; @apply h-screen;

25
components/translate/SlideLeft.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<transition
:appear="appear"
name="translate-slide-left"
enter-active-class="transition duration-500 transform"
enter-class="translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition duration-500 transform"
leave-class="translate-x-0"
leave-to-class="translate-x-full"
>
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>

25
components/translate/SlideRight.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<transition
:appear="appear"
name="translate-slide-right"
enter-active-class="transition duration-500 transform"
enter-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition duration-500 transform"
leave-class="translate-x-0"
leave-to-class="-translate-x-full"
>
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
appear: {
type: Boolean,
default: false,
},
},
}
</script>

219
pages/graphql.vue
View File

@@ -340,129 +340,134 @@
</AppSection> </AppSection>
</div> </div>
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md"> <TranslateSlideLeft>
<SmartTabs> <aside
<SmartTab :id="'docs'" :label="`Docs`" :selected="true"> v-if="activeSidebar"
<AppSection ref="docs" :label="$t('docs')" no-legend> class="sticky-inner inner-right lg:max-w-md"
<section class="flex-col"> >
<input <SmartTabs>
v-model="graphqlFieldsFilterText" <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
type="text" <AppSection ref="docs" :label="$t('docs')" no-legend>
:placeholder="$t('search')" <section class="flex-col">
class="rounded-t-lg" <input
/> v-model="graphqlFieldsFilterText"
<SmartTabs ref="gqlTabs" styles="m-4"> type="text"
<div class="gqlTabs"> :placeholder="$t('search')"
<SmartTab class="rounded-t-lg"
v-if="queryFields.length > 0" />
:id="'queries'" <SmartTabs ref="gqlTabs" styles="m-4">
:label="$t('queries')" <div class="gqlTabs">
:selected="true" <SmartTab
> v-if="queryFields.length > 0"
<div :id="'queries'"
v-for="field in filteredQueryFields" :label="$t('queries')"
:key="field.name" :selected="true"
> >
<GraphqlField <div
:gql-field="field" v-for="field in filteredQueryFields"
:jump-type-callback="handleJumpToType" :key="field.name"
/> >
</div> <GraphqlField
</SmartTab> :gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab <SmartTab
v-if="mutationFields.length > 0" v-if="mutationFields.length > 0"
:id="'mutations'" :id="'mutations'"
:label="$t('mutations')" :label="$t('mutations')"
>
<div
v-for="field in filteredMutationFields"
:key="field.name"
> >
<GraphqlField <div
:gql-field="field" v-for="field in filteredMutationFields"
:jump-type-callback="handleJumpToType" :key="field.name"
/> >
</div> <GraphqlField
</SmartTab> :gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab <SmartTab
v-if="subscriptionFields.length > 0" v-if="subscriptionFields.length > 0"
:id="'subscriptions'" :id="'subscriptions'"
:label="$t('subscriptions')" :label="$t('subscriptions')"
>
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
> >
<GraphqlField <div
:gql-field="field" v-for="field in filteredSubscriptionFields"
:jump-type-callback="handleJumpToType" :key="field.name"
/> >
</div> <GraphqlField
</SmartTab> :gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab <SmartTab
v-if="graphqlTypes.length > 0" v-if="graphqlTypes.length > 0"
:id="'types'" :id="'types'"
ref="typesTab" ref="typesTab"
:label="$t('types')" :label="$t('types')"
>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
> >
<GraphqlType <div
:gql-type="type" v-for="type in filteredGraphqlTypes"
:gql-types="graphqlTypes" :key="type.name"
:is-highlighted=" >
isGqlTypeHighlighted({ gqlType: type }) <GraphqlType
" :gql-type="type"
:highlighted-fields=" :gql-types="graphqlTypes"
getGqlTypeHighlightedFields({ gqlType: type }) :is-highlighted="
" isGqlTypeHighlighted({ gqlType: type })
:jump-type-callback="handleJumpToType" "
/> :highlighted-fields="
</div> getGqlTypeHighlightedFields({ gqlType: type })
</SmartTab> "
</div> :jump-type-callback="handleJumpToType"
</SmartTabs> />
</section> </div>
<p </SmartTab>
v-if=" </div>
queryFields.length === 0 && </SmartTabs>
mutationFields.length === 0 && </section>
subscriptionFields.length === 0 && <p
graphqlTypes.length === 0 v-if="
" queryFields.length === 0 &&
class="info" mutationFields.length === 0 &&
> subscriptionFields.length === 0 &&
{{ $t("send_request_first") }} graphqlTypes.length === 0
</p> "
</AppSection> class="info"
</SmartTab> >
{{ $t("send_request_first") }}
</p>
</AppSection>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')"> <SmartTab :id="'history'" :label="$t('history')">
<History <History
ref="graphqlHistoryComponent" ref="graphqlHistoryComponent"
:page="'graphql'" :page="'graphql'"
@useHistory="handleUseHistory" @useHistory="handleUseHistory"
/> />
</SmartTab> </SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')"> <SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql /> <CollectionsGraphql />
</SmartTab> </SmartTab>
<!-- <SmartTab :id="'env'" :label="$t('environments')"> <!-- <SmartTab :id="'env'" :label="$t('environments')">
<Environments @use-environment="useSelectedEnvironment($event)" /> <Environments @use-environment="useSelectedEnvironment($event)" />
</SmartTab> </SmartTab>
<SmartTab :id="'notes'" :label="$t('notes')"> <SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes /> <HttpNotes />
</SmartTab> --> </SmartTab> -->
</SmartTabs> </SmartTabs>
</aside> </aside>
</TranslateSlideLeft>
<SmartHideMenu <SmartHideMenu
:active="activeSidebar" :active="activeSidebar"

49
pages/index.vue
View File

@@ -615,31 +615,36 @@
/> />
</div> </div>
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md"> <TranslateSlideLeft>
<section> <aside
<SmartTabs> v-if="activeSidebar"
<SmartTab :id="'history'" :label="$t('history')" :selected="true"> class="sticky-inner inner-right lg:max-w-md"
<History >
:page="'rest'" <section>
@useHistory="handleUseHistory" <SmartTabs>
ref="historyComponent" <SmartTab :id="'history'" :label="$t('history')" :selected="true">
/> <History
</SmartTab> :page="'rest'"
@useHistory="handleUseHistory"
ref="historyComponent"
/>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')"> <SmartTab :id="'collections'" :label="$t('collections')">
<Collections /> <Collections />
</SmartTab> </SmartTab>
<SmartTab :id="'env'" :label="$t('environments')"> <SmartTab :id="'env'" :label="$t('environments')">
<Environments /> <Environments />
</SmartTab> </SmartTab>
<SmartTab :id="'notes'" :label="$t('notes')"> <SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes /> <HttpNotes />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</section> </section>
</aside> </aside>
</TranslateSlideLeft>
<SmartHideMenu <SmartHideMenu
:active="activeSidebar" :active="activeSidebar"