WIP breadcrumb button l&f

rodekruis · Sep 18, 2023 · 1bc7971 · 1bc7971
1 parent a2939b9
commit 1bc7971
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 29 deletions.
diff --git a/interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.html b/interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.html
@@ -1,12 +1,10 @@
-<div class="ion-padding-top ibf-admin-level-buttons">
+<div class="ion-padding-top ion-margin-start">
   <ion-button
     *ngIf="getAdminLevelLabel(adminLevel.adminLevel1)"
     size="small"
-    class="ibf-admin-level-button"
+    class="breadcrumb breadcrumb-start"
     fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel1) ? 'ibf-primary' : 'ibf-white'
-    "
+    [class.selected]="isAdminLevelActive(adminLevel.adminLevel1)"
     [disabled]="isAdminLevelDisabled(adminLevel.adminLevel1)"
     (click)="clickAdminLevelButton(adminLevel.adminLevel1)"
   >
@@ -15,11 +13,9 @@
   <ion-button
     *ngIf="getAdminLevelLabel(adminLevel.adminLevel2)"
     size="small"
-    class="ibf-admin-level-button"
+    class="breadcrumb breadcrumb-middle"
     fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel2) ? 'ibf-primary' : 'ibf-white'
-    "
+    [class.selected]="isAdminLevelActive(adminLevel.adminLevel2)"
     [disabled]="isAdminLevelDisabled(adminLevel.adminLevel2)"
     (click)="clickAdminLevelButton(adminLevel.adminLevel2)"
   >
@@ -28,20 +24,18 @@
   <ion-button
     *ngIf="getAdminLevelLabel(adminLevel.adminLevel3)"
     size="small"
-    class="ibf-admin-level-button"
+    class="breadcrumb breadcrumb-end"
     fill="solid"
-    [color]="
-      isAdminLevelActive(adminLevel.adminLevel3) ? 'ibf-primary' : 'ibf-white'
-    "
+    [class.selected]="isAdminLevelActive(adminLevel.adminLevel3)"
     [disabled]="isAdminLevelDisabled(adminLevel.adminLevel3)"
     (click)="clickAdminLevelButton(adminLevel.adminLevel3)"
   >
     {{ getAdminLevelLabel(adminLevel.adminLevel3) }}
   </ion-button>
-  <ion-button
+  <!-- <ion-button
     *ngIf="getAdminLevelLabel(adminLevel.adminLevel4)"
     size="small"
-    class="ibf-admin-level-button"
+    class="breadcrumb"
     fill="solid"
     [color]="
       isAdminLevelActive(adminLevel.adminLevel4) ? 'ibf-primary' : 'ibf-white'
@@ -50,5 +44,5 @@
     (click)="clickAdminLevelButton(adminLevel.adminLevel4)"
   >
     {{ getAdminLevelLabel(adminLevel.adminLevel4) }}
-  </ion-button>
+  </ion-button> -->
 </div>
diff --git a/interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.scss b/interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.scss
@@ -1,17 +1,30 @@
-.ibf-admin-level-buttons {
-  margin-left: 5px;
-  .ibf-admin-level-button {
-    margin-left: 0px;
-    margin-right: 0px;
-    text-transform: uppercase;
-    height: 16px;
-    font-size: 7px;
-    font-weight: 700;
+.breadcrumb {
+  margin: 0;
+  --box-shadow: none;
+
+  --background: var(--ion-color-ibf-white);
+  --border-color: var(--ion-color-ibf-no-alert-primary);
+  --border-width: 2px;
+  --border-style: solid;
+  --color: var(--ion-color-ibf-no-alert-primary);
+
+  &.selected {
+    --background: var(--ion-color-ibf-no-alert-primary);
+    --border-color: var(--ion-color-ibf-no-alert-primary);
+    --border-width: 2px;
+    --border-style: solid;
+    --color: var(--ion-color-ibf-white);
   }
 }
 
-ion-button {
-  border: 1px solid var(--ion-color-ibf-primary);
+.breadcrumb-start {
+  --border-radius: 50vh 0 0 50vh;
+}
+
+.breadcrumb-middle {
   --border-radius: 0;
-  --box-shadow: none;
+}
+
+.breadcrumb-end {
+  --border-radius: 0 50vh 50vh 0;
 }
diff --git a/interfaces/IBF-dashboard/src/app/components/ibf-button/ibf-button.component.ts b/interfaces/IBF-dashboard/src/app/components/ibf-button/ibf-button.component.ts
@@ -36,7 +36,6 @@ export class IbfButtonComponent implements OnInit {
 
   ngOnInit() {
     this.style += `
-    display: block;
     ${this.width ? 'width: ' + this.width + ';' : ''}
     --background: var(--ion-color-${this.backgroundColor});
     --border-color: var(--ion-color-${this.borderColor});