Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Panels: development

Browse source
This commit is contained in:
smartapant 2016-05-02 14:13:41 +03:00
parent ef18e103d5
commit da6eb0db49
11 changed files with 108 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/pages/dashboard/dashboard.component.ts
View file

@ -1,11 +1,13 @@
import {Component, ViewEncapsulation} from 'angular2/core';
import {PopularApp} from './popularApp';
import {BaPanel} from '../../theme';
@Component({
selector: 'dashboard',
pipes: [],
directives: [PopularApp],
directives: [PopularApp, BaPanel],
encapsulation: ViewEncapsulation.None,
styles: [require('./dashboard.scss')],
template: require('./dashboard.html')

21
src/app/pages/dashboard/dashboard.html
View file

@ -1,11 +1,10 @@
<!--<div class="row">-->
<!--<div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">-->
<!--<div class="row">-->
<!--<div class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"-->
<!--ba-panel-->
<!--ba-panel-class="popular-app medium-panel">-->
<!--<popular-app></popular-app>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="row">
<div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="row">
<ba-panel class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
ba-panel-class="popular-app medium-panel">
<popular-app></popular-app>
</ba-panel>
</div>
</div>
</div>

8
src/app/pages/dashboard/popularApp/popularApp.component.ts
View file

@ -1,11 +1,5 @@
/*
* Angular 2 decorators and services
*/
import {Component, ViewEncapsulation} from 'angular2/core';
/*
* App Component
* Top Level Component
*/
@Component({
selector: 'popular-app',
encapsulation: ViewEncapsulation.None,

12
src/app/theme/baPanel/baPanel.component.ts Normal file
View file

@ -0,0 +1,12 @@
import {Component, ViewEncapsulation, Input} from 'angular2/core';
@Component({
selector: 'ba-panel',
styles: [require('./baPanel.scss')],
template: require('./baPanel.html'),
encapsulation: ViewEncapsulation.None
})
export class BaPanel {
@Input() title:String;
@Input() baPanelClass:String;
}

8
src/app/theme/baPanel/baPanel.html Normal file
View file

@ -0,0 +1,8 @@
<div class="card {{panelType}} {{baPanelClass || ''}}" zoom-in ba-panel-blur>
<div *ngIf="title" class="card-header clearfix">
<h3 class="card-title">{{title}}</h3>
</div>
<div class="card-body">
<ng-content></ng-content>
</div>
</div>

0
src/app/theme/baPanel/baPanel.scss Normal file
View file

1
src/app/theme/baPanel/index.ts Normal file
View file

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

1
src/app/theme/index.ts
View file

@ -1,3 +1,4 @@
export * from './pageTop';
export * from './msgCenter';
export * from './sidebar';
export * from './baPanel';

112
src/app/theme/sass/bootstrap-overrides/_panel.scss
View file

@ -1,148 +1,148 @@
$panel-title-height: 44px;
$panel-heading-font-size: 16px;
$card-title-height: 44px;
$card-heading-font-size: 16px;
.panel {
.card {
border: none;
background-color: $panel-bg;
background-color: $card-bg;
color: $default-text;
position: relative;
//transition: all 0.2s ease;
margin-bottom: 24px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
/*&:hover {
background: $panel-bg-hover;
background: $card-bg-hover;
}*/
&.animated {
animation-duration: 0.5s;
}
&.small-panel {
height: $small-panel-height;
&.small-card {
height: $small-card-height;
}
&.xsmall-panel {
height: $xsmall-panel-height;
&.xsmall-card {
height: $xsmall-card-height;
}
&.medium-panel {
height: $medium-panel-height;
&.medium-card {
height: $medium-card-height;
}
&.xmedium-panel {
height: $extra-medium-panel-height;
&.xmedium-card {
height: $extra-medium-card-height;
}
&.large-panel {
height: $large-panel-height;
&.large-card {
height: $large-card-height;
}
&.viewport100 {
height: calc(100vh - 218px);
}
&.with-scroll {
.panel-body {
height: calc(100% - #{$panel-title-height});
.card-body {
height: calc(100% - #{$card-title-height});
overflow-y: auto;
}
}
}
.panel > .panel-body {
.card > .card-body {
padding: 15px 22px;
height: 100%;
}
.panel-heading, .panel-footer {
height: $panel-title-height;
font-size: $panel-heading-font-size;
.card-heading, .card-footer {
height: $card-title-height;
font-size: $card-heading-font-size;
$vertical-padding: ($panel-title-height - $panel-heading-font-size) / 2;
$vertical-padding: ($card-title-height - $card-heading-font-size) / 2;
padding: $vertical-padding 22px;
}
.panel-title {
.card-title {
font-weight: $font-normal;
text-transform: uppercase;
opacity: 0.9;
//text-transform: uppercase;
}
.panel-white, .panel-blur {
.card-white, .card-blur {
background-size: cover;
> .panel-heading {
> .card-heading {
background-color: transparent;
border: none;
color: $default-text;
}
}
.panel-white {
background-color: $panel-bg;
.card-white {
background-color: $card-bg;
}
.panel-blur {
.card-blur {
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
background: url($blurredBgUrl);
transition: none;
}
.panel-primary {
> .panel-heading {
.card-primary {
> .card-heading {
color: $primary;
background-color: $primary-bg;
border-color: $primary-bg;
}
}
.panel-success {
> .panel-heading {
.card-success {
> .card-heading {
color: $success;
background-color: $success-bg;
border-color: $success-bg;
}
}
.panel-info {
> .panel-heading {
.card-info {
> .card-heading {
color: $info;
background-color: $info-bg;
border-color: $info-bg;
}
}
.panel-warning {
> .panel-heading {
.card-warning {
> .card-heading {
color: $warning;
background-color: $warning-bg;
border-color: $warning-bg;
}
}
.panel-danger {
> .panel-heading {
.card-danger {
> .card-heading {
color: $danger;
background-color: $danger-bg;
border-color: $danger-bg;
}
}
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
.panel-heading {
.card-primary, .card-success, .card-info, .card-warning, .card-danger {
.card-heading {
color: rgba(255, 255, 255, 0.8);
}
}
.panel.bootstrap-panel {
.panel-body, .panel-heading {
.card.bootstrap-card {
.card-body, .card-heading {
p, div, span {
color: $default-text;
}
}
}
.accordion-panel.panel.bootstrap-panel {
&.panel-primary,
&.panel-success,
&.panel-info,
&.panel-warning,
&.panel-danger {
.panel-heading {
.accordion-card.card.bootstrap-card {
&.card-primary,
&.card-success,
&.card-info,
&.card-warning,
&.card-danger {
.card-heading {
p, div, span {
color: rgba(255, 255, 255, 0.8);
}
@ -150,14 +150,14 @@ $panel-heading-font-size: 16px;
}
}
.panel-group .panel.accordion-panel {
.panel-heading {
.card-group .card.accordion-card {
.card-heading {
border-bottom: 0;
}
}
.panel-group .panel {
.panel-heading {
.card-group .card {
.card-heading {
border-bottom: 1px solid #ddd;
}
}
@ -166,11 +166,11 @@ $panel-heading-font-size: 16px;
line-height: 1.5em;
}
.contextual-example-panel {
.contextual-example-card {
height: 120px;
}
.footer-panel {
.footer-card {
height: 142px;
}
@ -179,6 +179,6 @@ $panel-heading-font-size: 16px;
}
/*
.panel-group .panel {
.card-group .card {
border-radius: 0;
}*/

18
src/app/theme/sass/conf/_mixins.scss
View file

@ -96,17 +96,17 @@
p,
h1, h2, h3, h4, h5, h6,
.pie-chart-item,
.panel-heading > .dropdown .dropdown-toggle,
.panel-title,
.card-heading > .dropdown .dropdown-toggle,
.card-title,
ol.blur span,
ul.blur,
.popular-app-cost,
.popular-app-info,
.panel-title > .small,
.panel-title > .small > a,
.panel-title > a,
.panel-title > small,
.panel-title > small > a,
.card-title > .small,
.card-title > .small > a,
.card-title > a,
.card-title > small,
.card-title > small > a,
.traffic-text span,
.form-group label,
.help-block {
@ -117,8 +117,8 @@
}
}
@mixin overridePanelBg($color, $borderColor, $dropdownColor) {
.panel.panel-blur, .panel.panel-blur:hover {
@mixin overridecardBg($color, $borderColor, $dropdownColor) {
.card.card-blur, .card.card-blur:hover {
border-color: $borderColor;
background-color: $color;
}

14
src/app/theme/sass/conf/_variables.scss
View file

@ -16,8 +16,8 @@ $stackoverflow-color: #2F96E8;
$dribble-color: #F26798;
$behace-color: #0093FA;
$panel-bg: #f8f8f8;
$panel-bg-hover: #fff;
$card-bg: #f8f8f8;
$card-bg-hover: #fff;
$disabled: #bdbdbd;
$disabled-bg: #e6e6e6;
@ -40,11 +40,11 @@ $resMin: 320px;
$top-height: 66px;
$small-panel-height: 114px;
$xsmall-panel-height: 187px;
$medium-panel-height: 400px;
$extra-medium-panel-height: 550px;
$large-panel-height: 974px;
$small-card-height: 114px;
$xsmall-card-height: 187px;
$medium-card-height: 400px;
$extra-medium-card-height: 550px;
$large-card-height: 974px;
$default-animation-duration: 0.2s;
$default-animation-style: ease-out;