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

6
components/collections/Add.vue
View File

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

10
components/collections/AddFolder.vue
View File

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

6
components/collections/Edit.vue
View File

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

10
components/collections/EditFolder.vue
View File

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

6
components/collections/EditRequest.vue
View File

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

36
components/collections/ImportExport.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

6
components/environments/Add.vue
View File

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

6
components/environments/Edit.vue
View File

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

18
components/environments/ImportExport.vue
View File

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

11
components/firebase/Login.vue
View File

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

10
components/http/CodegenModal.vue
View File

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

6
components/http/ImportCurl.vue
View File

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

6
components/http/TokenList.vue
View File

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

6
components/smart/ConfirmModal.vue
View File

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

18
components/smart/Modal.vue
View File

@@ -48,7 +48,15 @@
"
>
<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
class="
@@ -97,6 +105,14 @@ export default defineComponent({
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
dimissible: {
type: Boolean,
default: true,
},
},
setup() {
const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()

12
components/teams/Add.vue
View File

@@ -1,9 +1,5 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("team.new") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<input
@@ -46,7 +42,11 @@ export default {
const name = this.name
// We clear it early to give the UI a snappy feel
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"), {
icon: "error",
})

6
components/teams/Edit.vue
View File

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