Improvements for labels collapse
This commit is contained in:
parent
f152a6735a
commit
a593723dd2
2 changed files with 23 additions and 13 deletions
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
<woot-label
|
||||
v-if="showAssignee"
|
||||
v-tooltip="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
|
||||
v-tooltip="$t('CONVERSATION.CARD.AGENT_TOOLTIP')"
|
||||
icon="headset"
|
||||
small
|
||||
:title="assigneeName"
|
||||
|
@ -137,10 +137,14 @@
|
|||
/>
|
||||
<woot-button
|
||||
v-if="showExpandLabelButton"
|
||||
v-tooltip.top="
|
||||
showAllLabels
|
||||
? $t('CONVERSATION.CARD.HIDE_LABELS')
|
||||
: $t('CONVERSATION.CARD.SHOW_LABELS')
|
||||
"
|
||||
class="remaining-labels"
|
||||
color-scheme="secondary"
|
||||
variant="smooth"
|
||||
:icon="showAllLabels ? 'chevron-left' : 'chevron-down'"
|
||||
variant="clear"
|
||||
:icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
|
||||
size="tiny"
|
||||
@click="onShowLabels"
|
||||
/>
|
||||
|
@ -427,7 +431,8 @@ export default {
|
|||
});
|
||||
|
||||
this.showExpandLabelButton =
|
||||
footer.offsetWidth - 80 < labelsWrap.scrollWidth;
|
||||
footer.offsetWidth - 24 < labelsWrap.scrollWidth;
|
||||
if (!this.showExpandLabelButton) return;
|
||||
|
||||
const labelsWrapWidth = footer.scrollWidth;
|
||||
let currentIndex = 0;
|
||||
|
@ -436,7 +441,7 @@ export default {
|
|||
|
||||
do {
|
||||
if (labelsWidth + 80 < labelsWrapWidth) {
|
||||
labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 24;
|
||||
labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 8;
|
||||
currentIndex += 1;
|
||||
} else {
|
||||
break;
|
||||
|
@ -471,11 +476,12 @@ export default {
|
|||
let currentIndex = 0;
|
||||
let labelsWidth = 0;
|
||||
this.showExpandLabelButton =
|
||||
footer.offsetWidth - 80 < labelsWrap.scrollWidth;
|
||||
footer.offsetWidth - 24 < labelsWrap.scrollWidth;
|
||||
|
||||
if (!this.showExpandLabelButton) return;
|
||||
do {
|
||||
if (labelsWidth + 80 < labelsWrapWidth) {
|
||||
labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 24;
|
||||
labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 8;
|
||||
currentIndex += 1;
|
||||
} else {
|
||||
break;
|
||||
|
@ -680,10 +686,7 @@ export default {
|
|||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
margin-bottom: var(--space-smaller);
|
||||
}
|
||||
margin-top: var(--space-smaller);
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
|
@ -713,6 +716,10 @@ export default {
|
|||
.hidden {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: var(--space-smaller);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -156,7 +156,10 @@
|
|||
},
|
||||
"CARD": {
|
||||
"COPY_LINK": "Copy link",
|
||||
"GOTO_INBOX": "Goto inbox"
|
||||
"GOTO_INBOX": "Goto inbox",
|
||||
"SHOW_LABELS": "Show labels",
|
||||
"HIDE_LABELS": "Hide labels",
|
||||
"AGENT_TOOLTIP": "Right click to change agent"
|
||||
},
|
||||
"VIA_TOOLTIP": {
|
||||
"INSTAGRAM_DM": "Via instagram DM",
|
||||
|
|
Loading…
Reference in a new issue