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

refactor(ui): title and actions slot on modals

Browse Source
This commit is contained in:
liyasthomas
2021-08-08 12:42:29 +05:30
parent 4d76c83328
commit 42d2dd284f
25 changed files with 114 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/app/Header.vue
View File

@@ -5,7 +5,7 @@
</div> </div>
<div class="space-x-2 flex-shrink-0 inline-flex items-center"> <div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="flex mx-2 mt-1" /> <AppGitHubStarButton class="flex mx-2 mt-1" />
<TabPrimary <ButtonSecondary
id="installPWA" id="installPWA"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('header.install_pwa')" :title="$t('header.install_pwa')"
@@ -33,7 +33,7 @@
indicator indicator
:indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'" :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
/> />
<TabPrimary <ButtonSecondary
v-else v-else
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('account')" :title="$t('account')"

6
components/collections/Add.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("collection.new") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

10
components/collections/AddFolder.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<SmartModal v-if="show" @close="$emit('hide-modal')"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("folder.new") }}</h3> :title="$t('folder.new')"
<ButtonSecondary icon="close" @click.native="hideModal" /> @close="$emit('hide-modal')"
</template> >
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

6
components/collections/Edit.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("collection.edit") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

10
components/collections/EditFolder.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<SmartModal v-if="show" @close="$emit('hide-modal')"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("folder.edit") }}</h3> :title="$t('folder.edit')"
<ButtonSecondary icon="close" @click.native="hideModal" /> @close="$emit('hide-modal')"
</template> >
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

6
components/collections/EditRequest.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

36
components/collections/ImportExport.vue
View File

@@ -1,18 +1,21 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> :title="`${$t('modal.import_export')} ${$t('collections')}`"
<div class="flex"> @close="hideModal"
<ButtonSecondary >
v-if="mode == 'import_from_my_collections'" <template #actions>
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
title="Back" v-if="mode == 'import_from_my_collections'"
icon="arrow_back" v-tippy="{ theme: 'tooltip' }"
@click.native=" title="Back"
mode = 'import_export' icon="arrow_back"
mySelectedCollectionID = undefined @click.native="
" mode = 'import_export'
/> mySelectedCollectionID = undefined
"
/>
<span>
<tippy <tippy
v-if=" v-if="
mode == 'import_export' && collectionsType.type == 'my-collections' mode == 'import_export' && collectionsType.type == 'my-collections'
@@ -24,7 +27,7 @@
arrow arrow
> >
<template #trigger> <template #trigger>
<TabPrimary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
@@ -62,8 +65,7 @@
" "
/> />
</tippy> </tippy>
<ButtonSecondary icon="close" @click.native="hideModal" /> </span>
</div>
</template> </template>
<template #body> <template #body>
<div v-if="mode == 'import_export'" class="flex flex-col space-y-2"> <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">

6
components/collections/SaveRequest.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('collection.save_as')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("collection.save_as") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<div class="flex relative"> <div class="flex relative">

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

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("collection.new") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

10
components/collections/graphql/AddFolder.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<SmartModal v-if="show" @close="$emit('hide-modal')"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("folder.new") }}</h3> :title="$t('folder.new')"
<ButtonSecondary icon="close" @click.native="hideModal" /> @close="$emit('hide-modal')"
</template> >
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

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

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("collection.edit") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

14
components/collections/graphql/EditFolder.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<SmartModal v-if="show" @close="$emit('hide-modal')"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("folder.edit") }}</h3> :title="$t('folder.edit')"
<ButtonSecondary icon="close" @click.native="hideModal" /> @close="$emit('hide-modal')"
</template> >
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input
@@ -44,6 +44,10 @@ export default Vue.extend({
}, },
methods: { methods: {
editFolder() { editFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString())
return
}
editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name }) editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
this.hideModal() this.hideModal()
}, },

