dropdown buttons implementation

package.json

@@ -6,32 +6,33 @@
   "homepage": "",
   "license": "MIT",
   "dependencies": {
-    "@angular/http": "2.0.0-rc.1",
     "@angular/common": "2.0.0-rc.1",
     "@angular/compiler": "2.0.0-rc.1",
     "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/platform-server": "2.0.0-rc.1",
     "@angular/router": "2.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.1",
-    "core-js": "^2.2.2",
-    "normalize.css": "^4.1.1",
-    "rxjs": "5.0.0-beta.6",
-    "zone.js": "~0.6.12",
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "bootstrap": "^4.0.0-alpha.2",
     "bootstrap-loader": "^1.0.8",
     "chartist": "^0.9.7",
+    "core-js": "^2.2.2",
     "easy-pie-chart": "^2.1.7",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",
     "google-maps": "^3.2.1",
     "jquery": "^2.2.3",
     "leaflet-map": "^0.2.1",
+    "ng2-bootstrap": "^1.0.16",
+    "ng2-charts": "^1.0.3",
+    "normalize.css": "^4.1.1",
+    "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",
-    "ng2-charts": "^1.0.3"
+    "zone.js": "~0.6.12"
   },
   "devDependencies": {
     "angular2-hmr": "~0.6.0",
@@ -94,56 +95,42 @@
     "webpack-dev-server": "webpack-dev-server",
     "webdriver-manager": "webdriver-manager",
     "protractor": "protractor",
-
     "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
     "clean:dist": "npm run rimraf -- dist",
     "preclean:install": "npm run clean",
     "clean:install": "npm set progress=false && npm install",
     "preclean:start": "npm run clean",
     "clean:start": "npm start",
-
     "watch": "npm run watch:dev",
     "watch:dev": "npm run build:dev -- --watch",
     "watch:dev:hmr": "npm run watch:dev -- --hot",
     "watch:test": "npm run test -- --auto-watch --no-single-run",
     "watch:prod": "npm run build:prod -- --watch",
-
     "build": "npm run build:dev",
     "prebuild:dev": "npm run clean:dist",
     "build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
     "prebuild:prod": "npm run clean:dist",
     "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --colors --display-error-details --display-cached --bail",
-
     "server": "npm run server:dev",
     "server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
     "server:dev:hmr": "npm run server:dev -- --hot",
     "server:prod": "http-server dist --cors",
-
     "webdriver:update": "npm run webdriver-manager update",
     "webdriver:start": "npm run webdriver-manager start",
-
     "lint": "npm run tslint 'src/**/*.ts'",
-
     "pree2e": "npm run webdriver:update -- --standalone",
     "e2e": "npm run protractor",
     "e2e:live": "npm run e2e -- --elementExplorer",
-
     "pretest": "npm run lint",
     "test": "karma start",
-
     "ci": "npm test && npm run e2e",
-
     "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
-
     "start": "npm run server:dev",
     "start:hmr": "npm run server:dev:hmr",
-
     "postinstall": "npm run typings -- install",
-
     "preversion": "npm test",
     "version": "npm run build",
     "postversion": "git push && git push --tags"
-
   },
   "repository": {
     "type": "git",

src/app/pages/ui/components/buttons/buttons.component.ts

@@ -5,11 +5,25 @@ import {FlatButtons} from './components/flatButtons';
 import {RaisedButtons} from './components/raisedButtons';
 import {SizedButtons} from './components/sizedButtons';
 import {DisabledButtons} from './components/disabledButtons';
+import {IconButtons} from './components/iconButtons';
+import {LargeButtons} from './components/largeButtons';
+import {DropdownButtons} from './components/dropdownButtons';
+import {GroupButtons} from './components/groupButtons';
 
 @Component({
   selector: 'buttons',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, FlatButtons, RaisedButtons, SizedButtons, DisabledButtons],
+  directives: [
+    BaCard,
+    FlatButtons,
+    RaisedButtons,
+    SizedButtons,
+    DisabledButtons,
+    IconButtons,
+    LargeButtons,
+    DropdownButtons,
+    GroupButtons
+  ],
   styles: [require('./buttons.scss')],
   template: require('./buttons.html'),
 })

src/app/pages/ui/components/buttons/buttons.html

@@ -24,32 +24,26 @@
 
   <div class="row">
     <div class="col-md-6">
