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>