Merge pull request #667 from geonetwork/ME-checkbox-color-overwrite

ME: checkbox color options
geonetwork · Nov 3, 2023 · 3200245 · 3200245
2 parents 0acb34a + 217b961
commit 3200245
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/libs/ui/inputs/src/lib/checkbox/checkbox.component.css b/libs/ui/inputs/src/lib/checkbox/checkbox.component.css
@@ -0,0 +1,24 @@
+.default {
+  --gn-ui-checkbox-color: var(--color-main);
+}
+
+.secondary {
+  --gn-ui-checkbox-color: var(--color-secondary);
+}
+
+.primary {
+  --gn-ui-checkbox-color: var(--color-primary);
+}
+
+mat-checkbox {
+  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);
+  --mdc-checkbox-selected-pressed-state-layer-color: var(
+    --gn-ui-checkbox-color
+  );
+}
diff --git a/libs/ui/inputs/src/lib/checkbox/checkbox.component.html b/libs/ui/inputs/src/lib/checkbox/checkbox.component.html
@@ -1,8 +1,8 @@
 <mat-checkbox
   class="cursor-pointer"
+  [class]="classList"
   type="checkbox"
   [checked]="checked"
   [indeterminate]="indeterminate"
   (click)="handleClick($event)"
-  color="primary"
 ></mat-checkbox>
diff --git a/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts b/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts
@@ -13,10 +13,15 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckboxComponent {
+  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
   @Input() checked = false
   @Input() indeterminate? = false
   @Output() changed = new EventEmitter<boolean>()
 
+  get classList() {
+    return `${this.type}`
+  }
+
   handleClick(event: Event) {
     event.stopPropagation()
     this.checked = !this.checked

diff --git a/libs/ui/search/src/lib/record-table/record-table.component.html b/libs/ui/search/src/lib/record-table/record-table.component.html
@@ -53,6 +53,7 @@
             [checked]="isAllSelected()"
             [indeterminate]="isSomeSelected()"
             (changed)="selectAll()"
+            type="default"
           >
           </gn-ui-checkbox>
         </div>
@@ -153,6 +154,7 @@
           <gn-ui-checkbox
             [checked]="isChecked(record)"
             (changed)="handleRecordSelectedChange($event, record)"
+            type="default"
           ></gn-ui-checkbox>
         </div>
         <div