purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 13:13:33 +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);
backface-visibility: hidden;
.fuse-widget-flip-button {
[fuseWidgetToggle] {
position: absolute;
top: 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
{
@HostBinding('class.flipped') flipped = false;
@ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
constructor(private el: ElementRef, private renderer: Renderer2)
{
@ -25,10 +26,8 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
{
setTimeout(() => {
const flipButtons = this.el.nativeElement.querySelectorAll('.fuse-widget-flip-button');
flipButtons.forEach(flipButton => {
this.renderer.listen(flipButton, 'click', () => {
this.toggleButtons.forEach(flipButton => {
this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
this.toggle();
});
});

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

@ -57,7 +57,7 @@
</md-option>
</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>
</button>
@ -79,7 +79,7 @@
<!-- Back -->
<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>
</button>
@ -100,7 +100,7 @@
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<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>
</button>
</div>
@ -121,7 +121,7 @@
<!-- Back -->
<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>
</button>
@ -142,7 +142,7 @@
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<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>
</button>
</div>
@ -163,7 +163,7 @@
<!-- Back -->
<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>
</button>
@ -184,7 +184,7 @@
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<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>
</button>
</div>
@ -204,7 +204,7 @@
<!-- Back -->
<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>
</button>