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

refactor: minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-12-15 23:06:35 +05:30
parent 78ed95bcaa
commit daffc3fe0e
31 changed files with 908 additions and 957 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/hoppscotch-app/components/app/Fuse.vue
View File

@@ -14,7 +14,7 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center my-2">
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ search }}"
</span>
</div>

8
packages/hoppscotch-app/components/app/PowerSearch.vue
View File

@@ -17,22 +17,22 @@
class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
/>
<div
class="flex pb-4 px-4 border-b text-tiny border-dividerLight justify-between text-secondaryLight whitespace-nowrap overflow-auto flex-shrink-0 hide-scrollbar"
class="border-b border-dividerLight flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar"
>
<div class="flex items-center">
<kbd class="shortcut-key">↑</kbd>
<kbd class="shortcut-key">↓</kbd>
<span class="truncate ml-2">
<span class="ml-2 truncate">
{{ t("action.to_navigate") }}
</span>
<kbd class="shortcut-key">↩</kbd>
<span class="truncate ml-2">
<span class="ml-2 truncate">
{{ t("action.to_select") }}
</span>
</div>
<div class="flex items-center">
<kbd class="shortcut-key">ESC</kbd>
<span class="truncate ml-2">
<span class="ml-2 truncate">
{{ t("action.to_close") }}
</span>
</div>

14
packages/hoppscotch-app/components/app/Section.vue
View File

@@ -1,14 +0,0 @@
<template>
<section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
<slot></slot>
</section>
</template>
<script setup lang="ts">
defineProps({
label: {
type: String,
default: "Section",
},
})
</script>

28
packages/hoppscotch-app/components/app/Shortcuts.vue
View File

@@ -1,29 +1,24 @@
<template>
<AppSlideOver :show="show" @close="close()">
<template #content>
<div
class="bg-primary border-b border-dividerLight flex p-2 top-0 z-10 sticky items-center justify-between"
>
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<div class="flex">
<div class="bg-primary flex flex-col top-0 z-10 sticky">
<div
class="border-b border-dividerLight flex p-2 items-center justify-between"
>
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<ButtonSecondary svg="x" @click.native="close()" />
</div>
</div>
<div class="bg-primary border-b border-dividerLight">
<div class="flex flex-col my-4 mx-6">
<div class="border-b border-dividerLight flex flex-col py-4 px-6">
<input
v-model="filterText"
type="search"
autocomplete="off"
class="bg-primaryLight border border-dividerLight rounded flex w-full py-2 px-4 focus-visible:border-divider"
class="bg-primaryLight border border-dividerLight rounded flex py-2 px-4 focus-visible:border-divider"
:placeholder="`${t('action.search')}`"
/>
</div>
</div>
<div
v-if="filterText"
class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
>
<div v-if="filterText" class="divide-dividerLight divide-y flex flex-col">
<div
v-for="(map, mapIndex) in searchResults"
:key="`map-${mapIndex}`"
@@ -43,15 +38,12 @@
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center my-2">
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ filterText }}"
</span>
</div>
</div>
<div
v-else
class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
>
<div v-else class="divide-dividerLight divide-y flex flex-col">
<div
v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`"

2
packages/hoppscotch-app/components/app/SlideOver.vue
View File

@@ -10,7 +10,7 @@
</div>
</transition>
<aside
class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto"
class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto hide-scrollbar"
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
>
<slot name="content"></slot>