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

fixed sidenav for fuse https://github.com/angular/material2/issues/7201

Browse Source
This commit is contained in:
Sercan Yemen 2017-09-20 17:38:14 +03:00
parent 126e32d9e7
commit 32960abd7c
6 changed files with 71 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -9178,8 +9178,7 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
"dev": true, "dev": true
"optional": true
}, },
"uglifyjs-webpack-plugin": { "uglifyjs-webpack-plugin": {
"version": "0.4.6", "version": "0.4.6",

38
src/app/core/animations.ts
View File

@ -267,7 +267,7 @@ export class Animations
public static routerTransitionFade = trigger('routerTransitionFade', [ public static routerTransitionFade = trigger('routerTransitionFade', [
transition('* => *', [ transition('* => *', group([
query('fuse-content > :enter, fuse-content > :leave ', [ query('fuse-content > :enter, fuse-content > :leave ', [
style({ style({
@ -283,28 +283,26 @@ export class Animations
opacity: 0 opacity: 0
}) })
], {optional: true}), ], {optional: true}),
// sequence([ query('fuse-content > :leave', [
query('fuse-content > :leave', [ style({
style({ opacity: 1
opacity: 1 }),
}), animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({
opacity: 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({ style({
opacity: 0 opacity: 0
}), }))
animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', ], {optional: true}),
style({ query('fuse-content > :enter', [
opacity: 1 style({
})) opacity: 0
], {optional: true}), }),
// ]), animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({
opacity: 1
}))
], {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}), query('fuse-content > :enter', animateChild(), {optional: true}),
query('fuse-content > :leave', animateChild(), {optional: true}) query('fuse-content > :leave', animateChild(), {optional: true})
]) ]))
]); ]);
} }

2
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
View File

@ -73,7 +73,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
{ {
setTimeout(() => { setTimeout(() => {
this.stopTransition = false; this.stopTransition = false;
}, 0); }, 300);
} }
ngOnDestroy() ngOnDestroy()

47
src/app/core/scss/partials/_angular-material-fix.scss
View File

@ -4,3 +4,50 @@
border-radius: 50%; border-radius: 50%;
} }
} }
md-sidenav-container {
md-sidenav {
order: 1;
&.md-is-locked-open {
position: relative !important;
}
&.md-stop-transition {
transition: none !important;
transform: translate3d(0, 0, 0) !important;
~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none !important;
}
}
&.mat-sidenav-opened {
&.mat-drawer-side {
&.md-is-locked-open {
position: relative !important;
}
~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: translate3d(0, 0, 0) !important;
}
}
}
&.mat-drawer-end {
order: 3;
}
}
.mat-drawer-content {
order: 2;
}
}

22
src/app/core/scss/partials/_page-layouts.scss
View File

@ -137,19 +137,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
@include mat-elevation(7); @include mat-elevation(7);
&.md-is-locked-open { &.md-is-locked-open {
position: relative;
background: none; background: none;
box-shadow: none; box-shadow: none;
} }
&.md-stop-transition {
~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none;
}
}
.header { .header {
height: $carded-header-height; height: $carded-header-height;
min-height: $carded-header-height; min-height: $carded-header-height;
@ -233,7 +224,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
~ .mat-sidenav-content, ~ .mat-sidenav-content,
~ .mat-drawer-content { ~ .mat-drawer-content {
margin-left: 0 !important;
.center { .center {
margin-left: 0; margin-left: 0;
@ -257,7 +247,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
~ .mat-sidenav-content, ~ .mat-sidenav-content,
~ .mat-drawer-content { ~ .mat-drawer-content {
margin-right: 0 !important;
.center { .center {
margin-right: 0; margin-right: 0;
@ -347,7 +336,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container { > md-sidenav-container {
display: flex; display: flex;
flex-direction: column; // flex-direction: column;
flex-direction: row;
flex: 1; flex: 1;
background: none; background: none;
z-index: 2; z-index: 2;
@ -368,14 +358,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
background: transparent; background: transparent;
} }
&.md-stop-transition {
~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none;
}
}
.sidenav-content { .sidenav-content {
height: 100%; height: 100%;
} }

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

@ -687,7 +687,8 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md"> <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side"
fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar> <div class="sidenav-content" fusePerfectScrollbar>
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->