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

13
packages/hoppscotch-common/src/components/app/Fuse.vue
View File

@@ -10,15 +10,14 @@
@mouseover="selectedEntry = shortcutIndex"
/>
</div>
<div
<HoppSmartPlaceholder
v-if="searchResults.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${search}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ search }}"
</span>
</div>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
</div>
</template>

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

@@ -39,15 +39,14 @@
/>
</div>
</details>
<div
<HoppSmartPlaceholder
v-if="searchResults.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>
</div>
<div v-else class="flex flex-col divide-y divide-dividerLight">
<details

81
packages/hoppscotch-common/src/components/collections/MyCollections.vue
View File

@@ -243,49 +243,33 @@
/>
</template>
<template #emptyNode="{ node }">
<div
<HoppSmartPlaceholder
v-if="filterText.length !== 0 && filteredCollections.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>
<div v-else-if="node === null">
<div
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<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.collections')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.collections") }}
</span>
<HoppButtonSecondary
:label="t('add.new')"
filled
outline
@click="emit('display-modal-add')"
/>
</div>
</div>
<div
v-else-if="node.data.type === 'collections'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-else-if="node === null"
: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 mb-4"
:alt="`${t('empty.collection')}`"
<HoppButtonSecondary
:label="t('add.new')"
filled
outline
@click="emit('display-modal-add')"
/>
<span class="pb-4 text-center">
{{ t("empty.collection") }}
</span>
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-else-if="node.data.type === 'collections'"
:src="`/images/states/${colorMode.value}/pack.svg`"
:alt="`${t('empty.collections')}`"
:text="t('empty.collections')"
>
<HoppButtonSecondary
:label="t('add.new')"
filled
@@ -298,21 +282,14 @@
})
"
/>
</div>
<div
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-else-if="node.data.type === 'folders'"
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>
</template>
</SmartTree>
</div>

78
packages/hoppscotch-common/src/components/collections/TeamCollections.vue
View File

@@ -262,67 +262,53 @@
</template>
<template #emptyNode="{ node }">
<div v-if="node === null">
<div
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@drop="(e) => e.stopPropagation()"
>
<img
<div @drop="(e) => e.stopPropagation()">
<HoppSmartPlaceholder
: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.collections") }}
</span>
<HoppButtonSecondary
v-if="hasNoTeamAccess"
v-tippy="{ theme: 'tooltip' }"
disabled
filled
outline
:title="t('team.no_access')"
:label="t('action.new')"
/>
<HoppButtonSecondary
v-else
:icon="IconPlus"
:label="t('action.new')"
filled
outline
@click="emit('display-modal-add')"
/>
:alt="`${t('empty.collections')}`"
:text="t('empty.collections')"
>
<HoppButtonSecondary
v-if="hasNoTeamAccess"
v-tippy="{ theme: 'tooltip' }"
disabled
filled
outline
:title="t('team.no_access')"
:label="t('action.new')"
/>
<HoppButtonSecondary
v-else
:icon="IconPlus"
:label="t('action.new')"
filled
outline
@click="emit('display-modal-add')"
/>
</HoppSmartPlaceholder>
</div>
</div>
<div
v-else-if="node.data.type === 'collections'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@drop="(e) => e.stopPropagation()"
>
<img
<HoppSmartPlaceholder
: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.collections") }}
</span>
:alt="`${t('empty.collections')}`"
:text="t('empty.collections')"
>
</HoppSmartPlaceholder>
</div>
<div
v-else-if="node.data.type === 'folders'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@drop="(e) => e.stopPropagation()"
>
<img
<HoppSmartPlaceholder
: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>
:text="t('empty.folder')"
>
</HoppSmartPlaceholder>
</div>
</template>
</SmartTree>

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)"

35
packages/hoppscotch-common/src/components/environments/Selector.vue
View File

@@ -70,20 +70,13 @@
}
"
/>
<div
<HoppSmartPlaceholder
v-if="myEnvironments.length === 0"
class="flex flex-col items-center justify-center text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.environments')}`"
:text="t('empty.environments')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-2 text-center">
{{ t("empty.environments") }}
</span>
</div>
</HoppSmartPlaceholder>
</HoppSmartTab>
<HoppSmartTab
:id="'team-environments'"
@@ -119,20 +112,14 @@
}
"
/>
<div
<HoppSmartPlaceholder
v-if="teamEnvironmentList.length === 0"
class="flex flex-col items-center justify-center text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.environments')}`"
:text="t('empty.environments')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-2 text-center">
{{ t("empty.environments") }}
</span>
</div>
</HoppSmartPlaceholder>
</div>
<div
v-if="!teamListLoading && teamAdapterError"

