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

Enhancement: Update the design of inbox listing in sidebar (#511)

Browse source 
Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas 2020-02-19 10:30:34 +05:30 committed by GitHub
parent f00e1dcdc8
commit fbefb78817
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 165 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.scss-lint.yml
View file

@ -249,7 +249,7 @@ linters:
enabled: false
UnnecessaryMantissa:
enabled: true
enabled: false
UnnecessaryParentReference:
enabled: true

21
app/javascript/dashboard/assets/scss/_variables.scss
View file

@ -12,7 +12,7 @@ $font-size-mega: 3.4rem;
$font-size-giga: 4.0rem;
// spaces
$zero: 0rem;
$zero: 0;
$space-micro: 0.2rem;
$space-smaller: 0.4rem;
$space-small: 0.8rem;
@ -42,16 +42,16 @@ $woot-logo-padding: $space-large $space-two;
// Colors
$color-woot: #1f93ff;
$color-gray: #6E6F73;
$color-light-gray: #999A9B;
$color-border: #E0E6ED;
$color-gray: #6e6f73;
$color-light-gray: #999a9b;
$color-border: #e0e6ed;
$color-border-light: #f0f4f5;
$color-background: #EFF2F7;
$color-background-light: #F9FAFC;
$color-white: #FFF;
$color-body: #3C4858;
$color-heading: #1F2D3D;
$color-extra-light-blue: #F5F7F9;
$color-background: #eff2f7;
$color-background-light: #f9fafc;
$color-white: #fff;
$color-body: #3c4858;
$color-heading: #1f2d3d;
$color-extra-light-blue: #f5f7f9;
$primary-color: $color-woot;
$secondary-color: #ff5216;
@ -61,6 +61,7 @@ $alert-color: #ff4949;
// Color-palettes
$color-primary-light: #c7e3ff;
$color-primary-dark: darken($color-woot, 20%);
// Thumbnail

2
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View file

@ -57,6 +57,8 @@
}
.multiselect__placeholder {
color: $color-gray;
font-weight: $font-weight-normal;
padding-top: $space-small;
}

2
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View file

