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

feat: Uses expanded layout as default if the breakpoint is below 992px

Browse source
This commit is contained in:
iamsivin 2022-12-26 13:43:35 +05:30
parent 3e91765472
commit 4375b694c4
11 changed files with 118 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,7 +42,6 @@ $resolve-button-width: 13.2rem;
margin-right: var(--space-normal);
min-width: 0;
.user--profile__meta {
align-items: flex-start;
display: flex;
@ -54,7 +53,6 @@ $resolve-button-width: 13.2rem;
}
}
.header-actions-wrap {
align-items: center;
display: flex;
@ -65,4 +63,8 @@ $resolve-button-width: 13.2rem;
&.has-open-sidebar {
justify-content: flex-end;
}
@include breakpoint(640px down) {
margin-top: var(--space-small);
}
}

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

@ -326,6 +326,7 @@
.is-text {
display: inline-flex;
text-align: start;
align-items: center;
@include breakpoint(xxxlarge up) {
display: flex;

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

@ -794,16 +794,16 @@ export default {
.conversations-list-wrap {
flex-shrink: 0;
width: 34rem;
flex-basis: 34rem;
overflow: hidden;
@include breakpoint(large up) {
width: 36rem;
flex-basis: 36rem;
}
@include breakpoint(xlarge up) {
width: 35rem;
flex-basis: 38rem;
}
@include breakpoint(xxlarge up) {
width: 38rem;
flex-basis: 42rem;
}
@include breakpoint(xxxlarge up) {
flex-basis: 46rem;
@ -814,10 +814,7 @@ export default {
}
&.list--full-width {
width: 100%;
@include breakpoint(xxxlarge up) {
flex-basis: 100%;
}
flex-basis: 100%;
}
}
.filter--actions {

3
app/javascript/dashboard/components/layout/Sidebar.vue
View file

@ -233,9 +233,6 @@ export default {
width: 40rem;
}
}
.off-canvas-content.is-open-left {
transform: translateX(18.8rem);
}
.secondary-sidebar {
overflow-y: auto;

4
app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
View file

@ -376,6 +376,10 @@ export default {
display: flex;
flex-direction: column;
.ProseMirror-menubar {
min-height: var(--space-two) !important;
}
> .ProseMirror {
padding: 0;
word-break: break-word;

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

@ -166,11 +166,15 @@ export default {
.conversation-sidebar-wrap {
height: auto;
flex: 0 0;
overflow: hidden;
z-index: var(--z-index-low);
overflow: auto;
background: white;
flex-basis: 28rem;
@include breakpoint(768px down) {
flex-basis: fit-content;
}
@include breakpoint(large up) {
flex-basis: 30em;
}

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

@ -1,53 +1,55 @@
<template>
<div class="conv-header">
<div class="user">
<back-button v-if="showBackButton" :back-url="backButtonUrl" />
<Thumbnail
:src="currentContact.thumbnail"
size="40px"
:badge="inboxBadge"
:username="currentContact.name"
:status="currentContact.availability_status"
/>
<div class="user--profile__meta">
<h3 class="user--name text-truncate">
<span class="margin-right-smaller">{{ currentContact.name }}</span>
<fluent-icon
v-if="!isHMACVerified"
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
size="14"
class="hmac-warning__icon"
icon="warning"
/>
</h3>
<div class="conversation--header--actions">
<inbox-name
v-if="hasMultipleInboxes"
:inbox="inbox"
class="margin-right-small"
/>
<span
v-if="isSnoozed"
class="snoozed--display-text margin-right-small"
>
{{ snoozedDisplayText }}
</span>
<woot-button
class="user--profile__button margin-right-small"
size="small"
variant="link"
@click="$emit('contact-panel-toggle')"
>
{{ contactPanelToggleText }}
</woot-button>
<div class="conversation-header--details">
<div class="user">
<back-button v-if="showBackButton" :back-url="backButtonUrl" />
<Thumbnail
:src="currentContact.thumbnail"
size="40px"
:badge="inboxBadge"
:username="currentContact.name"
:status="currentContact.availability_status"
/>
<div class="user--profile__meta">
<h3 class="user--name text-truncate">
<span class="margin-right-smaller">{{ currentContact.name }}</span>
<fluent-icon
v-if="!isHMACVerified"
v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
size="14"
class="hmac-warning__icon"
icon="warning"
/>
</h3>
<div class="conversation--header--actions text-truncate">
<inbox-name
v-if="hasMultipleInboxes"
:inbox="inbox"
class="margin-right-small"
/>
<span
v-if="isSnoozed"
class="snoozed--display-text margin-right-small"
>
{{ snoozedDisplayText }}
</span>
<woot-button
class="user--profile__button margin-right-small"
size="small"
variant="link"
@click="$emit('contact-panel-toggle')"
>
{{ contactPanelToggleText }}
</woot-button>
</div>
</div>
</div>
</div>
<div
class="header-actions-wrap"
:class="{ 'has-open-sidebar': isContactPanelOpen }"
>
<more-actions :conversation-id="currentChat.id" />
<div
class="header-actions-wrap"
:class="{ 'has-open-sidebar': isContactPanelOpen }"
>
<more-actions :conversation-id="currentChat.id" />
</div>
</div>
</div>
</template>
@ -165,14 +167,26 @@ export default {
</script>
<style lang="scss" scoped>
.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@import '~dashboard/assets/scss/woot';
.conv-header {
flex: 0 0 var(--space-jumbo);
@include breakpoint(640px down) {
flex-direction: row;
}
}
.conversation-header--details {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
@include breakpoint(640px down) {
flex-direction: column;
}
}
.option__desc {

1
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View file

@ -280,6 +280,7 @@ export default {
.message-text--metadata {
align-items: flex-start;
display: flex;
margin-left: var(--space-small);
.time {
margin-right: var(--space-small);

28
app/javascript/dashboard/routes/dashboard/Dashboard.vue
View file

@ -47,6 +47,7 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import wootConstants from 'dashboard/constants';
export default {
components: {
@ -67,6 +68,7 @@ export default {
showAddLabelModal: false,
showShortcutModal: false,
isNotificationPanel: false,
isDesktopView: false,
};
},
computed: {
@ -77,14 +79,40 @@ export default {
const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
return showSecondarySidebar;
},
previouslyUsedDisplayType() {
const {
previously_used_conversation_display_type: conversationDisplayType,
} = this.uiSettings;
return conversationDisplayType;
},
},
watch: {
isDesktopView() {
const { LAYOUT_TYPES } = wootConstants;
this.updateUISettings({
conversation_display_type: !this.isDesktopView
? LAYOUT_TYPES.EXPANDED
: this.previouslyUsedDisplayType,
});
},
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
},
beforeDestroy() {
bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
if (window.innerWidth <= 992) {
this.isDesktopView = false;
} else {
this.isDesktopView = true;
}
},
toggleSidebar() {
this.updateUISettings({
show_secondary_sidebar: !this.isSidebarOpen,

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

@ -133,7 +133,10 @@ export default {
conversationDisplayType === LAYOUT_TYPES.CONDENSED
? LAYOUT_TYPES.EXPANDED
: LAYOUT_TYPES.CONDENSED;
this.updateUISettings({ conversation_display_type: newViewType });
this.updateUISettings({
conversation_display_type: newViewType,
previously_used_conversation_display_type: newViewType,
});
},
fetchConversationIfUnavailable() {
if (!this.conversationId) {

9
app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
View file

@ -109,14 +109,7 @@ export default {
flex-shrink: 0;
overflow: hidden;
padding: var(--space-small);
@include breakpoint(xlarge down) {
position: absolute;
}
@include breakpoint(xlarge up) {
position: unset;
}
position: unset;
&:hover {
overflow: auto;