17
packages/hoppscotch-common/src/components/environments/my/Details.vue
View File

@@ -79,26 +79,19 @@
/>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="vars.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.environments')}`"
:text="t('empty.environments')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<HoppButtonSecondary
:label="`${t('add.new')}`"
filled
class="mb-4"
@click="addEnvironmentVariable"
/>
</div>
</HoppSmartPlaceholder>
</div>
</div>
</template>

17
packages/hoppscotch-common/src/components/environments/my/index.vue
View File

@@ -32,19 +32,12 @@
:environment="environment"
@edit-environment="editEnvironment(index)"
/>
<div
<HoppSmartPlaceholder
v-if="environments.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.environments')}`"
:text="t('empty.environments')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<HoppButtonSecondary
:label="`${t('add.new')}`"
filled
@@ -52,7 +45,7 @@
class="mb-4"
@click="displayModalAdd(true)"
/>
</div>
</HoppSmartPlaceholder>
<EnvironmentsMyDetails
:show="showModalDetails"
:action="action"

17
packages/hoppscotch-common/src/components/environments/teams/Details.vue
View File

@@ -83,19 +83,12 @@
/>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="vars.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.environments')}`"
:text="t('empty.environments')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<HoppButtonSecondary
v-if="isViewer"
disabled
@@ -110,7 +103,7 @@
class="mb-4"
@click="addEnvironmentVariable"
/>
</div>
</HoppSmartPlaceholder>
</div>
</div>
</template>

17
packages/hoppscotch-common/src/components/environments/teams/index.vue
View File

@@ -43,19 +43,12 @@
/>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="!loading && teamEnvironments.length === 0 && !adapterError"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.environments')}`"
:text="t('empty.environments')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.environments") }}
</span>
<HoppButtonSecondary
v-if="team === undefined || team.myRole === 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
@@ -74,7 +67,7 @@
class="mb-4"
@click="displayModalAdd(true)"
/>
</div>
</HoppSmartPlaceholder>
<div v-else-if="!loading">
<EnvironmentsTeamsEnvironment
v-for="(environment, index) in JSON.parse(

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

@@ -114,19 +114,12 @@
/>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="authType === 'none'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/login.svg`"
:alt="`${t('empty.authorization')}`"
:text="t('empty.authorization')"
>
<img
:src="`/images/states/${colorMode.value}/login.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.authorization')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.authorization") }}
</span>
<HoppButtonSecondary
outline
:label="t('app.documentation')"
@@ -136,7 +129,7 @@
reverse
class="mb-4"
/>
</div>
</HoppSmartPlaceholder>
<div v-else class="flex flex-1 border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div v-if="authType === 'basic'">

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

@@ -289,19 +289,12 @@
</div>
</template>
</draggable>
<div
<HoppSmartPlaceholder
v-if="workingHeaders.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_category.svg`"
:alt="`${t('empty.headers')}`"
:text="t('empty.headers')"
>
<img
:src="`/images/states/${colorMode.value}/add_category.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.headers") }}
</span>
<HoppButtonSecondary
:label="`${t('add.new')}`"
filled
@@ -309,7 +302,7 @@
class="mb-4"
@click="addHeader"
/>
</div>
</HoppSmartPlaceholder>
</div>
</HoppSmartTab>
<HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">

11
packages/hoppscotch-common/src/components/graphql/Response.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
<div
<HoppSmartPlaceholder
v-if="responseString === 'loading'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="t('state.loading')"
>
<HoppSmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<template #icon>
<HoppSmartSpinner class="my-4" />
</template>
</HoppSmartPlaceholder>
<div v-else-if="responseString" class="flex flex-col flex-1">
<div
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"

34
packages/hoppscotch-common/src/components/graphql/Sidebar.vue
View File

