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

chore: Improves styling for conversation header (#1167)

Browse source 
Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
This commit is contained in:
Nithin David Thomas 2020-09-03 14:11:07 +05:30 committed by GitHub
parent dfb533db8d
commit 9b23a11c5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 77 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/dashboard/assets/scss/_helper-classes.scss
View file

@ -69,3 +69,11 @@ select {
border-top-left-radius: 0 !important;
}
}
.justify-space-between {
justify-content: space-between;
}
.w-100 {
width: 100%;
}

10
app/javascript/dashboard/assets/scss/_mixins.scss
View file

@ -1,3 +1,4 @@
@import '~dashboard/assets/scss/variables';
@import '~widget/assets/scss/mixins';
$spinner-before-border-color: rgba(255, 255, 255, 0.7);
@ -235,12 +236,3 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
text-overflow: ellipsis;
white-space: nowrap;
}
.justify-space-between {
justify-content: space-between;
}
.w-100 {
width: 100%;
}

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

@ -41,6 +41,10 @@
@include flex;
@include flex-align($x: center, $y: middle);
&.hide {
visibility: hidden;
}
.user--name {
@include margin(0);
font-size: $font-size-medium;
@ -83,3 +87,15 @@
}
}
}
.header-actions-wrap {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
&.has-open-sidebar {
justify-content: flex-end;
}
}

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

@ -1,6 +1,6 @@
<template>
<div class="conv-header">
<div v-if="!isContactPanelOpen" class="user">
<div class="user" :class="{ hide: isContactPanelOpen }">
<Thumbnail
:src="currentContact.thumbnail"
size="40px"
@ -25,8 +25,8 @@
</div>
</div>
<div
class="flex-container"
:class="{ 'justify-space-between w-100': isContactPanelOpen }"
class="header-actions-wrap"
:class="{ 'has-open-sidebar': isContactPanelOpen }"
>
<div class="multiselect-box ion-headphone">
<multiselect

51
app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
View file

@ -5,9 +5,8 @@
:status="currentChat.status"
/>
<woot-button
class="success more--button"
icon="ion-more"
:class="buttonClass"
class="clear more--button"
icon="ion-android-more-vertical"
@click="toggleConversationActions"
/>
<div
@ -18,17 +17,15 @@
>
<button
v-if="!currentChat.muted"
class="button small clear row nice alert small-6 action--button"
class="button small clear row alert small-6 action--button"
@click="mute"
>
<i class="icon ion-volume-mute" />
<span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
</button>
<button
class="button small clear row nice small-6 action--button"
class="button small clear row small-6 action--button"
@click="toggleEmailActionsModal"
>
<i class="icon ion-ios-copy" />
{{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
</button>
</div>
@ -46,7 +43,6 @@ import { mixin as clickaway } from 'vue-clickaway';
import alertMixin from 'shared/mixins/alertMixin';
import EmailTranscriptModal from './EmailTranscriptModal';
import ResolveAction from '../../buttons/ResolveAction';
import wootConstants from '../../../constants';
export default {
components: {
@ -64,12 +60,6 @@ export default {
...mapGetters({
currentChat: 'getSelectedChat',
}),
buttonClass() {
return this.currentChat.status !== wootConstants.STATUS_TYPE.OPEN
? 'warning'
: 'success';
},
},
methods: {
mute() {
@ -91,11 +81,17 @@ export default {
};
</script>
<style scoped lang="scss">
@import '~dashboard/assets/scss/mixins';
.more--button {
align-items: center;
display: flex;
margin-left: var(--space-smaller);
margin-left: var(--space-small);
padding: var(--space-small);
&.clear.more--button {
color: var(--color-body);
}
}
.actions--container {
@ -103,11 +99,25 @@ export default {
}
.dropdown-pane {
right: 0;
@include elegant-card;
@include border-light;
right: -12px;
top: 48px;
border: 1px solid var(--s-100);
border-radius: var(--space-smaller);
width: auto;
&::before {
@include arrow(top, var(--color-border-light), 14px);
top: -14px;
position: absolute;
right: 6px;
}
&::after {
@include arrow(top, white, var(--space-slab));
top: -12px;
position: absolute;
right: var(--space-small);
}
}
.dropdown-pane--open {
@ -119,10 +129,11 @@ export default {
display: flex;
align-items: center;
width: 100%;
padding: var(--space-small) 0;
padding: var(--space-small) var(--space-smaller);
font-size: var(--font-size-small);
.icon {
margin-right: var(--space-small);
margin-right: var(--space-smaller);
min-width: var(--space-normal);
}
}

2
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
View file

@ -3,7 +3,7 @@
<div class="contact--info">
<thumbnail
:src="contact.thumbnail"
size="48px"
size="64px"
:badge="channelType"
:username="contact.name"
:status="contact.availability_status"

23
app/javascript/shared/assets/stylesheets/colors.scss
View file

@ -1,7 +1,7 @@
:root {
--white: #fff;
--w-50: #E3F2FF;
--w-50: #E3F2FF;
--w-100: #BBDDFF;
--w-200: #8FC9FF;
--w-300: #61B3FF;
@ -12,7 +12,7 @@
--w-800: #2161CA;
--w-900: #1F41AB;
--g-50: #E6F8E6;
--g-50: #E6F8E6;
--g-100: #C4EEC2;
--g-200: #9DE29A;
--g-300: #6FD86F;
@ -23,7 +23,7 @@
--g-800: #009000;
--g-900: #007000;
--y-50: #FFFEE8;
--y-50: #FFFEE8;
--y-100: #FFFAC5;
--y-200: #FFF69E;
--y-300: #FEF176;
@ -34,7 +34,7 @@
--y-800: #FDAD2A;
--y-900: #F9841B;
--s-50: #E7EEFB;
--s-50: #E7EEFB;
--s-100: #C8D6E6;
--s-200: #ABBACE;
--s-300: #8C9EB6;
@ -45,7 +45,7 @@
--s-800: #314155;
--s-900: #1F2D3D;
--b-50:#F8F9FE;
--b-50: #F8F9FE;
--b-100: #F2F3F7;
--b-200: #E9EAEF;
--b-300: #DADBDF;
@ -56,7 +56,7 @@
--b-800: #3C3D40;
--b-900: #1B1C1F;
--r-50: #FFEBEE;
--r-50: #FFEBEE;
--r-100: #FFCCD1;
--r-200: #F69898;
--r-300: #EF6F6F;
@ -66,4 +66,15 @@
--r-700: #DE1E27;
--r-800: #D11320;
--r-900: #C30011;
// Common color aliases
--color-heading: #1f2d3d;
--color-body: #3c4858;
--color-border: #e0e6ed;
--color-border-light: #f0f4f5;
--color-border-dark: #cad0d4;
--color-background: #f4f6fb;
--color-background-light: #f9fafc;
}