From 7082eb27db2bf5fa67ad728475b256bd6927480e Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 20 Aug 2021 15:08:54 +0530 Subject: [PATCH] refactor(ui): minor ui improvements --- assets/scss/styles.scss | 14 ++- assets/scss/themes.scss | 4 +- components/app/Footer.vue | 2 +- components/app/Share.vue | 2 +- components/app/Shortcuts.vue | 4 +- components/app/Support.vue | 2 +- components/button/Primary.vue | 8 +- components/button/Secondary.vue | 17 ++-- components/collections/Add.vue | 4 +- components/collections/AddFolder.vue | 4 +- components/collections/Edit.vue | 4 +- components/collections/EditFolder.vue | 4 +- components/collections/EditRequest.vue | 4 +- components/collections/ImportExport.vue | 39 ++++---- components/collections/SaveRequest.vue | 8 +- components/collections/graphql/Add.vue | 4 +- components/collections/graphql/Collection.vue | 15 ++- components/collections/graphql/Edit.vue | 4 +- components/collections/graphql/EditFolder.vue | 4 +- .../collections/graphql/EditRequest.vue | 4 +- components/collections/graphql/Folder.vue | 14 +-- .../collections/graphql/ImportExport.vue | 41 ++++---- components/collections/graphql/Request.vue | 6 +- components/collections/index.vue | 33 +++---- components/collections/my/Collection.vue | 12 +-- components/collections/my/Folder.vue | 15 ++- components/collections/my/Request.vue | 6 +- components/collections/teams/Collection.vue | 12 +-- components/collections/teams/Folder.vue | 16 +-- components/collections/teams/Request.vue | 4 +- components/environments/Add.vue | 4 +- components/environments/Edit.vue | 6 +- components/environments/Environment.vue | 4 +- components/environments/ImportExport.vue | 39 ++++---- components/firebase/Login.vue | 10 +- components/firebase/Logout.vue | 5 +- components/graphql/QueryEditor.vue | 2 +- components/graphql/RequestOptions.vue | 3 +- components/graphql/Response.vue | 2 +- components/graphql/Sidebar.vue | 2 +- components/history/index.vue | 6 +- components/history/rest/Card.vue | 4 +- components/http/CodegenModal.vue | 2 +- components/http/ImportCurl.vue | 2 +- components/http/RawBody.vue | 4 +- components/http/Request.vue | 98 +++++++++---------- .../lenses/renderers/HTMLLensRenderer.vue | 4 +- .../lenses/renderers/ImageLensRenderer.vue | 2 +- .../lenses/renderers/JSONLensRenderer.vue | 4 +- .../lenses/renderers/RawLensRenderer.vue | 4 +- .../lenses/renderers/XMLLensRenderer.vue | 4 +- components/realtime/Mqtt.vue | 2 +- components/realtime/Socketio.vue | 2 +- components/realtime/Sse.vue | 2 +- components/realtime/Websocket.vue | 4 +- components/teams/Add.vue | 6 +- components/teams/Edit.vue | 16 +-- components/teams/Team.vue | 4 +- layouts/default.vue | 2 +- locales/en.json | 12 ++- newstore/settings.ts | 2 - pages/documentation.vue | 12 +-- pages/settings.vue | 16 +-- 63 files changed, 296 insertions(+), 305 deletions(-) diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index 5991a9a46..6fce38aa5 100644 --- a/assets/scss/styles.scss +++ b/assets/scss/styles.scss @@ -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 { diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss index 1fcdaf4a2..73246e918 100644 --- a/assets/scss/themes.scss +++ b/assets/scss/themes.scss @@ -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"; } diff --git a/components/app/Footer.vue b/components/app/Footer.vue index 3272c2d96..a820dcabb 100644 --- a/components/app/Footer.vue +++ b/components/app/Footer.vue @@ -50,7 +50,7 @@ /> diff --git a/components/app/Share.vue b/components/app/Share.vue index 50189fd75..89bd9a4b4 100644 --- a/components/app/Share.vue +++ b/components/app/Share.vue @@ -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) }, diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue index 67fa87f03..635952d4d 100644 --- a/components/app/Shortcuts.vue +++ b/components/app/Shortcuts.vue @@ -55,9 +55,9 @@ :key="`map-${mapIndex}`" class="space-y-4 py-4 px-6" > -
+

{{ $t(map.section) }} -

+
{{ label }} -
+
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"), - } - }, }) diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue index 64419cca7..b61129d0b 100644 --- a/components/button/Secondary.vue +++ b/components/button/Secondary.vue @@ -51,11 +51,18 @@ ]" /> {{ label }} -
+
{{ key }} @@ -65,7 +72,6 @@ diff --git a/components/collections/Add.vue b/components/collections/Add.vue index c17af8515..9fe0707e1 100644 --- a/components/collections/Add.vue +++ b/components/collections/Add.vue @@ -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 } diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue index d018349a5..7288d4b02 100644 --- a/components/collections/AddFolder.vue +++ b/components/collections/AddFolder.vue @@ -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 } diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue index 75c6910d2..7cd0b0b53 100644 --- a/components/collections/Edit.vue +++ b/components/collections/Edit.vue @@ -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 } diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue index 013f5c3be..0f32e1b3c 100644 --- a/components/collections/EditFolder.vue +++ b/components/collections/EditFolder.vue @@ -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 } diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue index 149f91015..ea13e7f4f 100644 --- a/components/collections/EditRequest.vue +++ b/components/collections/EditRequest.vue @@ -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 } diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue index 52b4799d8..2899b41f2 100644 --- a/components/collections/ImportExport.vue +++ b/components/collections/ImportExport.vue @@ -43,7 +43,7 @@ $refs.options.tippy().hide() " /> - + > + + @@ -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 }) { diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue index c86dcd0a0..72fb5f5ec 100644 --- a/components/collections/SaveRequest.vue +++ b/components/collections/SaveRequest.vue @@ -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() diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue index 2a8fe99f4..07801de8f 100644 --- a/components/collections/graphql/Add.vue +++ b/components/collections/graphql/Add.vue @@ -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 } diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue index a190b9464..1393a70d9 100644 --- a/components/collections/graphql/Collection.vue +++ b/components/collections/graphql/Collection.vue @@ -10,7 +10,7 @@ @dragend="dragging = false" > @@ -93,7 +93,7 @@ @@ -89,7 +89,7 @@ - + > + + @@ -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 }) { diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue index 4356536b5..a736eacf2 100644 --- a/components/collections/graphql/Request.vue +++ b/components/collections/graphql/Request.vue @@ -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", }) }, diff --git a/components/collections/index.vue b/components/collections/index.vue index f01004430..39fe83082 100644 --- a/components/collections/index.vue +++ b/components/collections/index.vue @@ -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) }) diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue index be63d4cfe..b8af7928f 100644 --- a/components/collections/my/Collection.vue +++ b/components/collections/my/Collection.vue @@ -10,7 +10,7 @@ @dragend="dragging = false" > @@ -112,7 +112,7 @@ @@ -94,7 +94,7 @@ {{ request.method }} diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue index 567969a43..5a0655a42 100644 --- a/components/collections/teams/Collection.vue +++ b/components/collections/teams/Collection.vue @@ -2,7 +2,7 @@
@@ -108,7 +108,7 @@
@@ -91,7 +91,7 @@ { - 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) }) diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue index f4180c23c..b132a60d9 100644 --- a/components/collections/teams/Request.vue +++ b/components/collections/teams/Request.vue @@ -5,8 +5,8 @@ class=" cursor-pointer flex - mx-2 - w-12 + px-2 + w-16 justify-center items-center truncate diff --git a/components/environments/Add.vue b/components/environments/Add.vue index a4c77ae95..ba21f1afa 100644 --- a/components/environments/Add.vue +++ b/components/environments/Add.vue @@ -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 } diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue index 42bbb0f14..8cc11c095 100644 --- a/components/environments/Edit.vue +++ b/components/environments/Edit.vue @@ -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 } diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue index 668bc75e8..b355b0280 100644 --- a/components/environments/Environment.vue +++ b/components/environments/Environment.vue @@ -1,7 +1,7 @@ @@ -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", }) }, diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue index 7c3da52c2..0ea3c3d9e 100644 --- a/components/firebase/Login.vue +++ b/components/firebase/Login.vue @@ -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 }) diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue index 1b79c059c..641ac568c 100644 --- a/components/firebase/Logout.vue +++ b/components/firebase/Logout.vue @@ -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", }) } }, diff --git a/components/graphql/QueryEditor.vue b/components/graphql/QueryEditor.vue index 4ae821859..438b5ae2a 100644 --- a/components/graphql/QueryEditor.vue +++ b/components/graphql/QueryEditor.vue @@ -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", }) } }, diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue index ce0a0bf31..de8c340e5 100644 --- a/components/graphql/RequestOptions.vue +++ b/components/graphql/RequestOptions.vue @@ -23,7 +23,6 @@
{ document.body.removeChild(a) diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue index 96092585e..318bb892c 100644 --- a/components/graphql/Sidebar.vue +++ b/components/graphql/Sidebar.vue @@ -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) diff --git a/components/history/index.vue b/components/history/index.vue index 7398903cb..8d137a45a 100644 --- a/components/history/index.vue +++ b/components/history/index.vue @@ -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", }) }, diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue index 1147bf8af..59de44296 100644 --- a/components/history/rest/Card.vue +++ b/components/history/rest/Card.vue @@ -1,7 +1,7 @@