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

refactor: full-width modal for search, transparent tabs

Browse Source
This commit is contained in:
liyasthomas
2021-08-29 09:44:46 +05:30
parent 16b9a2b06e
commit 647599e5aa
10 changed files with 63 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/app/Lunr.vue
View File

@@ -4,7 +4,6 @@
v-for="(shortcut, shortcutIndex) in theOutput"
:key="`shortcut-${shortcutIndex}`"
class="
rounded
cursor-pointer
flex
py-2
@@ -16,10 +15,11 @@
"
@click="$emit('action', shortcut.action)"
>
<i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
{{ shortcut.icon }}
</i>
<span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
<SmartIcon
class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
:name="shortcut.icon"
/>
<span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
{{ $t(shortcut.label) }}
</span>
<span

30
components/app/Search.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<SmartModal v-if="show" full-width @close="$emit('hide-modal')">
<template #body>
<input
id="command"
@@ -11,11 +11,11 @@
class="
bg-transparent
border-b border-dividerLight
flex flex-shrink-0
text-secondaryDark text-base
leading-normal
px-4
pt-2
pb-6
py-4
px-6
"
/>
<AppLunr
@@ -37,18 +37,17 @@
"
>
<div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
<h5 class="my-2 text-secondaryLight py-2 px-4">
<h5 class="my-2 text-secondaryLight py-2 px-6">
{{ $t(map.section) }}
</h5>
<div
v-for="(shortcut, shortcutIndex) in map.shortcuts"
:key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
class="
rounded
cursor-pointer
flex
py-2
px-4
px-6
transition
items-center
group
@@ -56,10 +55,19 @@
"
@click="runAction(shortcut.action)"
>
<i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
{{ shortcut.icon }}
</i>
<span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
<SmartIcon
class="
mr-4
opacity-75
transition
svg-icons
group-hover:opacity-100
"
:name="shortcut.icon"
/>
<span
class="flex flex-1 mr-4 transition group-hover:text-secondaryDark"
>
{{ $t(shortcut.label) }}
</span>
<span

2
components/graphql/RequestOptions.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
<SmartTab :id="'query'" :label="$t('tab.query')" :selected="true">
<AppSection label="query">
<div

4
components/graphql/Sidebar.vue
View File

@@ -1,6 +1,6 @@
<template>
<aside>
<SmartTabs styles="sticky z-10 top-0">
<SmartTabs styles="sticky bg-primary z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
@@ -22,7 +22,7 @@
</div>
<SmartTabs
ref="gqlTabs"
styles="border-t border-dividerLight sticky z-10 top-sidebarSecondaryStickyFold"
styles="border-t border-dividerLight bg-primary sticky z-10 top-sidebarSecondaryStickyFold"
>
<div class="gqlTabs">
<SmartTab

2
components/lenses/ResponseBodyRenderer.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartTabs styles="sticky z-10 top-lowerPrimaryStickyFold">
<SmartTabs styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold">
<SmartTab
v-for="(lens, index) in validLenses"
:id="lens.renderer"

13
components/smart/Modal.vue
View File

