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
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 // Sizes
&.tiny { &.tiny {
height: var(--space-medium); height: var(--space-medium);
.icon+.button__content {
padding-left: var(--space-micro);
}
} }
&.small { &.small {
height: var(--space-large); height: var(--space-large);
padding-bottom: var(--space-smaller); padding-bottom: var(--space-smaller);
padding-top: var(--space-smaller); padding-top: var(--space-smaller);
.icon+.button__content {
padding-left: var(--space-smaller);
}
} }
&.large { &.large {
@ -190,6 +198,10 @@ $default-button-height: 4.0rem;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 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" /> <fluent-icon :icon="icon" size="12" class="label--icon" />
</span> </span>
<span <span
v-if="variant === 'smooth'" v-if="variant === 'smooth' && title && !icon"
:style="{ background: color }" :style="{ background: color }"
class="label-color-dot" class="label-color-dot"
/> />
@ -117,14 +117,16 @@ export default {
height: var(--space-medium); height: var(--space-medium);
&.small { &.small {
font-size: var(--font-size-micro); font-size: var(--font-size-mini);
padding: var(--space-micro) var(--space-smaller); padding: var(--space-micro) var(--space-smaller);
line-height: 1.2; line-height: 1.2;
letter-spacing: 0.15px; height: var(--space-two);
} }
.label--icon { .label--icon {
cursor: pointer; cursor: pointer;
}
.label-color-dot {
margin-right: var(--space-smaller); margin-right: var(--space-smaller);
} }
@ -221,14 +223,22 @@ export default {
} }
.label-action--button { .label-action--button {
margin-bottom: var(--space-minus-micro); display: flex;
margin-right: var(--space-smaller);
} }
.label-color-dot { .label-color-dot {
display: inline-block; display: inline-block;
width: var(--space-one); width: var(--space-slab);
height: var(--space-one); height: var(--space-slab);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
margin-right: var(--space-smaller); 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> </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 labelContainer = this.$refs.labelContainer;
const labels = this.$refs.labelContainer.querySelectorAll('.label'); const labels = this.$refs.labelContainer.querySelectorAll('.label');
let labelOffset = 0; let labelOffset = 0;
this.showExpandLabelButton = false;
Array.from(labels).forEach((label, index) => { Array.from(labels).forEach((label, index) => {
labelOffset += label.offsetWidth + 8; labelOffset += label.offsetWidth + 8;
@ -82,9 +84,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.show-more--button { .show-more--button {
height: var(--space-medium); height: var(--space-two);
position: sticky; position: sticky;
flex-shrink: 0; flex-shrink: 0;
right: 0;
margin-right: var(--space-medium); margin-right: var(--space-medium);
&.secondary:focus { &.secondary:focus {