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

feat: refactor modal component

Browse Source
This commit is contained in:
liyasthomas
2021-07-28 01:08:11 +05:30
parent 78fccc8583
commit 1a4d3dc91a
8 changed files with 81 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/scss/styles.scss
View File

@@ -303,12 +303,13 @@ input[type="checkbox"] {
.toasted-container {
.toasted {
&.toasted-primary {
@apply px-6 py-1;
@apply bg-tooltip;
@apply text-primary text-xs;
@apply !font-semibold;
@apply justify-start;
.action {
@apply ml-auto;
@apply transition;
@apply text-current;
@apply hover:(opacity-75 no-underline);
@@ -317,15 +318,16 @@ input[type="checkbox"] {
&.info {
@apply !bg-accent;
@apply !text-white;
}
&.error {
@apply !text-white;
@apply !bg-red-400;
@apply !text-red-800;
}
&.success {
@apply !text-white;
@apply !bg-green-400;
@apply !text-green-800;
}
}
}

2
assets/scss/themes.scss
View File

@@ -82,7 +82,7 @@
// Tooltip color
--tooltip-color: theme("colors.true-gray.100");
// Editor theme
--editor-theme: "vibrant_ink";
--editor-theme: "twilight";
}
@mixin blueTheme {

15
components/app/SlideOver.vue
View File

@@ -1,18 +1,7 @@
<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-if="show"
class="inset-0 transition-opacity z-20 fixed"
@keydown.esc="close()"
>
<transition v-if="show" name="fade" appear>
<div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
<div
class="bg-primaryDark opacity-75 inset-0 absolute"
tabindex="0"

2
components/button/Primary.vue
View File

@@ -15,7 +15,7 @@
:class="[
color
? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
: `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
: `text-primary bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded',
{ 'opacity-75 cursor-not-allowed': disabled },

2
components/firebase/Login.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<SmartModal v-if="show" dialog @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
<div>

134
components/smart/Modal.vue
View File

@@ -1,51 +1,66 @@
<template>
<transition name="modal" appear @leave="onTransitionLeaveStart">
<transition name="fade" appear @leave="onTransitionLeaveStart">
<div
ref="modal"
class="
bg-primaryDark
flex
h-full
w-full
inset-0
transition
z-50
fixed
items-center
justify-center
"
@touchstart="onBackdropMouseDown"
@touchend="onBackdropMouseUp"
@mouseup="onBackdropMouseUp"
@mousedown="onBackdropMouseDown"
class="inset-0 transition z-10 z-50 fixed hide-scrollbar overflow-y-auto"
>
<div
class="
bg-primary
rounded
flex flex-col
max-w-md max-h-lg
flex-1
m-2
shadow-xl
p-4
transition
modal-container
relative
"
class="flex min-h-screen text-center items-end justify-center sm:block"
>
<div class="flex pl-2 items-center justify-between">
<slot name="header"></slot>
</div>
<div class="flex flex-col my-4 overflow-auto">
<slot name="body"></slot>
</div>
<div
v-if="hasFooterSlot"
class="flex flex-1 p-2 items-center justify-between"
<transition name="fade" appear>
<div
class="bg-primaryDark inset-0 transition-opacity fixed"
@touchstart="!dialog ? close() : null"
@touchend="!dialog ? close() : null"
@mouseup="!dialog ? close() : null"
@mousedown="!dialog ? close() : null"
></div>
</transition>
<span
class="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>&#8203;</span
>
<slot name="footer"></slot>
</div>
<transition
appear
enter-active-class="transition"
enter-class="translate-y-4 scale-95"
enter-to-class="translate-y-0 scale-100"
leave-active-class="transition"
leave-class="translate-y-0 scale-100"
leave-to-class="translate-y-4 scale-95"
>
<div
class="
bg-primary
rounded
shadow-xl
m-4
text-left
w-full
p-4
transform
transition-all
inline-block
align-bottom
overflow-hidden
sm:align-middle sm:max-w-md
"
>
<div class="flex pl-2 items-center justify-between">
<slot name="header"></slot>
</div>
<div class="flex flex-col my-4 overflow-auto">
<slot name="body"></slot>
</div>
<div
v-if="hasFooterSlot"
class="flex flex-1 p-2 items-center justify-between"
>
<slot name="footer"></slot>
</div>
</div>
</transition>
</div>
</div>
</transition>
@@ -64,10 +79,15 @@ const stack = (() => {
})()
export default {
props: {
dialog: {
type: Boolean,
default: false,
},
},
data() {
return {
stackId: Math.random(),
shouldCloseOnBackdropClick: true,
// when doesn't fire on unmount, we should manually remove the modal from DOM
// (for example, when the parent component of this modal gets destroyed)
shouldCleanupDomOnUnmount: true,
@@ -96,22 +116,6 @@ export default {
close() {
this.$emit("close")
},
onBackdropMouseDown({ target }) {
this.shouldCloseOnBackdropClick =
!this.checkIfTargetInsideModalContent(target)
},
onBackdropMouseUp({ target }) {
if (
this.shouldCloseOnBackdropClick &&
!this.checkIfTargetInsideModalContent(target)
) {
this.close()
}
this.shouldCloseOnBackdropClick = true
},
checkIfTargetInsideModalContent($target) {
return $target?.closest(".modal-container")
},
onKeyDown(e) {
if (e.key === "Escape" && this.stackId === stack.peek()) {
e.preventDefault()
@@ -134,17 +138,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
.modal-enter,
.modal-leave-active {
@apply opacity-0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
@apply transform;
@apply scale-90;
@apply transition;
}
</style>

14
lang/en-US.json
View File

@@ -178,7 +178,6 @@
"cancelled": "Cancelled",
"save": "Save",
"dismiss": "Dismiss",
"are_you_sure": "Are you sure?",
"yes": "Yes",
"no": "No",
"restore": "Restore",
@@ -277,11 +276,13 @@
"tests": "Tests",
"create_new_collection": "Create new collection",
"create_new_environment": "Create new environment",
"are_you_sure_remove_history": "Are you sure you want to remove all History?",
"are_you_sure_remove_collection": "Are you sure you want to remove this Collection?",
"are_you_sure_remove_folder": "Are you sure you want to remove this folder?",
"are_you_sure_remove_request": "Are you sure you want to remove this request?",
"are_you_sure_remove_environment": "Are you sure you want to remove this environment?",
"are_you_sure": "Are you sure?",
"are_you_sure_logout": "Are you sure you want to logout?",
"are_you_sure_remove_history": "Are you sure you want to permanently delete all history?",
"are_you_sure_remove_collection": "Are you sure you want to permanently delete this collection?",
"are_you_sure_remove_folder": "Are you sure you want to permanently delete this folder?",
"are_you_sure_remove_request": "Are you sure you want to permanently delete this request?",
"are_you_sure_remove_environment": "Are you sure you want to permanently delete this environment?",
"are_you_sure_remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
"telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
"select_next_method": "Select Next method",
@@ -344,7 +345,6 @@
"share": "Share",
"interceptor": "Interceptor",
"profile": "Profile",
"are_you_sure_logout": "Are you sure you want to logout?",
"telemetry": "Telemetry",
"shortcuts_indicator": "Shortcuts indicator",
"zen_mode": "Zen mode",

2
pages/graphql.vue
View File

@@ -1177,7 +1177,7 @@ export default defineComponent({
this.$refs.queryEditor.setValidationSchema(schema)
this.$nuxt.$loading.finish()
const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), {
this.$toast.success(this.$t("finished_in", { duration }), {
icon: "done",
})
} catch (error) {