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

refactor: empty state illustrations

Browse Source
This commit is contained in:
liyasthomas
2021-11-03 16:10:06 +05:30
parent 22ac13f2f0
commit 75e1adb7b3
58 changed files with 1276 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/hoppscotch-app/components/collections/graphql/Collection.vue
View File

@@ -155,7 +155,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.collection") }}
</span>

13
packages/hoppscotch-app/components/collections/graphql/Folder.vue
View File

@@ -154,7 +154,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.folder") }}
</span>

5
packages/hoppscotch-app/components/collections/graphql/index.vue
View File

@@ -70,6 +70,11 @@
v-if="collections.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-4">
{{ $t("empty.collections") }}
</span>

5
packages/hoppscotch-app/components/collections/index.vue
View File

@@ -108,6 +108,11 @@
v-if="filteredCollections.length === 0 && filterText.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-4">
{{ $t("empty.collections") }}
</span>

13
packages/hoppscotch-app/components/collections/my/Collection.vue
View File

@@ -181,7 +181,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.collection") }}
</span>

13
packages/hoppscotch-app/components/collections/my/Folder.vue
View File

@@ -163,7 +163,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.folder") }}
</span>

13
packages/hoppscotch-app/components/collections/teams/Collection.vue
View File

@@ -177,7 +177,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.collection") }}
</span>

13
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -158,7 +158,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<img
:src="`/images/states/${$colorMode.value}/pack.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.folder") }}
</span>

13
packages/hoppscotch-app/components/environments/Edit.vue
View File

@@ -82,7 +82,18 @@
justify-center
"
>
<SmartIcon class="opacity-75 pb-2" name="layers" />
<img
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center pb-4">
{{ $t("empty.environments") }}
</span>

5
packages/hoppscotch-app/components/environments/index.vue
View File

@@ -106,6 +106,11 @@
v-if="environments.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-4">
{{ $t("empty.environments") }}
</span>

12
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -243,6 +243,18 @@
justify-center
"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
</span>

28
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -42,9 +42,20 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">link</i>
<img
:src="`/images/states/${$colorMode.value}/add_comment.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.schema") }}
{{ $t("empty.documentation") }}
</span>
</div>
<div v-else>
@@ -198,7 +209,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">link</i>
<img
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.schema") }}
</span>

6
packages/hoppscotch-app/components/history/index.vue
View File

@@ -60,7 +60,11 @@
v-if="history.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="opacity-75 pb-2 material-icons">schedule</i>
<img
:src="`/images/states/${$colorMode.value}/history.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center">
{{ $t("empty.history") }}
</span>

5
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -95,6 +95,11 @@
v-if="authType === 'none'"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/login.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-4">
{{ $t("empty.authorization") }}
</span>

5
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -65,6 +65,11 @@
v-if="contentType == null"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-4">
{{ $t("empty.body") }}
</span>

5
packages/hoppscotch-app/components/http/BodyParameters.vue
View File

@@ -153,6 +153,11 @@
v-if="bodyParams.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-4">
{{ $t("empty.body") }}
</span>

12
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -144,6 +144,18 @@
justify-center
"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
</span>

12
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -137,6 +137,18 @@
justify-center
"
>
<img
:src="`/images/states/${$colorMode.value}/add_files.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
</span>

17
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -68,11 +68,22 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">cloud_off</i>
<span class="text-center pb-2">
<img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-32
w-32
inline-flex
"
/>
<span class="text-center mb-2">
{{ $t("error.network_fail") }}
</span>
<span class="text-center pb-4">
<span class="text-center mb-4 max-w-sm">
{{ $t("helpers.network_fail") }}
</span>
<ButtonSecondary

5
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -78,6 +78,11 @@
v-else
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<img
:src="`/images/states/${$colorMode.value}/validation.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
/>
<span class="text-center pb-2">
{{ $t("empty.tests") }}
</span>

13
packages/hoppscotch-app/components/realtime/Websocket.vue
View File

@@ -146,7 +146,18 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">topic</i>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center">
{{ $t("empty.protocols") }}
</span>

13
packages/hoppscotch-app/components/teams/Edit.vue
View File

@@ -59,7 +59,18 @@
justify-center
"
>
<SmartIcon class="opacity-75 pb-2" name="users" />
<img
:src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy"
class="
flex-col
my-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center pb-4">
{{ $t("empty.members") }}
</span>

35
packages/hoppscotch-app/components/teams/Invite.vue
View File

@@ -131,7 +131,6 @@
justify-center
"
>
<SmartIcon class="opacity-75 pb-2" name="users" />
<span class="text-center">
{{ $t("empty.pending_invites") }}
</span>
@@ -250,7 +249,18 @@
justify-center
"
>
<SmartIcon class="opacity-75 pb-2" name="user-plus" />
<img
:src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy"
class="
flex-col
mb-4
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center pb-4">
{{ $t("empty.invites") }}
</span>
@@ -348,7 +358,12 @@
@click.native="
() => {
sendInvitesResult = []
newInvites = []
newInvites = [
{
key: '',
value: 'VIEWRER',
},
]
}
"
/>
@@ -473,7 +488,12 @@ const removeInvitee = async (id: string) => {
}
}
const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([])
const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([
{
key: "",
value: TeamMemberRole.Viewer,
},
])
const addNewInvitee = () => {
newInvites.value.push({
@@ -580,7 +600,12 @@ const getErrorMessage = (error: SendInvitesErrorType) => {
const hideModal = () => {
sendingInvites.value = false
sendInvitesResult.value = []
newInvites.value = []
newInvites.value = [
{
key: "",
value: TeamMemberRole.Viewer,
},
]
emit("hide-modal")
}
</script>

20
packages/hoppscotch-app/components/teams/index.vue
View File

@@ -27,10 +27,26 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">help_outline</i>
<span class="text-center">
<img
:src="`/images/states/${$colorMode.value}/add_group.svg`"
loading="lazy"
class="
flex-col
mb-8
object-contain object-center
h-16
w-16
inline-flex
"
/>
<span class="text-center mb-4">
{{ $t("empty.teams") }}
</span>
<ButtonSecondary
:label="`${$t('team.create_new')}`"
filled
@click.native="displayModalAdd(true)"
/>
</div>
<div
v-else-if="!myTeams.loading && E.isRight(myTeams.data)"