feat(style): Added new item styles for individual styling of each part of a specific menu item. #19

Author: Michael Oberwasserlechner

README.md

@@ -187,7 +187,7 @@ export class MenuPage {
         };
 
         // add a parent menu item with a special style and expand it per default
-        this.menuConfig.add({title: "menu.personal.section", style: "top-section", expanded: true});
+        this.menuConfig.add({title: "menu.personal.section", styleLine: "top-section", expanded: true});
         // Add simple menu item with a reference to the parent. Because we said that items are delivered as flat list. 
         // The component will create the hierarchical structure by itself
         this.menuConfig.add({title: "menu.personal.home", parentRef: "menu.personal.section", page: HomePage});
@@ -196,7 +196,7 @@ export class MenuPage {
         // Another menu item with a index because its a tabbed page
         this.menuConfig.add({title: "menu.personal.events", parentRef: "menu.personal.section", page: TabsPage, pageOptions: {tabIndex: 0}});
         // A parent menu item
-        this.menuConfig.add({title: "menu.settings.section", style: "top-section", expanded: true});
+        this.menuConfig.add({title: "menu.settings.section", styleLine: "top-section", expanded: true});
 
         this.menuConfig.add({title: "menu.settings.language", parentRef: "menu.settings.section"});
         for (let lang of ["de","en"]) {
@@ -219,7 +219,7 @@ It's also possible to load menu items after first init, e.g. from a backend serv
      // 
      loadMenuItems() {
          const ITEM_ID = "menu.chosen_club.section";
-         this.menuConfig.addBefore("menu.settings.section", { id: ITEM_ID, title: "Special section", expanded: true, style: "special-section"});
+         this.menuConfig.addBefore("menu.settings.section", { id: ITEM_ID, title: "Special section", expanded: true, styleLine: "special-section"});
 
          // this is a 
          this.backendService.getMenuItems().subscribe(

src/hierarchical-menu-item.component.ts

@@ -4,25 +4,28 @@ import {HierarchicalMenuItem, IconMode, HierarchicalMenuConfig} from "./hierarch
 @Component({
     selector: "hierarchical-menu-item",
     template: `
-        <ul class="hm-level">
-            <li *ngFor="let item of items">
-                <div [ngClass]="buildStyles(item)">
-                    <div class="hm-link">
-                        <button (click)="onClickLink(item)">
-                            <ion-icon *ngIf="useIconsByIonic(item)" [name]="item.icon"></ion-icon>
-                            <i *ngIf="useIconsByFontAwesome(item)" class="fa {{ item.icon }}" aria-hidden="true"></i>
-                            {{ translateIt(item) }}
-                        </button>
-                    </div>
-                    <div class="hm-expander">
-                        <button *ngIf="hasChildren(item)" (click)="onClickExpander(item)">
-                            <ion-icon [name]="getExpanderIcon(item)"></ion-icon>
-                        </button>
-                    </div>
-                </div>
-                <hierarchical-menu-item *ngIf="item.expanded && hasChildren(item)" [items]="item.children" [config]="config"></hierarchical-menu-item>
-            </li>
-        </ul>
+      <ul class="hm-level">
+        <li *ngFor="let item of items" [ngClass]="buildStyles('hm-item', item.styleItem)">
+          <div [ngClass]="buildStyles('hm-line', item.styleLine)">
+            <div [ngClass]="buildStyles('hm-link', item.styleLink)">
+              <button (click)="onClickLink(item)" icon-left>
+                <ion-icon [ngClass]="buildStyles('hm-icon', item.styleIcon)" *ngIf="useIconsByIonic(item)" [name]="item.icon"></ion-icon>
+                <i *ngIf="useIconsByFontAwesome(item)" [ngClass]="buildStyles('hm-icon', item.styleIcon, 'fa', item.icon)" aria-hidden="true"></i>
+                <span [ngClass]="buildStyles('hm-text', item.styleText)">
+                  {{ translateIt(item) }}
+                </span>
+              </button>
+            </div>
+            <div [ngClass]="buildStyles('hm-expander', item.styleExpander)">
+              <button *ngIf="hasChildren(item)" (click)="onClickExpander(item)">
+                <ion-icon [name]="getExpanderIcon(item)"></ion-icon>
+              </button>
+            </div>
+          </div>
+          <hierarchical-menu-item *ngIf="item.expanded && hasChildren(item)" [items]="item.children"
+                                  [config]="config"></hierarchical-menu-item>
+        </li>
+      </ul>
     `
 })
 export class HierarchicalMenuItemComponent implements OnInit {
@@ -79,8 +82,11 @@ export class HierarchicalMenuItemComponent implements OnInit {
         return menuItem.icon != null && (menuItem.iconMode === IconMode.IONIC || menuItem.iconMode == null);
     }
 
-    buildStyles(menuItem: HierarchicalMenuItem) {
-        return "hm-item-line " + (menuItem.style || "");
+    buildStyles(...styles: string[]) {
+      if (styles) {
+        return styles.join(" ").trim();
+      }
+      return "";
     }
 
     translateIt(menuItem: HierarchicalMenuItem):string {

src/hierarchical-menu.service.ts

@@ -1,4 +1,5 @@
 import {Injectable} from "@angular/core";
+import {deprecate} from "util";
 
 
 /**
@@ -226,7 +227,13 @@ export class HierarchicalMenuItem {
 
     icon?: string | null;
     iconMode?: IconMode = IconMode.IONIC;
-    style?: string | null;
+
+    styleItem?: string; // ul > li
+    styleLine?: string; // ul > li > div
+    styleLink?: string; // ul > li > div > div
+    styleIcon?: string; // ul > li > div > div > button > ion-icon | i
+    styleText?: string; // ul > li > div > div > button > span
+    styleExpander?: string; //
 
     page?: any;
     pageOptions?: any = {};

tests/hierarchical-menu-item.component.spec.ts

@@ -32,8 +32,14 @@ describe("HierarchicalMenuItemComponent", () => {
     it('should be a custom item line style set', () => {
         // componentFixture.componentInstance.menuItems = menuItems;
         // componentFixture.detectChanges();
-        let styles = componentFixture.componentInstance.buildStyles({ title: "styleTest", style: "test-style"});
-        expect(styles).toBe("hm-item-line test-style");
+        let styles = componentFixture.componentInstance.buildStyles();
+        expect(styles).toBe("");
+
+        styles = componentFixture.componentInstance.buildStyles("hm-link", null);
+        expect(styles).toBe("hm-link");
+
+        styles = componentFixture.componentInstance.buildStyles("hm-link", "fa", "icon");
+        expect(styles).toBe("hm-link fa icon");
     });
 
 

themes/scss/hierarchical-menu.themes.default.scss

@@ -2,26 +2,24 @@
 
 .hierarchical-menu {
   width: 100%;
-  //height: 100%; /* Full height */
-  //position: fixed; /* Make it stick, even on scroll */
-  //overflow: auto; /* Enable scrolling if the sidenav has too much content */
 
   // ul
   .hm-level {
     list-style-type: none;
     margin: 0;
     padding: 0;
-    li {
-      text-align: left !important;
-    }
   }
 
-  // class on the div in li
-  .hm-item-line {
+  // ul > li
+  .hm-item {
+    text-align: left !important;
+  }
+  // ul > li > div
+  .hm-line {
+
     display: flex;
     align-items: center;
     justify-content: space-between;
-    //overflow: hidden#;
 
     margin: 0;
     padding: 0;
@@ -43,6 +41,10 @@
       button {
         color: $hierarchical-menu-text-color;
         padding: 8px 10px;
+
+        .hm-icon {
+
+        }
       }
     }
 
@@ -73,16 +75,10 @@
       text-decoration: none;
       width: 100%;
     }
-
   }
-  .hm-item-line:hover {
+
+  .hm-line:hover {
     color: $hierarchical-menu-hover-text-color;
     background-color: $hierarchical-menu-hover-bg-color;
   }
-
-  // ul li
-  .hm-item {
-
-
-  }
-}
+}