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

fix: Hide show more labels button when there's no overflow (#6097)

Browse source
This commit is contained in:
Nithin David Thomas 2022-12-19 22:24:20 +05:30 committed by GitHub
parent 022d0b0ea3
commit d1a26e80f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

@ -155,12 +155,20 @@ $default-button-height: 4.0rem;
// Sizes
&.tiny {
height: var(--space-medium);
.icon+.button__content {
padding-left: var(--space-micro);
}
}
&.small {
height: var(--space-large);
padding-bottom: var(--space-smaller);
padding-top: var(--space-smaller);
.icon+.button__content {
padding-left: var(--space-smaller);
}
}
&.large {
@ -190,6 +198,10 @@ $default-button-height: 4.0rem;
height: auto;
margin: 0;
padding: 0;
&:hover {
text-decoration: underline;
}
}
}

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

@ -4,7 +4,7 @@
<fluent-icon :icon="icon" size="12" class="label--icon" />
</span>
<span
v-if="variant === 'smooth'"
v-if="variant === 'smooth' && title && !icon"
:style="{ background: color }"
class="label-color-dot"
/>
@ -117,14 +117,16 @@ export default {
height: var(--space-medium);
&.small {
font-size: var(--font-size-micro);
font-size: var(--font-size-mini);
padding: var(--space-micro) var(--space-smaller);
line-height: 1.2;
letter-spacing: 0.15px;
height: var(--space-two);
}
.label--icon {
cursor: pointer;
}
.label-color-dot {
margin-right: var(--space-smaller);
}
@ -221,14 +223,22 @@ export default {
}
.label-action--button {
margin-bottom: var(--space-minus-micro);
display: flex;
margin-right: var(--space-smaller);
}
.label-color-dot {
display: inline-block;
width: var(--space-one);
height: var(--space-one);
width: var(--space-slab);
height: var(--space-slab);
border-radius: var(--border-radius-small);
margin-right: var(--space-smaller);
box-shadow: var(--shadow-small);
}
.label.small .label-color-dot {
width: var(--space-small);
height: var(--space-small);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow-small);
}
</style>

5
app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
View file

@ -66,6 +66,8 @@ export default {
const labelContainer = this.$refs.labelContainer;
const labels = this.$refs.labelContainer.querySelectorAll('.label');
let labelOffset = 0;
this.showExpandLabelButton = false;
Array.from(labels).forEach((label, index) => {
labelOffset += label.offsetWidth + 8;
@ -82,9 +84,10 @@ export default {
<style lang="scss" scoped>
.show-more--button {
height: var(--space-medium);
height: var(--space-two);
position: sticky;
flex-shrink: 0;
right: 0;
margin-right: var(--space-medium);
&.secondary:focus {