LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Chore: Refactors sidebar styles (#2416)

Browse Source 
* Chore: Refactors sidebar styles

* Removes unused i18n
This commit is contained in:
Nithin David Thomas
2021-06-11 17:11:13 +05:30
committed by GitHub
parent e9fa9e5eff
commit 75d05e55ae
13 changed files with 91 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View File

@@ -131,7 +131,7 @@ $header-text-rendering: optimizeLegibility;
$small-font-size: 80%; $small-font-size: 80%;
$header-small-font-color: $medium-gray; $header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.45; $paragraph-lineheight: 1.45;
$paragraph-margin-bottom: 1rem; $paragraph-margin-bottom: var(--space-small);
$paragraph-text-rendering: optimizeLegibility; $paragraph-text-rendering: optimizeLegibility;
$code-color: $black; $code-color: $black;
$code-font-family: $font-family-monospace; $code-font-family: $font-family-monospace;
@@ -345,21 +345,21 @@ $fieldset-padding: $space-two;
$fieldset-margin: $space-one $zero; $fieldset-margin: $space-one $zero;
$legend-padding: rem-calc(0 3); $legend-padding: rem-calc(0 3);
$form-spacing: $space-normal; $form-spacing: $space-normal;
$helptext-color: $header-color; $helptext-color: $color-body;
$helptext-font-size: $font-size-small; $helptext-font-size: $font-size-small;
$helptext-font-style: italic; $helptext-font-style: italic;
$input-prefix-color: $header-color; $input-prefix-color: $color-body;
$input-prefix-background: var(--b-100); $input-prefix-background: var(--b-100);
$input-prefix-border: 1px solid $color-border; $input-prefix-border: 1px solid $color-border;
$input-prefix-padding: 1rem; $input-prefix-padding: 1rem;
$form-label-color: $header-color; $form-label-color: $color-body;
$form-label-font-size: rem-calc(14); $form-label-font-size: rem-calc(14);
$form-label-font-weight: $font-weight-medium; $form-label-font-weight: $font-weight-medium;
$form-label-line-height: 1.8; $form-label-line-height: 1.8;
$select-background: $white; $select-background: $white;
$select-triangle-color: $dark-gray; $select-triangle-color: $dark-gray;
$select-radius: var(--border-radius-normal); $select-radius: var(--border-radius-normal);
$input-color: $header-color; $input-color: $color-body;
$input-placeholder-color: $light-gray; $input-placeholder-color: $light-gray;
$input-font-family: inherit; $input-font-family: inherit;
$input-font-size: $font-size-default; $input-font-size: $font-size-default;

2
app/javascript/dashboard/assets/scss/_typography.scss
View File

@@ -19,7 +19,7 @@
} }
.text-muted { .text-muted {
color: $color-gray; color: var(--s-300);
} }
a { a {

1
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View File

@@ -121,6 +121,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
padding: var(--space-normal) var(--space-two);
} }
} }
</style> </style>

1
app/javascript/dashboard/i18n/locale/en/conversation.json
View File

