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

refactor: modals

Browse Source
This commit is contained in:
liyasthomas
2021-07-09 22:49:45 +05:30
parent 08d0765cfb
commit c7062ad613
41 changed files with 712 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/scss/styles.scss
View File

@@ -162,12 +162,24 @@ hr {
@apply text-lg; @apply text-lg;
} }
input { .input,
.select {
@apply flex;
@apply w-full;
@apply px-4;
@apply py-2;
@apply bg-primaryLight;
@apply truncate; @apply truncate;
@apply rounded-lg;
@apply font-semibold;
@apply focus:outline-none;
@apply focus-visible:ring;
@apply focus-visible:ring-inset;
@apply focus-visible:ring-accent;
} }
input[type="file"], .input[type="file"],
input[type="radio"], .input[type="radio"],
#installPWA { #installPWA {
@apply hidden; @apply hidden;
} }

32
assets/scss/themes.scss
View File

@@ -6,27 +6,27 @@
@mixin darkTheme { @mixin darkTheme {
// Background color // Background color
--primary-color: rgba(32, 33, 36, 1); --primary-color: theme("colors.dark.800");
// Light Background color // Light Background color
--primary-light-color: rgba(255, 255, 255, 0.04); --primary-light-color: theme("colors.dark.700");
// Dark Background color // Dark Background color
--primary-dark-color: rgba(12, 12, 12, 1); --primary-dark-color: theme("colors.dark.600");
// Text color // Text color
--secondary-color: rgba(255, 255, 255, 0.9); --secondary-color: theme("colors.gray.400");
// Light Text color // Light Text color
--secondary-light-color: rgba(255, 255, 255, 0.5); --secondary-light-color: theme("colors.gray.500");
// Dark Text color // Dark Text color
--secondary-dark-color: rgba(0, 0, 0, 0.5); --secondary-dark-color: theme("colors.white");
// Border color // Border color
--divider-color: rgba(255, 255, 255, 0.05); --divider-color: theme("colors.dark.500");
// Light Border color // Light Border color
--divider-light-color: rgba(255, 255, 255, 0.05); --divider-light-color: theme("colors.dark.400");
// Dark Border color // Dark Border color
--divider-dark-color: rgba(255, 255, 255, 0.05); --divider-dark-color: theme("colors.dark.700");
// Error color // Error color
--error-color: rgba(255, 255, 255, 0.05); --error-color: theme("colors.dark.600");
// Tooltip color // Tooltip color
--tooltip-color: rgba(48, 48, 48, 1); --tooltip-color: theme("colors.dark.700");
// Editor theme // Editor theme
--editor-theme: "twilight"; --editor-theme: "twilight";
} }
@@ -102,11 +102,11 @@
@mixin greenTheme { @mixin greenTheme {
// Accent color // Accent color
--accent-color: rgba(73, 204, 104, 1); --accent-color: rgb(97, 207, 123);
// Light Accent color // Light Accent color
--accent-light-color: rgba(73, 204, 104, 1); --accent-light-color: rgba(73, 204, 104, 1);
// Dark Accent color // Dark Accent color
--accent-dark-color: rgba(64, 182, 91, 1); --accent-dark-color: rgb(0, 71, 17);
// Gradient from // Gradient from
--gradient-from-color: theme("colors.green.200"); --gradient-from-color: theme("colors.green.200");
// Gradient via // Gradient via
@@ -226,15 +226,15 @@
@include greenTheme; @include greenTheme;
} }
:root.light-mode { :root.light {
@include lightTheme; @include lightTheme;
} }
:root.dark-mode { :root.dark {
@include darkTheme; @include darkTheme;
} }
:root.black-mode { :root.black {
@include blackTheme; @include blackTheme;
} }

140
components/app/Shortcuts.vue
View File

