From 1431ecc6d79708f89186bcec648a213ca0908d14 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Fri, 8 Sep 2023 22:02:39 +0530 Subject: [PATCH 01/26] refactor: keyboard shortcuts now supports different keyboard layouts including Dvorak (#3332) * refactor: support mulitple keyboard layouts such as dvorak * chore: replace redundant variable usage --- .../src/helpers/keybindings.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/hoppscotch-common/src/helpers/keybindings.ts b/packages/hoppscotch-common/src/helpers/keybindings.ts index ee01fa7dc84..9423bf9cb1b 100644 --- a/packages/hoppscotch-common/src/helpers/keybindings.ts +++ b/packages/hoppscotch-common/src/helpers/keybindings.ts @@ -56,7 +56,7 @@ export const bindings: { "alt-x": "request.method.delete", "ctrl-k": "modals.search.toggle", "ctrl-/": "flyouts.keybinds.toggle", - "?": "modals.support.toggle", + "shift-/": "modals.support.toggle", "ctrl-m": "modals.share.toggle", "alt-r": "navigation.jump.rest", "alt-q": "navigation.jump.graphql", @@ -120,7 +120,8 @@ function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null { } function getPressedKey(ev: KeyboardEvent): Key | null { - const val = ev.key.toLowerCase() + const val = ev.code.toLowerCase() + // Check arrow keys if (val === "arrowup") return "up" else if (val === "arrowdown") return "down" @@ -128,21 +129,20 @@ function getPressedKey(ev: KeyboardEvent): Key | null { else if (val === "arrowright") return "right" // Check letter keys - const isLetter = ev.code.toLowerCase().startsWith("key") - if (isLetter) return ev.code.toLowerCase().substring(3) as Key + const isLetter = val.startsWith("key") + if (isLetter) return val.substring(3) as Key // Check if number keys - if (val.length === 1 && !isNaN(val as any)) return val as Key - - // Check if question mark - if (val === "?") return "?" + const isDigit = val.startsWith("digit") + if (isDigit) return val.substring(5) as Key - // Check if question mark - if (val === "/") return "/" + // Check if slash + if (val === "slash") return "/" // Check if period - if (val === ".") return "." + if (val === "period") return "." + // Check if enter if (val === "enter") return "enter" // If no other cases match, this is not a valid key From 005581ee7da3e0ae268cccb20579ed44cb48f205 Mon Sep 17 00:00:00 2001 From: James George Date: Tue, 12 Sep 2023 00:02:10 -0700 Subject: [PATCH 02/26] fix: broken link to `REST API Testing` docs (#3333) fix: broken link to REST API Testing docs --- packages/hoppscotch-common/src/components/http/Parameters.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue index 58167981129..7e8ca2d5f8a 100644 --- a/packages/hoppscotch-common/src/components/http/Parameters.vue +++ b/packages/hoppscotch-common/src/components/http/Parameters.vue @@ -9,7 +9,7 @@
Date: Tue, 12 Sep 2023 13:12:44 +0600 Subject: [PATCH 03/26] fix: unusual behavior while scrolling through spotlight entries (#3324) * fix: spotlight scroll issue * fix: entry hidden issue * chore: back to loop mode --- .../src/components/app/spotlight/Entry.vue | 12 ++++++----- .../src/components/app/spotlight/index.vue | 20 ++++++++++++++++++- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue index 3312c87f714..8473e1927ee 100644 --- a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue +++ b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue @@ -80,11 +80,10 @@ const props = defineProps<{ active: boolean }>() -const formattedShortcutKeys = computed( - () => - props.entry.meta?.keyboardShortcut?.map((key) => { - return SPECIAL_KEY_CHARS[key] ?? capitalize(key) - }) +const formattedShortcutKeys = computed(() => + props.entry.meta?.keyboardShortcut?.map((key) => { + return SPECIAL_KEY_CHARS[key] ?? capitalize(key) + }) ) const emit = defineEmits<{ @@ -119,5 +118,8 @@ watch( &.active { @apply after:bg-accentLight; } + + scroll-padding: 4rem !important; + scroll-margin: 4rem !important; } diff --git a/packages/hoppscotch-common/src/components/app/spotlight/index.vue b/packages/hoppscotch-common/src/components/app/spotlight/index.vue index 95e575a1ee4..d79f5de19c0 100644 --- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue +++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue @@ -40,7 +40,7 @@ :key="`result-${result.id}`" :entry="result" :active="isEqual(selectedEntry, [sectionIndex, entryIndex])" - @mouseover="selectedEntry = [sectionIndex, entryIndex]" + @mouseover="onMouseOver($event, sectionIndex, entryIndex)" @action="runAction(sectionID, result)" />
@@ -178,6 +178,24 @@ function runAction(searcherID: string, result: SpotlightSearcherResult) { emit("hide-modal") } +let lastMousePosition: { x: number; y: number } + +const onMouseOver = ( + e: MouseEvent, + sectionIndex: number, + entryIndex: number +) => { + const mousePosition = { + x: e.clientX, + y: e.clientY, + } + + // if the position is same, do nothing + if (isEqual(lastMousePosition, mousePosition)) return + selectedEntry.value = [sectionIndex, entryIndex] + lastMousePosition = mousePosition +} + function newUseArrowKeysForNavigation() { const selectedEntry = ref<[number, number]>([0, 0]) // [sectionIndex, entryIndex] From 7201147b55d95df0b98a11d07fa56d2add6eca2d Mon Sep 17 00:00:00 2001 From: Nivedin <53208152+nivedin@users.noreply.github.com> Date: Tue, 12 Sep 2023 12:43:10 +0530 Subject: [PATCH 04/26] fix: context-menu position fixed while scrolling (#3340) --- .../src/components/smart/EnvInput.vue | 58 ++++++++++-------- .../src/composables/codemirror.ts | 61 +++++++++++-------- 2 files changed, 66 insertions(+), 53 deletions(-) diff --git a/packages/hoppscotch-common/src/components/smart/EnvInput.vue b/packages/hoppscotch-common/src/components/smart/EnvInput.vue index 41efe2e4220..246b149762a 100644 --- a/packages/hoppscotch-common/src/components/smart/EnvInput.vue +++ b/packages/hoppscotch-common/src/components/smart/EnvInput.vue @@ -311,35 +311,36 @@ const envVars = computed(() => const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view) -const initView = (el: any) => { - function handleTextSelection() { - const selection = view.value?.state.selection.main - if (selection) { - const from = selection.from - const to = selection.to - const text = view.value?.state.doc.sliceString(from, to) - const { top, left } = view.value?.coordsAtPos(from) - if (text) { - invokeAction("contextmenu.open", { - position: { - top, - left, - }, - text, - }) - showSuggestionPopover.value = false - } else { - invokeAction("contextmenu.open", { - position: { - top, - left, - }, - text: null, - }) - } +function handleTextSelection() { + const selection = view.value?.state.selection.main + if (selection) { + const from = selection.from + const to = selection.to + if (from === to) return + const text = view.value?.state.doc.sliceString(from, to) + const { top, left } = view.value?.coordsAtPos(from) + if (text) { + invokeAction("contextmenu.open", { + position: { + top, + left, + }, + text, + }) + showSuggestionPopover.value = false + } else { + invokeAction("contextmenu.open", { + position: { + top, + left, + }, + text: null, + }) } } +} +const initView = (el: any) => { // Debounce to prevent double click from selecting the word const debounceFn = useDebounceFn(() => { handleTextSelection() @@ -381,6 +382,11 @@ const initView = (el: any) => { drop(ev) { ev.preventDefault() }, + scroll(event) { + if (event.target) { + handleTextSelection() + } + }, }), ViewPlugin.fromClass( class { diff --git a/packages/hoppscotch-common/src/composables/codemirror.ts b/packages/hoppscotch-common/src/composables/codemirror.ts index 4ea8b411144..57966d1c37d 100644 --- a/packages/hoppscotch-common/src/composables/codemirror.ts +++ b/packages/hoppscotch-common/src/composables/codemirror.ts @@ -216,6 +216,33 @@ export function useCodemirror( ? new HoppEnvironmentPlugin(subscribeToStream, view) : null + function handleTextSelection() { + const selection = view.value?.state.selection.main + if (selection) { + const from = selection.from + const to = selection.to + const text = view.value?.state.doc.sliceString(from, to) + const { top, left } = view.value?.coordsAtPos(from) + if (text) { + invokeAction("contextmenu.open", { + position: { + top, + left, + }, + text, + }) + } else { + invokeAction("contextmenu.open", { + position: { + top, + left, + }, + text: null, + }) + } + } + } + const initView = (el: any) => { if (el) platform.ui?.onCodemirrorInstanceMount?.(el) @@ -226,33 +253,6 @@ export function useCodemirror( ViewPlugin.fromClass( class { update(update: ViewUpdate) { - function handleTextSelection() { - const selection = view.value?.state.selection.main - if (selection) { - const from = selection.from - const to = selection.to - const text = view.value?.state.doc.sliceString(from, to) - const { top, left } = view.value?.coordsAtPos(from) - if (text) { - invokeAction("contextmenu.open", { - position: { - top, - left, - }, - text, - }) - } else { - invokeAction("contextmenu.open", { - position: { - top, - left, - }, - text: null, - }) - } - } - } - // Debounce to prevent double click from selecting the word const debounceFn = useDebounceFn(() => { handleTextSelection() @@ -296,6 +296,13 @@ export function useCodemirror( } } ), + EditorView.domEventHandlers({ + scroll(event) { + if (event.target) { + handleTextSelection() + } + }, + }), EditorView.updateListener.of((update) => { if (options.extendedEditorConfig.readOnly) { update.view.contentDOM.inputMode = "none" From 65ef4db86f39030742596297777c4db66ec9ec34 Mon Sep 17 00:00:00 2001 From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Date: Tue, 12 Sep 2023 14:10:38 +0530 Subject: [PATCH 05/26] refactor: remove zen mode from the app (#3337) * refactor: remove zen mode from settings * refactor: remove zen mode from footer and options --- .../src/components/app/Footer.vue | 24 +------------------ .../src/components/app/Options.vue | 9 ------- .../hoppscotch-common/src/layouts/default.vue | 3 +-- .../src/newstore/settings.ts | 2 -- .../hoppscotch-common/src/pages/settings.vue | 13 ---------- 5 files changed, 2 insertions(+), 49 deletions(-) diff --git a/packages/hoppscotch-common/src/components/app/Footer.vue b/packages/hoppscotch-common/src/components/app/Footer.vue index d4df78f6208..fd44e7708aa 100644 --- a/packages/hoppscotch-common/src/components/app/Footer.vue +++ b/packages/hoppscotch-common/src/components/app/Footer.vue @@ -10,18 +10,6 @@ :class="{ '-rotate-180': !EXPAND_NAVIGATION }" @click="EXPAND_NAVIGATION = !EXPAND_NAVIGATION" /> - diff --git a/packages/hoppscotch-common/src/layouts/default.vue b/packages/hoppscotch-common/src/layouts/default.vue index 76a7a831c98..4d15b19a6d6 100644 --- a/packages/hoppscotch-common/src/layouts/default.vue +++ b/packages/hoppscotch-common/src/layouts/default.vue @@ -79,7 +79,6 @@ const router = useRouter() const showSearch = ref(false) const showSupport = ref(false) -const fontSize = useSetting("FONT_SIZE") const expandNavigation = useSetting("EXPAND_NAVIGATION") const rightSidebar = useSetting("SIDEBAR") const columnLayout = useSetting("COLUMN_LAYOUT") @@ -132,24 +131,9 @@ watch(mdAndLarger, () => { columnLayout.value = true } }) - -const spacerClass = computed(() => { - if (fontSize.value === "small" && expandNavigation.value) - return "spacer-small" - if (fontSize.value === "medium" && expandNavigation.value) - return "spacer-medium" - if (fontSize.value === "large" && expandNavigation.value) - return "spacer-large" - if ( - (fontSize.value === "small" || - fontSize.value === "medium" || - fontSize.value === "large") && - !expandNavigation.value - ) - return "spacer-expand" - - return "" -}) +const spacerClass = computed(() => + expandNavigation.value ? "spacer-small" : "spacer-expand" +) defineActionHandler("modals.search.toggle", () => { showSearch.value = !showSearch.value diff --git a/packages/hoppscotch-common/src/modules/theming.ts b/packages/hoppscotch-common/src/modules/theming.ts index 3be8ef88f98..5e90356d3f2 100644 --- a/packages/hoppscotch-common/src/modules/theming.ts +++ b/packages/hoppscotch-common/src/modules/theming.ts @@ -68,23 +68,9 @@ const applyAccentColor = (_app: App) => { ) } -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const applyFontSize = (_app: App) => { - const [pref] = useSettingStatic("FONT_SIZE") - - watch( - pref, - (newPref) => { - document.documentElement.setAttribute("data-font-size", newPref) - }, - { immediate: true } - ) -} - export default { onVueAppInit(app) { applyColorMode(app) applyAccentColor(app) - applyFontSize(app) }, } diff --git a/packages/hoppscotch-common/src/newstore/settings.ts b/packages/hoppscotch-common/src/newstore/settings.ts index 48b3f86d027..a6ab0e12b4a 100644 --- a/packages/hoppscotch-common/src/newstore/settings.ts +++ b/packages/hoppscotch-common/src/newstore/settings.ts @@ -23,10 +23,6 @@ export const HoppAccentColors = [ export type HoppAccentColor = (typeof HoppAccentColors)[number] -export const HoppFontSizes = ["small", "medium", "large"] as const - -export type HoppFontSize = (typeof HoppFontSizes)[number] - export type SettingsDef = { syncCollections: boolean syncHistory: boolean @@ -49,7 +45,6 @@ export type SettingsDef = { EXPAND_NAVIGATION: boolean SIDEBAR: boolean SIDEBAR_ON_LEFT: boolean - FONT_SIZE: HoppFontSize COLUMN_LAYOUT: boolean } @@ -75,7 +70,6 @@ export const getDefaultSettings = (): SettingsDef => ({ EXPAND_NAVIGATION: true, SIDEBAR: true, SIDEBAR_ON_LEFT: true, - FONT_SIZE: "small", COLUMN_LAYOUT: true, }) diff --git a/packages/hoppscotch-common/src/pages/settings.vue b/packages/hoppscotch-common/src/pages/settings.vue index ee8f7055c68..665ba16e732 100644 --- a/packages/hoppscotch-common/src/pages/settings.vue +++ b/packages/hoppscotch-common/src/pages/settings.vue @@ -1,6 +1,6 @@