@@ -24,25 +24,18 @@
:icon="IconBookOpen"
:label="`${t('tab.documentation')}`"
>
<div
<HoppSmartPlaceholder
v-if="
queryFields.length === 0 &&
mutationFields.length === 0 &&
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_comment.svg`"
:alt="`${t('empty.documentation')}`"
:text="t('empty.documentation')"
>
<img
:src="`/images/states/${colorMode.value}/add_comment.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.documentation')}`"
/>
<span class="mb-4 text-center">
{{ t("empty.documentation") }}
</span>
</div>
</HoppSmartPlaceholder>
<div v-else>
<div
class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto bg-primary"
@@ -172,20 +165,13 @@
ref="schemaEditor"
class="flex flex-col flex-1"
></div>
<div
<HoppSmartPlaceholder
v-else
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/blockchain.svg`"
:alt="`${t('empty.schema')}`"
:text="t('empty.schema')"
>
<img
:src="`/images/states/${colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.schema')}`"
/>
<span class="mb-4 text-center">
{{ t("empty.schema") }}
</span>
</div>
</HoppSmartPlaceholder>
</HoppSmartTab>
</HoppSmartTabs>
</template>

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

@@ -106,31 +106,23 @@
/>
</details>
</div>
<div
<HoppSmartPlaceholder
v-if="history.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/history.svg`"
:alt="`${t('empty.history')}`"
:text="t('empty.history')"
>
<img
:src="`/images/states/${colorMode.value}/history.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.history')}`"
/>
<span class="mb-4 text-center">
{{ t("empty.history") }}
</span>
</div>
<div
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-else-if="
Object.keys(filteredHistoryGroups).length === 0 ||
filteredHistory.length === 0
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="mt-2 mb-4 text-center">
{{ t("state.nothing_found") }} "{{ filterText || filterSelection }}"
</span>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
<HoppButtonSecondary
:label="t('action.clear')"
outline
@@ -141,7 +133,7 @@
}
"
/>
</div>
</HoppSmartPlaceholder>
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_history')}`"

15
packages/hoppscotch-common/src/components/http/Authorization.vue
View File

@@ -113,17 +113,12 @@
/>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="auth.authType === 'none'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/login.svg`"
:alt="`${t('empty.authorization')}`"
:text="t('empty.authorization')"
>
<img
:src="`/images/states/${colorMode.value}/login.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.authorization')}`"
/>
<span class="pb-4 text-center">{{ t("empty.authorization") }}</span>
<HoppButtonSecondary
outline
:label="t('app.documentation')"
@@ -133,7 +128,7 @@
reverse
class="mb-4"
/>
</div>
</HoppSmartPlaceholder>
<div v-else class="flex flex-1 border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div v-if="auth.authType === 'basic'">

15
packages/hoppscotch-common/src/components/http/Body.vue
View File

@@ -102,17 +102,12 @@
v-model="body"
/>
<HttpRawBody v-else-if="body.contentType !== null" v-model="body" />
<div
<HoppSmartPlaceholder
v-if="body.contentType == null"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/upload_single_file.svg`"
:alt="`${t('empty.body')}`"
:text="t('empty.body')"
>
<img
:src="`/images/states/${colorMode.value}/upload_single_file.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.body')}`"
/>
<span class="pb-4 text-center">{{ t("empty.body") }}</span>
<HoppButtonSecondary
outline
:label="`${t('app.documentation')}`"
@@ -122,7 +117,7 @@
reverse
class="mb-4"
/>
</div>
</HoppSmartPlaceholder>
</div>
</template>

15
packages/hoppscotch-common/src/components/http/BodyParameters.vue
View File

@@ -152,17 +152,12 @@
</template>
</draggable>
<div
<HoppSmartPlaceholder
v-if="workingParams.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/upload_single_file.svg`"
:alt="`${t('empty.body')}`"
:text="t('empty.body')"
>
<img
:src="`/images/states/${colorMode.value}/upload_single_file.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.body')}`"
/>
<span class="pb-4 text-center">{{ t("empty.body") }}</span>
<HoppButtonSecondary
:label="`${t('add.new')}`"
filled
@@ -170,7 +165,7 @@
class="mb-4"
@click="addBodyParam"
/>
</div>
</HoppSmartPlaceholder>
</div>
</template>

13
packages/hoppscotch-common/src/components/http/CodegenModal.vue
View File

@@ -56,20 +56,19 @@
}
"
/>
<div
<HoppSmartPlaceholder
v-if="
!(
filteredCodegenDefinitions.length !== 0 ||
CodegenDefinitions.length === 0
)
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ searchQuery }}"
</span>
</div>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
</div>
</div>
</template>

15
packages/hoppscotch-common/src/components/http/Headers.vue
View File

