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

refactor(ui): minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-08-20 15:08:54 +05:30
parent a121445b1e
commit 7082eb27db
63 changed files with 296 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/scss/styles.scss
View File

@@ -56,6 +56,7 @@ body {
@apply select-none;
@apply overflow-x-hidden;
animation: fade 300ms forwards;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
overflow: overlay;
@@ -63,6 +64,15 @@ body {
-webkit-touch-callout: none;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-enter-active,
.fade-leave-active,
.page-enter-active,
@@ -82,7 +92,9 @@ body {
}
.material-icons {
font-size: 133.4% !important;
font-size: var(--body-line-height) !important;
width: var(--body-line-height);
overflow: hidden;
}
.svg-icons {

4
assets/scss/themes.scss
View File

@@ -1,6 +1,6 @@
@mixin baseTheme {
--font-sans: "Inter", "sans-serif";
--font-mono: "Roboto Mono", "monospace";
--font-sans: "Inter", sans-serif;
--font-mono: "Roboto Mono", monospace;
--font-icon: "Material Icons";
}

2
components/app/Footer.vue
View File

@@ -50,7 +50,7 @@
/>
<SmartItem
:label="$t('app.whats_new')"
to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
to="https://docs.hoppscotch.io/changelog"
blank
@click.native="$refs.options.tippy().hide()"
/>

2
components/app/Share.vue
View File

@@ -87,7 +87,7 @@ export default {
copyToClipboard(this.url)
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
icon: "done",
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},

4
components/app/Shortcuts.vue
View File

@@ -55,9 +55,9 @@
:key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6"
>
<h5 class="font-semibold text-secondaryDark">
<h1 class="font-semibold text-secondaryDark">
{{ $t(map.section) }}
</h5>
</h1>
<div
v-for="(shortcut, shortcutIndex) in map.shortcuts"
:key="`map-${mapIndex}-shortcut-${shortcutIndex}`"

2
components/app/Support.vue
View File

@@ -30,7 +30,7 @@
<SmartItem
icon="auto_awesome"
:label="$t('app.whats_new')"
to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
to="https://docs.hoppscotch.io/changelog"
:description="$t('support.changelog')"
info-icon="chevron_right"
active

8
components/button/Primary.vue
View File

@@ -59,7 +59,7 @@
]"
/>
{{ label }}
<div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
<div v-if="shortcut.length" class="ml-2">
<kbd
v-for="(key, index) in shortcut"
:key="`key-${index}`"
@@ -75,7 +75,6 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
import { useSetting } from "~/newstore/settings"
export default defineComponent({
props: {
@@ -144,10 +143,5 @@ export default defineComponent({
default: () => [],
},
},
setup() {
return {
SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
}
},
})
</script>

17
components/button/Secondary.vue
View File

@@ -51,11 +51,18 @@
]"
/>
{{ label }}
<div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
<div v-if="shortcut.length" class="ml-2">
<kbd
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="bg-dividerLight text-secondaryLight ml-1 px-1 inline-flex"
class="
bg-dividerLight
rounded
text-secondaryLight
ml-1
px-1
inline-flex
"
>
{{ key }}
</kbd>
@@ -65,7 +72,6 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
import { useSetting } from "~/newstore/settings"
export default defineComponent({
props: {
@@ -122,10 +128,5 @@ export default defineComponent({
default: () => [],
},
},
setup() {
return {
SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
}
},
})
</script>

4
components/collections/Add.vue
View File

@@ -44,8 +44,8 @@ export default {
methods: {
addNewCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/AddFolder.vue
View File

@@ -48,8 +48,8 @@ export default {
methods: {
addFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("folder.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/Edit.vue
View File

@@ -45,8 +45,8 @@ export default {
methods: {
saveCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/EditFolder.vue
View File

@@ -45,8 +45,8 @@ export default {
methods: {
editFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("folder.invalid_name"), {
icon: "error_outline",
})
return
}

4
components/collections/EditRequest.vue
View File

@@ -44,8 +44,8 @@ export default {
methods: {
saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("request.invalid_name"), {
icon: "error_outline",
})
return
}

39
components/collections/ImportExport.vue
View File

@@ -43,7 +43,7 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
@@ -52,20 +52,23 @@
? $t('export.require_github')
: null
"
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</template>
@@ -225,7 +228,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -405,7 +408,7 @@ export default defineComponent({
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -419,7 +422,7 @@ export default defineComponent({
},
failedImport() {
this.$toast.error(this.$t("import.failed"), {
icon: "error",
icon: "error_outline",
})
},
parsePostmanCollection({ info, name, item }) {

8
components/collections/SaveRequest.vue
View File

@@ -119,13 +119,13 @@ export default defineComponent({
saveRequestAs() {
if (!this.requestName) {
this.$toast.error(this.$t("error.empty_req_name"), {
icon: "error",
icon: "error_outline",
})
return
}
if (this.picked == null) {
this.$toast.error(this.$t("collection.select"), {
icon: "error",
icon: "error_outline",
})
return
}
@@ -218,8 +218,8 @@ export default defineComponent({
} else if (this.picked.pickedType === "gql-my-collection") {
saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
}
this.$toast.success("Requested added", {
icon: "done",
this.$toast.success(this.$t("request.added"), {
icon: "post_add",
})
this.hideModal()

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

@@ -47,8 +47,8 @@ export default Vue.extend({
methods: {
addNewCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -93,7 +93,7 @@
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:folder="folder"
@@ -110,7 +110,7 @@
<CollectionsGraphqlRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -131,7 +131,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -187,8 +187,8 @@ export default Vue.extend({
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -218,8 +218,7 @@ export default Vue.extend({
this.$emit("select", { picked: null })
}
removeGraphqlCollection(this.collectionIndex)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

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

@@ -49,8 +49,8 @@ export default Vue.extend({
methods: {
saveCollection() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

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

@@ -50,8 +50,8 @@ export default Vue.extend({
methods: {
editFolder() {
if (!this.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

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

@@ -49,8 +49,8 @@ export default Vue.extend({
methods: {
saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.info(this.$t("collection.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name").toString(), {
icon: "error_outline",
})
return
}

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -89,7 +89,7 @@
<CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:folder="subFolder"
@@ -106,7 +106,7 @@
<CollectionsGraphqlRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -130,7 +130,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -185,8 +185,8 @@ export default Vue.extend({
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -217,7 +217,7 @@ export default Vue.extend({
}
removeGraphqlFolder(this.folderPath)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

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

@@ -23,7 +23,7 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
@@ -32,20 +32,23 @@
? $t('export.require_github')
: null
"
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createCollectionGist
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</template>
@@ -143,7 +146,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -249,7 +252,7 @@ export default defineComponent({
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -257,13 +260,13 @@ export default defineComponent({
}, 1000)
},
fileImported() {
this.$toast.info(this.$t("state.file_imported"), {
this.$toast.success(this.$t("state.file_imported"), {
icon: "folder_shared",
})
},
failedImport() {
this.$toast.error(this.$t("import.failed"), {
icon: "error",
icon: "error_outline",
})
},
parsePostmanCollection({ info, name, item }) {

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

@@ -12,8 +12,8 @@
class="
cursor-pointer
flex
mx-2
w-12
px-2
w-16
justify-center
items-center
truncate
@@ -171,7 +171,7 @@ export default Vue.extend({
}
removeGraphqlRequest(this.folderPath, this.requestIndex)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

33
components/collections/index.vue
View File

@@ -351,7 +351,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -361,8 +361,8 @@ export default defineComponent({
// Intented to be called by CollectionEdit modal submit event
updateEditingCollection(newName) {
if (!newName) {
this.$toast.info(this.$t("collection.invalid_name"), {
icon: "info",
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
return
}
@@ -380,14 +380,13 @@ export default defineComponent({
teamUtils
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => {
// TODO: $t translations ?
this.$toast.success("Collection Renamed", {
this.$toast.success(this.$t("collection.renamed"), {
icon: "done",
})
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -411,7 +410,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -445,14 +444,14 @@ export default defineComponent({
this.editingRequestIndex
)
.then(() => {
this.$toast.success("Request Renamed", {
this.$toast.success(this.$t("request.renamed"), {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -525,7 +524,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -590,8 +589,7 @@ export default defineComponent({
}
removeRESTCollection(collectionIndex)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
} else if (collectionsType.type === "team-collections") {
@@ -619,13 +617,13 @@ export default defineComponent({
},
})
.then(() => {
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -644,8 +642,7 @@ export default defineComponent({
this.$emit("select", { picked: null })
}
removeRESTRequest(folderPath, requestIndex)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
} else if (this.collectionsType.type === "team-collections") {
@@ -661,13 +658,13 @@ export default defineComponent({
teamUtils
.deleteRequest(this.$apollo, requestIndex)
.then(() => {
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -112,7 +112,7 @@
<CollectionsMyFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
@@ -131,7 +131,7 @@
<CollectionsMyRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -156,7 +156,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -212,8 +212,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},

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

@@ -10,7 +10,7 @@
@dragend="dragging = false"
>
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -94,7 +94,7 @@
<CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
@@ -113,7 +113,7 @@
<CollectionsMyRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -139,7 +139,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -199,8 +199,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -228,8 +228,7 @@ export default {
this.$emit("select", { picked: null })
}
removeRESTFolder(this.folderPath)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
},

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

@@ -12,8 +12,8 @@
class="
cursor-pointer
flex
mx-2
w-12
px-2
w-16
justify-center
items-center
truncate
@@ -28,7 +28,7 @@
>
check_circle_outline
</i>
<span v-else>
<span v-else class="truncate">
{{ request.method }}
</span>
</span>

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

@@ -2,7 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -108,7 +108,7 @@
<CollectionsTeamsFolder
v-for="(folder, index) in collection.children"
:key="`folder-${folder}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
@@ -128,7 +128,7 @@
<CollectionsTeamsRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request.request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -152,7 +152,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -205,8 +205,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},

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

@@ -2,7 +2,7 @@
<div class="flex flex-col">
<div class="flex items-center group">
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -91,7 +91,7 @@
<CollectionsTeamsFolder
v-for="(subFolder, subFolderIndex) in folder.children"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
@@ -111,7 +111,7 @@
<CollectionsTeamsRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="border-l border-dividerLight ml-5"
class="border-l border-dividerLight ml-6"
:request="request.request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -134,7 +134,7 @@
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
ml-6
p-4
items-center
justify-center
@@ -189,8 +189,8 @@ export default {
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else return "folder"
},
},
@@ -221,14 +221,14 @@ export default {
teamUtils
.deleteCollection(this.$apollo, this.folder.id)
.then(() => {
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})

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

@@ -5,8 +5,8 @@
class="
cursor-pointer
flex
mx-2
w-12
px-2
w-16
justify-center
items-center
truncate

4
components/environments/Add.vue
View File

@@ -47,8 +47,8 @@ export default Vue.extend({
methods: {
addNewEnvironment() {
if (!this.name) {
this.$toast.info(this.$t("environment.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("environment.invalid_name").toString(), {
icon: "error_outline",
})
return
}

6
components/environments/Edit.vue
View File

@@ -159,7 +159,7 @@ export default defineComponent({
clearContent() {
this.vars = []
this.clearIcon = "done"
this.$toast.info(this.$t("state.cleared").toString(), {
this.$toast.success(this.$t("state.cleared").toString(), {
icon: "clear_all",
})
setTimeout(() => (this.clearIcon = "clear_all"), 1000)
@@ -175,8 +175,8 @@ export default defineComponent({
},
saveEnvironment() {
if (!this.name) {
this.$toast.info(this.$t("environment.invalid_name").toString(), {
icon: "info",
this.$toast.error(this.$t("environment.invalid_name").toString(), {
icon: "error_outline",
})
return
}

4
components/environments/Environment.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex items-center group">
<span
class="cursor-pointer flex w-10 justify-center items-center truncate"
class="cursor-pointer flex px-4 justify-center items-center"
@click="$emit('edit-environment')"
>
<i class="material-icons">layers</i>
@@ -82,7 +82,7 @@ export default Vue.extend({
removeEnvironment() {
if (this.environmentIndex !== "Global")
deleteEnvironment(this.environmentIndex)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

39
components/environments/ImportExport.vue
View File

@@ -23,7 +23,7 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
@@ -32,20 +32,23 @@
? $t('export.require_github')
: null
"
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createEnvironmentGist
$refs.options.tippy().hide()
"
/>
>
<SmartItem
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment_turned_in"
:label="$t('export.create_secret_gist')"
@click.native="
createEnvironmentGist
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</template>
@@ -143,7 +146,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -227,7 +230,7 @@ export default defineComponent({
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -235,7 +238,7 @@ export default defineComponent({
}, 1000)
},
fileImported() {
this.$toast.info(this.$t("state.file_imported"), {
this.$toast.success(this.$t("state.file_imported"), {
icon: "folder_shared",
})
},

10
components/firebase/Login.vue
View File

@@ -163,7 +163,7 @@ export default {
},
methods: {
showLoginSuccess() {
this.$toast.info(this.$t("auth.login_success"), {
this.$toast.success(this.$t("auth.login_success"), {
icon: "vpn_key",
})
},
@@ -222,7 +222,6 @@ export default {
return
}
this.$toast.info(`${this.$t("auth.account_exists")}`, {
icon: "vpn_key",
duration: null,
@@ -241,7 +240,7 @@ export default {
})
} else {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}
}
@@ -305,7 +304,6 @@ export default {
return
}
this.$toast.info(`${this.$t("auth.account_exists")}`, {
icon: "vpn_key",
duration: null,
@@ -324,7 +322,7 @@ export default {
})
} else {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}
}
@@ -346,7 +344,7 @@ export default {
.catch((e) => {
console.error(e)
this.$toast.error(e.message, {
icon: "error",
icon: "error_outline",
})
this.signingInWithEmail = false
})

5
components/firebase/Logout.vue
View File

@@ -31,14 +31,13 @@ export default Vue.extend({
async logout() {
try {
await signOutUser()
this.$toast.info(this.$t("auth.logged_out").toString(), {
this.$toast.success(this.$t("auth.logged_out").toString(), {
icon: "vpn_key",
})
} catch (e) {
console.error(e)
this.$toast.error(this.$t("error.something_went_wrong").toString(), {
icon: "error",
icon: "error_outline",
})
}
},

2
components/graphql/QueryEditor.vue
View File

@@ -182,7 +182,7 @@ export default {
this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
} catch (e) {
this.$toast.error(this.$t("error.gql_prettify_invalid_query"), {
icon: "error",
icon: "error_outline",
})
}
},

3
components/graphql/RequestOptions.vue
View File

@@ -23,7 +23,6 @@
<div class="flex">
<ButtonSecondary
:label="$t('request.run')"
:shortcut="[getSpecialKey(), 'Enter']"
icon="play_arrow"
class="rounded-none !text-accent"
@click.native="runQuery()"
@@ -401,7 +400,7 @@ export default defineComponent({
nuxt.value.$loading.finish()
$toast.error(`${e} ${t("error.f12_details").toString()}`, {
icon: "error",
icon: "error_outline",
})
console.error(e)
}

2
components/graphql/Response.vue
View File

@@ -152,7 +152,7 @@ export default defineComponent({
a.click()
downloadResponseIcon.value = "done"
$toast.success(t("state.download_started").toString(), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)

2
components/graphql/Sidebar.vue
View File

@@ -416,7 +416,7 @@ export default defineComponent({
a.click()
downloadSchemaIcon.value = "done"
$toast.success(t("state.download_started").toString(), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)

6
components/history/index.vue
View File

@@ -136,8 +136,7 @@ export default defineComponent({
clearHistory() {
if (this.page === "rest") clearRESTHistory()
else clearGraphqlHistory()
this.$toast.error(this.$t("state.history_deleted").toString(), {
this.$toast.success(this.$t("state.history_deleted").toString(), {
icon: "delete",
})
},
@@ -147,8 +146,7 @@ export default defineComponent({
deleteHistory(entry: any) {
if (this.page === "rest") deleteRESTHistoryEntry(entry)
else deleteGraphqlHistoryEntry(entry)
this.$toast.error(this.$t("state.deleted").toString(), {
this.$toast.success(this.$t("state.deleted").toString(), {
icon: "delete",
})
},

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

@@ -1,7 +1,7 @@
<template>
<div class="flex items-center group">
<span
class="cursor-pointer flex mx-2 w-12 justify-center items-center truncate"
class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
:class="entryStatus.className"
data-testid="restore_history_entry"
:title="duration"
@@ -32,7 +32,7 @@
icon="remove_circle_outline"
color="red"
:title="$t('action.remove')"
class="group-hover:inline-flex hidden"
class="hidden group-hover:inline-flex"
data-testid="delete_history_entry"
@click.native="$emit('delete-entry')"
/>

2
components/http/CodegenModal.vue
View File

@@ -140,7 +140,7 @@ export default defineComponent({
copyToClipboard(this.requestCode)
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
icon: "done",
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},

2
components/http/ImportCurl.vue
View File

@@ -128,7 +128,7 @@ export default defineComponent({
} catch (e) {
console.error(e)
this.$toast.error(this.$t("error.curl_invalid_format").toString(), {
icon: "error",
icon: "error_outline",
})
}
this.hideModal()

4
components/http/RawBody.vue
View File

@@ -108,7 +108,7 @@ export default defineComponent({
this.rawParamsBody = target.result
}
reader.readAsText(file)
this.$toast.info(this.$t("state.file_imported"), {
this.$toast.success(this.$t("state.file_imported"), {
icon: "attach_file",
})
} else {
@@ -127,7 +127,7 @@ export default defineComponent({
} catch (e) {
console.error(e)
this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
icon: "error",
icon: "error_outline",
})
}
},

98
components/http/Request.vue
View File

@@ -1,45 +1,48 @@
<template>
<div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex flex-1">
<div class="flex relative">
<tippy
ref="methodOptions"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<span class="select-wrapper">
<input
id="method"
class="
bg-primaryLight
border border-divider
rounded-l
cursor-pointer
flex
font-semibold
text-secondaryDark
py-2
px-4
w-28
hover:border-dividerDark
focus-visible:border-accent
"
:value="newMethod"
:readonly="!isCustomMethod"
@input="onSelectMethod($event.target.value)"
/>
</span>
</template>
<SmartItem
v-for="(method, index) in methods"
:key="`method-${index}`"
:label="method"
@click.native="onSelectMethod(method)"
/>
</tippy>
<label for="method">
<tippy
ref="methodOptions"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<span class="select-wrapper">
<input
id="method"
class="
bg-primaryLight
border border-divider
rounded-l
cursor-pointer
flex
font-semibold
text-secondaryDark
py-2
px-4
w-28
hover:border-dividerDark
focus-visible:border-accent
"
:value="newMethod"
:readonly="!isCustomMethod"
:placeholder="$t('request.method')"
@input="onSelectMethod($event.target.value)"
/>
</span>
</template>
<SmartItem
v-for="(method, index) in methods"
:key="`method-${index}`"
:label="method"
@click.native="onSelectMethod(method)"
/>
</tippy>
</label>
</div>
<div class="flex flex-1">
<SmartEnvInput
@@ -50,7 +53,6 @@
bg-primaryLight
border border-divider
flex
rounded-r
flex-1
text-secondaryDark
py-1
@@ -68,7 +70,6 @@
class="
bg-primaryLight
border border-divider
rounded-r
flex
text-secondaryDark
w-full
@@ -88,9 +89,8 @@
<div class="flex">
<ButtonPrimary
id="send"
class="rounded-r-none flex-1 min-w-20"
class="rounded-none flex-1 min-w-24"
:label="!loading ? $t('action.send') : $t('action.cancel')"
:shortcut="[getSpecialKey(), 'G']"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>
<span class="flex">
@@ -136,10 +136,10 @@
</tippy>
</span>
<ButtonSecondary
class="rounded-r-none flex-1 ml-2"
class="rounded-r-none ml-2"
:label="$t('request.save')"
:shortcut="[getSpecialKey(), 'S']"
outline
icon="save"
@click.native="saveRequest()"
/>
<span class="flex">
@@ -223,7 +223,6 @@ import {
getRESTRequest,
} from "~/newstore/RESTSession"
import { editRESTRequest } from "~/newstore/collections"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
import { runRESTRequest$ } from "~/helpers/RequestRunner"
import {
useStreamSubscriber,
@@ -339,8 +338,8 @@ export default defineComponent({
.catch(() => {})
} else {
copyToClipboard(window.location.href)
$toast.info(t("state.copied_to_clipboard").toString(), {
icon: "done",
$toast.success(t("state.copied_to_clipboard").toString(), {
icon: "content_paste",
})
}
}
@@ -401,7 +400,7 @@ export default defineComponent({
}
}
$toast.success(t("request.saved").toString(), {
icon: "done",
icon: "playlist_add_check",
})
}
@@ -431,7 +430,6 @@ export default defineComponent({
loading,
newSendRequest,
requestName: useRESTRequestName(),
getSpecialKey: getPlatformSpecialKey,
showCurlImportModal,
showCodegenModal,
showSaveRequestModal,

4
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -97,7 +97,7 @@ export default {
a.click()
this.downloadIcon = "done"
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -109,7 +109,7 @@ export default {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "done",
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},

2
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -102,7 +102,7 @@ export default {
a.click()
this.downloadIcon = "done"
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)

4
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -101,7 +101,7 @@ export default {
a.click()
this.downloadIcon = "done"
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -113,7 +113,7 @@ export default {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "done",
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},

4
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -93,7 +93,7 @@ export default {
a.click()
this.downloadIcon = "done"
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -105,7 +105,7 @@ export default {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "done",
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},

4
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -92,7 +92,7 @@ export default {
a.click()
this.downloadIcon = "done"
this.$toast.success(this.$t("state.download_started"), {
icon: "done",
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
@@ -104,7 +104,7 @@ export default {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "done",
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},

2
components/realtime/Mqtt.vue
View File

@@ -280,7 +280,7 @@ export default defineComponent({
})
} else {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}
this.manualDisconnect = false

2
components/realtime/Socketio.vue
View File

@@ -282,7 +282,7 @@ export default defineComponent({
} catch (e) {
this.handleError(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}

2
components/realtime/Sse.vue
View File

@@ -187,7 +187,7 @@ export default {
} catch (e) {
this.handleSSEError(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}
} else {

4
components/realtime/Websocket.vue
View File

@@ -322,7 +322,7 @@ export default defineComponent({
} catch (e) {
this.handleError(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}
@@ -406,7 +406,7 @@ export default defineComponent({
deleteProtocol({ index }) {
const oldProtocols = this.protocols.slice()
this.$delete(this.protocols, index)
this.$toast.error(this.$t("state.deleted"), {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
action: {
text: this.$t("action.undo"),

6
components/teams/Add.vue
View File

@@ -47,14 +47,14 @@ export default {
// We clear it early to give the UI a snappy feel
this.name = ""
if (!name) {
this.$toast.info(this.$t("empty.team_name"), {
icon: "info",
this.$toast.error(this.$t("empty.team_name"), {
icon: "error_outline",
})
return
}
if (name !== null && name.replace(/\s/g, "").length < 6) {
this.$toast.error(this.$t("team.name_length_insufficient"), {
icon: "error",
icon: "error_outline",
})
return
}

16
components/teams/Edit.vue
View File

@@ -251,7 +251,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -275,7 +275,7 @@ export default defineComponent({
this.$data.rename.replace(/\s/g, "").length < 6
) {
this.$toast.error(this.$t("team.name_length_insufficient"), {
icon: "error",
icon: "error_outline",
})
return
}
@@ -283,7 +283,7 @@ export default defineComponent({
this.$data.newMembers.forEach((element) => {
if (!this.validateEmail(element.key)) {
this.$toast.error(this.$t("team.invalid_email_format"), {
icon: "error",
icon: "error_outline",
})
invalidEmail = true
}
@@ -293,7 +293,7 @@ export default defineComponent({
this.$data.newMembers.forEach((element) => {
if (!element.value) {
this.$toast.error(this.$t("invalid_member_permission"), {
icon: "error",
icon: "error_outline",
})
invalidPermission = true
}
@@ -315,7 +315,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(e, {
icon: "done",
icon: "error_outline",
})
console.error(e)
})
@@ -335,7 +335,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(e, {
icon: "done",
icon: "error_outline",
})
console.error(e)
})
@@ -345,7 +345,7 @@ export default defineComponent({
this.name === this.$data.rename ? this.name : this.$data.rename
if (!/\S/.test(newName))
return this.$toast.error(this.$t("empty.team_name"), {
icon: "error",
icon: "error_outline",
})
// Call to the graphql mutation
if (this.name !== this.rename)
@@ -358,7 +358,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})

4
components/teams/Team.vue
View File

@@ -88,7 +88,7 @@ export default {
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -104,7 +104,7 @@ export default {
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})

2
layouts/default.vue
View File

@@ -155,7 +155,7 @@ export default defineComponent({
workbox.addEventListener("installed", (event: any) => {
if (event.isUpdate) {
this.$toast.show(this.$t("app.new_version_found").toString(), {
icon: "info",
icon: "download_for_offline",
duration: 0,
action: [
{

12
locales/en.json
View File

@@ -46,7 +46,7 @@
"reload": "Reload",
"home": "Home",
"invite": "Invite",
"invite_description": "In Hoppscotch, we designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
"invite_description": "Hoppscotch is an open source API development ecosystem. We designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
"invite_your_friends": "Invite your friends",
"join_discord_community": "Join our Discord community",
"keyboard_shortcuts": "Keyboard shortcuts",
@@ -94,11 +94,12 @@
"collection": {
"created": "Collection created",
"edit": "Edit Collection",
"invalid_name": "Please provide a valid name for the collection",
"invalid_name": "Please provide a name for the collection",
"my_collections": "My Collections",
"name": "My New Collection",
"new": "New Collection",
"save_as": "Save as",
"renamed": "Collection renamed",
"select": "Select a Collection",
"select_location": "Select location",
"select_team": "Select a team",
@@ -147,7 +148,7 @@
"environment": {
"create_new": "Create new environment",
"edit": "Edit Environment",
"invalid_name": "Please provide a valid name for the environment",
"invalid_name": "Please provide a name for the environment",
"new": "New Environment",
"no_environment": "No environment",
"select": "Select environment",
@@ -175,6 +176,7 @@
"folder": {
"created": "Folder created",
"edit": "Edit Folder",
"invalid_name": "Please provide a name for the folder",
"new": "New Folder",
"renamed": "Folder renamed"
},
@@ -255,9 +257,12 @@
"body": "Request Body",
"choose_language": "Choose language",
"content_type": "Content Type",
"invalid_name": "Please provide a name for the request",
"copy_link": "Copy link",
"duration": "Duration",
"added": "Request added",
"enter_curl": "Enter cURL",
"renamed": "Request renamed",
"generate_code": "Generate code",
"generated_code": "Generated code",
"header_list": "Header List",
@@ -325,7 +330,6 @@
"proxy_use_toggle": "Use the proxy middleware to send requests",
"read_the": "Read the",
"reset_default": "Reset to default",
"shortcuts_indicator": "Shortcuts indicator",
"sync": "Synchronise",
"sync_collections": "Collections",
"sync_description": "These settings are synced to cloud.",

2
newstore/settings.ts
View File

@@ -47,7 +47,6 @@ export type SettingsType = {
THEME_COLOR: HoppAccentColor
BG_COLOR: HoppBgColor
TELEMETRY_ENABLED: boolean
SHORTCUT_INDICATOR: boolean
LEFT_SIDEBAR: boolean
RIGHT_SIDEBAR: boolean
ZEN_MODE: boolean
@@ -73,7 +72,6 @@ export const defaultSettings: SettingsType = {
THEME_COLOR: "blue",
BG_COLOR: "system",
TELEMETRY_ENABLED: true,
SHORTCUT_INDICATOR: false,
LEFT_SIDEBAR: true,
RIGHT_SIDEBAR: true,
ZEN_MODE: false,

12
pages/documentation.vue
View File

@@ -119,7 +119,7 @@
sticky
"
>
<div
<span
v-tippy="{ theme: 'tooltip' }"
:title="
!currentUser
@@ -140,7 +140,7 @@
:label="$t('export.create_secret_gist')"
@click.native="createDocsGist"
/>
</div>
</span>
</div>
<div
v-for="(collection, index) in items"
@@ -236,7 +236,7 @@ export default defineComponent({
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
console.error(e)
})
@@ -250,7 +250,7 @@ export default defineComponent({
this.collectionJSON = target.result
}
reader.readAsText(file)
this.$toast.info(this.$t("state.file_imported"), {
this.$toast.success(this.$t("state.file_imported"), {
icon: "attach_file",
})
} else {
@@ -287,7 +287,7 @@ export default defineComponent({
this.items = JSON.parse(this.collectionJSON)
this.assignIDs(this.items, "", "#")
this.$toast.clear()
this.$toast.info(this.$t("state.docs_generated"), {
this.$toast.success(this.$t("state.docs_generated"), {
icon: "book",
})
const docsMarkdown = Mustache.render(
@@ -325,7 +325,7 @@ export default defineComponent({
} catch (e) {
console.error(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error",
icon: "error_outline",
})
}
},

16
pages/settings.vue
View File

@@ -185,19 +185,6 @@
}}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
:on="SHORTCUT_INDICATOR"
@change="toggleSetting('SHORTCUT_INDICATOR')"
>
{{ $t("settings.shortcuts_indicator") }}
{{
SHORTCUT_INDICATOR
? $t("state.enabled")
: $t("state.disabled")
}}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
:on="LEFT_SIDEBAR"
@@ -385,7 +372,6 @@ export default defineComponent({
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
SYNC_HISTORY: useSetting("syncHistory"),
TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
ZEN_MODE: useSetting("ZEN_MODE"),
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
@@ -464,7 +450,7 @@ export default defineComponent({
resetProxy() {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
this.clearIcon = "done"
this.$toast.info(this.$t("state.cleared").toString(), {
this.$toast.success(this.$t("state.cleared").toString(), {
icon: "clear_all",
})
setTimeout(() => (this.clearIcon = "clear_all"), 1000)