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

feat: slideover menus, minor ui fixes

Browse Source
This commit is contained in:
liyasthomas
2021-07-24 22:16:48 +05:30
parent 4c2a9c1229
commit f0aaca2639
30 changed files with 213 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/scss/styles.scss
View File

@@ -307,7 +307,15 @@ input[type="checkbox"] {
&.info { &.info {
@apply !bg-accent; @apply !bg-accent;
@apply !text-primary; @apply !text-white;
}
&.error {
@apply !text-white;
}
&.success {
@apply !text-white;
} }
} }
} }

92
components/app/Footer.vue
View File

@@ -1,49 +1,51 @@
<template> <template>
<div class="flex justify-between"> <div>
<div> <div class="flex justify-between">
<ButtonSecondary <div>
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
:title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')" v-tippy="{ theme: 'tooltip' }"
icon="menu_open" :title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
:class="{ 'transform rotate-180': !LEFT_SIDEBAR }" icon="menu_open"
@click.native="toggleSetting('LEFT_SIDEBAR')" :class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
/> @click.native="toggleSetting('LEFT_SIDEBAR')"
<ButtonSecondary />
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
:title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t( v-tippy="{ theme: 'tooltip' }"
'zen_mode' :title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t(
)}`" 'zen_mode'
:icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'" )}`"
:class="{ :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
'text-accent focus:text-accent hover:text-accent': ZEN_MODE, :class="{
}" '!text-accent focus:text-accent hover:text-accent': ZEN_MODE,
@click.native="toggleSetting('ZEN_MODE')" }"
/> @click.native="toggleSetting('ZEN_MODE')"
/>
</div>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="keyboard"
:title="$t('shortcuts')"
:shortcut="[getSpecialKey(), '/']"
@click.native="showShortcuts = true"
/>
<ButtonSecondary
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
icon="share"
:title="$t('share')"
@click.native="nativeShare()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
@click.native="toggleSetting('RIGHT_SIDEBAR')"
/>
</div>
</div> </div>
<div> <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="keyboard"
:title="$t('shortcuts')"
:shortcut="[getSpecialKey(), '/']"
@click.native="showShortcuts = true"
/>
<ButtonSecondary
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
icon="share"
:title="$t('share')"
@click.native="nativeShare()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
icon="menu_open"
:class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
@click.native="toggleSetting('RIGHT_SIDEBAR')"
/>
</div>
<AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
</div> </div>
</template> </template>
@@ -80,7 +82,7 @@ export default defineComponent({
watch: { watch: {
ZEN_MODE(ZEN_MODE) { ZEN_MODE(ZEN_MODE) {
this.applySetting("LEFT_SIDEBAR", !ZEN_MODE) this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE) // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
}, },
}, },
methods: { methods: {

39
components/app/Shortcuts.vue
View File

@@ -1,13 +1,25 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <AppSlideOver :show="show" @close="close()">
<template #header> <template #content>
<h3 class="heading">{{ $t("shortcuts") }}</h3> <div
<div> class="
<ButtonSecondary icon="close" @click.native="hideModal" /> bg-primary
border-b border-dividerLight
flex
p-2
top-0
items-center
sticky
justify-between
"
>
<h3 class="ml-2 heading">{{ $t("shortcuts") }}</h3>
<div>
<ButtonSecondary to="/settings" icon="tune" />
<ButtonSecondary icon="close" @click.native="close()" />
</div>
</div> </div>
</template> <div class="p-4">
<template #body>
<div class="px-2">
<div <div
v-for="(shortcut, index) in shortcuts" v-for="(shortcut, index) in shortcuts"
:key="`shortcut-${index}`" :key="`shortcut-${index}`"
@@ -34,7 +46,7 @@
</div> </div>
</div> </div>
</template> </template>
</SmartModal> </AppSlideOver>
</template> </template>
<script> <script>
@@ -94,10 +106,15 @@ export default {
], ],
} }
}, },
watch: {
$route() {
this.$emit("close")
},
},
methods: { methods: {
getSpecialKey: getPlatformSpecialKey, getSpecialKey: getPlatformSpecialKey,
hideModal() { close() {
this.$emit("hide-modal") this.$emit("close")
}, },
}, },
} }

3
components/app/Sidenav.vue
View File

