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

Feature: Improve Dashboard UI (#630)

Browse source
This commit is contained in:
Nithin David Thomas 2020-03-22 11:44:40 +05:30 • committed by GitHub
parent 29bb2bff3a
commit fe70843fae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 111 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/dashboard/assets/scss/_typography.scss
View file

@ -18,6 +18,10 @@
font-size: $font-size-small;
}
.text-muted {
color: $color-gray;
}
a {
font-size: $font-size-small;
}

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

@ -20,12 +20,12 @@
border-radius: $space-smaller;
margin-right: $space-normal;
&:before {
line-height: 3.8rem;
&::before {
color: $medium-gray;
font-size: $font-size-default;
line-height: 3.8rem;
padding-left: $space-slab;
padding-right: $space-smaller;
color: $medium-gray;
}
.multiselect {
@ -49,33 +49,32 @@
}
.user--profile__meta {
align-items: flex-start;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-left: $space-slab;
}
.user--profile__button {
color: $color-woot;
font-size: $font-size-mini;
margin-top: $space-micro;
cursor: pointer;
padding: 0;
}
}
}
.button.resolve--button {
>.icon {
padding-right: $space-small;
font-size: $font-size-default;
padding-right: $space-small;
}
.spinner {
padding: 0 $space-one;
margin-right: $space-smaller;
padding: 0 $space-one;
&:before {
&::before {
border-top-color: $color-white;
}
}

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

@ -43,6 +43,11 @@
text-overflow: ellipsis;
white-space: nowrap;
width: 27rem;
.small-icon {
font-size: $font-size-mini;
vertical-align: top;
}
}
.conversation--meta {

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

@ -83,18 +83,12 @@
flex-direction: column;
.load-more-conversations {
color: $color-woot;
cursor: pointer;
font-size: $font-size-small;
padding: $space-normal;
&:hover {
background: $color-background;
}
width: 100%;
}
.end-of-list-text {
font-style: italic;
padding: $space-normal;
}

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

@ -28,9 +28,16 @@
color: $color-gray;
font-size: $font-size-default;
font-weight: $font-weight-medium;
.wrap,
.child-icon {
&:hover {
color: $color-woot;
}
}
}
.active a {
.active a .wrap {
color: $color-woot;
}
}
@ -100,7 +107,7 @@
margin-top: $space-medium;
>span {
margin-left: auto;
margin-left: $space-one;
}
}
}

22
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View file

@ -21,7 +21,17 @@
}
.tabs-title {
@include margin($zero $space-one);
@include margin($zero $space-slab);
.badge {
background: $color-background;
border-radius: $space-small;
color: $color-gray;
font-size: $font-size-micro;
font-weight: $font-weight-black;
margin-left: $space-smaller;
padding: $space-smaller;
}
&:first-child {
margin-left: 0;
@ -40,10 +50,13 @@
a {
@include position(relative, 1px null null null);
transition: all .15s $ease-in-out-cubic;
align-items: center;
border-bottom: 2px solid transparent;
color: $medium-gray;
display: flex;
flex-direction: row;
font-size: $font-size-small;
transition: all .15s $ease-in-out-cubic;
}
&.is-active {
@ -51,5 +64,10 @@
border-bottom-color: $color-woot;
color: $color-woot;
}
.badge {
background: $color-extra-light-blue;
color: $color-woot;
}
}
}

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

@ -32,7 +32,7 @@
<div
v-if="!hasCurrentPageEndReached && !chatListLoading"
class="text-center load-more-conversations"
class="clear button load-more-conversations"
@click="fetchConversations"
>
{{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}

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

@ -6,16 +6,19 @@
:class="computedClass"
>
<a
class="sub-menu-title"
:class="getMenuItemClass"
data-tooltip
aria-haspopup="true"
:title="menuItem.toolTip"
>
<i :class="menuItem.icon" />
{{ menuItem.label }}
<div class="wrap">
<i :class="menuItem.icon" />
{{ menuItem.label }}
</div>
<span
v-if="showItem(menuItem)"
class="ion-ios-plus-outline"
class="child-icon ion-android-add-circle"
@click.prevent="newLinkClick"
/>
</a>
@ -28,12 +31,14 @@
:to="child.toState"
>
<a href="#">
<i
v-if="computedInboxClass(child)"
class="inbox-icon"
:class="computedInboxClass(child)"
></i>
{{ child.label }}
<div class="wrap">
<i
v-if="computedInboxClass(child)"
class="inbox-icon"
:class="computedInboxClass(child)"
></i>
{{ child.label }}
</div>
</a>
</router-link>
</ul>
@ -115,3 +120,9 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.sub-menu-title {
display: flex;
justify-content: space-between;
}
</style>

3
app/javascript/dashboard/components/ui/Tabs/TabsItem.js
View file

@ -80,7 +80,8 @@ export default {
}
}}
>
{`${this.name} (${this.getItemCount})`}
{`${this.name}`}
<span class="badge">{this.getItemCount}</span>
</a>
</li>
);