-      <div
+
-        ba-panel
+      <ba-card title="Icon Buttons" baCardClass="with-scroll">
-        ba-panel-title="Icon Buttons"
+        <icon-buttons></icon-buttons>
-        ba-panel-class="with-scroll">
+      </ba-card>
-        <div ng-include="'app/pages/ui/buttons/widgets/iconButtons.html'"></div>
+
-      </div>
+      <ba-card title="Large Buttons" baCardClass="with-scroll large-buttons-panel">
-      <div
+        <large-buttons></large-buttons>
-        ba-panel
+      </ba-card>
-        ba-panel-title="Large Buttons"
+
-        ba-panel-class="with-scroll large-buttons-panel">
-        <div ng-include="'app/pages/ui/buttons/widgets/largeButtons.html'"></div>
-      </div>
     </div>
     <div class="col-md-6">
-      <div
+
-        ba-panel
+      <ba-card title="Button Dropdowns" baCardClass="with-scroll">
-        ba-panel-title="Button Dropdowns"
+        <dropdown-buttons></dropdown-buttons>
-        ba-panel-class="with-scroll">
+      </ba-card>
-        <div ng-include="'app/pages/ui/buttons/widgets/dropdowns.html'"></div>
+
-      </div>
+      <ba-card title="Button Groups" baCardClass="with-scroll">
-      <div
+        <group-buttons></group-buttons>
-        ba-panel
+      </ba-card>
-        ba-panel-title="Button Groups"
+
-        ba-panel-class="with-scroll">
-        <div ng-include="'app/pages/ui/buttons/widgets/buttonGroups.html'"></div>
-      </div>
     </div>
   </div>
 

src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.component.ts

@@ -0,0 +1,15 @@
+import {Component, HostListener} from '@angular/core';
+import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
+
+@Component({
+  selector: 'dropdown-buttons',
+  template: require('./dropdownButtons.html'),
+  directives: [DROPDOWN_DIRECTIVES]
+})
+
+// TODO: appendToBody does not implemented yet, waiting for it
+export class DropdownButtons {
+
+  constructor() {
+  }
+}

src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html

@@ -0,0 +1,181 @@
+<div class="row btns-row">
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-primary" dropdownToggle>
+        Primary
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-success" dropdownToggle>
+        Success
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-info" dropdownToggle>
+        Info
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-default" dropdownToggle>
+        Default
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-warning" dropdownToggle>
+        Warning
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-danger" dropdownToggle>
+        Danger
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<h5 class="panel-subtitle">Split button dropdowns</h5>
+
+<div class="row btns-row">
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-primary" dropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-success">Success</button>
+      <button type="button" class="btn btn-success" dropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-info">Info</button>
+      <button type="button" class="btn btn-info" dropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-default">Default</button>
+      <button type="button" class="btn btn-default" dropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-warning">Warning</button>
+      <button type="button" class="btn btn-warning" dropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-danger">Danger</button>
+      <button type="button" class="btn btn-danger" dropdownToggle>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu" dropdownMenu>
+        <li class="dropdown-item"><a href="#">Action</a></li>
+        <li class="dropdown-item"><a href="#">Another action</a></li>
+        <li class="dropdown-item"><a href="#">Something else here</a></li>
+        <li class="dropdown-divider"></li>
+        <li class="dropdown-item"><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+  </div>
+</div>

src/app/pages/ui/components/buttons/components/dropdownButtons/index.ts

@@ -0,0 +1 @@
+export * from './dropdownButtons.component';

src/app/pages/ui/components/buttons/components/groupButtons/groupButtons.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'group-buttons',
+  template: require('./groupButtons.html'),
+})
+export class GroupButtons {
+
+  constructor() {
+  }
+}

src/app/pages/ui/components/buttons/components/groupButtons/groupButtons.html

@@ -0,0 +1,26 @@
+<div class="btn-group-example">
+  <div class="btn-group" role="group" aria-label="Basic example">
+    <button type="button" class="btn btn-danger">Left</button>
+    <button type="button" class="btn btn-danger">Middle</button>
+    <button type="button" class="btn btn-danger">Right</button>
+  </div>
+</div>
+
+<div class="btn-toolbar-example">
+  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+    <div class="btn-group" role="group" aria-label="First group">
+      <button type="button" class="btn btn-primary">1</button>
+      <button type="button" class="btn btn-primary">2</button>
+      <button type="button" class="btn btn-primary">3</button>
+      <button type="button" class="btn btn-primary">4</button>
+    </div>
+    <div class="btn-group" role="group" aria-label="Second group">
+      <button type="button" class="btn btn-primary">5</button>
+      <button type="button" class="btn btn-primary">6</button>
+      <button type="button" class="btn btn-primary">7</button>
+    </div>
+    <div class="btn-group" role="group" aria-label="Third group">
+      <button type="button" class="btn btn-primary">8</button>
+    </div>
+  </div>
+</div>