@@ -108,7 +108,6 @@
} }
}, },
"CONVERSATION_SIDEBAR": { "CONVERSATION_SIDEBAR": {
"DETAILS_TITLE": "Conversations Details",
"ASSIGNEE_LABEL": "Assigned Agent", "ASSIGNEE_LABEL": "Assigned Agent",
"SELF_ASSIGN": "Assign to me", "SELF_ASSIGN": "Assign to me",
"TEAM_LABEL": "Assigned Team", "TEAM_LABEL": "Assigned Team",

14
app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
View File

@@ -47,18 +47,20 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~dashboard/assets/scss/variables'; ::v-deep {
@import '~dashboard/assets/scss/mixins'; .contact--profile {
padding-bottom: var(--space-slab);
margin-bottom: var(--space-normal);
}
}
.contact--panel { .contact--panel {
@include border-normal-left;
background: white; background: white;
font-size: var(--font-size-small); font-size: var(--font-size-small);
overflow-y: auto; overflow-y: auto;
overflow: auto; overflow: auto;
position: relative; position: relative;
padding: var(--space-one); border-left: 1px solid var(--color-border);
padding: var(--space-medium) var(--space-two);
} }
.close-button { .close-button {

7
app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
View File

@@ -77,13 +77,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/mixins';
.contact-conversation--panel {
padding: 0 var(--space-slab) var(--space-two);
}
.contact-conversation__wrap { .contact-conversation__wrap {
margin-left: var(--space-medium); margin-left: var(--space-medium);
} }

2
app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
View File

@@ -46,7 +46,7 @@ export default {
<style scoped> <style scoped>
.custom-attributes--panel { .custom-attributes--panel {
padding: 0 var(--space-slab) var(--space-slab); margin-bottom: var(--space-normal);
} }
.conv-details--item { .conv-details--item {

31
app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
View File

@@ -1,17 +1,11 @@
<template> <template>
<div class="conv-details--item"> <div class="conv-details--item">
<h4 class="conv-details--item__label text-block-title"> <h4 class="conv-details--item__label text-block-title">
<div class="title--icon"> <span class="title--icon">
<emoji-or-icon :icon="icon" :emoji="emoji" /> <emoji-or-icon :icon="icon" :emoji="emoji" />
{{ title }} <span>{{ title }}</span>
</div> </span>
<button <slot name="button"></slot>
v-if="showEdit"
class="button clear small edit-button"
@click="onEdit"
>
{{ $t('CONTACT_PANEL.EDIT_LABEL') }}
</button>
</h4> </h4>
<div v-if="value" class="conv-details--item__value"> <div v-if="value" class="conv-details--item__value">
<slot> <slot>
@@ -33,28 +27,17 @@ export default {
icon: { type: String, default: '' }, icon: { type: String, default: '' },
emoji: { type: String, default: '' }, emoji: { type: String, default: '' },
value: { type: [String, Number], default: '' }, value: { type: [String, Number], default: '' },
showEdit: { type: Boolean, default: false },
},
methods: {
onEdit() {
this.$emit('edit');
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/mixins';
.conv-details--item { .conv-details--item {
padding-bottom: var(--space-normal); overflow: auto;
.conv-details--item__label { .conv-details--item__label {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--space-smaller);
.edit-button { .edit-button {
padding: 0; padding: 0;
@@ -64,11 +47,13 @@ export default {
.conv-details--item__value { .conv-details--item__value {
word-break: break-all; word-break: break-all;
margin-left: var(--space-medium); margin-left: var(--space-medium);
margin-bottom: var(--space-normal);
} }
.title--icon .icon--emoji, .title--icon .icon--emoji,
.title--icon .icon--font { .title--icon .icon--font {
margin-right: var(--space-small); display: inline-block;
width: var(--space-medium);
} }
.title--icon { .title--icon {

84
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View File

@@ -5,24 +5,25 @@
</span> </span>
<contact-info :contact="contact" :channel-type="channelType" /> <contact-info :contact="contact" :channel-type="channelType" />
<div class="conversation--actions"> <div class="conversation--actions">
<h4 class="sub-block-title">
{{ $t('CONVERSATION_SIDEBAR.DETAILS_TITLE') }}
</h4>
<div class="multiselect-wrap--small"> <div class="multiselect-wrap--small">
<div class="self-assign"> <contact-details-item
<label class="multiselect__label"> :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
{{ $t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL') }} icon="ion-headphone"
</label> emoji="🧑‍🚀"
<woot-button >
v-if="showSelfAssign" <template v-slot:button>
icon="ion-arrow-right-c" <woot-button
variant="link" v-if="showSelfAssign"
class-names="button-content" icon="ion-arrow-right-c"
@click="onSelfAssign" variant="link"
> size="small"
{{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }} class-names="button-content"
</woot-button> @click="onSelfAssign"
</div> >
{{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
</woot-button>
</template>
</contact-details-item>
<multiselect <multiselect
v-model="assignedAgent" v-model="assignedAgent"
:options="agentsList" :options="agentsList"
@@ -46,9 +47,11 @@
</multiselect> </multiselect>
</div> </div>
<div class="multiselect-wrap--small"> <div class="multiselect-wrap--small">
<label class="multiselect__label"> <contact-details-item
{{ $t('CONVERSATION_SIDEBAR.TEAM_LABEL') }} :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
</label> icon="ion-ios-people"
emoji="🎢"
/>
<multiselect <multiselect
v-model="assignedTeam" v-model="assignedTeam"
:options="teamsList" :options="teamsList"
@@ -344,17 +347,27 @@ export default {
overflow-y: auto; overflow-y: auto;
overflow: auto; overflow: auto;
position: relative; position: relative;
padding: $space-one;
i { i {
margin-right: $space-smaller; margin-right: $space-smaller;
} }
} }
.multiselect-wrap--small { ::v-deep {
&::v-deep .multiselect__element { .contact--profile {
span { padding-bottom: var(--space-slab);
width: 100%; margin-bottom: var(--space-normal);
border-bottom: 1px solid var(--color-border-light);
}
.multiselect-wrap--small {
.multiselect {
padding-left: var(--space-medium);
box-sizing: border-box;
}
.multiselect__element {
span {
width: 100%;
}
} }
} }
} }
@@ -367,10 +380,6 @@ export default {
color: $color-heading; color: $color-heading;
} }
.conversation--details {
padding: 0 var(--space-slab);
}
.conversation--labels { .conversation--labels {
padding: $space-medium; padding: $space-medium;
@@ -398,17 +407,10 @@ export default {
justify-content: center; justify-content: center;
} }
.sub-block-title {
margin-bottom: var(--space-small);
}
.conversation--actions { .conversation--actions {
padding: 0 var(--space-normal) var(--space-smaller); margin-bottom: var(--space-normal);
} }
.multiselect__label {
margin-bottom: var(--space-smaller);
}
.option__desc { .option__desc {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -419,12 +421,4 @@ export default {
flex-shrink: 0; flex-shrink: 0;
} }
} }
.self-assign {
display: flex;
justify-content: space-between;
.button-content {
margin-bottom: var(--space-small);
}
}
</style> </style>

42
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
View File

@@ -3,19 +3,18 @@
<div class="contact--info"> <div class="contact--info">
<thumbnail <thumbnail
:src="contact.thumbnail" :src="contact.thumbnail"
size="64px" size="56px"
:badge="channelType"
:username="contact.name" :username="contact.name"
:status="contact.availability_status" :status="contact.availability_status"
/> />
<div class="contact--details"> <div class="contact--details">
<div class="contact--name"> <h3 class="sub-block-title contact--name">
{{ contact.name }} {{ contact.name }}
</div> </h3>
<div v-if="additionalAttributes.description" class="contact--bio"> <p v-if="additionalAttributes.description" class="contact--bio">
{{ additionalAttributes.description }} {{ additionalAttributes.description }}
</div> </p>
<social-icons :social-profiles="socialProfiles" /> <social-icons :social-profiles="socialProfiles" />
<div class="contact--metadata"> <div class="contact--metadata">
<contact-info-row <contact-info-row
@@ -52,7 +51,7 @@
<woot-button <woot-button
v-if="!showNewMessage" v-if="!showNewMessage"
class="edit-contact" class="edit-contact"
variant="clear link" variant="link"
size="small" size="small"
@click="toggleEditModal" @click="toggleEditModal"
> >
@@ -61,6 +60,7 @@
<div v-else class="contact-actions"> <div v-else class="contact-actions">
<woot-button <woot-button
class="new-message" class="new-message"
variant="smooth"
size="small expanded" size="small expanded"
@click="toggleConversationModal" @click="toggleConversationModal"
> >
@@ -152,7 +152,7 @@ export default {
@import '~dashboard/assets/scss/mixins'; @import '~dashboard/assets/scss/mixins';
.contact--profile { .contact--profile {
align-items: flex-start; align-items: flex-start;
padding: var(--space-normal) var(--space-normal); margin-bottom: var(--space-normal);
.user-thumbnail-box { .user-thumbnail-box {
margin-right: $space-normal; margin-right: $space-normal;
@@ -162,46 +162,26 @@ export default {
.contact--details { .contact--details {
margin-top: $space-small; margin-top: $space-small;
width: 100%; width: 100%;
p {
margin-bottom: 0;
}
} }
.contact--info { .contact--info {
align-items: flex-start;
display: flex;
flex-direction: column;
text-align: left; text-align: left;
} }
.contact--name { .contact--name {
@include text-ellipsis;
text-transform: capitalize; text-transform: capitalize;
white-space: normal; white-space: normal;
font-weight: $font-weight-bold;
font-size: $font-size-default;
}
.contact--bio {
margin: $space-small 0 0;
} }
.contact--metadata { .contact--metadata {
margin: var(--space-normal) 0 0; margin-bottom: var(--space-small);
} }
.social--icons {
i {
font-size: $font-weight-normal;
}
}
.contact-actions { .contact-actions {
margin: var(--space-small) 0; margin-top: var(--space-small);
} }
.button.edit-contact { .button.edit-contact {
margin-left: var(--space-two); margin-left: var(--space-medium);
padding-left: var(--space-micro);
} }
.button.new-message { .button.new-message {

15
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
View File

@@ -69,23 +69,21 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~dashboard/assets/scss/variables';
.contact-info--row { .contact-info--row {
.contact-info--icon { .contact-info--icon {
font-size: $font-size-default; font-size: var(--font-size-default);
min-width: $space-medium; min-width: var(--space-medium);
} }
} }
.contact-info--details { .contact-info--details {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--space-one); margin-bottom: var(--space-small);
color: $color-body; color: var(--color-body);
.copy-icon { .copy-icon {
margin-left: $space-one; margin-left: var(--space-smaller);
} }
&.a { &.a {
@@ -97,6 +95,7 @@ export default {
.contact-info--details .icon--emoji, .contact-info--details .icon--emoji,
.contact-info--details .icon--font { .contact-info--details .icon--font {
margin-right: var(--space-small); display: inline-block;
width: var(--space-medium);
} }
</style> </style>

15
app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
View File

@@ -42,15 +42,12 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~dashboard/assets/scss/variables';
.contact--social-icon {
font-size: $font-size-medium;
padding-right: $space-slab;
color: $color-body;
}
.social--icons { .social--icons {
margin-top: $space-small; margin-bottom: var(--space-small);
}
.contact--social-icon {
font-size: var(--font-size-medium);
padding-right: var(--space-slab);
color: var(--color-body);
} }
</style> </style>

14
app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="contact-conversation--panel sidebar-labels-wrap"> <div class="sidebar-labels-wrap">
<div <div
v-if="!conversationUiFlags.isFetching" v-if="!conversationUiFlags.isFetching"
class="contact-conversation--list" class="contact-conversation--list"
@@ -150,22 +150,16 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~dashboard/assets/scss/variables'; .sidebar-labels-wrap {
@import '~dashboard/assets/scss/mixins'; margin-bottom: var(--space-normal);
.contact-conversation--panel {
padding: var(--space-micro) var(--space-slab) var(--space-one)
var(--space-slab);
} }
.contact-conversation--list { .contact-conversation--list {
width: 100%; width: 100%;
.label-wrap { .label-wrap {
margin-left: var(--space-two); margin-left: var(--space-medium);
position: relative; position: relative;
line-height: var(--space-medium); line-height: var(--space-medium);
bottom: var(--space-small);
.dropdown-wrap { .dropdown-wrap {
display: flex; display: flex;