[Component] Add Popover component

Author: qianmoQ

src/renderer/app/layout/layout.routing.ts

@@ -94,6 +94,10 @@ const LAYOUT_ROUTES: Routes = [
           {
             path: 'collapse',
             loadChildren: () => import('../pages/component/collapse/collapse.module').then(m => m.CollapseComponentModule)
+          },
+          {
+            path: 'popover',
+            loadChildren: () => import('../pages/component/popover/popover.module').then(m => m.PopoverComponentModule)
           }
         ]
       },

src/renderer/app/layout/navigation/navigation.component.html

@@ -65,6 +65,9 @@
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/collapse']"><i class="fa fa-columns"></i> Collapse</a>
           </li>
+          <li routerLinkActive="navigation__active">
+            <a [routerLink]="['/component/popover']"><i class="fa fa-podcast"></i> Popover</a>
+          </li>
         </ul>
       </li>
       <li routerLinkActive="navigation__sub--active" class="navigation__sub">

src/renderer/app/pages/component/popover/popover.component.html

@@ -0,0 +1,54 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Popover</h1>
+    <small>This template is built using <code>ngx-bootstrap/popover</code> and provides some usage examples</small>
+  </header>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Basic Popover</h4>
+      <button type="button" class="btn btn-primary" popover="I am content">
+        Click
+      </button>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Position Popover</h4>
+      <div class="btn-demo">
+        <button type="button" class="btn btn-primary" popover="I am content" popoverTitle="Left" placement="left">
+          Left
+        </button>
+        <button type="button" class="btn btn-primary" popover="I am content" popoverTitle="Top" placement="top">
+          Top
+        </button>
+        <button type="button" class="btn btn-primary" popover="I am content" popoverTitle="Bottom" placement="bottom">
+          Bottom
+        </button>
+        <button type="button" class="btn btn-primary" popover="I am content" popoverTitle="Right" placement="right">
+          Right
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Triggers Popover</h4>
+      <button type="button" class="btn btn-primary" popover="I am content" triggers="mouseenter:mouseleave">
+        Mouse over to me
+      </button>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Custom page Popover</h4>
+      <template #popTemplate>I am a custom page:
+        <div>
+          <span class="btn btn-danger">I'm an HTML content</span>
+        </div>
+      </template>
+      <button type="button" class="btn btn-primary" [popover]="popTemplate" triggers="focus">
+        Click
+      </button>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/component/popover/popover.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-component-popover',
+  templateUrl: './popover.component.html'
+})
+export class PopoverComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/popover/popover.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+import { PopoverComponent } from './popover.component';
+
+const POPOVER_ROUTES = [
+  {path: '', component: PopoverComponent}
+];
+
+@NgModule({
+  declarations: [
+    PopoverComponent
+  ],
+  imports: [
+    CommonModule,
+    BsDropdownModule.forRoot(),
+    PopoverModule.forRoot(),
+    RouterModule.forChild(POPOVER_ROUTES)
+  ]
+})
+export class PopoverComponentModule {
+}