Merge pull request #19 from fullstack-devops/feature/theming-and-styles

Feature/theming and styles

Author: eksrha

.gitignore

@@ -2,7 +2,7 @@
 
 # Custom
 /gh-pages-demo
-projects/ng-ui-frame/README.md
+projects/ng-nav-frame/README.md
 
 # Compiled output
 /dist
@@ -46,3 +46,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+.yarnrc
+package-lock.json

package.json

@@ -8,9 +8,11 @@
   },
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --disable-host-check",
+    "watch:scss": "sass --watch projects/ng-mat-components/test.scss:dist/css/css",
     "prebuild": "cp README.md projects/ng-mat-components/",
     "build": "ng build --project ng-mat-components",
+    "build:sass": "sass projects/ng-mat-components/_index.scss:dist/css/css",
     "build:workspace": "ng build --project lib-workspace",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
@@ -48,6 +50,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "ng-packagr": "^13.0.0",
+    "sass": "^1.57.1",
     "typescript": "~4.5.2"
   }
 }

projects/lib-workspace/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { FrameRoutes } from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
-import { ShowcaseUiFrameComponent } from './content/showcase-ui-frame/showcase-ui-frame.component';
+import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase-nav-frame.component';
 
 export const routes: FrameRoutes = [
   {
@@ -17,8 +17,8 @@ export const routes: FrameRoutes = [
     },
   },
   {
-    path: 'ui-frame',
-    component: ShowcaseUiFrameComponent,
+    path: 'nav-frame',
+    component: ShowcaseNavFrameComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'pivot_table_chart',
@@ -56,4 +56,4 @@ export const routes: FrameRoutes = [
   ],
   exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

projects/lib-workspace/src/app/app.component.html

@@ -1,8 +1,8 @@
-<fs-ui-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
-  <fs-ui-frame-toolbar>
-    <fs-ui-frame-toolbar-title>Current App Title</fs-ui-frame-toolbar-title>
+<fs-nav-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
+  <fs-nav-frame-toolbar>
+    <fs-nav-frame-toolbar-title>Current App Title</fs-nav-frame-toolbar-title>
 
-    <fs-ui-frame-toolbar-center>
+    <fs-nav-frame-toolbar-center>
       <button mat-icon-button>
         <mat-icon>help</mat-icon>
       </button>
@@ -12,9 +12,9 @@
       <button mat-icon-button>
         <mat-icon>call</mat-icon>
       </button>
-    </fs-ui-frame-toolbar-center>
+    </fs-nav-frame-toolbar-center>
 
-    <fs-ui-frame-toolbar-side>
+    <fs-nav-frame-toolbar-side>
       <!-- <a>Test the side</a> -->
       <!-- <mat-form-field appearance="outline">
         <input matInput placeholder="Search" type="search" />
@@ -24,10 +24,10 @@
           class="block w-full p-2 pl-4 text-sm text-gray-900 border border-gray-300 rounded-lg"
           placeholder="Dummy Search">
       </div>
-    </fs-ui-frame-toolbar-side>
-  </fs-ui-frame-toolbar>
+    </fs-nav-frame-toolbar-side>
+  </fs-nav-frame-toolbar>
 
-  <fs-ui-frame-content>
+  <fs-nav-frame-content>
     <router-outlet></router-outlet>
-  </fs-ui-frame-content>
-</fs-ui-frame>
+  </fs-nav-frame-content>
+</fs-nav-frame>

projects/lib-workspace/src/app/app.module.ts

@@ -13,20 +13,20 @@ import {
   FsCalendarModule,
   FsCalendarService,
   FsMaterialFullModule,
-  FsUiFrameModule,
+  FsNavFrameModule,
 } from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
 import { ShowcaseCalendarPanelsComponent } from './content/showcase-calendar-panels/showcase-calendar-panels.component';
 import { ShowcaseCalendarTableComponent } from './content/showcase-calendar-table/showcase-calendar-table.component';
-import { ShowcaseUiFrameComponent } from './content/showcase-ui-frame/showcase-ui-frame.component';
+import { ShowcaseNavFrameComponent } from './content/showcase-nav-frame/showcase-nav-frame.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     ShowcaseCalendarPanelsComponent,
     ShowcaseCalendarTableComponent,
-    ShowcaseUiFrameComponent,
+    ShowcaseNavFrameComponent,
   ],
   imports: [
     FormsModule,
@@ -36,7 +36,7 @@ import { ShowcaseUiFrameComponent } from './content/showcase-ui-frame/showcase-u
     ReactiveFormsModule,
     /* Lib modules */
     FsMaterialFullModule,
-    FsUiFrameModule,
+    FsNavFrameModule,
     FsCalendarModule,
   ],
   providers: [

projects/lib-workspace/src/app/content/home/home.component.css

@@ -1,7 +1,6 @@
 .docs-components {
   display: flex;
   flex-wrap: wrap;
-  height: 100%;
   padding: 20px;
   justify-content: center;
 }
@@ -12,7 +11,3 @@
   margin: 8px;
   cursor: pointer;
 }
-
-.docs-components .mat-card img {
-  height: 200px;
-}

projects/lib-workspace/src/app/content/home/home.component.html

@@ -1,37 +1,25 @@
 <div class="docs-components">
-  <mat-card routerLink="/ui-frame">
-    <img
-      mat-card-image
-      src="assets/ui-frame-shot.png"
-      alt="Screenshot of Ui Frame"
-    />
-    <mat-card-title>Ui Frame</mat-card-title>
+  <mat-card routerLink="/nav-frame">
+    <img mat-card-image src="assets/nav-frame-shot.png" alt="Screenshot of Nav Frame" />
+    <mat-card-title>Nav Frame</mat-card-title>
     <mat-card-content>
       <p>
-        Bootstrap your UI with this nice template and start right away with
+        Bootstrap your Nav with this nice template and start right away with
         valuable content.
       </p>
     </mat-card-content>
   </mat-card>
 
   <mat-card routerLink="/calendar-panels">
-    <img
-      mat-card-image
-      src="assets/calendar-panels-shot.png"
-      alt="Screenshot of Calendar Panels"
-    />
+    <img mat-card-image src="assets/calendar-panels-shot.png" alt="Screenshot of Calendar Panels" />
     <mat-card-title>Calendar Panels</mat-card-title>
     <mat-card-content>
       <p>The missing piece to the angular material components.</p>
     </mat-card-content>
   </mat-card>
 
   <mat-card routerLink="/calendar-table">
-    <img
-      mat-card-image
-      src="assets/calendar-table-shot.png"
-      alt="Screenshot of Calendar Table"
-    />
+    <img mat-card-image src="assets/calendar-table-shot.png" alt="Screenshot of Calendar Table" />
     <mat-card-title>Calendar Table</mat-card-title>
     <mat-card-content>
       <p>

projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html

@@ -1,5 +1,3 @@
-<section class="mat-elevation-z4">
-  <fs-calendar-table [dataSource]="calTableData">
-    <fs-calendar-table-name> Persons </fs-calendar-table-name>
-  </fs-calendar-table>
-</section>
+<fs-calendar-table class="mat-elevation-z4" [dataSource]="calTableData">
+  <fs-calendar-table-name> Persons </fs-calendar-table-name>
+</fs-calendar-table>