From d1a26e80f44df2ebca0a86f229c6aea8d789dc29 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 19 Dec 2022 22:24:20 +0530
Subject: [PATCH 1/4] fix: Hide show more labels button when there's no
overflow (#6097)
---
.../assets/scss/widgets/_buttons.scss | 12 ++++++++++
.../dashboard/components/ui/Label.vue | 22 ++++++++++++++-----
.../conversationCardComponents/CardLabels.vue | 5 ++++-
3 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 478045000..15f344ddf 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -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;
+ }
}
}
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 7e237957e..c41f67180 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -4,7 +4,7 @@
@@ -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);
}
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 445dbaac1..e36b044e8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -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 {