1
app/javascript/dashboard/components/widgets/Avatar.vue
View file

@ -81,5 +81,6 @@ export default {
align-items: center;
justify-content: center;
text-align: center;
background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
}
</style>

1
app/javascript/dashboard/components/widgets/Thumbnail.vue
View file

@ -11,7 +11,6 @@
v-else
:username="username"
:class="thumbnailClass"
background-color="#1f93ff"
color="white"
:size="avatarSize"
/>

2
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View file

@ -116,7 +116,7 @@ export default {
}
const key = `CHAT_LIST.ATTACHMENTS.${fileType}`;
return `
<i class="${this.$t(`${key}.ICON`)}"></i>
<i class="small-icon ${this.$t(`${key}.ICON`)}"></i>
${this.$t(`${key}.CONTENT`)}
`;
},

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

@ -12,7 +12,7 @@
{{ chat.meta.sender.name }}
</h3>
<button
class="user--profile__button"
class="user--profile__button clear button small"
@click="$emit('contactPanelToggle')"
>
{{ viewProfileButtonLabel }}

53
app/javascript/dashboard/i18n/locale/en/chatlist.json
View file

@ -1,34 +1,55 @@
{
"CHAT_LIST": {
"LOADING": "Fetching conversations",
"LOAD_MORE_CONVERSATIONS": "Load more conversations...",
"EOF": "You have reached the end of the list",
"LOAD_MORE_CONVERSATIONS": "Load more conversations",
"EOF": "All conversations loaded 🎉",
"LIST": {
"404": "There are no active conversations in this group."
},
"TAB_HEADING": "Conversations",
"SEARCH": {
"INPUT": "Search for People, Chats, Saved Replies .."
},
"STATUS_TABS": [
{ "NAME": "Open", "KEY": "openCount" },
{ "NAME": "Resolved", "KEY": "allConvCount" }
"SEARCH": {
"INPUT": "Search for People, Chats, Saved Replies .."
},
"STATUS_TABS": [{
"NAME": "Open",
"KEY": "openCount"
},
{
"NAME": "Resolved",
"KEY": "allConvCount"
}
],
"ASSIGNEE_TYPE_TABS": [
{ "NAME": "Mine", "KEY": "me", "COUNT_KEY": "mineCount" },
{ "NAME": "Unassigned", "KEY": "unassigned", "COUNT_KEY": "unAssignedCount"},
{ "NAME": "All", "KEY": "all", "COUNT_KEY": "allCount" }
"ASSIGNEE_TYPE_TABS": [{
"NAME": "Mine",
"KEY": "me",
"COUNT_KEY": "mineCount"
},
{
"NAME": "Unassigned",
"KEY": "unassigned",
"COUNT_KEY": "unAssignedCount"
},
{
"NAME": "All",
"KEY": "all",
"COUNT_KEY": "allCount"
}
],
"CHAT_STATUS_ITEMS": [
{ "TEXT": "Open", "VALUE": "open" },
{ "TEXT": "Resolved", "VALUE": "resolved" }
"CHAT_STATUS_ITEMS": [{
"TEXT": "Open",
"VALUE": "open"
},
{
"TEXT": "Resolved",
"VALUE": "resolved"
}
],
"ATTACHMENTS": {
"image": {
"ICON": "ion-camera",
"ICON": "ion-image",
"CONTENT": "Picture message"
},
"audio": {