mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-20 01:10:13 +01:00
dropdown buttons implementation
This commit is contained in:
nixa
parent
85072185e9
commit
8dbdd2fa64
19 changed files with 371 additions and 51 deletions
27
package.json
27
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",
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
})
|
||||
|
|
|
|||
|
|
@ -24,32 +24,26 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Icon Buttons"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/iconButtons.html'"></div>
|
||||
</div>
|
||||
<div
|
||||
ba-panel
|
||||
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>
|
||||
|
||||
<ba-card title="Icon Buttons" baCardClass="with-scroll">
|
||||
<icon-buttons></icon-buttons>
|
||||
</ba-card>
|
||||
|
||||
<ba-card title="Large Buttons" baCardClass="with-scroll large-buttons-panel">
|
||||
<large-buttons></large-buttons>
|
||||
</ba-card>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Button Dropdowns"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/dropdowns.html'"></div>
|
||||
</div>
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-title="Button Groups"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/buttons/widgets/buttonGroups.html'"></div>
|
||||
</div>
|
||||
|
||||
<ba-card title="Button Dropdowns" baCardClass="with-scroll">
|
||||
<dropdown-buttons></dropdown-buttons>
|
||||
</ba-card>
|
||||
|
||||
<ba-card title="Button Groups" baCardClass="with-scroll">
|
||||
<group-buttons></group-buttons>
|
||||
</ba-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './dropdownButtons.component';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'group-buttons',
|
||||
template: require('./groupButtons.html'),
|
||||
})
|
||||
export class GroupButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './groupButtons.component';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'icon-buttons',
|
||||
template: require('./iconButtons.html'),
|
||||
})
|
||||
export class IconButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './iconButtons.component';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './largeButtons.component';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'large-buttons',
|
||||
template: require('./largeButtons.html'),
|
||||
})
|
||||
export class LargeButtons {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
&.scrolled {
|
||||
@include bg-translucent-dark(0.85);
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.al-logo {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,3 @@
|
|||
.dropdown-menu {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue