style(boolean-value): assign class to get the same height as other fo…

…rms (#1415) Co-authored-by: Julien Schneider <[email protected]>
dasch-swiss · Jan 31, 2024 · 7768c2d · 7768c2d
1 parent 22ce0eb
commit 7768c2d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 27 deletions.
diff --git a/apps/dsp-app/src/app/workspace/resource/values/boolean-value/boolean-value.component.html b/apps/dsp-app/src/app/workspace/resource/values/boolean-value/boolean-value.component.html
@@ -1,7 +1,7 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
   <span class="rm-value">
     <mat-icon [ngClass]="valueFormControl.value ? 'toggle-icon-on': 'toggle-icon-off'"
-      >{{ valueFormControl.value? 'toggle_on' : 'toggle_off' }}</mat-icon
+      >{{ valueFormControl.value ? 'toggle_on' : 'toggle_off' }}</mat-icon
     >
   </span>
   <span class="rm-comment" *ngIf="shouldShowComment">{{ commentFormControl.value }}</span>
@@ -20,17 +20,12 @@
     </span>
   </span>
   <span [formGroup]="form" *ngIf="!boolValIsUnset">
-    <span class="toggle-container">
-      <mat-slide-toggle
-        [formControlName]="'value'"
-        class="value boolValue child-value-component"
-        [class.more-space]="moreSpace">
-      </mat-slide-toggle>
-      <span class="right-align" *ngIf="!boolValIsUnset && newResource && !valueRequiredValidator">
-        <button mat-icon-button class="value-action cancel" title="cancel" (click)="boolValIsUnset = true">
-          <mat-icon>cancel</mat-icon>
-        </button>
-      </span>
+    <mat-slide-toggle class="toggle-container" [formControlName]="'value'" [class.more-space]="moreSpace">
+    </mat-slide-toggle>
+    <span class="right-align" *ngIf="!boolValIsUnset && newResource && !valueRequiredValidator">
+      <button mat-icon-button class="value-action cancel" title="cancel" (click)="boolValIsUnset = true">
+        <mat-icon>cancel</mat-icon>
+      </button>
     </span>
     <mat-error
       *ngIf="

diff --git a/apps/dsp-app/src/app/workspace/resource/values/boolean-value/boolean-value.component.scss b/apps/dsp-app/src/app/workspace/resource/values/boolean-value/boolean-value.component.scss
@@ -1,29 +1,15 @@
 @use "../../../../../styles/config" as *;
 
-.boolValue {
-  margin-top: 4px;
-}
-
 .read-mode-view {
   .mat-icon {
     align-self: center;
     font-size: 26pt;
     min-width: 50px;
-
-    .boolValue {
-      display: block;
-      color: $primary;
-
-      &.more-space {
-        margin-top: 16px;
-      }
-    }
   }
 }
 
 .toggle-container {
-  display: flex;
-  align-items: center;
+  margin-bottom: 16px;
 }
 
 .right-align {