src/app/pages/ui/components/buttons/components/groupButtons/index.ts

@@ -0,0 +1 @@
+export * from './groupButtons.component';

src/app/pages/ui/components/buttons/components/iconButtons/iconButtons.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'icon-buttons',
+  template: require('./iconButtons.html'),
+})
+export class IconButtons {
+
+  constructor() {
+  }
+}

src/app/pages/ui/components/buttons/components/iconButtons/iconButtons.html

@@ -0,0 +1,44 @@
+<ul class="btn-list clearfix">
+  <li>
+    <button type="button" class="btn btn-primary btn-icon"><i class="ion-android-download"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-default btn-icon"><i class="ion-stats-bars"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-success btn-icon"><i class="ion-android-checkmark-circle"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-info btn-icon"><i class="ion-information"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-warning btn-icon"><i class="ion-android-warning"></i></button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-danger btn-icon"><i class="ion-nuclear"></i></button>
+  </li>
+</ul>
+
+<h5 class="panel-subtitle">Buttons with icons</h5>
+
+<ul class="btn-list clearfix">
+  <li>
+    <button type="button" class="btn btn-primary btn-with-icon"><i class="ion-android-download"></i>Primary</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-default btn-with-icon"><i class="ion-stats-bars"></i>Default</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-success btn-with-icon"><i class="ion-android-checkmark-circle"></i>Success
+    </button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-info btn-with-icon"><i class="ion-information"></i>Info</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-warning btn-with-icon"><i class="ion-android-warning"></i>Warning</button>
+  </li>
+  <li>
+    <button type="button" class="btn btn-danger btn-with-icon"><i class="ion-nuclear"></i>Danger</button>
+  </li>
+</ul>

src/app/pages/ui/components/buttons/components/iconButtons/index.ts

@@ -0,0 +1 @@
+export * from './iconButtons.component';

src/app/pages/ui/components/buttons/components/largeButtons/index.ts

@@ -0,0 +1 @@
+export * from './largeButtons.component';

src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'large-buttons',
+  template: require('./largeButtons.html'),
+})
+export class LargeButtons {
+
+  constructor() {
+  }
+}

src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.html

@@ -0,0 +1,20 @@
+<div class="row btns-row btns-same-width-lg">
+  <div class="col-sm-4 col-xs-6">
+    <button type="button" class="btn btn-primary btn-lg">Primary</button>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <button type="button" class="btn btn-success btn-lg">Success</button>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <button type="button" class="btn btn-info btn-lg">Info</button>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <button type="button" class="btn btn-default btn-lg">Default</button>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <button type="button" class="btn btn-warning btn-lg">Warning</button>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <button type="button" class="btn btn-danger btn-lg">Danger</button>
+  </div>
+</div>

src/app/theme/components/pageTop/pageTop.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 import {ThemeGlobal} from '../../../theme';
 import {ProfilePicturePipe} from '../../pipes';
@@ -10,7 +10,8 @@ import {ScrollPosition} from '../../directives';
   styles: [require('./pageTop.scss')],
   template: require('./pageTop.html'),
   directives: [MsgCenter, ScrollPosition],
-  pipes: [ProfilePicturePipe]
+  pipes: [ProfilePicturePipe],
+  encapsulation: ViewEncapsulation.None
 })
 export class PageTop {
   isScrolled:Boolean = false;

src/app/theme/components/pageTop/pageTop.html

@@ -1,3 +1,4 @@
+
 <div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
      [ngClass]="{scrolled: isScrolled}">
   <a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>

src/app/theme/components/pageTop/pageTop.scss

@@ -14,6 +14,10 @@
   &.scrolled {
     @include bg-translucent-dark(0.85);
   }
+
+  .dropdown-toggle::after {
+    display: none;
+  }
 }
 
 a.al-logo {

src/app/theme/sass/bootstrap-overrides/_dropdown.scss

@@ -5,7 +5,3 @@
 .dropdown-menu {
   font-size: inherit;
 }
-
-.dropdown-toggle::after {
-  display: none;
-}