KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 33 deletions
Show stats 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 {
right: 0;
top: 60%;
}
}
.multiselect__content .multiselect__option {
font-size: $font-size-small;
font-weight: $font-weight-normal;
.multiselect__content {
max-width: 100%;
&.multiselect__option--highlight {
background: var(--white);
color: var(--color-body);
}
.multiselect__option {
font-size: $font-size-small;
font-weight: $font-weight-normal;
&.multiselect__option--highlight:hover {
background: var(--w-50);
color: var(--color-body);
&::after {
background: var(--w-50);
color: var(--s-600);
span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
&.multiselect__option--highlight::after {
background: transparent;
}
&.multiselect__option--selected {
background: var(--w-400);
color: var(--white);
&.multiselect__option--highlight {
background: var(--white);
color: var(--color-body);
}
&.multiselect__option--highlight:hover {
background: var(--w-600);
color: var(--white);
background: var(--w-50);
color: var(--color-body);
&::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);
&:hover {
&::after {
background: transparent;
color: var(--white);
}
&::after:hover {
color: var(--color-body);
}
}
@ -126,7 +137,6 @@
}
.sidebar-labels-wrap {
&.has-edited,
&:hover {
.multiselect {
@ -149,7 +159,6 @@
}
}
.multiselect-wrap--small {
$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-radius: var(--space-smaller);
margin-right: var(--space-small);
width: 20.2rem;
width: 21.6rem;
.icon {
color: $medium-gray;
@ -25,11 +25,12 @@ $resolve-button-width: 13.2rem;
}
.multiselect {
border-radius: var(--border-radius-small);
margin: 0;
min-width: 0;
.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"
:loading="uiFlags.isFetching"
:allow-empty="true"
:deselect-label="$t('CONVERSATION.ASSIGNMENT.REMOVE')"
deselect-label=""
:options="agentList"
:placeholder="$t('CONVERSATION.ASSIGNMENT.SELECT_AGENT')"
:select-label="$t('CONVERSATION.ASSIGNMENT.ASSIGN')"
select-label=""
label="name"
selected-label
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 {
position: absolute;
right: $space-normal;