LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Improve the initial screen placeholder (#7708)

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2023-08-15 06:20:34 +05:30
committed by GitHub
parent ebefb2e201
commit 396ef02b0c
11 changed files with 248 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View File

@@ -61,7 +61,7 @@ import { mapGetters } from 'vuex';
import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel';
import ConversationHeader from './ConversationHeader';
import DashboardAppFrame from '../DashboardApp/Frame.vue';
import EmptyState from './EmptyState';
import EmptyState from './EmptyState/EmptyState';
import MessagesView from './MessagesView';
export default {

88
app/javascript/dashboard/components/widgets/conversation/EmptyState.vue → app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
View File

@@ -10,45 +10,40 @@
class="clearfix"
>
<onboarding-view v-if="isAdmin" />
<div v-else class="current-chat">
<div>
<img src="~dashboard/assets/images/inboxes.svg" alt="No Inboxes" />
<span>
{{ $t('CONVERSATION.NO_INBOX_AGENT') }}
</span>
</div>
</div>
<empty-state-message
v-else
:message="$t('CONVERSATION.NO_INBOX_AGENT')"
/>
</div>
<!-- Show empty state images if not loading -->
<div
v-else-if="!uiFlags.isFetching && !loadingChatList"
class="current-chat"
class="flex flex-col items-center justify-center h-full"
>
<!-- No conversations available -->
<div v-if="!allConversations.length">
<img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
<span>
{{ $t('CONVERSATION.NO_MESSAGE_1') }}
<br />
</span>
</div>
<!-- No conversation selected -->
<div v-else-if="allConversations.length && !currentChat.id">
<img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
<span>{{ conversationMissingMessage }}</span>
</div>
<empty-state-message
v-if="!allConversations.length"
:message="$t('CONVERSATION.NO_MESSAGE_1')"
/>
<empty-state-message
v-else-if="allConversations.length && !currentChat.id"
:message="conversationMissingMessage"
/>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import adminMixin from '../../../mixins/isAdmin';
import accountMixin from '../../../mixins/account';
import OnboardingView from './OnboardingView';
import adminMixin from 'dashboard/mixins/isAdmin';
import accountMixin from 'dashboard/mixins/account';
import OnboardingView from '../OnboardingView';
import EmptyStateMessage from './EmptyStateMessage';
export default {
components: {
OnboardingView,
EmptyStateMessage,
},
mixins: [accountMixin, adminMixin],
props: {
@@ -87,51 +82,10 @@ export default {
!this.loadingChatList &&
this.isAdmin
) {
return 'inbox-empty-state';
return 'h-full overflow-auto';
}
return 'columns conv-empty-state';
return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full';
},
},
};
</script>
<style lang="scss" scoped>
.inbox-empty-state {
height: 100%;
overflow: auto;
}
.current-chat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
img {
margin: var(--space-normal);
width: 6.25rem;
}
span {
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
text-align: center;
}
}
}
.conv-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>

33
app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="flex flex-col items-center justify-center h-full">
<img
class="m-4 w-32 hidden dark:block"
src="~dashboard/assets/images/no-chat-dark.svg"
alt="No Chat dark"
/>
<img
class="m-4 w-32 block dark:hidden"
src="~dashboard/assets/images/no-chat.svg"
alt="No Chat"
/>
<span
class="text-sm text-slate-800 dark:text-slate-200 font-medium text-center"
>
{{ message }}
<br />
</span>
<!-- Cmd bar, keyboard shortcuts placeholder -->
<feature-placeholder />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
},
};
</script>

51
app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div class="flex flex-col gap-2 mt-9">
<div
v-for="keyShortcut in keyShortcuts"
:key="keyShortcut.key"
class="flex gap-2 items-center"
>
<div class="flex gap-2 items-center">
<hotkey
custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
>
⌘
</hotkey>
<hotkey
custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
>
{{ keyShortcut.key }}
</hotkey>
</div>
<span
class="text-sm text-slate-700 dark:text-slate-300 font-medium text-center"
>
{{ keyShortcut.description }}
</span>
</div>
</div>
</template>
<script>
import Hotkey from 'dashboard/components/base/Hotkey';
export default {
components: {
Hotkey,
},
data() {
return {
keyShortcuts: [
{
key: 'K',
description: this.$t('CONVERSATION.EMPTY_STATE.CMD_BAR'),
},
{
key: '/',
description: this.$t('CONVERSATION.EMPTY_STATE.KEYBOARD_SHORTCUTS'),
},
],
};
},
};
</script>