@@ -43,8 +43,7 @@ export default {
@apply hover:text-secondaryDark; @apply hover:text-secondaryDark;
.material-icons { .material-icons {
@apply transition-opacity; @apply opacity-75;
@apply opacity-50;
} }
span { span {

78
components/app/SlideOver.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div>
<transition
enter-class="opacity-0"
enter-active-class="ease-out transition"
enter-to-class="opacity-100"
leave-class="opacity-100"
leave-active-class="ease-out transition"
leave-to-class="opacity-0"
>
<div
v-show="show"
class="inset-0 transition-opacity z-10 fixed"
@keydown.esc="close()"
>
<div
class="bg-black opacity-25 inset-0 absolute"
tabindex="0"
@click="close()"
></div>
</div>
</transition>
<aside
class="
bg-primary
h-full
max-w-full
shadow-xl
transform
transition
top-0
ease-in-out
right-0
w-96
z-30
duration-300
fixed
overflow-auto
"
:class="show ? 'translate-x-0' : 'translate-x-full'"
>
<slot name="content"></slot>
</aside>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
required: true,
default: false,
},
},
watch: {
show: {
immediate: true,
handler(show) {
if (process.client) {
if (show) document.body.style.setProperty("overflow", "hidden")
else document.body.style.removeProperty("overflow")
}
},
},
},
mounted() {
document.addEventListener("keydown", (e) => {
if (e.keyCode === 27 && this.show) this.close()
})
},
methods: {
close() {
this.$emit("close")
},
},
}
</script>

2
components/button/Primary.vue
View File

@@ -18,7 +18,7 @@
: `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`, : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-4' : 'px-2', label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded', rounded ? 'rounded-full' : 'rounded',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading }, { 'pointer-events-none': loading },
{ 'px-6 py-4 text-lg': large }, { 'px-6 py-4 text-lg': large },
{ 'shadow-lg hover:shadow-xl': shadow }, { 'shadow-lg hover:shadow-xl': shadow },

2
components/button/Secondary.vue
View File

@@ -18,7 +18,7 @@
: 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark', : 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark',
label ? 'px-3' : 'px-2', label ? 'px-3' : 'px-2',
rounded ? 'rounded-full' : 'rounded', rounded ? 'rounded-full' : 'rounded',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse }, { 'flex-row-reverse': reverse },
{ {
'border border-divider hover:border-dividerDark focus:border-dividerDark': 'border border-divider hover:border-dividerDark focus:border-dividerDark':

2
components/collections/graphql/Collection.vue
View File

@@ -144,7 +144,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">folder_open</i> <i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("collection_empty") }} {{ $t("collection_empty") }}
</span> </span>

2
components/collections/graphql/Folder.vue
View File

@@ -143,7 +143,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">folder_open</i> <i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("folder_empty") }} {{ $t("folder_empty") }}
</span> </span>

6
components/collections/graphql/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<AppSection <AppSection
label="collections" label="collections"
:class="{ 'rounded border-2 border-divider': savingMode }" :class="{ 'rounded border border-divider': savingMode }"
> >
<div <div
class="flex flex-col top-10 z-10 sticky" class="flex flex-col top-10 z-10 sticky"
@@ -62,7 +62,7 @@
v-if="collections.length === 0" v-if="collections.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">create_new_folder</i> <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("create_new_collection") }} {{ $t("create_new_collection") }}
</span> </span>
@@ -71,7 +71,7 @@
v-if="!(filteredCollections.length !== 0 || collections.length === 0)" v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("nothing_found") }} "{{ filterText }}" {{ $t("nothing_found") }} "{{ filterText }}"
</span> </span>

8
components/collections/index.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<AppSection <AppSection
label="collections" label="collections"
:class="{ 'rounded border-2 border-divider': saveRequest }" :class="{ 'rounded border border-divider': saveRequest }"
> >
<div <div
class="bg-primary flex flex-col top-0 z-10 sticky" class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
:class="{ '!top-10': !saveRequest && !doc }" :class="{ '!top-10': !saveRequest && !doc }"
> >
<input <input
@@ -97,7 +97,7 @@
v-if="collections.length === 0" v-if="collections.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">create_new_folder</i> <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("create_new_collection") }} {{ $t("create_new_collection") }}
</span> </span>
@@ -106,7 +106,7 @@
v-if="!(filteredCollections.length !== 0 || collections.length === 0)" v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("nothing_found") }} "{{ filterText }}" {{ $t("nothing_found") }} "{{ filterText }}"
</span> </span>

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

