diff --git a/.scss-lint.yml b/.scss-lint.yml
index 0abfd32a6..dadb2c2cd 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -249,7 +249,7 @@ linters:
enabled: false
UnnecessaryMantissa:
- enabled: true
+ enabled: false
UnnecessaryParentReference:
enabled: true
diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
index b88cd7c9f..b75d3bf77 100644
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -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
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 1dd7ac248..6d522dc9b 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -57,6 +57,8 @@
}
.multiselect__placeholder {
+ color: $color-gray;
+ font-weight: $font-weight-normal;
padding-top: $space-small;
}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index e16841d38..649b3b31b 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -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;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index bc54330ce..777d69cda 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -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;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index 9f0ac0bd2..ef5e1dea9 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -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;
}
}
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index e4b9c22f8..52838fa3f 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -150,6 +150,7 @@ export default {
id: inbox.id,
label: inbox.name,
toState: frontendURL(`inbox/${inbox.id}`),
+ type: inbox.channel_type,
})),
};
},
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index 087467616..2340d1f7f 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/SidebarItem.vue
@@ -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"
>
- {{ child.label }}
+
+
+ {{ child.label }}
+
@@ -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' } });
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 1057cbb15..b36e70d51 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -22,7 +22,6 @@
:label="data.attachment.fallback_title"
:readable-time="readableTime"
/>
-