@@ -202,17 +202,12 @@
</div>
</template>
</draggable>
<div
<HoppSmartPlaceholder
v-if="workingHeaders.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_category.svg`"
:alt="`${t('empty.headers')}`"
:text="t('empty.headers')"
>
<img
:src="`/images/states/${colorMode.value}/add_category.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`"
/>
<span class="pb-4 text-center">{{ t("empty.headers") }}</span>
<HoppButtonSecondary
filled
:label="`${t('add.new')}`"
@@ -220,7 +215,7 @@
class="mb-4"
@click="addHeader"
/>
</div>
</HoppSmartPlaceholder>
</div>
</div>
</template>

16
packages/hoppscotch-common/src/components/http/Parameters.vue
View File

@@ -145,18 +145,12 @@
</div>
</template>
</draggable>
<div
<HoppSmartPlaceholder
v-if="workingParams.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_files.svg`"
:alt="`${t('empty.parameters')}`"
:text="t('empty.parameters')"
>
<img
:src="`/images/states/${colorMode.value}/add_files.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.parameters')}`"
/>
<span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
<HoppButtonSecondary
:label="`${t('add.new')}`"
:icon="IconPlus"
@@ -164,7 +158,7 @@
class="mb-4"
@click="addParam"
/>
</div>
</HoppSmartPlaceholder>
</div>
</div>
</template>

48
packages/hoppscotch-common/src/components/http/ResponseMeta.vue
View File

@@ -11,51 +11,29 @@
<HoppSmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
<HoppSmartPlaceholder
v-if="response.type === 'network_fail'"
class="flex flex-col items-center justify-center flex-1 p-4"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:alt="`${t('error.network_fail')}`"
:heading="t('error.network_fail')"
:text="t('helpers.network_fail')"
>
<img
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.network_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }}
</span>
<span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor class="p-2 border rounded border-dividerLight" />
</div>
<div
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-if="response.type === 'script_fail'"
class="flex flex-col items-center justify-center flex-1 p-4"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:alt="`${t('error.script_fail')}`"
:label="t('error.script_fail')"
:text="t('helpers.script_fail')"
>
<img
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.script_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
{{ t("error.script_fail") }}
</span>
<span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.script_fail") }}
</span>
<div
class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
>
{{ response.error.name }}: {{ response.error.message }}<br />
{{ response.error.stack }}
</div>
</div>
</HoppSmartPlaceholder>
<div
v-if="response.type === 'success' || response.type === 'fail'"
class="flex items-center font-semibold text-tiny"

44
packages/hoppscotch-common/src/components/http/TestResult.vue
View File

@@ -151,41 +151,21 @@
</div>
</div>
</div>
<div
<HoppSmartPlaceholder
v-else-if="testResults && testResults.scriptError"
class="flex flex-col items-center justify-center flex-1 p-4"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:alt="`${t('error.test_script_fail')}`"
:heading="t('error.test_script_fail')"
:text="t('helpers.test_script_fail')"
>
<img
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.test_script_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
{{ t("error.test_script_fail") }}
</span>
<span
class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
>
{{ t("helpers.test_script_fail") }}
</span>
</div>
<div
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-else
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/validation.svg`"
:alt="`${t('empty.tests')}`"
:heading="t('empty.tests')"
:text="t('helpers.tests')"
>
<img
:src="`/images/states/${colorMode.value}/validation.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.tests')}`"
/>
<span class="pb-2 text-center">
{{ t("empty.tests") }}
</span>
<span class="pb-4 text-center">
{{ t("helpers.tests") }}
</span>
<HoppButtonSecondary
outline
:label="`${t('action.learn_more')}`"
@@ -195,7 +175,7 @@
reverse
class="my-4"
/>
</div>
</HoppSmartPlaceholder>
<EnvironmentsMyDetails
:show="showMyEnvironmentDetailsModal"
action="new"

17
packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
View File

@@ -143,19 +143,12 @@
</div>
</template>
</draggable>
<div
<HoppSmartPlaceholder
v-if="workingUrlEncodedParams.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_category.svg`"
:alt="`${t('empty.body')}`"
:text="t('empty.body')"
>
<img
:src="`/images/states/${colorMode.value}/add_category.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.body')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.body") }}
</span>
<HoppButtonSecondary
filled
:label="`${t('add.new')}`"
@@ -163,7 +156,7 @@
class="mb-4"
@click="addUrlEncodedParam"
/>
</div>
</HoppSmartPlaceholder>
</div>
</div>
</template>

17
packages/hoppscotch-common/src/components/profile/Shortcodes.vue
View File

