Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 16:30:13 +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 {Component, ViewEncapsulation} from 'angular2/core';
import {PopularApp} from './popularApp'; import {PopularApp} from './popularApp';
import {BaPanel} from '../../theme';
@Component({ @Component({
selector: 'dashboard', selector: 'dashboard',
pipes: [], pipes: [],
directives: [PopularApp], directives: [PopularApp, BaPanel],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
styles: [require('./dashboard.scss')], styles: [require('./dashboard.scss')],
template: require('./dashboard.html') template: require('./dashboard.html')

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

@ -1,11 +1,10 @@
<!--<div class="row">--> <div class="row">
<!--<div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">--> <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!--<div class="row">--> <div class="row">
<!--<div class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"--> <ba-panel 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">
<!--ba-panel-class="popular-app medium-panel">--> <popular-app></popular-app>
<!--<popular-app></popular-app>--> </ba-panel>
<!--</div>--> </div>
<!--</div>--> </div>
<!--</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'; import {Component, ViewEncapsulation} from 'angular2/core';
/*
* App Component
* Top Level Component
*/
@Component({ @Component({
selector: 'popular-app', selector: 'popular-app',
encapsulation: ViewEncapsulation.None, 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 './pageTop';
export * from './msgCenter'; export * from './msgCenter';
export * from './sidebar'; 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; $card-title-height: 44px;
$panel-heading-font-size: 16px; $card-heading-font-size: 16px;
.panel { .card {
border: none; border: none;
background-color: $panel-bg; background-color: $card-bg;
color: $default-text; color: $default-text;
position: relative; position: relative;
//transition: all 0.2s ease; //transition: all 0.2s ease;
margin-bottom: 24px; margin-bottom: 24px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
/*&:hover { /*&:hover {
background: $panel-bg-hover; background: $card-bg-hover;
}*/ }*/
&.animated { &.animated {
animation-duration: 0.5s; animation-duration: 0.5s;
} }
&.small-panel { &.small-card {
height: $small-panel-height; height: $small-card-height;
} }
&.xsmall-panel { &.xsmall-card {
height: $xsmall-panel-height; height: $xsmall-card-height;
} }
&.medium-panel { &.medium-card {
height: $medium-panel-height; height: $medium-card-height;
} }
&.xmedium-panel { &.xmedium-card {
height: $extra-medium-panel-height; height: $extra-medium-card-height;
} }
&.large-panel { &.large-card {
height: $large-panel-height; height: $large-card-height;
} }
&.viewport100 { &.viewport100 {
height: calc(100vh - 218px); height: calc(100vh - 218px);
} }
&.with-scroll { &.with-scroll {
.panel-body { .card-body {
height: calc(100% - #{$panel-title-height}); height: calc(100% - #{$card-title-height});
overflow-y: auto; overflow-y: auto;
} }
} }
} }
.panel > .panel-body { .card > .card-body {
padding: 15px 22px; padding: 15px 22px;
height: 100%; height: 100%;
} }
.panel-heading, .panel-footer { .card-heading, .card-footer {
height: $panel-title-height; height: $card-title-height;
font-size: $panel-heading-font-size; 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; padding: $vertical-padding 22px;
} }
.panel-title { .card-title {
font-weight: $font-normal; font-weight: $font-normal;
text-transform: uppercase; text-transform: uppercase;
opacity: 0.9; opacity: 0.9;
//text-transform: uppercase; //text-transform: uppercase;
} }
.panel-white, .panel-blur { .card-white, .card-blur {
background-size: cover; background-size: cover;
> .panel-heading { > .card-heading {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: $default-text; color: $default-text;
} }
} }
.panel-white { .card-white {
background-color: $panel-bg; background-color: $card-bg;
} }
.panel-blur { .card-blur {
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg'; $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
background: url($blurredBgUrl); background: url($blurredBgUrl);
transition: none; transition: none;
} }
.panel-primary { .card-primary {
> .panel-heading { > .card-heading {
color: $primary; color: $primary;
background-color: $primary-bg; background-color: $primary-bg;
border-color: $primary-bg; border-color: $primary-bg;
} }
} }
.panel-success { .card-success {
> .panel-heading { > .card-heading {
color: $success; color: $success;
background-color: $success-bg; background-color: $success-bg;
border-color: $success-bg; border-color: $success-bg;
} }
} }
.panel-info { .card-info {
> .panel-heading { > .card-heading {
color: $info; color: $info;
background-color: $info-bg; background-color: $info-bg;
border-color: $info-bg; border-color: $info-bg;
} }
} }
.panel-warning { .card-warning {
> .panel-heading { > .card-heading {
color: $warning; color: $warning;
background-color: $warning-bg; background-color: $warning-bg;
border-color: $warning-bg; border-color: $warning-bg;
} }
} }
.panel-danger { .card-danger {
> .panel-heading { > .card-heading {
color: $danger; color: $danger;
background-color: $danger-bg; background-color: $danger-bg;
border-color: $danger-bg; border-color: $danger-bg;
} }
} }
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger { .card-primary, .card-success, .card-info, .card-warning, .card-danger {
.panel-heading { .card-heading {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
} }
.panel.bootstrap-panel { .card.bootstrap-card {
.panel-body, .panel-heading { .card-body, .card-heading {
p, div, span { p, div, span {
color: $default-text; color: $default-text;
} }
} }
} }
.accordion-panel.panel.bootstrap-panel { .accordion-card.card.bootstrap-card {
&.panel-primary, &.card-primary,
&.panel-success, &.card-success,
&.panel-info, &.card-info,
&.panel-warning, &.card-warning,
&.panel-danger { &.card-danger {
.panel-heading { .card-heading {
p, div, span { p, div, span {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
@ -150,14 +150,14 @@ $panel-heading-font-size: 16px;
} }
} }
.panel-group .panel.accordion-panel { .card-group .card.accordion-card {
.panel-heading { .card-heading {
border-bottom: 0; border-bottom: 0;
} }
} }
.panel-group .panel { .card-group .card {
.panel-heading { .card-heading {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
} }
@ -166,11 +166,11 @@ $panel-heading-font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
} }
.contextual-example-panel { .contextual-example-card {
height: 120px; height: 120px;
} }
.footer-panel { .footer-card {
height: 142px; height: 142px;
} }
@ -179,6 +179,6 @@ $panel-heading-font-size: 16px;
} }
/* /*
.panel-group .panel { .card-group .card {
border-radius: 0; border-radius: 0;
}*/ }*/

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

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

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

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