Merge pull request #127 from flatlogic/pr/angular/new-design

feat: new design (light version)

Author: kulgavy

package.json

@@ -50,6 +50,7 @@
     "jquery-ui": "git://github.com/jquery/jquery-ui.git#1.11.4",
     "jquery.animate-number": "0.0.14",
     "jvectormap": "2.0.4",
+    "line-awesome": "icons8/line-awesome",
     "magnific-popup": "1.1.0",
     "markdown": "0.5.0",
     "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",

src/app/dashboard/dashboard.template.html

@@ -9,8 +9,8 @@ <h1 class="page-title">Dashboard <small><small>The Lucky One</small></small></h1
         <!-- for this particular example we also need to preload us map, as this is mapael's extension -->
         <div class="mapael" geo-locations-widget>
           <div class="stats">
-            <h6 class="text-white mt-1">GEO-LOCATIONS</h6>
-            <p class="h3 text-warning m-0">
+            <h6 class="mt-1">GEO-LOCATIONS</h6>
+            <p class="h3 m-0">
               <span class="fw-normal" number-animate>1 656 843</span>
               <i class="fa fa-map-marker mb-2"></i>
             </p>
@@ -38,7 +38,7 @@ <h5>
       <div class="widget-body">
         <p>Status: <strong>Live</strong></p>
         <p>
-          <span class="circle bg-warning"><i class="fa fa-map-marker"></i></span>
+          <span class="circle bg-warning"><i class="fa fa-map-marker text-white"></i></span>
           146 Countries, 2759 Cities
         </p>
         <div class="row progress-stats">
@@ -86,7 +86,7 @@ <h6 class="name">Sound Frequencies</h6>
         <h6 class="fw-semi-bold mt">Map Distributions</h6>
         <p>Tracking: <strong>Active</strong></p>
         <p>
-          <span class="circle bg-warning"><i class="fa fa-cog"></i></span>
+          <span class="circle bg-warning"><i class="fa fa-cog text-white"></i></span>
           391 elements installed, 84 sets
         </p>
         <div class="input-group mt">
@@ -133,7 +133,7 @@ <h6 class="name">24h</h6>
           <div class="progress-bar bg-success" style="width: 60%"></div>
         </div>
         <p>
-          <small><span class="circle bg-warning"><i class="fa fa-chevron-up"></i></span></small>
+          <small><span class="circle bg-warning"><i class="fa fa-chevron-up text-white"></i></span></small>
           <span class="fw-semi-bold">17% higher</span>
           than last month</p>
       </div>
@@ -169,7 +169,7 @@ <h6 class="name">24h</h6>
           <div class="progress-bar bg-danger" style="width: 60%"></div>
         </div>
         <p>
-          <small><span class="circle bg-warning"><i class="fa fa-chevron-down"></i></span></small>
+          <small><span class="circle bg-warning"><i class="fa fa-chevron-down text-white"></i></span></small>
           <span class="fw-semi-bold">8% lower</span>
           than last month
         </p>
@@ -206,7 +206,7 @@ <h6 class="name fs-sm">World Pop.</h6>
           <div class="progress-bar progress-xs bg-primary" style="width: 60%"></div>
         </div>
         <p>
-          <small><span class="circle bg-warning"><i class="fa fa-plus"></i></span></small>
+          <small><span class="circle bg-warning"><i class="fa fa-plus text-white"></i></span></small>
           <span class="fw-semi-bold">8 734 higher</span>
           than last month
         </p>
@@ -342,7 +342,7 @@ <h6>Calendar</h6>
         </div>
       </header>
       <div class="widget-body p-0">
