feat(router-item): fix router items,

add animation to example component

Author: garygrossgarten

package-lock.json

@@ -1,12 +1,15 @@
-:host{
+:host {
     display: contents;
+    --fiv-padding-end: 0;
+    --fiv-padding-start: 0;
 }
 
 ion-icon {
-    padding: 0;
     margin: 0;
     font-size: 1.8em;
     color: var(--fiv-color-icon);
+    padding-right: var(--fiv-padding-end);
+    padding-left: var(--fiv-padding-start);
 }
 
 .indicator {

projects/core/src/lib/icon/icon.component.scss

@@ -3,5 +3,6 @@
 }
 
 .popover-item:hover {
-    background: rgb(240, 240, 240);
+    --background: rgb(240, 240, 240);
+    cursor: pointer;
 }

projects/core/src/lib/popover/popover.component.scss

@@ -1,3 +1,6 @@
-<ng-content></ng-content>
+<ion-item>
+    <fiv-icon [name]="icon"></fiv-icon>
+    <ion-label>{{text}}</ion-label>
+</ion-item>
 <span *ngIf="hasShape()" [ngClass]="getClasses()" class="indicator"></span>
 <ion-icon *ngIf="!hasShape()" [ngClass]="position" [name]="shape" class="indicator"></ion-icon>

projects/core/src/lib/router-item/router-item.component.html

@@ -4,11 +4,18 @@
     width: 100%;
 }
 
-:host.active .dot { 
+:host.active {
+    --fiv-color-icon: var(--ion-color-primary);
+    ion-item{
+        --color: var(--ion-color-primary);
+    }
+}
+
+:host.active .dot {
     display: block;
 }
 
-:host.active .line{
+:host.active .line {
     background-color: var(--fiv-dot-color, var(--ion-color-primary));
     display: block;
 }
@@ -31,7 +38,7 @@
     height: 2px
 }
 
-:host.active.bottom .line{
+:host.active.bottom .line {
     width: calc(100% - 16px);
     height: 2px;
     left: 8px;
@@ -67,7 +74,6 @@
 }
 
 // position
-
 .left {
     left: 0;
 }
@@ -84,5 +90,17 @@
     bottom: 0;
 }
 
-.outline {
+.outline {}
+
+ion-item {
+    --border-style: none;
 }
+
+fiv-icon {
+    --fiv-padding-end: 8px;
+}
+
+ion-item:hover {
+    cursor: pointer;
+    --background: rgb(240, 240, 240);
+}

projects/core/src/lib/router-item/router-item.component.scss

@@ -14,6 +14,10 @@ export class RouterItemComponent implements OnInit {
 
   @Input() pageUrl: string;
 
+  @Input() icon: string;
+
+  @Input() text: string;
+
   /**
    * The position of the active state.
    * Default value is: `"left"`

projects/core/src/lib/router-item/router-item.component.ts

@@ -6,22 +6,13 @@
           <ion-buttons slot="start">
             <fiv-collapsable-menu-button #mb *fivIf="['desktop']" [menu]="menu"></fiv-collapsable-menu-button>
           </ion-buttons>
-          <ion-title>Logo</ion-title>
+          <ion-title>Fivethree Components</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content>
         <ion-list>
-          <fiv-router-item position="right" shape="dot" [matchChildUrl]="false" [pageUrl]="p.url" *ngFor="let p of appPages">
-            <ion-menu-toggle auto-hide="false">
-              <fiv-ripple>
-                <ion-item line="inset">
-                  <ion-icon slot="start" [name]="p.icon"></ion-icon>
-                  <ion-label>
-                    {{p.title}}
-                  </ion-label>
-                </ion-item>
-              </fiv-ripple>
-            </ion-menu-toggle>
+          <fiv-router-item [icon]="p.icon" [text]="p.title" [matchChildUrl]="false"
+            [pageUrl]="p.url" *ngFor="let p of appPages">
           </fiv-router-item>
         </ion-list>
       </ion-content>

src/app/app.component.html

@@ -1,3 +1,4 @@
+import { ComponentsModule } from 'src/app/components/components.module';
 import { FivethreeCoreModule } from 'core';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -38,6 +39,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     }),
     MarkdownModule.forRoot({ loader: HttpClient }),
     LottieAnimationViewModule.forRoot(),
+    ComponentsModule
   ],
   providers: [
     StatusBar,

src/app/app.module.ts

@@ -12,7 +12,7 @@
   </ion-card-header>
 
   <ion-card-content>
-    <div *ngIf="showApi" class="content-container">
+    <div [@listAnim]="showApi ? 'open' : 'closed'" class="content-container">
       <markdown [src]="snippet"></markdown>
     </div>
     <div class="content-container">

src/app/components/example/example.component.html

@@ -1,9 +1,23 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.scss']
+  styleUrls: ['./example.component.scss'],
+  animations: [trigger('listAnim', [
+    state('open', style({ height: '*', opacity: 1 })),
+    state('closed', style({ height: '0px', opacity: 0 })),
+    transition('closed => open', [
+      style({ height: '0px', opacity: 0 }),
+      animate('220ms ease', style({ height: '*', opacity: 1 }))
+    ]),
+    transition('open => closed', [
+      style({ height: '*', opacity: 1 }),
+      animate('180ms ease', style({ height: '0', opacity: 0 }),
+      )
+    ])
+  ])]
 })
 export class ExampleComponent implements OnInit {
 

src/app/components/example/example.component.ts

@@ -10,7 +10,7 @@
           </ion-item-divider>
 
           <ion-card>
-            <ion-toolbar>
+            <ion-toolbar color="primary">
               <fiv-buttons [iconsOnly]="iconsOnly" [forceActionsheet]="forceActionsheet" [forcePopover]="forcePopover"
                 [header]="header" [subHeader]="subHeader" [count]="count" slot="end">
                 <fiv-button (click)="presentToast('add clicked')" [icon]="'md-add'" [text]="'Add'">