@@ -7,61 +7,30 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="p-2"> <div class="px-2">
<div> <div
<kbd>{{ getSpecialKey() }}</kbd> v-for="(shortcut, index) in shortcuts"
+ :key="`shortcut-${index}`"
<kbd>G</kbd> class="flex items-center"
<label>{{ $t("send_request") }}</label> >
</div> <kbd
<div> v-for="(key, keyIndex) in shortcut.keys"
<kbd>{{ getSpecialKey() }}</kbd :key="`key-${keyIndex}`"
>+<kbd>S</kbd> class="
<label>{{ $t("save_to_collections") }}</label> py-2
</div> px-4
<div> m-1
<kbd>{{ getSpecialKey() }}</kbd text-xs
>+<kbd>K</kbd> border border-divider
<label>{{ $t("copy_request_link") }}</label> rounded-lg
</div> font-bold
<div> "
<kbd>{{ getSpecialKey() }}</kbd >
>+<kbd>I</kbd> {{ key }}
<label>{{ $t("reset_request") }}</label> </kbd>
</div> <span class="flex text-xs ml-4">
</div> {{ shortcut.label }}
<hr /> </span>
<div class="p-2">
<div>
<kbd>Alt</kbd>+<kbd>▲</kbd>
<label>{{ $t("select_next_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>▼</kbd>
<label>{{ $t("select_previous_method") }}</label>
</div>
</div>
<hr />
<div class="p-2">
<div>
<kbd>Alt</kbd>+<kbd>G</kbd>
<label>{{ $t("select_get_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>H</kbd>
<label>{{ $t("select_head_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>P</kbd>
<label>{{ $t("select_post_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>U</kbd>
<label>{{ $t("select_put_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>X</kbd>
<label>{{ $t("select_delete_method") }}</label>
</div> </div>
</div> </div>
</template> </template>
@@ -75,6 +44,56 @@ export default {
props: { props: {
show: Boolean, show: Boolean,
}, },
data() {
return {
shortcuts: [
{
keys: [this.getSpecialKey(), "G"],
label: this.$t("send_request"),
},
{
keys: [this.getSpecialKey(), "S"],
label: this.$t("save_to_collections"),
},
{
keys: [this.getSpecialKey(), "K"],
label: this.$t("copy_request_link"),
},
{
keys: [this.getSpecialKey(), "I"],
label: this.$t("reset_request"),
},
{
keys: ["Alt", "▲"],
label: this.$t("select_next_method"),
},
{
keys: ["Alt", "▼"],
label: this.$t("select_previous_method"),
},
{
keys: ["Alt", "G"],
label: this.$t("select_get_method"),
},
{
keys: ["Alt", "H"],
label: this.$t("select_head_method"),
},
{
keys: ["Alt", "P"],
label: this.$t("select_post_method"),
},
{
keys: ["Alt", "U"],
label: this.$t("select_put_method"),
},
{
keys: ["Alt", "X"],
label: this.$t("select_delete_method"),
},
],
}
},
methods: { methods: {
getSpecialKey: getPlatformSpecialKey, getSpecialKey: getPlatformSpecialKey,
hideModal() { hideModal() {
@@ -83,14 +102,3 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss">
kbd {
@apply inline-flex;
@apply resize-none;
@apply m-2;
@apply py-2 px-4;
@apply rounded-lg;
@apply text-sm;
}
</style>

2
components/button/Primary.vue
View File

@@ -15,7 +15,7 @@
:class="[ :class="[
color color
? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300` ? `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-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-4' : 'px-2', label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg', rounded ? 'rounded-full' : 'rounded-lg',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-50 cursor-not-allowed': disabled },

11
components/collections/Add.vue
View File

@@ -2,12 +2,13 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3> <h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelAdd">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelAdd" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}
</label>
<input <input
id="selectLabelAdd" id="selectLabelAdd"
v-model="name" v-model="name"
@@ -16,12 +17,12 @@
:placeholder="$t('my_new_collection')" :placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection" @keyup.enter="addNewCollection"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" /> <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

12
components/collections/AddFolder.vue
View File

@@ -7,7 +7,13 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelAddFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label
for="selectLabelAddFolder"
class="px-4 font-semibold pb-4 text-xs"
>
{{ $t("label") }}
</label>
<input <input
id="selectLabelAddFolder" id="selectLabelAddFolder"
v-model="name" v-model="name"
@@ -16,12 +22,12 @@
:placeholder="$t('my_new_folder')" :placeholder="$t('my_new_folder')"
@keyup.enter="addFolder" @keyup.enter="addFolder"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addFolder" /> <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

9
components/collections/Edit.vue
View File

@@ -7,7 +7,10 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEdit">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelEdit" class="px-4 font-semibold pb-4 text-xs">{{
$t("label")
}}</label>
<input <input
id="selectLabelEdit" id="selectLabelEdit"
v-model="name" v-model="name"
@@ -16,12 +19,12 @@
:placeholder="placeholderCollName" :placeholder="placeholderCollName"
@keyup.enter="saveCollection" @keyup.enter="saveCollection"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" /> <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

11
components/collections/EditFolder.vue
View File

@@ -7,7 +7,12 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEditFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label
for="selectLabelEditFolder"
class="px-4 font-semibold pb-4 text-xs"
>{{ $t("label") }}</label
>
<input <input
id="selectLabelEditFolder" id="selectLabelEditFolder"
v-model="name" v-model="name"
@@ -15,12 +20,12 @@
type="text" type="text"
@keyup.enter="editFolder" @keyup.enter="editFolder"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="editFolder" /> <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

9
components/collections/EditRequest.vue
View File

@@ -7,7 +7,10 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEditReq">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelEditReq" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}</label
>
<input <input
id="selectLabelEditReq" id="selectLabelEditReq"
v-model="requestUpdateData.name" v-model="requestUpdateData.name"
@@ -16,12 +19,12 @@
:placeholder="placeholderReqName" :placeholder="placeholderReqName"
@keyup.enter="saveRequest" @keyup.enter="saveRequest"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" /> <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

25
components/collections/ImportExport.vue
View File

@@ -2,7 +2,7 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-if="mode == 'import_from_my_collections'" v-if="mode == 'import_from_my_collections'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -67,8 +67,8 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start"> <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')" :title="$t('replace_current')"
icon="folder_special" icon="folder_special"
@@ -83,7 +83,7 @@
accept="application/json" accept="application/json"
@change="replaceWithJSON" @change="replaceWithJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
icon="create_new_folder" icon="create_new_folder"
@@ -98,7 +98,7 @@
accept="application/json" accept="application/json"
@change="importFromJSON" @change="importFromJSON"
/> />
<ButtonSecondary <SmartItem
v-if="collectionsType.type == 'team-collections'" v-if="collectionsType.type == 'team-collections'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
@@ -106,7 +106,7 @@
:label="$t('import_from_my_collections')" :label="$t('import_from_my_collections')"
@click.native="mode = 'import_from_my_collections'" @click.native="mode = 'import_from_my_collections'"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
icon="drive_file_move" icon="drive_file_move"
@@ -114,8 +114,11 @@
@click.native="exportJSON" @click.native="exportJSON"
/> />
</div> </div>
<div v-if="mode == 'import_from_my_collections'"> <div
<span class="select-wrapper"> v-if="mode == 'import_from_my_collections'"
class="flex px-2 flex-col"
>
<div class="select-wrapper">
<select <select
type="text" type="text"
class="select" class="select"
@@ -143,15 +146,13 @@
{{ collection.name }} {{ collection.name }}
</option> </option>
</select> </select>
</span> </div>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div v-if="mode == 'import_from_my_collections'"> <div v-if="mode == 'import_from_my_collections'">
<span></span>
<span> <span>
<ButtonSecondary <ButtonPrimary
class="m-2"
:disabled="mySelectedCollectionID == undefined" :disabled="mySelectedCollectionID == undefined"
icon="create_new_folder" icon="create_new_folder"
:label="$t('import')" :label="$t('import')"

18
components/collections/SaveRequest.vue
View File

@@ -2,12 +2,13 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("save_request_as") }}</h3> <h3 class="heading">{{ $t("save_request_as") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelSaveReq">{{ $t("token_req_name") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelSaveReq" class="px-4 font-semibold pb-4 text-xs">
{{ $t("token_req_name") }}</label
>
<input <input
id="selectLabelSaveReq" id="selectLabelSaveReq"
v-model="requestData.name" v-model="requestData.name"
@@ -15,9 +16,9 @@
type="text" type="text"
@keyup.enter="saveRequestAs" @keyup.enter="saveRequestAs"
/> />
<label>Select location</label> <label class="px-4 pt-4 font-semibold pb-4 text-xs">
<!-- <input class="input" readonly :value="path" /> --> Select Location
</label>
<CollectionsGraphql <CollectionsGraphql
v-if="mode === 'graphql'" v-if="mode === 'graphql'"
:doc="false" :doc="false"
@@ -26,7 +27,6 @@
:saving-mode="true" :saving-mode="true"
@select="onSelect" @select="onSelect"
/> />
<Collections <Collections
v-else v-else
:picked="picked" :picked="picked"
@@ -35,12 +35,12 @@
@update-collection="collectionsType.type = $event" @update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType" @update-coll-type="onUpdateCollType"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" /> <ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -2,12 +2,13 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3> <h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlAdd">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}
</label>
<input <input
id="selectLabelGqlAdd" id="selectLabelGqlAdd"
v-model="name" v-model="name"
@@ -16,12 +17,12 @@
:placeholder="$t('my_new_collection')" :placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection" @keyup.enter="addNewCollection"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" /> <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -7,7 +7,13 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlAddFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label
for="selectLabelGqlAddFolder"
class="px-4 font-semibold pb-4 text-xs"
>
{{ $t("label") }}
</label>
<input <input
id="selectLabelGqlAddFolder" id="selectLabelGqlAddFolder"
v-model="name" v-model="name"
@@ -16,12 +22,12 @@
:placeholder="$t('my_new_folder')" :placeholder="$t('my_new_folder')"
@keyup.enter="addFolder" @keyup.enter="addFolder"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addFolder" /> <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

1
components/collections/graphql/Collection.vue
View File

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -7,7 +7,10 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlEdit">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}
</label>
<input <input
id="selectLabelGqlEdit" id="selectLabelGqlEdit"
v-model="name" v-model="name"
@@ -16,12 +19,12 @@
:placeholder="editingCollection.name" :placeholder="editingCollection.name"
@keyup.enter="saveCollection" @keyup.enter="saveCollection"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" /> <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -7,7 +7,13 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlEditFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label
for="selectLabelGqlEditFolder"
class="px-4 font-semibold pb-4 text-xs"
>
{{ $t("label") }}
</label>
<input <input
id="selectLabelGqlEditFolder" id="selectLabelGqlEditFolder"
v-model="name" v-model="name"
@@ -16,12 +22,12 @@
:placeholder="folder.name" :placeholder="folder.name"
@keyup.enter="editFolder" @keyup.enter="editFolder"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="editFolder" /> <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -7,7 +7,13 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlEditReq">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label
for="selectLabelGqlEditReq"
class="px-4 font-semibold pb-4 text-xs"
>
{{ $t("label") }}
</label>
<input <input
id="selectLabelGqlEditReq" id="selectLabelGqlEditReq"
v-model="requestUpdateData.name" v-model="requestUpdateData.name"
@@ -16,12 +22,12 @@
:placeholder="request.name" :placeholder="request.name"
@keyup.enter="saveRequest" @keyup.enter="saveRequest"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" /> <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

1
components/collections/graphql/Folder.vue
View File

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -2,7 +2,7 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div> <div class="flex">
<tippy <tippy
ref="options" ref="options"
interactive interactive
@@ -54,8 +54,8 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col items-start p-2"> <div class="flex flex-col space-y-2">
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')" :title="$t('replace_current')"
icon="folder_special" icon="folder_special"
@@ -70,7 +70,7 @@
accept="application/json" accept="application/json"
@change="replaceWithJSON" @change="replaceWithJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
icon="create_new_folder" icon="create_new_folder"
@@ -85,7 +85,7 @@
accept="application/json" accept="application/json"
@change="importFromJSON" @change="importFromJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
icon="drive_file_move" icon="drive_file_move"

1
components/collections/graphql/Request.vue
View File

@@ -36,6 +36,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >

1
components/collections/my/Collection.vue
View File

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

1
components/collections/my/Folder.vue
View File

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

1
components/collections/my/Request.vue
View File

@@ -44,6 +44,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >

1
components/collections/teams/Collection.vue
View File

@@ -27,6 +27,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

1
components/collections/teams/Folder.vue
View File

@@ -27,6 +27,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

1
components/collections/teams/Request.vue
View File

@@ -37,6 +37,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >

9
components/environments/Add.vue
View File

@@ -7,7 +7,10 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEnvAdd">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelEnvAdd" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}
</label>
<input <input
id="selectLabelEnvAdd" id="selectLabelEnvAdd"
v-model="name" v-model="name"
@@ -16,12 +19,12 @@
:placeholder="$t('my_new_environment')" :placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment" @keyup.enter="addNewEnvironment"
/> />
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" /> <ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

20
components/environments/Edit.vue
View File

@@ -7,7 +7,10 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEnvEdit">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}
</label>
<input <input
id="selectLabelEnvEdit" id="selectLabelEnvEdit"
v-model="name" v-model="name"
@@ -16,13 +19,18 @@
:placeholder="editingEnvironment.name" :placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment" @keyup.enter="saveEnvironment"
/> />
<div class="flex flex-1"> <div class="flex justify-between items-center flex-1">
<label for="variableList">{{ $t("env_variable_list") }}</label> <label
for="variableList"
class="px-4 pt-4 font-semibold pb-4 text-xs"
>
{{ $t("env_variable_list") }}
</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')" :title="$t('clear')"
icon="clearIcon" :icon="clearIcon"
@click.native="clearContent($event)" @click.native="clearContent($event)"
/> />
</div> </div>
@@ -77,12 +85,12 @@
/> />
</li> </li>
</ul> </ul>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" /> <ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

1
components/environments/Environment.vue
View File

@@ -24,6 +24,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="$emit('edit-environment')" @click="$emit('edit-environment')"
> >

10
components/environments/ImportExport.vue
View File

@@ -4,7 +4,7 @@
<h3 class="heading"> <h3 class="heading">
{{ $t("import_export") }} {{ $t("environments") }} {{ $t("import_export") }} {{ $t("environments") }}
</h3> </h3>
<div> <div class="flex">
<tippy <tippy
ref="options" ref="options"
interactive interactive
@@ -56,8 +56,8 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col items-start p-2"> <div class="flex flex-col space-y-2">
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')" :title="$t('replace_current')"
icon="folder_special" icon="folder_special"
@@ -72,7 +72,7 @@
accept="application/json" accept="application/json"
@change="replaceWithJSON" @change="replaceWithJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
icon="create_new_folder" icon="create_new_folder"
@@ -87,7 +87,7 @@
accept="application/json" accept="application/json"
@change="importFromJSON" @change="importFromJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
icon="drive_file_move" icon="drive_file_move"

6
components/graphql/Field.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="font-bold text-xs field-title" class="font-semibold text-xs field-title"
:class="{ 'field-highlighted': isHighlighted }" :class="{ 'field-highlighted': isHighlighted }"
> >
{{ fieldName }} {{ fieldName }}
@@ -38,7 +38,7 @@
text-xs text-black text-xs text-black
bg-yellow-200 bg-yellow-200
rounded rounded
font-bold font-semibold
field-deprecated field-deprecated
" "
> >
@@ -48,7 +48,7 @@
<h5 class="my-2 text-xs">Arguments:</h5> <h5 class="my-2 text-xs">Arguments:</h5>
<div class="pl-4 border-l-2 border-divider"> <div class="pl-4 border-l-2 border-divider">
<div v-for="(field, index) in fieldArgs" :key="index"> <div v-for="(field, index) in fieldArgs" :key="index">
<span class="font-bold text-xs"> <span class="font-semibold text-xs">
{{ field.name }}: {{ field.name }}:
<GraphqlTypeLink <GraphqlTypeLink
:gql-type="field.type" :gql-type="field.type"

2
components/graphql/Type.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div :id="`type_${gqlType.name}`" class="p-4"> <div :id="`type_${gqlType.name}`" class="p-4">
<div <div
class="font-bold text-xs type-title" class="font-semibold text-xs type-title"
:class="{ 'text-accent': isHighlighted }" :class="{ 'text-accent': isHighlighted }"
> >
<span v-if="isInput" class="text-accent">input </span> <span v-if="isInput" class="text-accent">input </span>

1
components/history/graphql/Card.vue
View File

@@ -12,6 +12,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="$emit('use-entry')" @click="$emit('use-entry')"

1
components/history/rest/Card.vue
View File

@@ -28,6 +28,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="$emit('use-entry')" @click="$emit('use-entry')"

52
components/http/CodegenModal.vue
View File

@@ -2,12 +2,14 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("generate_code") }}</h3> <h3 class="heading">{{ $t("generate_code") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="requestType">{{ $t("choose_language") }}</label> <div class="px-2 flex flex-col">
<label for="requestType" class="px-4 font-semibold pb-4 text-xs">
{{ $t("choose_language") }}
</label>
<div class="flex flex-1">
<span class="select-wrapper"> <span class="select-wrapper">
<tippy <tippy
ref="options" ref="options"
@@ -18,18 +20,23 @@
arrow arrow
> >
<template #trigger> <template #trigger>
<pre v-if="requestType">{{ <span
codegens.find((x) => x.id === requestType).name class="
}}</pre> flex
<input w-full
v-else px-4
id="requestType" text-xs
v-model="requestType" py-3
:placeholder="$t('choose_language')" rounded-lg
class="input cursor-pointer" font-semibold
readonly focus:outline-none
autofocus border-b border-dividerLight
/> bg-primaryLight
cursor-pointer
"
>
{{ codegens.find((x) => x.id === requestType).name }}
</span>
</template> </template>
<SmartItem <SmartItem
v-for="gen in codegens" v-for="gen in codegens"
@@ -42,9 +49,14 @@
/> />
</tippy> </tippy>
</span> </span>
<div class="flex flex-1"> </div>
<label for="generatedCode">{{ $t("generated_code") }}</label> <div class="flex justify-between flex-1">
<div> <label
for="generatedCode"
class="px-4 pt-4 font-semibold pb-4 text-xs"
>
{{ $t("generated_code") }}
</label>
<ButtonSecondary <ButtonSecondary
ref="copyRequestCode" ref="copyRequestCode"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -53,7 +65,6 @@
@click.native="copyRequestCode" @click.native="copyRequestCode"
/> />
</div> </div>
</div>
<SmartAceEditor <SmartAceEditor
v-if="requestType" v-if="requestType"
ref="generatedCode" ref="generatedCode"
@@ -68,8 +79,9 @@
showPrintMargin: false, showPrintMargin: false,
useWorker: false, useWorker: false,
}" }"
styles="rounded-b-lg" styles="rounded-lg"
/> />
</div>
</template> </template>
</SmartModal> </SmartModal>
</template> </template>

3
components/http/ImportCurl.vue
View File

@@ -16,10 +16,9 @@
></textarea> ></textarea>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('import')" @click.native="handleImport" /> <ButtonPrimary :label="$t('import')" @click.native="handleImport" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

9
components/smart/ConfirmModal.vue
View File

@@ -7,13 +7,16 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label>{{ title }}</label> <div class="px-2 flex flex-col">
<label class="font-semibold text-xs">
{{ title }}
</label>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="no" @click.native="hideModal" />
<ButtonPrimary :label="yes" @click.native="resolve" /> <ButtonPrimary :label="yes" @click.native="resolve" />
<ButtonSecondary :label="no" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

57
components/smart/Modal.vue
View File

@@ -30,26 +30,23 @@
bg-primary bg-primary
rounded-lg rounded-lg
shadow-xl shadow-xl
max-w-md max-w-md max-h-lg
" "
> >
<div class="pl-2"> <div class="flex pl-2 items-center justify-between">
<div class="flex items-center justify-between">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
</div> <div class="my-4 overflow-auto flex flex-col">
<div class="my-4 overflow-auto max-h-xl">
<div class="flex flex-col">
<slot name="body"></slot> <slot name="body"></slot>
</div> </div>
</div> <div
<div v-if="hasFooterSlot" class="p-2"> v-if="hasFooterSlot"
<div class="flex flex-1"> class="p-2 flex flex-1 items-center justify-between"
>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>
</div> </div>
</div>
</transition> </transition>
</template> </template>
@@ -138,46 +135,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.modal-backdrop {
@apply fixed;
@apply inset-0;
@apply z-50;
@apply w-full;
@apply h-full;
@apply flex;
@apply items-center;
@apply justify-center;
@apply transition;
@apply bg-primaryLight;
}
.modal-container {
@apply relative;
@apply flex flex-1 flex-col;
@apply m-2;
@apply p-4;
@apply transition;
@apply bg-primary;
@apply rounded-lg;
@apply shadow-xl;
@apply max-w-md;
}
.modal-header {
@apply pl-2;
}
.modal-body {
@apply my-4;
@apply overflow-auto;
@apply max-h-xl;
}
.modal-footer {
@apply p-2;
}
.modal-enter, .modal-enter,
.modal-leave-active { .modal-leave-active {
@apply opacity-0; @apply opacity-0;

18
components/teams/Add.vue
View File

@@ -5,28 +5,24 @@
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</template> </template>
<template #body> <template #body>
<ul> <div class="px-2 flex flex-col">
<li> <label for="selectLabelTeamAdd" class="px-4 font-semibold pb-4 text-xs">
<label>{{ $t("label") }}</label> {{ $t("label") }}
</li> </label>
</ul>
<ul>
<li>
<input <input
id="selectLabelTeamAdd"
v-model="name" v-model="name"
class="input" class="input"
type="text" type="text"
:placeholder="$t('my_new_team')" :placeholder="$t('my_new_team')"
@keyup.enter="addNewTeam" @keyup.enter="addNewTeam"
/> />
</li> </div>
</ul>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewTeam" /> <ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

34
components/teams/Edit.vue
View File

@@ -5,32 +5,24 @@
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</template> </template>
<template #body> <template #body>
<ul> <div class="px-2 flex flex-col">
<li> <label
<div class="flex flex-1"> for="selectLabelTeamEdit"
<label>{{ $t("label") }}</label> class="px-4 font-semibold pb-4 text-xs"
</div> >
</li> {{ $t("label") }}
</ul> </label>
<ul>
<li>
<input <input
id="selectLabelTeamEdit"
v-model="name" v-model="name"
class="input" class="input"
type="text" type="text"
:placeholder="editingTeam.name" :placeholder="editingTeam.name"
@keyup.enter="saveTeam" @keyup.enter="saveTeam"
/> />
</li> <label for="memberList" class="px-4 pt-4 font-semibold pb-4 text-xs">
</ul> {{ $t("team_member_list") }}
<ul> </label>
<li>
<div class="flex flex-1">
<label for="memberList">{{ $t("team_member_list") }}</label>
<div></div>
</div>
</li>
</ul>
<ul <ul
v-for="(member, index) in members" v-for="(member, index) in members"
:key="`new-${index}`" :key="`new-${index}`"
@@ -201,12 +193,12 @@
/> />
</li> </li>
</ul> </ul>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveTeam" /> <ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

5
nuxt.config.js
View File

@@ -361,6 +361,11 @@ export default {
}, },
}, },
// https://github.com/nuxt-community/color-mode-module
colorMode: {
classSuffix: "",
},
// Build Configuration (https://go.nuxtjs.dev/config-build) // Build Configuration (https://go.nuxtjs.dev/config-build)
build: { build: {
transpile: ["three"], transpile: ["three"],