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

chore: minor ui improvements

Browse Source
This commit is contained in:
Liyas Thomas
2022-10-02 18:59:23 +05:30
parent 4bcc703444
commit ca71ffe3c2
3 changed files with 56 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -166,6 +166,7 @@ a {
@apply leading-body; @apply leading-body;
@apply border border-dividerDark; @apply border border-dividerDark;
@apply focus: outline-none; @apply focus: outline-none;
scroll-behavior: smooth;
.tippy-svg-arrow svg { .tippy-svg-arrow svg {
@apply fill-popover; @apply fill-popover;

75
packages/hoppscotch-app/src/components/app/Shortcuts.vue
View File

@@ -1,38 +1,42 @@
<template> <template>
<AppSlideOver :show="show" @close="close()"> <AppSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
<template #content> <template #content>
<div class="sticky top-0 z-10 flex flex-col bg-primary"> <div class="sticky top-0 z-10 flex flex-col bg-primary">
<div
class="flex items-center justify-between p-2 border-b border-dividerLight"
>
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<ButtonSecondary :icon="IconX" @click="close()" />
</div>
<div class="flex flex-col px-6 py-4 border-b border-dividerLight"> <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
<input <input
v-model="filterText" v-model="filterText"
type="search" type="search"
autocomplete="off" autocomplete="off"
class="flex px-4 py-2 border rounded bg-primaryContrast border-dividerLight focus-visible:border-divider" class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
:placeholder="`${t('action.search')}`" :placeholder="`${t('action.search')}`"
/> />
</div> </div>
</div> </div>
<div v-if="filterText" class="flex flex-col divide-y divide-dividerLight"> <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
<div <details
v-for="(map, mapIndex) in searchResults" v-for="(map, mapIndex) in searchResults"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="px-6 py-4 space-y-4" class="flex flex-col"
open
> >
<h1 class="font-semibold text-secondaryDark"> <summary
{{ t(map.item.section) }} class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
</h1> >
<AppShortcutsEntry <icon-lucide-chevron-right class="mr-2 indicator" />
v-for="(shortcut, index) in map.item.shortcuts" <span
:key="`shortcut-${index}`" class="font-semibold truncate capitalize-first text-secondaryDark"
:shortcut="shortcut" >
/> {{ t(map.item.section) }}
</div> </span>
</summary>
<div class="flex flex-col px-6 pb-4 space-y-2">
<AppShortcutsEntry
v-for="(shortcut, index) in map.item.shortcuts"
:key="`shortcut-${index}`"
:shortcut="shortcut"
/>
</div>
</details>
<div <div
v-if="searchResults.length === 0" v-if="searchResults.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@@ -44,27 +48,36 @@
</div> </div>
</div> </div>
<div v-else class="flex flex-col divide-y divide-dividerLight"> <div v-else class="flex flex-col divide-y divide-dividerLight">
<div <details
v-for="(map, mapIndex) in mappings" v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`" :key="`map-${mapIndex}`"
class="px-6 py-4 space-y-4" class="flex flex-col"
open
> >
<h1 class="font-semibold text-secondaryDark"> <summary
{{ t(map.section) }} class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
</h1> >
<AppShortcutsEntry <icon-lucide-chevron-right class="mr-2 indicator" />
v-for="(shortcut, shortcutIndex) in map.shortcuts" <span
:key="`map-${mapIndex}-shortcut-${shortcutIndex}`" class="font-semibold truncate capitalize-first text-secondaryDark"
:shortcut="shortcut" >
/> {{ t(map.section) }}
</div> </span>
</summary>
<div class="flex flex-col px-6 pb-4 space-y-2">
<AppShortcutsEntry
v-for="(shortcut, shortcutIndex) in map.shortcuts"
:key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
:shortcut="shortcut"
/>
</div>
</details>
</div> </div>
</template> </template>
</AppSlideOver> </AppSlideOver>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import IconX from "~icons/lucide/x"
import { computed, ref } from "vue" import { computed, ref } from "vue"
import Fuse from "fuse.js" import Fuse from "fuse.js"
import mappings from "~/helpers/shortcuts" import mappings from "~/helpers/shortcuts"

11
packages/hoppscotch-app/src/components/app/SlideOver.vue
View File

@@ -18,6 +18,15 @@
v-if="show" v-if="show"
class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96" class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96"
> >
<div
class="flex items-center justify-between p-2 border-b border-dividerLight"
>
<h3 class="ml-4 heading">{{ title }}</h3>
<span class="flex items-center">
<kbd class="mr-2 shortcut-key">ESC</kbd>
<ButtonSecondary :icon="IconX" @click="close()" />
</span>
</div>
<slot name="content"></slot> <slot name="content"></slot>
</aside> </aside>
</Transition> </Transition>
@@ -26,9 +35,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, watch } from "vue" import { onMounted, watch } from "vue"
import IconX from "~icons/lucide/x"
const props = defineProps<{ const props = defineProps<{
show: boolean show: boolean
title: string
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{