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,
@@ -52,6 +52,7 @@ body {
@apply transition-colors;
@apply ease-in-out;
@apply duration-150;
@apply overflow-x-hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;

2
components/app/Header.vue
View File

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

238
components/app/Sidenav.vue
View File

@@ -1,125 +1,127 @@
<template>
<aside class="nav-first">
<nav class="primary-nav">
<!--
<TranslateSlideRight appear>
<aside class="nav-first">
<nav class="primary-nav">
<!--
We're using manual checks for linkActive because the query string
seems to mess up the nuxt-link active class.
-->
<nuxt-link
v-tooltip.right="$t('home')"
:to="localePath('index')"
:class="linkActive('/')"
: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"
<nuxt-link
v-tooltip.right="$t('home')"
:to="localePath('index')"
:class="linkActive('/')"
:aria-label="$t('home')"
>
<path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
<path d="M2.727 20.53h24.538v1.272H2.727z" />
<path
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"
/>
<path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
<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"
/>
<path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
<path
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"
/>
</svg>
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('documentation')"
:to="localePath('doc')"
:class="linkActive('/doc')"
:aria-label="$t('documentation')"
>
<i class="material-icons">topic</i>
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('settings')"
:to="localePath('settings')"
:class="linkActive('/settings')"
:aria-label="$t('settings')"
>
<i class="material-icons">settings</i>
</nuxt-link>
</nav>
<nav v-if="$route.path == '/'" class="secondary-nav">
<a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('options')" href="#options">
<i class="material-icons">toc</i>
</a>
<a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
<a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('communication')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
<a v-tooltip.right="$t('endpoint')" href="#endpoint">
<i class="material-icons">cloud</i>
</a>
<a v-tooltip.right="$t('schema')" href="#schema">
<i class="material-icons">assignment_returned</i>
</a>
<a v-tooltip.right="$t('query')" href="#query">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
<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>
<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" />
<path d="M2.727 20.53h24.538v1.272H2.727z" />
<path
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"
/>
<path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
<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"
/>
<path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
<path
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"
/>
</svg>
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('documentation')"
:to="localePath('doc')"
:class="linkActive('/doc')"
:aria-label="$t('documentation')"
>
<i class="material-icons">topic</i>
</nuxt-link>
<nuxt-link
v-tooltip.right="$t('settings')"
:to="localePath('settings')"
:class="linkActive('/settings')"
:aria-label="$t('settings')"
>
<i class="material-icons">settings</i>
</nuxt-link>
</nav>
<nav v-if="$route.path == '/'" class="secondary-nav">
<a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('options')" href="#options">
<i class="material-icons">toc</i>
</a>
<a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
<a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('communication')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
<a v-tooltip.right="$t('endpoint')" href="#endpoint">
<i class="material-icons">cloud</i>
</a>
<a v-tooltip.right="$t('schema')" href="#schema">
<i class="material-icons">assignment_returned</i>
</a>
<a v-tooltip.right="$t('query')" href="#query">
<i class="material-icons">cloud_upload</i>
</a>
<a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i>
</a>
</nav>
<nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
<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>
<script>
@@ -154,7 +156,7 @@ export default {
</script>
<style scoped lang="scss">
$responsiveWidth: 768px;
$responsiveWidth: 767px;
.nav-first {
@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>
</div>
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection ref="docs" :label="$t('docs')" no-legend>
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
class="rounded-t-lg"
/>
<SmartTabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs">
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="$t('queries')"
:selected="true"
>
<div
v-for="field in filteredQueryFields"
:key="field.name"
<TranslateSlideLeft>
<aside
v-if="activeSidebar"
class="sticky-inner inner-right lg:max-w-md"
>
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection ref="docs" :label="$t('docs')" no-legend>
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
class="rounded-t-lg"
/>
<SmartTabs ref="gqlTabs" styles="m-4">
<div class="gqlTabs">
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="$t('queries')"
:selected="true"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<div
v-for="field in filteredQueryFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="$t('mutations')"
>
<div
v-for="field in filteredMutationFields"
:key="field.name"
<SmartTab
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="$t('mutations')"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<div
v-for="field in filteredMutationFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="$t('subscriptions')"
>
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
<SmartTab
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="$t('subscriptions')"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="graphqlTypes.length > 0"
:id="'types'"
ref="typesTab"
:label="$t('types')"
>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
<SmartTab
v-if="graphqlTypes.length > 0"
:id="'types'"
ref="typesTab"
:label="$t('types')"
>
<GraphqlType
:gql-type="type"
:gql-types="graphqlTypes"
:is-highlighted="
isGqlTypeHighlighted({ gqlType: type })
"
:highlighted-fields="
getGqlTypeHighlightedFields({ gqlType: type })
"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
</div>
</SmartTabs>
</section>
<p
v-if="
queryFields.length === 0 &&
mutationFields.length === 0 &&
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
class="info"
>
{{ $t("send_request_first") }}
</p>
</AppSection>
</SmartTab>
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
>
<GraphqlType
:gql-type="type"
:gql-types="graphqlTypes"
:is-highlighted="
isGqlTypeHighlighted({ gqlType: type })
"
:highlighted-fields="
getGqlTypeHighlightedFields({ gqlType: type })
"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
</div>
</SmartTabs>
</section>
<p
v-if="
queryFields.length === 0 &&
mutationFields.length === 0 &&
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
class="info"
>
{{ $t("send_request_first") }}
</p>
</AppSection>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')">
<History
ref="graphqlHistoryComponent"
:page="'graphql'"
@useHistory="handleUseHistory"
/>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')">
<History
ref="graphqlHistoryComponent"
:page="'graphql'"
@useHistory="handleUseHistory"
/>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
<!-- <SmartTab :id="'env'" :label="$t('environments')">
<!-- <SmartTab :id="'env'" :label="$t('environments')">
<Environments @use-environment="useSelectedEnvironment($event)" />
</SmartTab>
<SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes />
</SmartTab> -->
</SmartTabs>
</aside>
</SmartTabs>
</aside>
</TranslateSlideLeft>
<SmartHideMenu
:active="activeSidebar"

49
pages/index.vue
View File

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