style: Improve layout of label UI component (#2908)

apache · May 31, 2024 · 82784c3 · 82784c3
1 parent 1a8c6d2
commit 82784c3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.html
@@ -18,6 +18,7 @@
 
 <span
     class="basic-label"
+    [ngClass]="small ? 'small-label' : ''"
     [ngStyle]="{
         background: labelBackground,
         borderColor: 'color-mix(in srgb, ' + labelBackground + ' 70%, black)',

diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.scss
@@ -19,9 +19,13 @@
 .basic-label {
     border-radius: 15px;
     min-width: 50px;
-    height: 20px;
     padding: 5px 7px;
     border: 1px solid;
     display: inline-block;
     text-align: center;
 }
+
+.small-label {
+    font-size: 10pt;
+    padding: 2px 8px;
+}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts
@@ -27,6 +27,9 @@ export class SpLabelComponent implements OnInit {
     @Input()
     labelText: string;
 
+    @Input()
+    small = false;
+
     _labelBackground: string;
 
     labelTextColor = '';