@ -34,7 +34,7 @@
.conversation--message {
color: $color-body;
font-size: $font-size-small;
font-weight: $font-weight-light;
font-weight: $font-weight-normal;
height: $space-medium;
line-height: $space-medium;
margin: $zero;

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

@ -1,3 +1,83 @@
@mixin bubble-with-tyes {
@include padding($space-smaller $space-one);
@include margin($zero);
background: $color-primary-light;
border-radius: $space-small;
color: $color-heading;
font-size: $font-size-small;
position: relative;
.icon {
bottom: $space-smaller;
position: absolute;
right: $space-small;
}
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
.audio {
.time {
margin-top: -$space-two;
}
}
.image {
@include flex;
align-items: flex-end;
justify-content: center;
text-align: center;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
margin-left: -$space-large;
white-space: nowrap;
}
.modal-image {
max-height: 80%;
max-width: 80%;
}
}
.map {
@include flex;
flex-direction: column;
text-align: right;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
@include padding($space-small);
margin-left: -$space-smaller;
margin-top: -$space-two;
white-space: nowrap;
}
.locname {
font-weight: $font-weight-medium;
padding: $space-smaller;
}
}
}
.conversations-sidebar {
@include flex;
flex-direction: column;
@ -51,14 +131,14 @@
.current-chat {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
flex-direction: column;
div {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
flex-direction: column;
img {
@include margin($space-normal);
@ -76,18 +156,19 @@
.conv-empty-state {
@include flex;
@include full-height;
flex-direction: column;
@include flex-align(center, middle);
flex-direction: column;
}
}
.conversation-panel {
@include flex;
@include flex-weight(1);
flex-direction: column;
@include margin($zero);
flex-direction: column;
// Firefox flexbox fix
height: 100%;
margin-bottom: $space-small;
overflow-y: scroll;
>li {
@ -117,6 +198,7 @@
}
.bubble {
@include bubble-with-tyes;
max-width: 50rem;
text-align: left;
word-wrap: break-word;
@ -208,6 +290,7 @@
@include padding($space-smaller $space-normal);
@include flex-align($x: center, $y: null);
background: lighten($warning-color, 32%);
border: 1px solid lighten($warning-color, 26%);
border-radius: $space-smaller;
font-size: $font-size-small;
@ -240,87 +323,6 @@
}
}
.bubble {
@include padding($space-smaller $space-one);
@include margin($zero);
background: #c7e3ff;
border-radius: $space-small;
box-shadow: 0 .5px .5px rgba(0, 0, 0, .05);
color: $color-heading;
font-size: $font-size-small;
position: relative;
.icon {
bottom: $space-smaller;
position: absolute;
right: $space-small;
}
.message-text__wrap {
position: relative;
}
.message-text {
&::after {
content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline;
}
}
.audio {
.time {
margin-top: -$space-two;
}
}
.image {
@include flex;
justify-content: center;
align-items: flex-end;
text-align: center;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
margin-left: -$space-large;
white-space: nowrap;
}
.modal-image {
max-height: 80%;
max-width: 80%;
}
}
.map {
@include flex;
flex-direction: column;
text-align: right;
img {
@include padding($space-small);
max-height: 30rem;
max-width: 20rem;
}
.time {
@include padding($space-small);
margin-left: -$space-smaller;
margin-top: -$space-two;
white-space: nowrap;
}
.locname {
font-weight: $font-weight-medium;
padding: $space-smaller;
}
}
}
.time {
bottom: -$space-micro;
color: $color-gray;

40
app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
View file

@ -1,7 +1,7 @@
.side-menu {
i {
min-width: $space-two;
margin-right: $space-smaller;
min-width: $space-two;
}
}
@ -27,6 +27,26 @@
border-radius: $space-smaller;
color: $color-gray;
font-size: $font-size-default;
font-weight: $font-weight-medium;
}
.active a {
color: $color-woot;
}
}
.nested {
a {
font-size: $font-size-small;
margin-bottom: $space-micro;
margin-top: $space-micro;
>.inbox-icon {
display: inline-block;
margin-right: $space-micro;
min-width: $space-normal;
text-align: center;
}
}
}
}
@ -36,17 +56,17 @@
@include flex;
@include space-between-column;
@include padding($space-one $space-normal $space-one $space-one);
flex-direction: column;
@include border-normal-top;
flex-direction: column;
position: relative;
.dropdown-pane {
@include elegant-card;
@include border-light;
display: block;
left: 18%;
top: -110%;
visibility: visible;
display: block;
width: 80%;
z-index: 999;
@ -79,23 +99,23 @@
font-size: $font-size-medium;
margin-top: $space-medium;
> span {
>span {
margin-left: auto;
}
}
}
.menu-title + ul > li > a {
.menu-title+ul>li>a {
@include padding($space-micro null);
color: $medium-gray;
line-height: $global-lineheight;
}
.current-user {
align-items: center;
@include flex;
flex-direction: row;
align-items: center;
cursor: pointer;
flex-direction: row;
.current-user--data {
@include flex;
@ -105,7 +125,7 @@
font-size: $font-size-small;
font-weight: $font-weight-medium;
line-height: 1;
margin-bottom: $zero;
margin-bottom: $space-smaller;
margin-left: $space-one;
margin-top: $space-micro;
}
@ -132,7 +152,7 @@
display: none;
margin-right: $space-normal;
@media screen and (max-width: 1200px){
@media screen and (max-width: 1200px) {
display: block;
}
}
@ -141,7 +161,7 @@
display: block;
margin-right: $space-normal;
@media screen and (max-width: 1200px){
@media screen and (max-width: 1200px) {
display: none;
}
}

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

@ -150,6 +150,7 @@ export default {
id: inbox.id,
label: inbox.name,
toState: frontendURL(`inbox/${inbox.id}`),
type: inbox.channel_type,
})),
};
},

38
app/javascript/dashboard/components/layout/SidebarItem.vue
View file

@ -24,11 +24,17 @@
v-for="child in menuItem.children"
:key="child.id"
active-class="active flex-container"
:class="computedInboxClass(child)"
tag="li"
:to="child.toState"
>
<a>{{ child.label }}</a>
<a href="#">
<i
v-if="computedInboxClass(child)"
class="inbox-icon"
:class="computedInboxClass(child)"
></i>
{{ child.label }}
</a>
</router-link>
</ul>
</router-link>
@ -41,6 +47,27 @@ import { mapGetters } from 'vuex';
import router from '../../routes';
import auth from '../../api/auth';
const INBOX_TYPES = {
WEB: 'Channel::WebWidget',
FB: 'Channel::FacebookPage',
TWITTER: 'Channel::TwitterProfile',
};
const getInboxClassByType = type => {
switch (type) {
case INBOX_TYPES.WEB:
return 'ion-earth';
case INBOX_TYPES.FB:
return 'ion-social-facebook';
case INBOX_TYPES.TWITTER:
return 'ion-social-twitter';
default:
return '';
}
};
export default {
props: {
menuItem: {
@ -75,10 +102,9 @@ export default {
},
methods: {
computedInboxClass(child) {
if (parseInt(this.activeInbox, 10) === child.channel_id) {
return 'active flex-container';
}
return ' ';
const { type } = child;
const classByType = getInboxClassByType(type);
return classByType;
},
newLinkClick() {
router.push({ name: 'settings_inbox_new', params: { page: 'new' } });

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

@ -22,7 +22,6 @@
:label="data.attachment.fallback_title"
:readable-time="readableTime"
/>
<i v-if="data.message_type === 2" class="icon ion-person" />
<bubble-text
v-if="data.content"
:message="message"