purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 13:13:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fuse-widget) fuseWidgetToggle Directive added for to not use class toggler.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-14 09:53:18 +03:00
parent 71a18758e2
commit c389d19963
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/widget/widget.component.scss
View File

@ -40,7 +40,7 @@ fuse-widget {
transform: rotateY(180deg); transform: rotateY(180deg);
backface-visibility: hidden; backface-visibility: hidden;
.fuse-widget-flip-button { [fuseWidgetToggle] {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;

7
src/app/core/components/widget/widget.component.ts
View File

@ -11,6 +11,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
export class FuseWidgetComponent implements OnInit, AfterContentInit export class FuseWidgetComponent implements OnInit, AfterContentInit
{ {
@HostBinding('class.flipped') flipped = false; @HostBinding('class.flipped') flipped = false;
@ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
constructor(private el: ElementRef, private renderer: Renderer2) constructor(private el: ElementRef, private renderer: Renderer2)
{ {
@ -25,10 +26,8 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
{ {
setTimeout(() => { setTimeout(() => {
const flipButtons = this.el.nativeElement.querySelectorAll('.fuse-widget-flip-button'); this.toggleButtons.forEach(flipButton => {
this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
flipButtons.forEach(flipButton => {
this.renderer.listen(flipButton, 'click', () => {
this.toggle(); this.toggle();
}); });
}); });

16
src/app/main/content/apps/dashboards/project/project.component.html
View File

@ -57,7 +57,7 @@
</md-option> </md-option>
</md-select> </md-select>
<button md-icon-button class="fuse-widget-flip-button" aria-label="more"> <button md-icon-button fuseWidgetToggle aria-label="more">
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>
@ -79,7 +79,7 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -100,7 +100,7 @@
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget2.title}}</div> <div class="h3">{{widgets.widget2.title}}</div>
<button md-icon-button class="fuse-widget-flip-button" aria-label="more"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>
</div> </div>
@ -121,7 +121,7 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -142,7 +142,7 @@
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget3.title}}</div> <div class="h3">{{widgets.widget3.title}}</div>
<button md-icon-button class="fuse-widget-flip-button" aria-label="more"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>
</div> </div>
@ -163,7 +163,7 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>
@ -184,7 +184,7 @@
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget4.title}}</div> <div class="h3">{{widgets.widget4.title}}</div>
<button md-icon-button class="fuse-widget-flip-button" aria-label="more"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>
</div> </div>
@ -204,7 +204,7 @@
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget"> <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <md-icon class="s-16">close</md-icon>
</button> </button>