@@ -11,20 +11,13 @@
<HoppSmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
<HoppSmartPlaceholder
v-if="!loading && myShortcodes.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_files.svg`"
:alt="`${t('empty.shortcodes')}`"
:text="t('empty.shortcodes')"
>
<img
:src="`/images/states/${colorMode.value}/add_files.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
:alt="`${t('empty.shortcodes')}`"
/>
<span class="mb-4 text-center">
{{ t("empty.shortcodes") }}
</span>
</div>
</HoppSmartPlaceholder>
<div v-else-if="!loading">
<div
class="hidden w-full border-t rounded-t bg-primaryLight lg:flex border-x border-dividerLight"

13
packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
View File

@@ -52,20 +52,19 @@
"
/>
</HoppSmartLink>
<div
<HoppSmartPlaceholder
v-if="
!(
filteredAppLanguages.length !== 0 ||
APP_LANGUAGES.length === 0
)
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ searchQuery }}"
</span>
</div>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
</div>
</div>
</template>

17
packages/hoppscotch-common/src/components/teams/Edit.vue
View File

@@ -47,19 +47,12 @@
"
class="border rounded border-divider"
>
<div
<HoppSmartPlaceholder
v-if="teamDetails.data.right.team.teamMembers === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_group.svg`"
:alt="`${t('empty.members')}`"
:text="t('empty.members')"
>
<img
:src="`/images/states/${colorMode.value}/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.members')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.members") }}
</span>
<HoppButtonSecondary
:icon="IconUserPlus"
:label="t('team.invite')"
@@ -69,7 +62,7 @@
}
"
/>
</div>
</HoppSmartPlaceholder>
<div v-else class="divide-y divide-dividerLight">
<div
v-for="(member, index) in membersList"

26
packages/hoppscotch-common/src/components/teams/Invite.vue
View File

@@ -98,17 +98,14 @@
</div>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="
E.isRight(pendingInvites.data) &&
pendingInvites.data.right.team.teamInvitations.length === 0
"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="t('empty.pending_invites')"
>
<span class="text-center">
{{ t("empty.pending_invites") }}
</span>
</div>
</HoppSmartPlaceholder>
<div
v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
class="flex flex-col items-center p-4"
@@ -221,25 +218,18 @@
/>
</div>
</div>
<div
<HoppSmartPlaceholder
v-if="newInvites.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_group.svg`"
:alt="`${t('empty.invites')}`"
:text="`${t('empty.invites')}`"
>
<img
:src="`/images/states/${colorMode.value}/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.invites')}`"
/>
<span class="pb-4 text-center">
{{ t("empty.invites") }}
</span>
<HoppButtonSecondary
:label="t('add.new')"
filled
@click="addNewInvitee"
/>
</div>
</HoppSmartPlaceholder>
</div>
<div
v-if="newInvites.length"

17
packages/hoppscotch-common/src/components/teams/index.vue
View File

@@ -10,25 +10,18 @@
<HoppSmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
<HoppSmartPlaceholder
v-if="!loading && myTeams.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_group.svg`"
:alt="`${t('empty.teams')}`"
:text="`${t('empty.teams')}`"
>
<img
:src="`/images/states/${colorMode.value}/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
:alt="`${t('empty.teams')}`"
/>
<span class="mb-4 text-center">
{{ t("empty.teams") }}
</span>
<HoppButtonSecondary
:label="`${t('team.create_new')}`"
filled
@click="displayModalAdd(true)"
/>
</div>
</HoppSmartPlaceholder>
<div
v-else-if="!loading"
class="grid gap-4"

17
packages/hoppscotch-common/src/components/workspace/Selector.vue
View File

@@ -15,19 +15,12 @@
<HoppSmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
<HoppSmartPlaceholder
v-if="!loading && myTeams.length === 0"
class="flex flex-col items-center justify-center flex-1 p-4 text-secondaryLight"
:src="`/images/states/${colorMode.value}/add_group.svg`"
:alt="`${t('empty.teams')}`"
:text="`${t('empty.teams')}`"
>
<img
:src="`/images/states/${colorMode.value}/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
:alt="`${t('empty.teams')}`"
/>
<span class="mb-4 text-center">
{{ t("empty.teams") }}
</span>
<HoppButtonSecondary
:label="t('team.create_new')"
filled
@@ -35,7 +28,7 @@
:icon="IconPlus"
@click="displayModalAdd(true)"
/>
</div>
</HoppSmartPlaceholder>
<div v-else-if="!loading" class="flex flex-col">
<div
class="sticky top-0 z-10 flex items-center justify-between py-2 pl-2 mb-2 -top-2 bg-popover"