Update demo

MurhafSousli · Jan 22, 2022 · 9277e49 · 9277e49
1 parent 0c3317d
commit 9277e49
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 68 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<header></header>
+<app-header></app-header>
 
 <div class="main">
   <bars></bars>

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,10 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-
-
-import { BarRatingModule } from '../../projects/ngx-bar-rating/src/public-api';
-// import { BarRatingModule } from 'ngx-bar-rating';
+import { BarRatingModule } from 'ngx-bar-rating';
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faStar, faStarHalfAlt, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
+import { faGithub, faGithubAlt, faTwitter } from '@fortawesome/free-brands-svg-icons';
 
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
@@ -23,10 +24,22 @@ import { BarsComponent } from './bars/bars.component';
   imports: [
     BrowserModule,
     FormsModule,
-    BarRatingModule
+    BarRatingModule,
+    FontAwesomeModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {
+  constructor(library: FaIconLibrary) {
+    library.addIcons(
+      faTwitter,
+      faGithub,
+      faGithubAlt,
+      faStar,
+      faStarHalfAlt,
+      farStar,
+      faTimesCircle
+    );
+  }
 }
diff --git a/src/app/bars/bars.component.html b/src/app/bars/bars.component.html
@@ -2,57 +2,55 @@
   <div class="row">
     <div class="col-md-6">
 
-      <div class="panel panel-warning">
-        <div class="panel-heading">Horizontal Rating</div>
-        <div class="panel-body">
+      <div class="card card-warning">
+        <div class="card-heading">Horizontal Rating</div>
+        <div class="card-body">
           <bar-rating [(rate)]="horiRate" [max]="10" [theme]="'horizontal'" [showText]="true"></bar-rating>
         </div>
       </div>
 
-      <div class="panel panel-primary">
-        <div class="panel-heading">Square Rating</div>
-        <div class="panel-body">
+      <div class="card card-primary">
+        <div class="card-heading">Square Rating</div>
+        <div class="card-body">
           <bar-rating [(rate)]="squareRate" [max]="5" [theme]="'square'"></bar-rating>
         </div>
       </div>
 
-      <div class="panel panel-success">
-        <div class="panel-heading">Custom Rating</div>
-        <div class="panel-body">
-          <bar-rating [(rate)]="customRate" [max]="6" [theme]="'pokemon'"></bar-rating>
+      <div class="card card-success">
+        <div class="card-heading">Custom Rating</div>
+        <div class="card-body">
+          <bar-rating [(rate)]="customRate" [max]="6" [theme]="'pokemon'">
+          </bar-rating>
         </div>
       </div>
 
     </div>
 
     <div class="col-md-6">
 
-      <div class="panel panel-primary">
-        <div class="panel-heading">Movie Rating</div>
-        <div class="panel-body">
+      <div class="card card-primary">
+        <div class="card-heading">Movie Rating</div>
+        <div class="card-body">
 
           <bar-rating name="rating" [(rate)]="movieRate" [max]="4" [theme]="'movie'" [showText]="true"
                       [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"  disabled></bar-rating>
 
         </div>
       </div>
 
-      <div class="panel panel-success">
-        <div class="panel-heading">Star Rating</div>
-        <div class="panel-body">
-          <bar-rating [(rate)]="starRate" [max]="5" [theme]="'custom'"></bar-rating>
+      <div class="card card-success">
+        <div class="card-heading">Star Rating</div>
+        <div class="card-body">
+          <bar-rating [(rate)]="starRate" [max]="5" [theme]="'stars'"></bar-rating>
         </div>
       </div>
 
-      <div class="panel panel-warning">
-        <div class="panel-heading">Vertical Rating</div>
-        <div class="panel-body">
+      <div class="card card-warning">
+        <div class="card-heading">Vertical Rating</div>
+        <div class="card-body">
           <bar-rating [(rate)]="vertRate" [max]="10" [theme]="'vertical'" [showText]="true"></bar-rating>
         </div>
       </div>
-
     </div>
-
   </div>
-
 </div>
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
@@ -1,7 +1,11 @@
 <div class="footer">
   <h4 class="author">Made by Murhaf Sousli</h4>
   <div class="author-links">
-    <a class="fa fa-github-alt" href="https://github.com/MurhafSousli"></a>
-    <a class="fa fa-twitter" href="https://twitter.com/MurhafSousli"></a>
+    <a class="fa fa-github-alt" href="https://github.com/MurhafSousli">
+      <fa-icon [icon]="['fab', 'github-alt']" size="md"></fa-icon>
+    </a>
+    <a class="fa fa-twitter" href="https://twitter.com/MurhafSousli">
+      <fa-icon [icon]="['fab', 'twitter']" size="md"></fa-icon>
+    </a>
   </div>
 </div>
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <a class="forkme" href="https://github.com/MurhafSousli/ngx-bar-rating">
-  <i class="fa fa-github" aria-hidden="true"></i>
+  <fa-icon [icon]="['fab', 'github']" size="3x"></fa-icon>
 </a>
 <div class="header">
   <img [src]="'assets/ngx-bar-rating.svg'">

diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
-  selector: 'header',
+  selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  styleUrls: ['./header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HeaderComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+export class HeaderComponent {
 }
diff --git a/src/app/stars/stars.component.html b/src/app/stars/stars.component.html
@@ -11,14 +11,28 @@ <h3>A few flavours of star ratings compatible with popular libraries</h3>
 
     <div class="col-md-4">
       <section>
-        <bar-rating [(rate)]="bootRate" [max]="5" [theme]="'bootstrap'"></bar-rating>
+        <bar-rating [(rate)]="bootRate" [max]="5">
+          <ng-template ratingActive>
+            <i class="bi bi-star-fill" style="margin: 2px; color: #edb867"></i>
+          </ng-template>
+          <ng-template ratingInactive>
+            <i class="bi bi-star-fill" style="margin: 2px; color: #d2d2d2"></i>
+          </ng-template>
+        </bar-rating>
         <p>Bootstrap</p>
       </section>
     </div>
 
     <div class="col-md-4">
       <section>
-        <bar-rating [(rate)]="faRate" [max]="5" [theme]="'fontawesome'"></bar-rating>
+        <bar-rating [(rate)]="faRate" [max]="5">
+          <ng-template ratingActive>
+            <fa-icon [icon]="['fas', 'star']" [fixedWidth]="true" size="lg" style="color: #edb867"></fa-icon>
+          </ng-template>
+          <ng-template ratingInactive>
+            <fa-icon [icon]="['fas', 'star']" [fixedWidth]="true" size="lg" style="color: #d2d2d2"></fa-icon>
+          </ng-template>
+        </bar-rating>
         <p>Fontawesome</p>
       </section>
     </div>
@@ -27,9 +41,21 @@ <h3>A few flavours of star ratings compatible with popular libraries</h3>
 
   <section>
     <h3>It can be used to display fractional star ratings.</h3>
-    <bar-rating [rate]="faoRate" (rateChange)="onFaoRate($event)" [max]="10" [theme]="'fontawesome-o'"></bar-rating>
-    <!--<bar-rating [ngModel]="faoRate" (ngModelChange)="onFaoRate($event)" [max]="10" [theme]="'fontawesome-o'"></bar-rating>-->
+    <bar-rating [rate]="faoRate" (rateChange)="onFaoRate($event)" [max]="10">
+      <ng-template ratingActive>
+        <fa-icon [icon]="['fas', 'star']" [fixedWidth]="true" size="lg" style="color: #50e3c2"></fa-icon>
+      </ng-template>
+      <ng-template ratingInactive>
+        <fa-icon [icon]="['far', 'star']" [fixedWidth]="true" size="lg" style="color: #d2d2d2"></fa-icon>
+      </ng-template>
+      <ng-template ratingFraction>
+        <fa-icon [icon]="['fas', 'star-half-alt']" [fixedWidth]="true" size="lg" style="color: #50e3c2"></fa-icon>
+      </ng-template>
+    </bar-rating>
+
     <p *ngIf="!faoRated">Current rating: {{faoRate}}</p>
-    <p *ngIf="faoRated">Your rating: {{faoRate}} <i class="link fa fa-times-circle" (click)="faoReset(5.6)"></i></p>
+    <p *ngIf="faoRated">Your rating: {{faoRate}}
+      <fa-icon class="link" [icon]="['fas', 'times-circle']" size="lg" (click)="faoReset()"></fa-icon>
+    </p>
   </section>
 </div>
diff --git a/src/assets/br-pokemon-theme.scss b/src/assets/br-pokemon-theme.scss
@@ -0,0 +1,57 @@
+.br-pokemon {
+
+  .br-unit-wrapper {
+    .br-unit {
+      background-position: center center;
+      background-size: contain;
+      background-repeat: no-repeat;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      margin-left: 5px;
+      width: 40px;
+      height: 40px;
+      filter: grayscale(1);
+    }
+
+    &:first-child .br-unit {
+      margin-left: 0;
+      background-image: url('./custom/007-pikachu.svg');
+    }
+
+    &:nth-child(2) .br-unit {
+      background-image: url('./custom/006-bullbasaur.svg');
+    }
+
+    &:nth-child(3) .br-unit {
+      background-image: url('./custom/008-charmander.svg');
+    }
+
+    &:nth-child(4) .br-unit {
+      background-image: url('./custom/002-venonat.svg');
+    }
+
+    &:nth-child(5) .br-unit {
+      background-image: url('./custom/005-jigglypuff.svg');
+    }
+
+    &:nth-child(6) .br-unit {
+      background-image: url('./custom/001-caterpie.svg');
+    }
+
+    // &:nth-child(4) {
+    //     background-image: url('/./custom/004-squirtle.svg');
+    // }
+    // &:nth-child(5) {
+    //     background-image: url('/./custom/003-bellsprout.svg');
+    // }
+  }
+
+  .br-unit.br-selected, .br-unit.br-active {
+    filter: grayscale(0);
+  }
+}
+
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,19 +1,16 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,600');
-@import '~normalize.css';
-@import '~font-awesome/css/font-awesome.css';
-@import '~bootstrap/dist/css/bootstrap.min.css';
+@import 'normalize.css';
+@import 'bootstrap/dist/css/bootstrap.min.css';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
 @import '../projects/ngx-bar-rating/themes/variables';
-@import '../projects/ngx-bar-rating/themes/br-custom-stars-theme';
+@import '../projects/ngx-bar-rating/themes/br-stars-theme';
 @import '../projects/ngx-bar-rating/themes/br-default-theme';
-@import '../projects/ngx-bar-rating/themes/br-bootstrap-theme';
-@import '../projects/ngx-bar-rating/themes/br-fontawesome-theme';
-@import '../projects/ngx-bar-rating/themes/br-fontawesome-o-theme';
 @import '../projects/ngx-bar-rating/themes/br-square-theme';
 @import '../projects/ngx-bar-rating/themes/br-horizontal-theme';
 @import '../projects/ngx-bar-rating/themes/br-vertical-theme';
 @import '../projects/ngx-bar-rating/themes/br-movie-theme';
-@import '../projects/ngx-bar-rating/themes/br-pokemon-theme';
+@import 'assets/br-pokemon-theme';
 
 * {
   font-family: 'Poppins', sans-serif;
@@ -35,6 +32,7 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  max-width: 1140px;
 }
 
 //app-root {
@@ -58,21 +56,21 @@ body {
     margin-bottom: 2em;
   }
 
-  .panel {
+  .card {
     border-width: 2px;
     border-radius: 0;
     margin-bottom: 30px;
   }
 
-  .panel-heading {
+  .card-heading {
     padding: 14px;
     text-align: center;
     font-size: 1.4em;
     border-radius: 0;
     font-family: 'Poppins', sans-serif !important;
   }
 
-  .panel-body {
+  .card-body {
     height: 150px;
     display: flex;
     justify-content: center;
@@ -83,25 +81,26 @@ body {
     width: 85%;
   }
 
-  .panel-primary {
+  .card-primary {
     border-color: $blue-color;
-    .panel-heading {
+    .card-heading {
       background-color: $blue-color;
+      color: white;
     }
   }
 
-  .panel-warning {
+  .card-warning {
     border-color: $star-active;
-    .panel-heading {
+    .card-heading {
       border-bottom: 1px solid transparent;
       background-color: $star-active;
       color: white;
     }
   }
 
-  .panel-success {
+  .card-success {
     border-color: $green-color;
-    .panel-heading {
+    .card-heading {
       border-bottom: 1px solid transparent;
       background-color: $green-color;
       color: white;

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,9 +17,8 @@
     ],
     "paths": {
       "ngx-bar-rating": [
-        "dist/ngx-bar-rating/ngx-bar-rating",
-        "dist/ngx-bar-rating"
-      ]
+        "projects/ngx-bar-rating/src/public-api"
+      ],
     }
   }
-}
+}