From 129f17376396e04720ad4f14d63ca1b1b246d0c0 Mon Sep 17 00:00:00 2001 From: smartapant Date: Wed, 4 May 2016 12:23:47 +0300 Subject: [PATCH 1/4] baCard work in progress --- src/app/theme/baCard/baCardBlur.directive.ts | 43 ++++++++++++++++ .../theme/baCard/baCardBlurHelper.service.ts | 51 +++++++++++++++++++ src/app/theme/baCard/bgMetrics.ts | 6 +++ src/app/theme/baCard/index.ts | 3 +- 4 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 src/app/theme/baCard/baCardBlur.directive.ts create mode 100644 src/app/theme/baCard/baCardBlurHelper.service.ts create mode 100644 src/app/theme/baCard/bgMetrics.ts diff --git a/src/app/theme/baCard/baCardBlur.directive.ts b/src/app/theme/baCard/baCardBlur.directive.ts new file mode 100644 index 00000000..e5ae3f6f --- /dev/null +++ b/src/app/theme/baCard/baCardBlur.directive.ts @@ -0,0 +1,43 @@ +import {Directive, ElementRef, HostListener} from 'angular2/core'; +import {BaCardBlurHelper} from './baCardBlurHelper.service'; + +import {BgMetrics} from './bgMetrics'; + +@Directive({ + selector: '[baCardBlur]', + providers: [BaCardBlurHelper] +}) +export class BaCardBlur { + private _bodyBgSize:BgMetrics; + + constructor(private _baCardBlurHelper:BaCardBlurHelper, private _el:ElementRef) { + this._getBodyImageSizesOnBgLoad(); + this._recalculateCardStylesOnBgLoad(); + } + + @HostListener('window:resize') + _onWindowResize():void { + this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes(); + this._recalculateCardStyle(); + } + + private _getBodyImageSizesOnBgLoad():void { + this._baCardBlurHelper.bodyBgLoad().then(function() { + this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes(); + }); + } + + private _recalculateCardStylesOnBgLoad():void { + this._baCardBlurHelper.bodyBgLoad().then(() => { + setTimeout(this._recalculateCardStyle); + }); + } + + private _recalculateCardStyle():void { + if (!this._bodyBgSize) { + return; + } + this._el.nativeElement.style.backgroundSize = Math.round(this._bodyBgSize.width) + 'px ' + Math.round(this._bodyBgSize.height) + 'px'; + this._el.nativeElement.style.backgroundPosition = Math.floor(this._bodyBgSize.positionX) + 'px ' + Math.floor(this._bodyBgSize.positionY) + 'px'; + } +} diff --git a/src/app/theme/baCard/baCardBlurHelper.service.ts b/src/app/theme/baCard/baCardBlurHelper.service.ts new file mode 100644 index 00000000..69cb7a9d --- /dev/null +++ b/src/app/theme/baCard/baCardBlurHelper.service.ts @@ -0,0 +1,51 @@ +import {Injectable} from 'angular2/core' + +import {BgMetrics} from './bgMetrics'; + +@Injectable() +export class BaCardBlurHelper { + private image:HTMLImageElement; + private imageLoadDeferred = Promise.defer(); //TODO: Promises or Observables refactor + + constructor() { + this._genBgImage(); + this._setImageLoadResolves() + } + + private _genBgImage():void { + this.image = new Image(); + let computedStyle = getComputedStyle(document.body, ':before'); + this.image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2'); + } + + private _setImageLoadResolves():void { + this.image.onerror = () => { + this.imageLoadDeferred.reject(); + }; + this.image.onload = () => { + this.imageLoadDeferred.resolve(); + }; + } + + public bodyBgLoad():Promise { + return this.imageLoadDeferred.promise; + } + + public getBodyBgImageSizes():BgMetrics { + let elemW = document.documentElement.clientWidth; + let elemH = document.documentElement.clientHeight; + if(elemW <= 640) return; + let imgRatio = (this.image.height / this.image.width); // original img ratio + let containerRatio = (elemH / elemW); // container ratio + + let finalHeight, finalWidth; + if (containerRatio > imgRatio) { + finalHeight = elemH; + finalWidth = (elemH / imgRatio); + } else { + finalWidth = elemW; + finalHeight = (elemW * imgRatio); + } + return { width: finalWidth, height: finalHeight, positionX: (elemW - finalWidth)/2, positionY: (elemH - finalHeight)/2}; + } +} diff --git a/src/app/theme/baCard/bgMetrics.ts b/src/app/theme/baCard/bgMetrics.ts new file mode 100644 index 00000000..acc460bd --- /dev/null +++ b/src/app/theme/baCard/bgMetrics.ts @@ -0,0 +1,6 @@ +export interface BgMetrics { + width:number; + height:number; + positionX:number; + positionY:number; +} \ No newline at end of file diff --git a/src/app/theme/baCard/index.ts b/src/app/theme/baCard/index.ts index 4890b0a2..66478bc9 100644 --- a/src/app/theme/baCard/index.ts +++ b/src/app/theme/baCard/index.ts @@ -1 +1,2 @@ -export * from './baCard.component'; \ No newline at end of file +export * from './baCard.component'; +export * from './baCardBlur.directive'; \ No newline at end of file From a1a88752254223b031e0bf701a8e0f324d2dba91 Mon Sep 17 00:00:00 2001 From: smartapant Date: Wed, 4 May 2016 16:43:04 +0300 Subject: [PATCH 2/4] baVard work still in progress --- src/app/theme/baCard/baCard.component.ts | 3 +++ src/app/theme/baCard/baCard.html | 4 ++-- src/app/theme/baCard/baCardBlur.directive.ts | 8 ++++---- .../theme/baCard/baCardBlurHelper.service.ts | 19 +++++++++++-------- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/app/theme/baCard/baCard.component.ts b/src/app/theme/baCard/baCard.component.ts index f96c438c..2665eab9 100644 --- a/src/app/theme/baCard/baCard.component.ts +++ b/src/app/theme/baCard/baCard.component.ts @@ -1,8 +1,11 @@ import {Component, ViewEncapsulation, Input} from 'angular2/core'; +import {BaCardBlur} from './baCardBlur.directive'; + @Component({ selector: 'ba-card', styles: [require('./baCard.scss')], + directives: [BaCardBlur], template: require('./baCard.html'), encapsulation: ViewEncapsulation.None }) diff --git a/src/app/theme/baCard/baCard.html b/src/app/theme/baCard/baCard.html index a597ca69..badaeb55 100644 --- a/src/app/theme/baCard/baCard.html +++ b/src/app/theme/baCard/baCard.html @@ -1,8 +1,8 @@ -
+

{{title}}

-
\ No newline at end of file +
diff --git a/src/app/theme/baCard/baCardBlur.directive.ts b/src/app/theme/baCard/baCardBlur.directive.ts index e5ae3f6f..bbdf3cb2 100644 --- a/src/app/theme/baCard/baCardBlur.directive.ts +++ b/src/app/theme/baCard/baCardBlur.directive.ts @@ -22,15 +22,15 @@ export class BaCardBlur { } private _getBodyImageSizesOnBgLoad():void { - this._baCardBlurHelper.bodyBgLoad().then(function() { + this._baCardBlurHelper.bodyBgLoad().subscribe(() => { this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes(); }); } private _recalculateCardStylesOnBgLoad():void { - this._baCardBlurHelper.bodyBgLoad().then(() => { - setTimeout(this._recalculateCardStyle); - }); + this._baCardBlurHelper.bodyBgLoad().subscribe((event) => { + setTimeout(this._recalculateCardStyle.bind(this)); + }) } private _recalculateCardStyle():void { diff --git a/src/app/theme/baCard/baCardBlurHelper.service.ts b/src/app/theme/baCard/baCardBlurHelper.service.ts index 69cb7a9d..2893f7f1 100644 --- a/src/app/theme/baCard/baCardBlurHelper.service.ts +++ b/src/app/theme/baCard/baCardBlurHelper.service.ts @@ -1,15 +1,15 @@ import {Injectable} from 'angular2/core' - import {BgMetrics} from './bgMetrics'; +import {Subject} from 'rxjs/Subject'; @Injectable() export class BaCardBlurHelper { private image:HTMLImageElement; - private imageLoadDeferred = Promise.defer(); //TODO: Promises or Observables refactor + private imageLoadSubject:Subject; constructor() { this._genBgImage(); - this._setImageLoadResolves() + this._genImageLoadSubject(); } private _genBgImage():void { @@ -18,17 +18,20 @@ export class BaCardBlurHelper { this.image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2'); } - private _setImageLoadResolves():void { + private _genImageLoadSubject():void { + this.imageLoadSubject = new Subject(); this.image.onerror = () => { - this.imageLoadDeferred.reject(); + this.imageLoadSubject.error(); + this.imageLoadSubject.complete(); }; this.image.onload = () => { - this.imageLoadDeferred.resolve(); + this.imageLoadSubject.next(null); + this.imageLoadSubject.complete(); }; } - public bodyBgLoad():Promise { - return this.imageLoadDeferred.promise; + public bodyBgLoad():Subject { + return this.imageLoadSubject; } public getBodyBgImageSizes():BgMetrics { From cd81d8929793286a7f9820a49784c959c286797a Mon Sep 17 00:00:00 2001 From: smartapant Date: Wed, 4 May 2016 17:03:13 +0300 Subject: [PATCH 3/4] Transparent template sking added. --- src/app/theme/sass/conf/_mixins.scss | 2 +- src/app/theme/sass/skins/_02_transparent.scss | 52 +++++++++++++++++++ src/app/theme/theme.scss | 1 + src/index.html | 2 +- 4 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 src/app/theme/sass/skins/_02_transparent.scss diff --git a/src/app/theme/sass/conf/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss index 902579c3..b864ca34 100644 --- a/src/app/theme/sass/conf/_mixins.scss +++ b/src/app/theme/sass/conf/_mixins.scss @@ -117,7 +117,7 @@ } } -@mixin overridecardBg($color, $borderColor, $dropdownColor) { +@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/skins/_02_transparent.scss b/src/app/theme/sass/skins/_02_transparent.scss new file mode 100644 index 00000000..9a72046a --- /dev/null +++ b/src/app/theme/sass/skins/_02_transparent.scss @@ -0,0 +1,52 @@ +body.badmin-transparent { + &.mobile{ + background: none; + .body-bg{ + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + @include main-background(); + background-attachment: inherit; + } + .panel-blur { + background: transparent; + } + } + @include overrideColors(#fff); + @include overrideCardBg(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)); + .default-color { + color: $default-text !important;; + } + .panel.panel-blur { + background-attachment: fixed; + @include scrollbars(.4em, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8)); + border-radius: 5px; + color: $default; + .panel-heading { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); + transform: translate3d(0,0,0); + } + .panel-body { + transform: translate3d(0,0,0); + } + } + .btn-default { + color: $default; + } + .form-control, .bootstrap-tagsinput input { + @include placeholderStyle($default, 0.7); + background-color: rgba(0, 0, 0, .15); + border-radius: 5px; + color: $default; + } + .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + @include placeholderStyle($default, 0.5); + } + .irs-grid-text { + color: $default; + } +} diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss index 674a4c03..ae7ca054 100644 --- a/src/app/theme/theme.scss +++ b/src/app/theme/theme.scss @@ -1,5 +1,6 @@ @import "sass/conf/conf"; @import "sass/bootstrap-overrides/overrides"; +@import "sass/skins/02_transparent"; @import "sass/blur-admin-theme"; @import "sass/typography"; @import "sass/buttons"; diff --git a/src/index.html b/src/index.html index deed78cc..8caaf102 100644 --- a/src/index.html +++ b/src/index.html @@ -19,7 +19,7 @@ - +
From a3522cd555e910e62f6d99f2b51d1f3abe65af6a Mon Sep 17 00:00:00 2001 From: smartapant Date: Wed, 4 May 2016 17:08:24 +0300 Subject: [PATCH 4/4] Transparent skin sass panel to card rename. --- src/app/theme/sass/skins/_02_transparent.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/theme/sass/skins/_02_transparent.scss b/src/app/theme/sass/skins/_02_transparent.scss index 9a72046a..f315f9af 100644 --- a/src/app/theme/sass/skins/_02_transparent.scss +++ b/src/app/theme/sass/skins/_02_transparent.scss @@ -20,17 +20,17 @@ body.badmin-transparent { .default-color { color: $default-text !important;; } - .panel.panel-blur { + .card.card-blur { background-attachment: fixed; @include scrollbars(.4em, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8)); border-radius: 5px; color: $default; - .panel-heading { + .card-header { border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); transform: translate3d(0,0,0); } - .panel-body { + .card-body { transform: translate3d(0,0,0); } }