-        <div class="bg-primary-light" bootstrap-calendar [events]="[
+        <div class="bg-gray-light" bootstrap-calendar [events]="[
                 [
                         '2/'+month+'/'+year,
                     'The flower bed',

src/app/dashboard/geo-locations-widget/geo-locations-widget.directive.ts

@@ -19,9 +19,13 @@ export class GeoLocationsWidgetDirective implements OnInit {
       map: {
         name : 'usa_states',
         defaultArea : {
-          attrsHover : {
-            fill : '#242424',
-            animDuration : 100
+          attrs: {
+            fill: '#e5e7f1',
+            stroke: '#fafbff',
+          },
+          attrsHover: {
+            fill: '#e9ebf6',
+            animDuration: 50,
           },
           tooltip: {
             content: function(): string {

src/app/ecommerce/product-grid/products.mock.ts

@@ -1,7 +1,7 @@
 const products = [{
     id: 0,
     starred: true,
-    image: 'assets/products/product1.jpg',
+    image: 'assets/img/products/img1.jpg',
     title: 'TRAINERS',
     subtitle: 'Trainers In White',
     price: 76,
@@ -12,7 +12,7 @@ const products = [{
     id: 1,
     starred: false,
     label: 'Sale',
-    image: 'assets/products/product5.jpeg',
+    image: 'assets/img/products/img2.jpg',
     title: 'BOOTS',
     subtitle: 'Trainers In Blue',
     price: {
@@ -27,7 +27,7 @@ const products = [{
     id: 2,
     starred: false,
     label: 'New',
-    image: 'assets/products/product4.jpeg',
+    image: 'assets/img/products/img3.jpg',
     title: 'FLAT SANDALS',
     subtitle: 'Trainers In Black',
     price: 55,
@@ -37,7 +37,7 @@ const products = [{
   {
     id: 3,
     starred: false,
-    image: 'assets/products/product7.jpg',
+    image: 'assets/img/products/img4.jpg',
     title: 'TRAINERS',
     subtitle: 'Trainers In White',
     price: {
@@ -51,7 +51,7 @@ const products = [{
   {
     id: 4,
     starred: false,
-    image: 'assets/products/product6.jpg',
+    image: 'assets/img/products/img5.jpeg',
     title: 'TRAINERS',
     subtitle: 'Trainers In White',
     price: 76,
@@ -62,7 +62,7 @@ const products = [{
     id: 5,
     starred: true,
     label: 'New',
-    image: 'assets/products/product3.jpg',
+    image: 'assets/img/products/img6.jpg',
     title: 'BOOTS',
     subtitle: 'Trainers In Orange',
     price: {
@@ -77,7 +77,7 @@ const products = [{
     id: 6,
     starred: false,
     label: 'Sale',
-    image: 'assets/products/product8.jpg',
+    image: 'assets/img/products/img7.jpg',
     title: 'TRAINERS',
     subtitle: 'Trainers In White',
     price: {
@@ -92,7 +92,7 @@ const products = [{
     id: 7,
     starred: false,
     label: 'New',
-    image: 'assets/products/product2.jpg',
+    image: 'assets/img/products/img8.jpg',
     title: 'TRAINERS',
     subtitle: 'Trainers In White',
     price: 55,

src/app/inbox/inbox.style.scss

@@ -26,7 +26,7 @@
     &,
     &:hover,
     &:focus {
-      background-color: $gray-light;
+      background-color: $white;
       color: $text-color;
       font-weight: $font-weight-semi-bold;
 

src/app/inbox/inbox.template.html

@@ -13,7 +13,7 @@ <h1 class="page-title">Email - <span class="fw-semi-bold">Inbox</span></h1>
     <ul class="nav nav-pills flex-column nav-stacked nav-email-folders mt" id="folders-list">
       <li class="nav-item active">
         <a class="nav-link" (click)="setFolderName('Inbox')">
-          <span class="badge badge-pill badge-white float-right">2</span>
+          <span class="badge badge-pill badge-gray float-right">2</span>
           Inbox
         </a>
       </li>

src/app/layout/chat-sidebar/chat-message/chat-message.template.html

@@ -5,7 +5,7 @@ <h6 class="title">
       {{conversation.name}}
     </a>
   </h6>
-  <ul class="message-list">
+  <ul class="message-list bg-gray-light">
     <li *ngFor="let message of conversation.messages | SearchPipe : searchMessage" class="message" [ngClass]="{'from-me': message.fromMe}">
     <span class="thumb-sm">
         <img class="rounded-circle" src="{{message.fromMe ? 'assets/img/avatar.png' : conversation.image}}" alt="...">
@@ -14,7 +14,7 @@ <h6 class="title">
     </li>
   </ul>
   <footer class="chat-sidebar-footer">
-    <input class="form-control input-dark fs-mini"
+    <input class="form-control fs-mini"
            [(ngModel)]="newMessage" (keyup.enter)="addMessage()"
            type="text" placeholder="Type your message">
   </footer>

src/app/layout/chat-sidebar/chat-sidebar.template.html

@@ -2,7 +2,7 @@
   <header class="chat-sidebar-header">
     <h4 class="chat-sidebar-title">Contacts</h4>
     <div class="form-group m-0">
-      <div class="input-group input-group-dark">
+      <div class="input-group">
         <input class="form-control fs-mini" [(ngModel)]="searchText" type="text" placeholder="Search...">
         <span class="input-group-append">
             <span class="input-group-text">

src/app/layout/navbar/navbar.template.html

@@ -1,38 +1,38 @@
-<ul class="navbar-nav flex-row" (click)="$event.preventDefault()">
+<ul class="navbar-nav flex-row" (click)="$event.preventDelault()">
   <li class="nav-item">
     <ng-template #sidebarToggleTooltip>
       Turn on/off <br> sidebar <br>collapsing
     </ng-template>
     <!-- whether to automatically collapse sidebar on mouseleave. If activated acts more like usual admin templates -->
     <a (click)="toggleSidebar('static')"  class="nav-link d-none ml-3 d-lg-flex" [tooltip]="sidebarToggleTooltip"
       placement="bottom">
-      <i class="fa fa-bars fa-lg"></i>
+      <i class="la la-bars la-lg"></i>
     </a>
     <!-- shown on xs & sm screen. collapses and expands navigation -->
     <a (click)="toggleSidebar('collapse')" class="d-lg-none nav-link" href="#" data-html="true" title="Show/hide<br>sidebar" data-placement="bottom">
-      <span class="rounded rounded-lg bg-gray text-white d-md-none"><i class="fa fa-bars fa-lg"></i></span>
-      <i class="ml-3 fa fa-bars fa-lg d-none d-md-block d-lg-none"></i>
+      <span class="rounded rounded-lg bg-gray text-white d-md-none"><i class="la la-bars la-lg"></i></span>
+      <i class="ml-3 la la-bars la-lg d-none d-md-block d-lg-none"></i>
     </a>
   </li>
-  <li class="nav-item d-none d-md-block"><a class="nav-link" href="#"><i class="fa fa-refresh fa-lg"></i></a></li>
-  <li class="nav-item d-none d-md-block"><a class="nav-link pl-1" href="#"><i class="fa fa-times fa-lg"></i></a></li>
+  <li class="nav-item d-none d-md-block"><a class="nav-link pl-2" href="#"><i class="la la-refresh la-lg"></i></a></li>
+  <li class="nav-item d-none d-md-block"><a class="nav-link pl-2" href="#"><i class="la la-times la-lg"></i></a></li>
 </ul>
 <ul class="navbar-nav flex-row d-md-none">
   <li class="nav-item">
     <!-- toggles chat -->
     <a class="nav-link" href="#" (click)="toggleChat()">
-      <span class="rounded rounded-lg bg-gray text-white"><i class="fa fa-globe fa-lg"></i></span>
+      <span class="rounded rounded-lg bg-gray text-white"><i class="la la-globe la-lg"></i></span>
     </a>
   </li>
 </ul>
 <a class="navbar-brand d-md-none" [routerLink]=" ['/app/dashboard'] ">
-  <i class="fa fa-circle fa-sm text-gray mr-n-sm"></i>
-  <i class="fa fa-circle fa-sm text-warning"></i>
+  <i class="la la-circle la-sm text-gray mr-n-sm"></i>
+  <i class="la la-circle la-sm text-warning"></i>
   &nbsp;
   {{config.name}}
   &nbsp;
-  <i class="fa fa-circle fa-sm text-warning mr-n-sm"></i>
-  <i class="fa fa-circle fa-sm text-gray"></i>
+  <i class="la la-circle la-sm text-warning mr-n-sm"></i>
+  <i class="la la-circle la-sm text-gray"></i>
 </a>
 <!-- this part is hidden for xs screens -->
   <!-- search form! link it to your search server -->
@@ -42,48 +42,45 @@
       <input class="form-control" type="text" placeholder="Search Dashboard">
       <span class="input-group-append">
         <span class="input-group-text">
-          <i class="fa fa-search"></i>
+          <i class="la la-search"></i>
         </span>
       </span>
     </div>
   </div>
 </form>
-<ul class="navbar-nav mr-3 d-none d-md-flex flex-row" (click)="$event.preventDefault()">
-    <li class="nav-item dropdown" dropdown placement="bottom right" [autoClose]="false">
+<ul class="navbar-nav mr-3 d-none d-md-flex flex-row" (click)="$event.preventDelault()">
+    <li class="nav-item dropdown" dropdown placement="bottom right" [autoClose]="lalse">
       <a href="#" dropdownToggle class="nav-link dropdown-toggle dropdown-toggle-notifications"
          id="notifications-dropdown-toggle">
-              <span class="thumb-sm avatar float-left">
-                  <img class="rounded-circle" src="assets/img/people/a5.jpg" alt="...">
-              </span>
-        &nbsp;
-        Philip&nbsp;<strong>Smith</strong>&nbsp;
-              <span class="fw-bold badge badge-pill badge-warning p-1 text-gray">
-                  13
-              </span>
+         <span class="avatar thumb-sm float-left mr-2">
+            <img class="rounded-circle" src="assets/img/people/a5.jpg" alt="..." />
+          </span>
+          <span class="small">Philip <span class="fw-semi-bold">Smith</span></span>
+          <span class="ml-1 circle bg-warning text-white fw-bold">13</span>
         <b class="caret"></b>
       </a>
       <!-- ready to use notifications dropdown. inspired by smartadmin template.
                    consists of three components:
                    notifications, messages, progress. leave or add what's important for you.
                    uses Sing's ajax-load plugin for async content loading. See #load-notifications-btn -->
-      <app-notifications *dropdownMenu class="dropdown-menu dropdown-menu-right animated animated-fast fadeInUp"></app-notifications>
+      <app-notifications *dropdownMenu class="dropdown-menu dropdown-menu-right animated animated-last ladeInUp"></app-notifications>
     </li>
     <li class="nav-item dropdown" dropdown placement="bottom right">
       <a href="#" class="nav-link dropdown-toggle" dropdownToggle>
-        <i class="fa fa-cog fa-lg"></i>
+        <i class="la la-cog la-lg"></i>
       </a>
       <ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
         <li><a class="dropdown-item" href="#"><i class="glyphicon glyphicon-user"></i> &nbsp; My Account</a></li>
         <li class="dropdown-divider"></li>
         <li><a class="dropdown-item" [routerLink]=" ['/error'] ">Calendar</a></li>
         <li><a class="dropdown-item" [routerLink]=" ['/error'] ">Inbox &nbsp;&nbsp;<span class="badge badge-pill badge-danger animated bounceIn">9</span></a></li>
         <li class="dropdown-divider"></li>
-        <li><a class="dropdown-item" [routerLink]=" ['/login'] "><i class="fa fa-sign-out"></i> &nbsp; Log Out</a></li>
+        <li><a class="dropdown-item" [routerLink]=" ['/login'] "><i class="la la-sign-out"></i> &nbsp; Log Out</a></li>
       </ul>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#" (click)="toggleChat()" id="toggle-chat">
-        <i class="fa fa-globe fa-lg"></i>
+        <i class="la la-globe la-lg"></i>
       </a>
       <div id="chat-notification" class="chat-notification hide" (click)="toggleChat()">
         <div class="chat-notification-inner">

src/app/layout/sidebar/sidebar.component.ts

@@ -33,7 +33,8 @@ export class SidebarComponent implements OnInit, AfterViewInit {
     }
     $sidebarContent.slimscroll({
       height: window.innerHeight,
-      size: '4px'
+      size: '4px',
+      color: '#e5e7f1',
     });
   }