thibaud-lclr/api-client
1
0
Fork 0
Code Packages Activity Actions

refactor(ui): minor ui improvements

Browse source
This commit is contained in:
liyasthomas 2021-09-20 21:33:36 +05:30
parent 44026fcd41
commit 9698932bde
9 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/hoppscotch-app/components/app/PowerSearch.vue
View file

@ -1,5 +1,10 @@
<template> <template>
<SmartModal v-if="show" full-width @close="$emit('hide-modal')"> <SmartModal
v-if="show"
max-width="sm:max-w-md"
full-width
@close="$emit('hide-modal')"
>
<template #body> <template #body>
<input <input
id="command" id="command"

2
packages/hoppscotch-app/components/app/Sidenav.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<aside class="flex h-full justify-between md:flex-col"> <aside class="flex h-full justify-between md:flex-col">
<nav class="flex flex-nowrap md:flex-col"> <nav class="flex flex-nowrap md:flex-col flex-1 md:flex-none">
<NuxtLink <NuxtLink
v-for="(navigation, index) in primaryNavigation" v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`" :key="`navigation-${index}`"

2
packages/hoppscotch-app/components/app/SlideOver.vue
View file

@ -3,7 +3,7 @@
<transition v-if="show" name="fade" appear> <transition v-if="show" name="fade" appear>
<div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()"> <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
<div <div
class="bg-primaryDark opacity-90 inset-0 absolute" class="bg-primaryLight opacity-90 inset-0 absolute"
tabindex="0" tabindex="0"
@click="close()" @click="close()"
></div> ></div>

1
packages/hoppscotch-app/components/app/Support.vue
View file

@ -2,6 +2,7 @@
<SmartModal <SmartModal
v-if="show" v-if="show"
:title="$t('support.title')" :title="$t('support.title')"
max-width="sm:max-w-md"
@close="$emit('hide-modal')" @close="$emit('hide-modal')"
> >
<template #body> <template #body>

1
packages/hoppscotch-app/components/collections/ImportExport.vue
View file

@ -2,6 +2,7 @@
<SmartModal <SmartModal
v-if="show" v-if="show"
:title="`${$t('modal.import_export')} ${$t('modal.collections')}`" :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
max-width="sm:max-w-md"
@close="hideModal" @close="hideModal"
> >
<template #actions> <template #actions>

1
packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
View file

@ -2,6 +2,7 @@
<SmartModal <SmartModal
v-if="show" v-if="show"
:title="`${$t('modal.import_export')} ${$t('modal.collections')}`" :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
max-width="sm:max-w-md"
@close="hideModal" @close="hideModal"
> >
<template #actions> <template #actions>

1
packages/hoppscotch-app/components/environments/ImportExport.vue
View file

@ -2,6 +2,7 @@
<SmartModal <SmartModal
v-if="show" v-if="show"
:title="`${$t('modal.import_export')} ${$t('environment.title')}`" :title="`${$t('modal.import_export')} ${$t('environment.title')}`"
max-width="sm:max-w-md"
@close="hideModal" @close="hideModal"
> >
<template #actions> <template #actions>

1
packages/hoppscotch-app/components/firebase/Login.vue
View file

@ -2,6 +2,7 @@
<SmartModal <SmartModal
v-if="show" v-if="show"
:title="`${$t('auth.login_to_hoppscotch')}`" :title="`${$t('auth.login_to_hoppscotch')}`"
max-width="sm:max-w-md"
dialog dialog
@close="hideModal" @close="hideModal"
> >

12
packages/hoppscotch-app/components/smart/Modal.vue
View file

@ -9,7 +9,7 @@
> >
<transition name="fade" appear> <transition name="fade" appear>
<div <div
class="bg-primaryDark opacity-90 inset-0 transition fixed" class="bg-primaryLight opacity-90 inset-0 transition fixed"
@touchstart="!dialog ? close() : null" @touchstart="!dialog ? close() : null"
@touchend="!dialog ? close() : null" @touchend="!dialog ? close() : null"
@mouseup="!dialog ? close() : null" @mouseup="!dialog ? close() : null"
@ -34,7 +34,7 @@
<div <div
class=" class="
bg-primary bg-primary
shadow-lg shadow-xl
text-left text-left
w-full w-full
transform transform
@ -42,12 +42,12 @@
inline-block inline-block
align-bottom align-bottom
overflow-hidden overflow-hidden
sm:max-w-md sm:align-middle sm:align-middle sm:rounded-xl
md:rounded-lg
" "
:class="[ :class="[
{ 'mt-24 md:mb-8': placement === 'top' }, { 'mt-24 md:mb-8': placement === 'top' },
{ 'p-4': !fullWidth }, { 'p-4': !fullWidth },
maxWidth,
]" ]"
> >
<div <div
@ -122,6 +122,10 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
maxWidth: {
type: String,
default: "sm:max-w-lg",
},
}, },
setup() { setup() {
const { disableKeybindings, enableKeybindings } = useKeybindingDisabler() const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()