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

feat: placeholder component in hoppscotch-ui (#3123)

Browse Source 
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-06-21 00:39:16 +06:00
committed by GitHub
parent 331d482b22
commit fc3e3aeaec
43 changed files with 378 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
View File

@@ -171,21 +171,14 @@
@duplicate-request="$emit('duplicate-request', $event)"
@select="$emit('select', $event)"
/>
<div
<HoppSmartPlaceholder
v-if="
collection.folders.length === 0 && collection.requests.length === 0
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/pack.svg`"
:alt="`${t('empty.collection')}`"
:text="t('empty.collection')"
>
<img
:src="`/images/states/${colorMode.value}/pack.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.collection')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.collection") }}
</span>
<HoppButtonSecondary
:label="t('add.new')"
filled
@@ -196,7 +189,7 @@
})
"
/>
</div>
</HoppSmartPlaceholder>
</div>
</div>
<HoppSmartConfirmModal

18
packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
View File

@@ -160,25 +160,19 @@
@duplicate-request="emit('duplicate-request', $event)"
@select="emit('select', $event)"
/>
<div
<HoppSmartPlaceholder
v-if="
folder.folders &&
folder.folders.length === 0 &&
folder.requests &&
folder.requests.length === 0
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/pack.svg`"
:alt="`${t('empty.folder')}`"
:text="t('empty.folder')"
>
<img
:src="`/images/states/${colorMode.value}/pack.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.folder')}`"
/>
<span class="text-center">
{{ t("empty.folder") }}
</span>
</div>
</HoppSmartPlaceholder>
</div>
</div>
<HoppSmartConfirmModal

30
packages/hoppscotch-common/src/components/collections/graphql/index.vue
View File

@@ -60,35 +60,27 @@
@select="$emit('select', $event)"
/>
</div>
<div
<HoppSmartPlaceholder
v-if="collections.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/pack.svg`"
:alt="`${t('empty.collections')}`"
:text="t('empty.collections')"
>
<img
:src="`/images/states/${colorMode.value}/pack.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="t('empty.collections')"
/>
<span class="pb-4 text-center">
{{ t("empty.collections") }}
</span>
<HoppButtonSecondary
:label="t('add.new')"
filled
outline
@click="displayModalAdd(true)"
/>
</div>
<div
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ filterText }}"
</span>
</div>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
<CollectionsGraphqlAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"