diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 166a55be..22f07516 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -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') diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html index 1db00498..a6c7ad35 100644 --- a/src/app/pages/dashboard/dashboard.html +++ b/src/app/pages/dashboard/dashboard.html @@ -1,11 +1,10 @@ - - - - - - - - - - - +
+
+
+ + + +
+
+
diff --git a/src/app/pages/dashboard/popularApp/popularApp.component.ts b/src/app/pages/dashboard/popularApp/popularApp.component.ts index 42c0df17..42a851c8 100644 --- a/src/app/pages/dashboard/popularApp/popularApp.component.ts +++ b/src/app/pages/dashboard/popularApp/popularApp.component.ts @@ -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, diff --git a/src/app/theme/baPanel/baPanel.component.ts b/src/app/theme/baPanel/baPanel.component.ts new file mode 100644 index 00000000..d0fdb825 --- /dev/null +++ b/src/app/theme/baPanel/baPanel.component.ts @@ -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; +} diff --git a/src/app/theme/baPanel/baPanel.html b/src/app/theme/baPanel/baPanel.html new file mode 100644 index 00000000..5933cb95 --- /dev/null +++ b/src/app/theme/baPanel/baPanel.html @@ -0,0 +1,8 @@ +
+
+

{{title}}

+
+
+ +
+
\ No newline at end of file diff --git a/src/app/theme/baPanel/baPanel.scss b/src/app/theme/baPanel/baPanel.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/theme/baPanel/index.ts b/src/app/theme/baPanel/index.ts new file mode 100644 index 00000000..8727b9ee --- /dev/null +++ b/src/app/theme/baPanel/index.ts @@ -0,0 +1 @@ +export * from './baPanel.component'; \ No newline at end of file diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts index e33b427f..8abe566f 100644 --- a/src/app/theme/index.ts +++ b/src/app/theme/index.ts @@ -1,4 +1,5 @@ export * from './pageTop'; export * from './msgCenter'; export * from './sidebar'; +export * from './baPanel'; export * from './contentTop'; diff --git a/src/app/theme/sass/bootstrap-overrides/_panel.scss b/src/app/theme/sass/bootstrap-overrides/_panel.scss index 67ec8975..433db35d 100644 --- a/src/app/theme/sass/bootstrap-overrides/_panel.scss +++ b/src/app/theme/sass/bootstrap-overrides/_panel.scss @@ -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; }*/ diff --git a/src/app/theme/sass/conf/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss index c43ee361..643ee919 100644 --- a/src/app/theme/sass/conf/_mixins.scss +++ b/src/app/theme/sass/conf/_mixins.scss @@ -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; } diff --git a/src/app/theme/sass/conf/_variables.scss b/src/app/theme/sass/conf/_variables.scss index 6d9747be..7e99b3e8 100644 --- a/src/app/theme/sass/conf/_variables.scss +++ b/src/app/theme/sass/conf/_variables.scss @@ -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;