@@ -37,7 +37,6 @@
shadow-lg
text-left
w-full
p-4
transform
transition-all
inline-block
@@ -46,7 +45,10 @@
sm:max-w-md sm:align-middle
md:rounded-lg
"
:class="{ 'mt-24 md:mb-8': placement === 'top' }"
:class="[
{ 'mt-24 md:mb-8': placement === 'top' },
{ 'p-4': !fullWidth },
]"
>
<div
v-if="title"
@@ -64,7 +66,8 @@
</span>
</div>
<div
class="flex flex-col max-h-md py-2 overflow-y-auto hide-scrollbar"
class="flex flex-col max-h-md overflow-y-auto hide-scrollbar"
:class="{ 'py-2': !fullWidth }"
>
<slot name="body"></slot>
</div>
@@ -115,6 +118,10 @@ export default defineComponent({
type: String,
default: "top",
},
fullWidth: {
type: Boolean,
default: false,
},
},
setup() {
const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()

1
components/smart/Tabs.vue
View File

@@ -69,7 +69,6 @@ export default defineComponent({
@apply flex;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply bg-primary;
// &::after {
// @apply absolute;

44
helpers/shortcuts.js
View File

@@ -123,13 +123,13 @@ export const spotlight = [
keys: ["?"],
label: "shortcut.general.help_menu",
action: "modals.support.toggle",
icon: "support",
icon: "life-buoy",
},
{
keys: [getPlatformSpecialKey(), "K"],
label: "shortcut.general.show_all",
action: "flyouts.keybinds.toggle",
icon: "keyboard",
icon: "zap",
},
],
},
@@ -140,43 +140,43 @@ export const spotlight = [
keys: [getPlatformSpecialKey(), "←"],
label: "shortcut.navigation.back",
action: "navigation.jump.back",
icon: "arrow_forward",
icon: "arrow-right",
},
{
keys: [getPlatformSpecialKey(), "→"],
label: "shortcut.navigation.forward",
action: "navigation.jump.forward",
icon: "arrow_forward",
icon: "arrow-right",
},
{
keys: [getPlatformAlternateKey(), "R"],
label: "shortcut.navigation.rest",
action: "navigation.jump.rest",
icon: "arrow_forward",
icon: "arrow-right",
},
{
keys: [getPlatformAlternateKey(), "Q"],
label: "shortcut.navigation.graphql",
action: "navigation.jump.graphql",
icon: "arrow_forward",
icon: "arrow-right",
},
{
keys: [getPlatformAlternateKey(), "W"],
label: "shortcut.navigation.realtime",
action: "navigation.jump.realtime",
icon: "arrow_forward",
icon: "arrow-right",
},
{
keys: [getPlatformAlternateKey(), "D"],
label: "shortcut.navigation.documentation",
action: "navigation.jump.documentation",
icon: "arrow_forward",
icon: "arrow-right",
},
{
keys: [getPlatformAlternateKey(), "S"],
label: "shortcut.navigation.settings",
action: "navigation.jump.settings",
icon: "arrow_forward",
icon: "arrow-right",
},
],
},
@@ -187,7 +187,7 @@ export const spotlight = [
keys: [getPlatformSpecialKey(), "M"],
label: "shortcut.miscellaneous.invite",
action: "modals.share.toggle",
icon: "person_add_alt",
icon: "gift",
},
],
},
@@ -198,70 +198,70 @@ export const lunr = [
keys: ["?"],
label: "shortcut.general.help_menu",
action: "modals.support.toggle",
icon: "support",
tags: "help support documentation troubleshooting chat community feedback report bug issue ticket",
icon: "life-buoy",
tags: "help support menu discord twitter documentation troubleshooting chat community feedback report bug issue ticket",
},
{
keys: [getPlatformSpecialKey(), "K"],
label: "shortcut.general.show_all",
action: "flyouts.keybinds.toggle",
icon: "keyboard",
icon: "zap",
tags: "keyboard shortcuts",
},
{
keys: [getPlatformSpecialKey(), "←"],
label: "shortcut.navigation.back",
action: "navigation.jump.back",
icon: "arrow_forward",
icon: "arrow-right",
tags: "back jump page navigation go",
},
{
keys: [getPlatformSpecialKey(), "→"],
label: "shortcut.navigation.forward",
action: "navigation.jump.forward",
icon: "arrow_forward",
icon: "arrow-right",
tags: "forward jump next forward page navigation go",
},
{
keys: [getPlatformAlternateKey(), "R"],
label: "shortcut.navigation.rest",
action: "navigation.jump.rest",
icon: "arrow_forward",
icon: "arrow-right",
tags: "rest jump page navigation go",
},
{
keys: [getPlatformAlternateKey(), "Q"],
label: "shortcut.navigation.graphql",
action: "navigation.jump.graphql",
icon: "arrow_forward",
icon: "arrow-right",
tags: "graphql jump page navigation go",
},
{
keys: [getPlatformAlternateKey(), "W"],
label: "shortcut.navigation.realtime",
action: "navigation.jump.realtime",
icon: "arrow_forward",
icon: "arrow-right",
tags: "realtime jump page navigation websocket socket mqtt sse go",
},
{
keys: [getPlatformAlternateKey(), "D"],
label: "shortcut.navigation.documentation",
action: "navigation.jump.documentation",
icon: "arrow_forward",
icon: "arrow-right",
tags: "documentation jump page navigation go",
},
{
keys: [getPlatformAlternateKey(), "S"],
label: "shortcut.navigation.settings",
action: "navigation.jump.settings",
icon: "arrow_forward",
icon: "arrow-right",
tags: "settings jump page navigation account theme go",
},
{
keys: [getPlatformSpecialKey(), "M"],
label: "shortcut.miscellaneous.invite",
action: "modals.share.toggle",
icon: "person_add_alt",
tags: "invite share app social",
icon: "gift",
tags: "invite share app friends people social",
},
]

4
pages/index.vue
View File

@@ -4,7 +4,7 @@
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<HttpRequest />
<SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
<SmartTab
:id="'params'"
:label="$t('tab.parameters')"
@@ -55,7 +55,7 @@
class="hide-scrollbar !overflow-auto"
>
<aside>
<SmartTabs styles="sticky z-10 top-0">
<SmartTabs styles="sticky bg-primary z-10 top-0">
<SmartTab :id="'history'" :label="$t('tab.history')" :selected="true">
<History ref="historyComponent" :page="'rest'" />
</SmartTab>

2
pages/realtime.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartTabs
class="h-full overflow-hidden"
styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
>
<SmartTab
id="websocket"