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

Fix: Agent name overflow in dropdown menu (#2047)

Browse Source 
* Fixes agent name overflow

Co-authored-by: Sivin Varghese <64252451+sivin-git@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
This commit is contained in:
Sivin Varghese
2021-04-19 22:24:45 +05:30
committed by GitHub
parent 773557e49b
commit fa525fc107
4 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View File

@@ -29,46 +29,57 @@
&::before { &::before {
right: 0; right: 0;
top: 60%;
} }
} }
.multiselect__content .multiselect__option { .multiselect__content {
font-size: $font-size-small; max-width: 100%;
font-weight: $font-weight-normal;
&.multiselect__option--highlight { .multiselect__option {
background: var(--white); font-size: $font-size-small;
color: var(--color-body); font-weight: $font-weight-normal;
}
&.multiselect__option--highlight:hover { span {
background: var(--w-50); display: inline-block;
color: var(--color-body); overflow: hidden;
text-overflow: ellipsis;
&::after { white-space: nowrap;
background: var(--w-50); width: 100%;
color: var(--s-600);
} }
}
&.multiselect__option--highlight::after { &.multiselect__option--highlight {
background: transparent; background: var(--white);
} color: var(--color-body);
}
&.multiselect__option--selected {
background: var(--w-400);
color: var(--white);
&.multiselect__option--highlight:hover { &.multiselect__option--highlight:hover {
background: var(--w-600); background: var(--w-50);
color: var(--white); color: var(--color-body);
&::after { &::after {
background: transparent; background: var(--w-50);
color: var(--s-600);
}
}
&.multiselect__option--highlight::after {
background: transparent;
}
&.multiselect__option--selected {
background: var(--w-400);
color: var(--white);
&.multiselect__option--highlight:hover {
background: var(--w-600);
color: var(--white); color: var(--white);
&:hover { &::after {
background: transparent;
color: var(--white);
}
&::after:hover {
color: var(--color-body); color: var(--color-body);
} }
} }
@@ -126,7 +137,6 @@
} }
.sidebar-labels-wrap { .sidebar-labels-wrap {
&.has-edited, &.has-edited,
&:hover { &:hover {
.multiselect { .multiselect {
@@ -149,7 +159,6 @@
} }
} }
.multiselect-wrap--small { .multiselect-wrap--small {
$multiselect-height: 3.8rem; $multiselect-height: 3.8rem;

5
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View File

@@ -14,7 +14,7 @@ $resolve-button-width: 13.2rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--space-smaller); border-radius: var(--space-smaller);
margin-right: var(--space-small); margin-right: var(--space-small);
width: 20.2rem; width: 21.6rem;
.icon { .icon {
color: $medium-gray; color: $medium-gray;
@@ -25,11 +25,12 @@ $resolve-button-width: 13.2rem;
} }
.multiselect { .multiselect {
border-radius: var(--border-radius-small);
margin: 0; margin: 0;
min-width: 0; min-width: 0;
.multiselect__tags { .multiselect__tags {
border: 0; border-color: transparent;
} }
} }
} }

4
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -36,10 +36,10 @@
v-model="currentChat.meta.assignee" v-model="currentChat.meta.assignee"
:loading="uiFlags.isFetching" :loading="uiFlags.isFetching"
:allow-empty="true" :allow-empty="true"
:deselect-label="$t('CONVERSATION.ASSIGNMENT.REMOVE')" deselect-label=""
:options="agentList" :options="agentList"
:placeholder="$t('CONVERSATION.ASSIGNMENT.SELECT_AGENT')" :placeholder="$t('CONVERSATION.ASSIGNMENT.SELECT_AGENT')"
:select-label="$t('CONVERSATION.ASSIGNMENT.ASSIGN')" select-label=""
label="name" label="name"
selected-label selected-label
track-by="id" track-by="id"

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

@@ -292,6 +292,14 @@ export default {
} }
} }
.multiselect-wrap--small {
&::v-deep .multiselect__element {
span {
width: 100%;
}
}
}
.close-button { .close-button {
position: absolute; position: absolute;
right: $space-normal; right: $space-normal;