From 0eacd6763b58963618296ad3e10bd4b244544268 Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Mon, 28 Aug 2023 18:15:00 +0530 Subject: [PATCH] chore: improved command labels and icons (#3295) * chore: improved command labels and icons * chore: fix tests --------- Co-authored-by: Andrew Bastin --- packages/hoppscotch-common/locales/en.json | 33 ++++++------ .../inspection/__tests__/index.spec.ts | 3 +- .../spotlight/searchers/general.searcher.ts | 10 ++-- .../spotlight/searchers/settings.searcher.ts | 50 ++++++++++++++----- .../spotlight/searchers/tab.searcher.ts | 17 ++++--- 5 files changed, 72 insertions(+), 41 deletions(-) diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json index bb85a0270..8bb18e889 100644 --- a/packages/hoppscotch-common/locales/en.json +++ b/packages/hoppscotch-common/locales/en.json @@ -653,11 +653,12 @@ "chat": "Chat with support", "open_docs": "Read Documentation", "open_keybindings": "Keyboard shortcuts", + "open_github": "Open GitHub repository", "social": "Social", "title": "General" }, "miscellaneous": { - "invite": "Invite people to Hoppscotch", + "invite": "Invite your friends to Hoppscotch", "title": "Miscellaneous" }, "request": { @@ -679,25 +680,25 @@ "environments": { "new": "Create new environment", "new_variable": "Create a new environment variable", - "edit": "Edit selected environment", - "delete": "Delete selected environment", - "duplicate": "Duplicate selected environment", + "edit": "Edit current environment", + "delete": "Delete current environment", + "duplicate": "Duplicate current environment", "edit_global": "Edit global environment", "duplicate_global": "Duplicate global environment", "title": "Environments" }, "workspace": { "new": "Create new team", - "edit": "Edit selected team", - "delete": "Delete selected team", + "edit": "Edit current team", + "delete": "Delete current team", "invite": "Invite people to team", - "switch_to_personal": "Switch to personal workspace", + "switch_to_personal": "Switch to your personal workspace", "title": "Teams" }, "tab": { - "duplicate": "Duplicate tab", + "duplicate": "Duplicate current tab", "close_current": "Close current tab", - "close_others": "Close other tabs", + "close_others": "Close all other tabs", "new_tab": "Open a new tab", "title": "Tabs" }, @@ -710,15 +711,15 @@ "change_language": "Change Language", "settings": { "theme": { - "black": "Black Mode", - "dark": "Dark Mode", - "light": "Light Mode", - "system": "System Mode" + "black": "Black", + "dark": "Dark", + "light": "Light", + "system": "System preference" }, "font": { - "size_sm": "Change to Small", - "size_md": "Change to Medium", - "size_lg": "Change to Large" + "size_sm": "Small", + "size_md": "Medium", + "size_lg": "Large" }, "change_interceptor": "Change Interceptor", "change_language": "Change Language" diff --git a/packages/hoppscotch-common/src/services/inspection/__tests__/index.spec.ts b/packages/hoppscotch-common/src/services/inspection/__tests__/index.spec.ts index c4621af03..8205fd335 100644 --- a/packages/hoppscotch-common/src/services/inspection/__tests__/index.spec.ts +++ b/packages/hoppscotch-common/src/services/inspection/__tests__/index.spec.ts @@ -1,6 +1,7 @@ import { describe, it, expect } from "vitest" import { Inspector, InspectionService, InspectorResult } from "../" import { TestContainer } from "dioc/testing" +import { ref } from "vue" const inspectorResultMock: InspectorResult[] = [ { @@ -21,7 +22,7 @@ const inspectorResultMock: InspectorResult[] = [ const testInspector: Inspector = { inspectorID: "inspector1", - getInspectorFor: () => inspectorResultMock, + getInspections: () => ref(inspectorResultMock), } describe("InspectionService", () => { diff --git a/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts b/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts index d05dca9a9..cfa3fbf37 100644 --- a/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts +++ b/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts @@ -9,9 +9,9 @@ import { import IconLinkedIn from "~icons/brands/linkedin" import IconTwitter from "~icons/brands/twitter" -import IconBook from "~icons/lucide/book" -import IconDiscord from "~icons/lucide/link" +import IconDiscord from "~icons/brands/discord" import IconGitHub from "~icons/lucide/github" +import IconBook from "~icons/lucide/book" import IconLifeBuoy from "~icons/lucide/life-buoy" import IconZap from "~icons/lucide/zap" @@ -61,9 +61,9 @@ export class GeneralSpotlightSearcherService extends StaticSpotlightSearcherServ invokeAction("flyouts.keybinds.toggle") }, }, - link_github: { - text: [this.t("spotlight.general.social"), "GitHub"], - alternates: ["social", "github", "link"], + open_github: { + text: this.t("spotlight.general.open_github"), + alternates: ["repository", "github", "documentation", "hoppscotch"], icon: markRaw(IconGitHub), action: () => this.openURL("https://hoppscotch.io/github"), }, diff --git a/packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts b/packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts index 8b53dce39..3a980de99 100644 --- a/packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts +++ b/packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts @@ -14,11 +14,11 @@ import IconGlobe from "~icons/lucide/globe" import IconMonitor from "~icons/lucide/monitor" import IconMoon from "~icons/lucide/moon" import IconSun from "~icons/lucide/sun" -import IconType from "~icons/lucide/type" +import IconCircle from "~icons/lucide/circle" +import IconCheckCircle from "~icons/lucide/check-circle" type Doc = { text: string | string[] - excludeFromSearch?: boolean alternates: string[] icon: object | Component } @@ -35,6 +35,7 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer private t = getI18n() private activeFontSize = useSetting("FONT_SIZE") + private activeTheme = useSetting("BG_COLOR") public readonly searcherID = "settings" public searcherSectionTitle = this.t("navigation.settings") @@ -48,7 +49,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer this.t("spotlight.settings.theme.system"), ], alternates: ["theme"], - icon: markRaw(IconMonitor), + icon: computed(() => + this.activeTheme.value === "system" + ? markRaw(IconCheckCircle) + : markRaw(IconMonitor) + ), }, theme_light: { text: [ @@ -56,7 +61,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer this.t("spotlight.settings.theme.light"), ], alternates: ["theme"], - icon: markRaw(IconSun), + icon: computed(() => + this.activeTheme.value === "light" + ? markRaw(IconCheckCircle) + : markRaw(IconSun) + ), }, theme_dark: { text: [ @@ -64,7 +73,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer this.t("spotlight.settings.theme.dark"), ], alternates: ["theme"], - icon: markRaw(IconCloud), + icon: computed(() => + this.activeTheme.value === "dark" + ? markRaw(IconCheckCircle) + : markRaw(IconCloud) + ), }, theme_black: { text: [ @@ -72,7 +85,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer this.t("spotlight.settings.theme.black"), ], alternates: ["theme"], - icon: markRaw(IconMoon), + icon: computed(() => + this.activeTheme.value === "black" + ? markRaw(IconCheckCircle) + : markRaw(IconMoon) + ), }, font_size_sm: { text: [ @@ -82,42 +99,51 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer onClick: () => { console.log("clicked") }, - excludeFromSearch: computed(() => this.activeFontSize.value === "small"), alternates: [ "font size", "change font size", "change font", "increase font", ], - icon: markRaw(IconType), + icon: computed(() => + this.activeFontSize.value === "small" + ? markRaw(IconCheckCircle) + : markRaw(IconCircle) + ), }, font_size_md: { text: [ this.t("settings.font_size"), this.t("spotlight.settings.font.size_md"), ], - excludeFromSearch: computed(() => this.activeFontSize.value === "medium"), alternates: [ "font size", "change font size", "change font", "increase font", ], - icon: markRaw(IconType), + icon: computed(() => + this.activeFontSize.value === "medium" + ? markRaw(IconCheckCircle) + : markRaw(IconCircle) + ), }, font_size_lg: { text: [ this.t("settings.font_size"), this.t("spotlight.settings.font.size_lg"), ], - excludeFromSearch: computed(() => this.activeFontSize.value === "large"), alternates: [ "font size", "change font size", "change font", "increase font", ], - icon: markRaw(IconType), + icon: computed(() => + this.activeFontSize.value === "large" + ? markRaw(IconCheckCircle) + : markRaw(IconCircle) + ), }, change_lang: { text: [ diff --git a/packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts b/packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts index 6240c8abc..c36d9f0e5 100644 --- a/packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts +++ b/packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts @@ -15,7 +15,10 @@ import { currentTabID, getActiveTabs, } from "~/helpers/rest/tab" -import IconWindow from "~icons/lucide/app-window" +import IconCopy from "~icons/lucide/copy" +import IconCopyPlus from "~icons/lucide/copy-plus" +import IconXCircle from "~icons/lucide/x-circle" +import IconXSquare from "~icons/lucide/x-square" import { invokeAction } from "~/helpers/actions" type Doc = { @@ -50,29 +53,29 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService< duplicate_tab: { text: this.t("spotlight.tab.duplicate"), alternates: ["tab", "duplicate", "duplicate tab"], - icon: markRaw(IconWindow), + icon: markRaw(IconCopy), excludeFromSearch: computed(() => !this.showAction.value), }, close_current_tab: { text: this.t("spotlight.tab.close_current"), alternates: ["tab", "close", "close tab"], - icon: markRaw(IconWindow), + icon: markRaw(IconXCircle), excludeFromSearch: computed( - () => !this.showAction.value ?? getActiveTabs().value.length === 1 + () => !this.showAction.value || getActiveTabs().value.length === 1 ), }, close_other_tabs: { text: this.t("spotlight.tab.close_others"), alternates: ["tab", "close", "close all"], - icon: markRaw(IconWindow), + icon: markRaw(IconXSquare), excludeFromSearch: computed( - () => !this.showAction.value ?? getActiveTabs().value.length < 2 + () => !this.showAction.value || getActiveTabs().value.length < 2 ), }, open_new_tab: { text: this.t("spotlight.tab.new_tab"), alternates: ["tab", "new", "open tab"], - icon: markRaw(IconWindow), + icon: markRaw(IconCopyPlus), excludeFromSearch: computed(() => !this.showAction.value), }, })