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

92
components/app/Footer.vue
View File

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

39
components/app/Shortcuts.vue
View File

@@ -1,13 +1,25 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" />
<AppSlideOver :show="show" @close="close()">
<template #content>
<div
class="
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>
</template>
<template #body>
<div class="px-2">
<div class="p-4">
<div
v-for="(shortcut, index) in shortcuts"
:key="`shortcut-${index}`"
@@ -34,7 +46,7 @@
</div>
</div>
</template>
</SmartModal>
</AppSlideOver>
</template>
<script>
@@ -94,10 +106,15 @@ export default {
],
}
},
watch: {
$route() {
this.$emit("close")
},
},
methods: {
getSpecialKey: getPlatformSpecialKey,
hideModal() {
this.$emit("hide-modal")
close() {
this.$emit("close")
},
},
}

3
components/app/Sidenav.vue
View File

@@ -43,8 +43,7 @@ export default {
@apply hover:text-secondaryDark;
.material-icons {
@apply transition-opacity;
@apply opacity-50;
@apply opacity-75;
}
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`,
label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded',
{ 'opacity-50 cursor-not-allowed': disabled },
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading },
{ 'px-6 py-4 text-lg': large },
{ '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',
label ? 'px-3' : 'px-2',
rounded ? 'rounded-full' : 'rounded',
{ 'opacity-50 cursor-not-allowed': disabled },
{ 'opacity-75 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse },
{
'border border-divider hover:border-dividerDark focus:border-dividerDark':

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

@@ -144,7 +144,7 @@
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">
{{ $t("collection_empty") }}
</span>

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

@@ -143,7 +143,7 @@
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">
{{ $t("folder_empty") }}
</span>

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

@@ -1,7 +1,7 @@
<template>
<AppSection
label="collections"
:class="{ 'rounded border-2 border-divider': savingMode }"
:class="{ 'rounded border border-divider': savingMode }"
>
<div
class="flex flex-col top-10 z-10 sticky"
@@ -62,7 +62,7 @@
v-if="collections.length === 0"
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">
{{ $t("create_new_collection") }}
</span>
@@ -71,7 +71,7 @@
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
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">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>

8
components/collections/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<AppSection
label="collections"
:class="{ 'rounded border-2 border-divider': saveRequest }"
:class="{ 'rounded border border-divider': saveRequest }"
>
<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 }"
>
<input
@@ -97,7 +97,7 @@
v-if="collections.length === 0"
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">
{{ $t("create_new_collection") }}
</span>
@@ -106,7 +106,7 @@
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
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">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>

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

@@ -166,7 +166,7 @@
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">
{{ $t("collection_empty") }}
</span>

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

@@ -152,7 +152,7 @@
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">
{{ $t("folder_empty") }}
</span>

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

@@ -163,7 +163,7 @@
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">
{{ $t("collection_empty") }}
</span>

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

@@ -147,7 +147,7 @@
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">
{{ $t("folder_empty") }}
</span>

2
components/environments/Edit.vue
View File

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

4
components/environments/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<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">
<select
v-model="selectedEnvironmentIndex"
@@ -62,7 +62,7 @@
v-if="environments.length === 0"
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">
{{ $t("create_new_environment") }}
</span>

4
components/history/index.vue
View File

@@ -59,7 +59,7 @@
v-if="!(filteredHistory.length !== 0 || history.length === 0)"
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">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
@@ -68,7 +68,7 @@
v-if="history.length === 0"
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">
{{ $t("history_empty") }}
</span>

14
components/http/BodyParameters.vue
View File

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

2
components/http/Parameters.vue
View File

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

2
components/http/RawBody.vue
View File

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

2
components/http/ResponseMeta.vue
View File

@@ -10,7 +10,7 @@
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">
{{ $t("waiting_send_req") }}
</span>

2
components/realtime/Websocket.vue
View File

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

2
components/smart/Anchor.vue
View File

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

2
components/smart/Item.vue
View File

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

2
components/tab/Primary.vue
View File

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

2
components/tab/Secondary.vue
View File

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