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

Style changes to suit new design

Browse source
This commit is contained in:
Nithin David 2022-01-03 17:21:04 +05:30
parent eb9d9ace96
commit 9793a4d71c
8 changed files with 42 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,8 +15,8 @@
@include flex-shrink; @include flex-shrink;
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
cursor: pointer; cursor: pointer;
margin: var(--space-small); margin: var(--space-smaller) var(--space-small);
padding: 0 var(--space-small); padding: var(--space-small);
position: relative; position: relative;
&.active { &.active {
@ -27,8 +27,7 @@
.conversation--details { .conversation--details {
@include margin(0 0 0 $space-small); margin-left: var(--space-small);
@include padding($space-small 0);
} }
.conversation--user { .conversation--user {

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

@ -46,6 +46,11 @@
.button { .button {
border-bottom: 0; border-bottom: 0;
top: 0; top: 0;
.button__content {
display: inline-flex;
align-items: center;
}
} }
&.is-active { &.is-active {

3
app/javascript/dashboard/components/ui/Label.vue
View file

@ -164,12 +164,13 @@ export default {
.label-action--button { .label-action--button {
color: inherit; color: inherit;
display: inline-flex;
align-items: center;
} }
.label__title { .label__title {
max-width: inherit; max-width: inherit;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.2;
} }
</style> </style>

20
app/javascript/dashboard/components/widgets/InboxName.vue
View file

@ -3,6 +3,7 @@
:title="inbox.name" :title="inbox.name"
:icon="computedInboxClass" :icon="computedInboxClass"
color-scheme="secondary" color-scheme="secondary"
class="inbox--name"
/> />
</template> </template>
<script> <script>
@ -24,19 +25,14 @@ export default {
}, },
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.inbox--name { .label.secondary.inbox--name {
display: inline-flex;
padding: var(--space-micro) 0;
line-height: var(--space-slab);
font-weight: var(--font-weight-medium);
background: none; background: none;
color: var(--s-700); color: var(--s-600);
font-size: var(--font-size-mini); padding: 0;
}
.inbox--icon { .label__title {
margin-right: var(--space-micro); line-height: 1.2;
color: inherit; }
} }
</style> </style>

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

@ -41,19 +41,19 @@
<p v-if="lastMessageInChat" class="conversation--message"> <p v-if="lastMessageInChat" class="conversation--message">
<fluent-icon <fluent-icon
v-if="isMessagePrivate" v-if="isMessagePrivate"
size="16" size="14"
class="message--attachment-icon last-message-icon" class="message--attachment-icon last-message-icon"
icon="lock-closed" icon="lock-closed"
/> />
<fluent-icon <fluent-icon
v-else-if="messageByAgent" v-else-if="messageByAgent"
size="16" size="14"
class="message--attachment-icon last-message-icon" class="message--attachment-icon last-message-icon"
icon="arrow-reply" icon="arrow-reply"
/> />
<fluent-icon <fluent-icon
v-else-if="isMessageAnActivity" v-else-if="isMessageAnActivity"
size="16" size="14"
class="message--attachment-icon last-message-icon" class="message--attachment-icon last-message-icon"
icon="info" icon="info"
/> />
@ -62,7 +62,7 @@
</span> </span>
<span v-else-if="lastMessageInChat.attachments"> <span v-else-if="lastMessageInChat.attachments">
<fluent-icon <fluent-icon
size="16" size="14"
class="message--attachment-icon" class="message--attachment-icon"
:icon="attachmentIcon" :icon="attachmentIcon"
/> />
@ -73,7 +73,7 @@
</span> </span>
</p> </p>
<p v-else class="conversation--message"> <p v-else class="conversation--message">
<fluent-icon size="16" class="message--attachment-icon" icon="info" /> <fluent-icon size="14" class="message--attachment-icon" icon="info" />
<span> <span>
{{ this.$t(`CHAT_LIST.NO_MESSAGES`) }} {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
</span> </span>

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

@ -20,7 +20,7 @@
/> />
</h3> </h3>
<div class="conversation--header--actions"> <div class="conversation--header--actions">
<inbox-name :inbox="inbox" class="margin-right-small" /> <inbox-name :inbox="inbox" class="header__inbox-name" />
<span <span
v-if="isSnoozed" v-if="isSnoozed"
class="snoozed--display-text margin-right-small" class="snoozed--display-text margin-right-small"
@ -185,4 +185,10 @@ export default {
color: var(--y-900); color: var(--y-900);
} }
} }
.header__inbox-name {
margin: 0;
margin-right: var(--space-small);
background: transparent;
}
</style> </style>

13
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View file

@ -456,16 +456,15 @@ export default {
background: var(--white); background: var(--white);
padding: inherit 0; border-top-left-radius: calc(var(--space-medium) + 1px);
border-top-left-radius: calc( border-bottom-left-radius: calc(var(--space-medium) + 1px);
var(--space-medium) + 1px
); /* 100px of height + 10px of border */
border-bottom-left-radius: calc(
var(--space-medium) + 1px
); /* 100px of height + 10px of border */
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-right: 0; border-right: 0;
box-sizing: border-box; box-sizing: border-box;
&:hover {
padding: var(--space-small);
}
} }
} }
</style> </style>

8
app/javascript/shared/components/ui/dropdown/AddLabel.vue
View file

@ -20,11 +20,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.label--add { .label--add {
margin-bottom: var(--space-smaller);
margin-top: var(--space-smaller);
border: 0;
&::v-deep .label { &::v-deep .label {
cursor: pointer; cursor: pointer;
margin-bottom: 0;
background: transparent; background: transparent;
border-color: var(--s-600); border: 1px solid var(--s-600);
margin: 0;
&:hover { &:hover {
background: var(--s-50); background: var(--s-50);