@@ -166,7 +166,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">folder_open</i> <i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("collection_empty") }} {{ $t("collection_empty") }}
</span> </span>

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

@@ -152,7 +152,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">folder_open</i> <i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("folder_empty") }} {{ $t("folder_empty") }}
</span> </span>

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

@@ -163,7 +163,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">folder_open</i> <i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("collection_empty") }} {{ $t("collection_empty") }}
</span> </span>

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

@@ -147,7 +147,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">folder_open</i> <i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("folder_empty") }} {{ $t("folder_empty") }}
</span> </span>

2
components/environments/Edit.vue
View File

@@ -41,7 +41,7 @@
/> />
</div> </div>
</div> </div>
<div class="border-divider border-2"> <div class="border-divider rounded border">
<div <div
v-for="(variable, index) in vars" v-for="(variable, index) in vars"
:key="`variable-${index}`" :key="`variable-${index}`"

4
components/environments/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<AppSection label="environments"> <AppSection label="environments">
<div class="bg-primary flex flex-col top-10 z-10 sticky"> <div class="bg-primary rounded-t flex flex-col top-10 z-10 sticky">
<div class="select-wrapper"> <div class="select-wrapper">
<select <select
v-model="selectedEnvironmentIndex" v-model="selectedEnvironmentIndex"
@@ -62,7 +62,7 @@
v-if="environments.length === 0" v-if="environments.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">library_add</i> <i class="opacity-75 pb-2 material-icons">library_add</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("create_new_environment") }} {{ $t("create_new_environment") }}
</span> </span>

4
components/history/index.vue
View File

@@ -59,7 +59,7 @@
v-if="!(filteredHistory.length !== 0 || history.length === 0)" v-if="!(filteredHistory.length !== 0 || history.length === 0)"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">manage_search</i> <i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("nothing_found") }} "{{ filterText }}" {{ $t("nothing_found") }} "{{ filterText }}"
</span> </span>
@@ -68,7 +68,7 @@
v-if="history.length === 0" v-if="history.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center" class="flex flex-col text-secondaryLight p-4 items-center justify-center"
> >
<i class="opacity-50 pb-2 material-icons">schedule</i> <i class="opacity-75 pb-2 material-icons">schedule</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("history_empty") }} {{ $t("history_empty") }}
</span> </span>

14
components/http/BodyParameters.vue
View File

@@ -16,12 +16,14 @@
<label for="reqParamList" class="font-semibold text-xs"> <label for="reqParamList" class="font-semibold text-xs">
{{ $t("request_body") }} {{ $t("request_body") }}
</label> </label>
<ButtonSecondary <div class="flex">
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
:title="$t('clear')" v-tippy="{ theme: 'tooltip' }"
icon="clear_all" :title="$t('clear')"
@click.native="clearContent('bodyParams', $event)" icon="clear_all"
/> @click.native="clearContent('bodyParams', $event)"
/>
</div>
</div> </div>
<div <div
v-for="(param, index) in bodyParams" v-for="(param, index) in bodyParams"

2
components/http/Headers.vue
View File