10
components/collections/graphql/EditRequest.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input
@@ -48,6 +44,10 @@ export default Vue.extend({
}, },
methods: { methods: {
saveRequest() { saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.info(this.$t("collection.invalid_name").toString())
return
}
const requestUpdated = { const requestUpdated = {
...this.$props.request, ...this.$props.request,
name: this.$data.requestUpdateData.name || this.$props.request.name, name: this.$data.requestUpdateData.name || this.$props.request.name,

16
components/collections/graphql/ImportExport.vue
View File

@@ -1,11 +1,14 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> :title="`${$t('modal.import_export')} ${$t('collections')}`"
<div class="flex"> @close="hideModal"
>
<template #actions>
<span>
<tippy ref="options" interactive trigger="click" theme="popover" arrow> <tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<TabPrimary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
@@ -43,8 +46,7 @@
" "
/> />
</tippy> </tippy>
<ButtonSecondary icon="close" @click.native="hideModal" /> </span>
</div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">

6
components/environments/Add.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('new_environment')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("new_environment") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input

6
components/environments/Edit.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('edit_environment')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("edit_environment") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<div class="flex relative"> <div class="flex relative">

18
components/environments/ImportExport.vue
View File

@@ -1,13 +1,14 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal
<template #header> v-if="show"
<h3 class="heading"> :title="`${$t('modal.import_export')} ${$t('environments')}`"
{{ $t("import_export") }} {{ $t("environments") }} @close="hideModal"
</h3> >
<div class="flex"> <template #actions>
<span>
<tippy ref="options" interactive trigger="click" theme="popover" arrow> <tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger> <template #trigger>
<TabPrimary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('more')" :title="$t('more')"
icon="more_vert" icon="more_vert"
@@ -45,8 +46,7 @@
" "
/> />
</tippy> </tippy>
<ButtonSecondary icon="close" @click.native="hideModal" /> </span>
</div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">

11
components/firebase/Login.vue
View File

@@ -1,9 +1,10 @@
<template> <template>
<SmartModal v-if="show" dialog @close="hideModal"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3> :title="$t('login_to_hoppscotch')"
<ButtonSecondary icon="close" @click.native="hideModal" /> dialog
</template> @close="hideModal"
>
<template #body> <template #body>
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2"> <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
<SmartItem <SmartItem

10
components/http/CodegenModal.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal
<template #header> v-if="show"
<h3 class="heading">{{ $t("request.generate_code") }}</h3> :title="$t('request.generate_code')"
<ButtonSecondary icon="close" @click.native="hideModal" /> @close="hideModal"
</template> >
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<label for="requestType" class="font-semibold px-4 pb-4"> <label for="requestType" class="font-semibold px-4 pb-4">

6
components/http/ImportCurl.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("import.curl") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<textarea <textarea

6
components/http/TokenList.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('manage_token')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("manage_token") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-1"> <div class="flex flex-1">
<label>{{ $t("token_list") }}</label> <label>{{ $t("token_list") }}</label>

6
components/smart/ConfirmModal.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("modal.confirm") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<label class="font-semibold"> <label class="font-semibold">

18
components/smart/Modal.vue
View File

@@ -48,7 +48,15 @@
" "
> >
<div class="flex pl-2 items-center justify-between"> <div class="flex pl-2 items-center justify-between">
<slot name="header"></slot> <h3 class="heading">{{ title }}</h3>
<span class="flex">
<slot name="actions"></slot>
<ButtonSecondary
v-if="dimissible"
icon="close"
@click.native="close"
/>
</span>
</div> </div>
<div <div
class=" class="
@@ -97,6 +105,14 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
title: {
type: String,
default: "",
},
dimissible: {
type: Boolean,
default: true,
},
}, },
setup() { setup() {
const { disableKeybindings, enableKeybindings } = useKeybindingDisabler() const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()

12
components/teams/Add.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("team.new") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input
@@ -46,7 +42,11 @@ export default {
const name = this.name const name = this.name
// We clear it early to give the UI a snappy feel // We clear it early to give the UI a snappy feel
this.name = "" this.name = ""
if (name != null && name.replace(/\s/g, "").length < 6) { if (!name) {
this.$toast.info(this.$t("empty.team_name"))
return
}
if (name !== null && name.replace(/\s/g, "").length < 6) {
this.$toast.error(this.$t("team.name_length_insufficient"), { this.$toast.error(this.$t("team.name_length_insufficient"), {
icon: "error", icon: "error",
}) })

6
components/teams/Edit.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("team.edit") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body> <template #body>
<div class="flex flex-col px-2"> <div class="flex flex-col px-2">
<input <input