KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Move conversation header above sidebar (#1835)

Browse source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas 2021-03-02 22:44:04 +05:30 • committed by GitHub
parent 2120734f67
commit 5f250e5b3a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 150 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View file

@ -43,10 +43,6 @@ $resolve-button-width: 13.2rem;
@include flex;
@include flex-align($x: center, $y: middle);
&.hide {
visibility: hidden;
}
.user--name {
@include margin(0);
font-size: $font-size-medium;

40
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View file

@ -42,7 +42,7 @@
}
}
.conversations-sidebar {
.conversations-list-wrap {
@include flex;
flex-direction: column;
@ -92,44 +92,6 @@
}
}
.conversation-wrap {
@include margin(0);
@include border-normal-left;
background: var(--color-background-light);
.current-chat {
@include flex;
@include full-height;
@include flex-align(center, middle);
flex-direction: column;
div {
@include flex;
@include full-height;
@include flex-align(center, middle);
flex-direction: column;
img {
@include margin($space-normal);
width: 10rem;
}
span {
font-size: $font-size-small;
font-weight: $font-weight-medium;
text-align: center;
}
}
}
.conv-empty-state {
@include flex;
@include full-height;
@include flex-align(center, middle);
flex-direction: column;
}
}
.conversation-panel {
@include flex;
@include flex-weight(1);

23
app/javascript/dashboard/components/ChatList.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="conversations-sidebar medium-4 columns">
<div class="conversations-list-wrap">
<slot></slot>
<div class="chat-list__top">
<h1 class="page-title text-truncate" :title="pageTitle">
@ -218,9 +218,24 @@ export default {
</script>
<style scoped lang="scss">
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/app.scss';
.spinner {
margin-top: $space-normal;
margin-bottom: $space-normal;
margin-top: var(--space-normal);
margin-bottom: var(--space-normal);
}
.conversations-list-wrap {
flex-shrink: 0;
width: 34rem;
@include breakpoint(large up) {
width: 36rem;
}
@include breakpoint(xlarge up) {
width: 33rem;
}
@include breakpoint(xxlarge up) {
width: 42rem;
}
}
</style>

81
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View file

@ -1,16 +1,34 @@
<template>
<div :class="conversationClass">
<messages-view
<div class="conversation-details-wrap">
<conversation-header
v-if="currentChat.id"
:inbox-id="inboxId"
:chat="currentChat"
:is-contact-panel-open="isContactPanelOpen"
@contact-panel-toggle="onToggleContactPanel"
/>
<empty-state v-else />
<div class="messages-and-sidebar">
<messages-view
v-if="currentChat.id"
:inbox-id="inboxId"
:is-contact-panel-open="isContactPanelOpen"
@contact-panel-toggle="onToggleContactPanel"
/>
<empty-state v-else />
<div v-show="showContactPanel" class="conversation-sidebar-wrap">
<contact-panel
v-if="showContactPanel"
:conversation-id="currentChat.id"
:on-toggle="onToggleContactPanel"
/>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel';
import ConversationHeader from './ConversationHeader';
import EmptyState from './EmptyState';
import MessagesView from './MessagesView';
@ -18,6 +36,8 @@ export default {
components: {
EmptyState,
MessagesView,
ContactPanel,
ConversationHeader,
},
props: {
@ -35,10 +55,8 @@ export default {
...mapGetters({
currentChat: 'getSelectedChat',
}),
conversationClass() {
return `medium-${
this.isContactPanelOpen ? '5' : '8'
} columns conversation-wrap`;
showContactPanel() {
return this.isContactPanelOpen && this.currentChat.id;
},
},
methods: {
@ -48,3 +66,50 @@ export default {
},
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/app.scss';
.conversation-details-wrap {
display: flex;
flex-direction: column;
width: 100%;
border-left: 1px solid var(--color-border);
}
.messages-and-sidebar {
display: flex;
background: var(--color-background-light);
margin: 0;
height: auto;
flex: 1 1;
overflow: hidden;
}
.conversation-sidebar-wrap {
height: auto;
flex: 0 1;
overflow: hidden;
overflow: auto;
background: white;
flex-shrink: 0;
flex-basis: 28rem;
@include breakpoint(large up) {
flex-basis: 31em;
}
@include breakpoint(xlarge up) {
flex-basis: 32em;
}
@include breakpoint(xxlarge up) {
flex-basis: 36rem;
}
&::v-deep .contact--panel {
width: 100%;
height: 100%;
max-width: 100%;
}
}
</style>

12
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="conv-header">
<div class="user" :class="{ hide: isContactPanelOpen }">
<div class="user">
<Thumbnail
:src="currentContact.thumbnail"
size="40px"
@ -9,7 +9,7 @@
:status="currentContact.availability_status"
/>
<div class="user--profile__meta">
<h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
<h3 class="user--name text-truncate">
{{ currentContact.name }}
</h3>
<button
@ -17,9 +17,11 @@
@click="$emit('contact-panel-toggle')"
>
{{
`${$t('CONVERSATION.HEADER.OPEN')} ${$t(
'CONVERSATION.HEADER.DETAILS'
)}`
`${
isContactPanelOpen
? $t('CONVERSATION.HEADER.CLOSE')
: $t('CONVERSATION.HEADER.OPEN')
} ${$t('CONVERSATION.HEADER.DETAILS')}`
}}
</button>
</div>

39
app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
View file

@ -77,14 +77,49 @@ export default {
) {
return 'inbox-empty-state';
}
return 'columns full-height conv-empty-state';
return 'columns conv-empty-state';
},
},
};
</script>
<style scoped>
<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: 10rem;
}
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>

14
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View file

@ -1,10 +1,5 @@
<template>
<div class="view-box columns">
<conversation-header
:chat="currentChat"
:is-contact-panel-open="isContactPanelOpen"
@contact-panel-toggle="onToggleContactPanel"
/>
<div class="view-box fill-height">
<div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
<span>
{{ $t('CONVERSATION.CANNOT_REPLY') }}
@ -86,7 +81,6 @@
<script>
import { mapGetters } from 'vuex';
import ConversationHeader from './ConversationHeader';
import ReplyBox from './ReplyBox';
import Message from './Message';
import conversationMixin from '../../../mixins/conversations';
@ -95,7 +89,6 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
export default {
components: {
ConversationHeader,
Message,
ReplyBox,
},
@ -316,4 +309,9 @@ export default {
.spinner--container {
min-height: var(--space-jumbo);
}
.view-box.fill-height {
height: auto;
flex-grow: 1;
}
</style>

15
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
View file

@ -1,5 +1,5 @@
<template>
<section class="app-content columns">
<section class="conversation-page">
<chat-list
:conversation-inbox="inboxId"
:label="label"
@ -24,11 +24,6 @@
@contact-panel-toggle="onToggleContactPanel"
>
</conversation-box>
<contact-panel
v-if="isContactPanelOpen"
:conversation-id="conversationId"
:on-toggle="onToggleContactPanel"
/>
</section>
</template>
@ -36,7 +31,6 @@
import { mapGetters } from 'vuex';
import ChatList from '../../../components/ChatList';
import ContactPanel from './ContactPanel';
import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
import Search from './search/Search.vue';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
@ -44,7 +38,6 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
export default {
components: {
ChatList,
ContactPanel,
ConversationBox,
Search,
},
@ -177,4 +170,10 @@ export default {
font-size: var(--font-size-large);
padding-right: var(--space-small);
}
.conversation-page {
display: flex;
width: 100%;
height: 100%;
}
</style>