@@ -16,7 +16,7 @@
<label for="headerList" class="font-semibold text-xs"> <label for="headerList" class="font-semibold text-xs">
{{ $t("header_list") }} {{ $t("header_list") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')" :title="$t('clear')"

2
components/http/Parameters.vue
View File

@@ -16,7 +16,7 @@
<label class="font-semibold text-xs"> <label class="font-semibold text-xs">
{{ $t("parameter_list") }} {{ $t("parameter_list") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')" :title="$t('clear_all')"

2
components/http/RawBody.vue
View File

@@ -16,7 +16,7 @@
<label for="rawBody" class="font-semibold text-xs"> <label for="rawBody" class="font-semibold text-xs">
{{ $t("raw_request_body") }} {{ $t("raw_request_body") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-if="contentType.endsWith('json')" v-if="contentType.endsWith('json')"
ref="prettifyRequest" ref="prettifyRequest"

2
components/http/ResponseMeta.vue
View File

@@ -10,7 +10,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">send</i> <i class="opacity-75 pb-2 material-icons">send</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("waiting_send_req") }} {{ $t("waiting_send_req") }}
</span> </span>

2
components/realtime/Websocket.vue
View File

@@ -55,7 +55,7 @@
<label class="font-semibold text-xs"> <label class="font-semibold text-xs">
{{ $t("protocols") }} {{ $t("protocols") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')" :title="$t('clear_all')"

2
components/smart/Anchor.vue
View File

@@ -8,7 +8,7 @@
color color
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600` ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
: 'hover:text-secondaryDark focus:text-secondaryDark', : 'hover:text-secondaryDark focus:text-secondaryDark',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse }, { 'flex-row-reverse': reverse },
]" ]"
:disabled="disabled" :disabled="disabled"

2
components/smart/Item.vue
View File

@@ -17,7 +17,7 @@
focus:outline-none focus:outline-none
" "
:class="[ :class="[
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading }, { 'pointer-events-none': loading },
{ 'flex-1': label }, { 'flex-1': label },
{ 'flex-row-reverse justify-end': reverse }, { 'flex-row-reverse justify-end': reverse },

2
components/tab/Primary.vue
View File

@@ -18,7 +18,7 @@
color color
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600` ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
: 'hover:text-secondaryDark focus:text-accent', : 'hover:text-secondaryDark focus:text-accent',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse }, { 'flex-row-reverse': reverse },
]" ]"
:disabled="disabled" :disabled="disabled"

2
components/tab/Secondary.vue
View File

@@ -26,7 +26,7 @@
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600` ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
: '', : '',
{ 'translate-x-2': active }, { 'translate-x-2': active },
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-75 cursor-not-allowed': disabled },
]" ]"
:disabled="disabled" :disabled="disabled"
type="button" type="button"

25
pages/graphql.vue
View File

@@ -57,13 +57,12 @@
<label for="gqlQuery" class="font-semibold text-xs"> <label for="gqlQuery" class="font-semibold text-xs">
{{ $t("query") }} {{ $t("query") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
:label="$t('run')" :label="$t('run')"
:shortcut="[getSpecialKey(), 'Enter']" :shortcut="[getSpecialKey(), 'Enter']"
icon="play_arrow" icon="play_arrow"
class="text-xs !text-accent" class="text-xs !text-accent"
outline
@click.native="runQuery()" @click.native="runQuery()"
/> />
<ButtonSecondary <ButtonSecondary
@@ -124,7 +123,7 @@
<label class="font-semibold text-xs"> <label class="font-semibold text-xs">
{{ $t("variables") }} {{ $t("variables") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('copy')" :title="$t('copy')"
@@ -172,10 +171,10 @@
justify-between justify-between
" "
> >
<label class="font-semibold text-xs">{{ <label class="font-semibold text-xs">
$t("headers") {{ $t("headers") }}
}}</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')" :title="$t('clear')"
@@ -294,7 +293,7 @@
<label class="font-semibold text-xs" for="responseField"> <label class="font-semibold text-xs" for="responseField">
{{ $t("response") }} {{ $t("response") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
ref="downloadResponse" ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -337,7 +336,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">send</i> <i class="opacity-75 pb-2 material-icons">send</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("waiting_send_req") }} {{ $t("waiting_send_req") }}
</span> </span>
@@ -461,7 +460,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">link</i> <i class="opacity-75 pb-2 material-icons">link</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("connect_graphql_endpoint") }} {{ $t("connect_graphql_endpoint") }}
</span> </span>
@@ -500,7 +499,7 @@
<label class="font-semibold text-xs"> <label class="font-semibold text-xs">
{{ $t("schema") }} {{ $t("schema") }}
</label> </label>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
ref="downloadSchema" ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -541,7 +540,7 @@
justify-center justify-center
" "
> >
<i class="opacity-50 pb-2 material-icons">link</i> <i class="opacity-75 pb-2 material-icons">link</i>
<span class="text-xs text-center"> <span class="text-xs text-center">
{{ $t("connect_graphql_endpoint") }} {{ $t("connect_graphql_endpoint") }}
</span> </span>
@@ -924,7 +923,7 @@ export default defineComponent({
this.$nuxt.$loading.finish() this.$nuxt.$loading.finish()
const duration = Date.now() - startTime const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), { this.$toast.success(this.$t("finished_in", { duration }), {
icon: "done", icon: "done",
}) })

2
pages/settings.vue
View File

@@ -412,7 +412,7 @@ export default defineComponent({
watch: { watch: {
ZEN_MODE(ZEN_MODE) { ZEN_MODE(ZEN_MODE) {
this.applySetting("LEFT_SIDEBAR", !ZEN_MODE) this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE) // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
}, },
proxySettings: { proxySettings: {
deep: true, deep: true,