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

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}`"