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

Animations enhanced for all apps and some pages.

Browse Source
This commit is contained in:
mustafahlvc 2017-09-21 15:05:18 +03:00
parent 769e67c2f3
commit f688a58656
78 changed files with 450 additions and 1175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

918
package-lock.json generated
View File

@ -1281,7 +1281,6 @@
"requires": { "requires": {
"anymatch": "1.3.0", "anymatch": "1.3.0",
"async-each": "1.0.1", "async-each": "1.0.1",
"fsevents": "1.1.2",
"glob-parent": "2.0.0", "glob-parent": "2.0.0",
"inherits": "2.0.3", "inherits": "2.0.3",
"is-binary-path": "1.0.1", "is-binary-path": "1.0.1",
@ -3306,905 +3305,6 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true "dev": true
}, },
"fsevents": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz",
"integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==",
"dev": true,
"optional": true,
"requires": {
"nan": "2.6.2",
"node-pre-gyp": "0.6.36"
},
"dependencies": {
"abbrev": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
},
"ajv": {
"version": "4.11.8",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"co": "4.6.0",
"json-stable-stringify": "1.0.1"
}
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
},
"aproba": {
"version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true
},
"are-we-there-yet": {
"version": "1.1.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"delegates": "1.0.0",
"readable-stream": "2.2.9"
}
},
"asn1": {
"version": "0.2.3",
"bundled": true,
"dev": true,
"optional": true
},
"assert-plus": {
"version": "0.2.0",
"bundled": true,
"dev": true,
"optional": true
},
"asynckit": {
"version": "0.4.0",
"bundled": true,
"dev": true,
"optional": true
},
"aws-sign2": {
"version": "0.6.0",
"bundled": true,
"dev": true,
"optional": true
},
"aws4": {
"version": "1.6.0",
"bundled": true,
"dev": true,
"optional": true
},
"balanced-match": {
"version": "0.4.2",
"bundled": true,
"dev": true
},
"bcrypt-pbkdf": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"tweetnacl": "0.14.5"
}
},
"block-stream": {
"version": "0.0.9",
"bundled": true,
"dev": true,
"requires": {
"inherits": "2.0.3"
}
},
"boom": {
"version": "2.10.1",
"bundled": true,
"dev": true,
"requires": {
"hoek": "2.16.3"
}
},
"brace-expansion": {
"version": "1.1.7",
"bundled": true,
"dev": true,
"requires": {
"balanced-match": "0.4.2",
"concat-map": "0.0.1"
}
},
"buffer-shims": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"caseless": {
"version": "0.12.0",
"bundled": true,
"dev": true,
"optional": true
},
"co": {
"version": "4.6.0",
"bundled": true,
"dev": true,
"optional": true
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
},
"combined-stream": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"requires": {
"delayed-stream": "1.0.0"
}
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
},
"core-util-is": {
"version": "1.0.2",
"bundled": true,
"dev": true
},
"cryptiles": {
"version": "2.0.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"boom": "2.10.1"
}
},
"dashdash": {
"version": "1.14.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "1.0.0"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"debug": {
"version": "2.6.8",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ms": "2.0.0"
}
},
"deep-extend": {
"version": "0.4.2",
"bundled": true,
"dev": true,
"optional": true
},
"delayed-stream": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"delegates": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"ecc-jsbn": {
"version": "0.1.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"jsbn": "0.1.1"
}
},
"extend": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"extsprintf": {
"version": "1.0.2",
"bundled": true,
"dev": true
},
"forever-agent": {
"version": "0.6.1",
"bundled": true,
"dev": true,
"optional": true
},
"form-data": {
"version": "2.1.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"asynckit": "0.4.0",
"combined-stream": "1.0.5",
"mime-types": "2.1.15"
}
},
"fs.realpath": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"fstream": {
"version": "1.0.11",
"bundled": true,
"dev": true,
"requires": {
"graceful-fs": "4.1.11",
"inherits": "2.0.3",
"mkdirp": "0.5.1",
"rimraf": "2.6.1"
}
},
"fstream-ignore": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"fstream": "1.0.11",
"inherits": "2.0.3",
"minimatch": "3.0.4"
}
},
"gauge": {
"version": "2.7.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"aproba": "1.1.1",
"console-control-strings": "1.1.0",
"has-unicode": "2.0.1",
"object-assign": "4.1.1",
"signal-exit": "3.0.2",
"string-width": "1.0.2",
"strip-ansi": "3.0.1",
"wide-align": "1.1.2"
}
},
"getpass": {
"version": "0.1.7",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "1.0.0"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"glob": {
"version": "7.1.2",
"bundled": true,
"dev": true,
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
"inherits": "2.0.3",
"minimatch": "3.0.4",
"once": "1.4.0",
"path-is-absolute": "1.0.1"
}
},
"graceful-fs": {
"version": "4.1.11",
"bundled": true,
"dev": true
},
"har-schema": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"optional": true
},
"har-validator": {
"version": "4.2.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ajv": "4.11.8",
"har-schema": "1.0.5"
}
},
"has-unicode": {
"version": "2.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"hawk": {
"version": "3.1.3",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"boom": "2.10.1",
"cryptiles": "2.0.5",
"hoek": "2.16.3",
"sntp": "1.0.9"
}
},
"hoek": {
"version": "2.16.3",
"bundled": true,
"dev": true
},
"http-signature": {
"version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "0.2.0",
"jsprim": "1.4.0",
"sshpk": "1.13.0"
}
},
"inflight": {
"version": "1.0.6",
"bundled": true,
"dev": true,
"requires": {
"once": "1.4.0",
"wrappy": "1.0.2"
}
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
},
"ini": {
"version": "1.3.4",
"bundled": true,
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"requires": {
"number-is-nan": "1.0.1"
}
},
"is-typedarray": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"isarray": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"isstream": {
"version": "0.1.2",
"bundled": true,
"dev": true,
"optional": true
},
"jodid25519": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"jsbn": "0.1.1"
}
},
"jsbn": {
"version": "0.1.1",
"bundled": true,
"dev": true,
"optional": true
},
"json-schema": {
"version": "0.2.3",
"bundled": true,
"dev": true,
"optional": true
},
"json-stable-stringify": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"jsonify": "0.0.0"
}
},
"json-stringify-safe": {
"version": "5.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"jsonify": {
"version": "0.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"jsprim": {
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "1.0.0",
"extsprintf": "1.0.2",
"json-schema": "0.2.3",
"verror": "1.3.6"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"mime-db": {
"version": "1.27.0",
"bundled": true,
"dev": true
},
"mime-types": {
"version": "2.1.15",
"bundled": true,
"dev": true,
"requires": {
"mime-db": "1.27.0"
}
},
"minimatch": {
"version": "3.0.4",
"bundled": true,
"dev": true,
"requires": {
"brace-expansion": "1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"dev": true,
"requires": {
"minimist": "0.0.8"
}
},
"ms": {
"version": "2.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"node-pre-gyp": {
"version": "0.6.36",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"mkdirp": "0.5.1",
"nopt": "4.0.1",
"npmlog": "4.1.0",
"rc": "1.2.1",
"request": "2.81.0",
"rimraf": "2.6.1",
"semver": "5.3.0",
"tar": "2.2.1",
"tar-pack": "3.4.0"
}
},
"nopt": {
"version": "4.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"abbrev": "1.1.0",
"osenv": "0.1.4"
}
},
"npmlog": {
"version": "4.1.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "1.1.4",
"console-control-strings": "1.1.0",
"gauge": "2.7.4",
"set-blocking": "2.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
},
"oauth-sign": {
"version": "0.8.2",
"bundled": true,
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
"bundled": true,
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",
"bundled": true,
"dev": true,
"requires": {
"wrappy": "1.0.2"
}
},
"os-homedir": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"os-tmpdir": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"osenv": {
"version": "0.1.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"os-homedir": "1.0.2",
"os-tmpdir": "1.0.2"
}
},
"path-is-absolute": {
"version": "1.0.1",
"bundled": true,
"dev": true
},
"performance-now": {
"version": "0.2.0",
"bundled": true,
"dev": true,
"optional": true
},
"process-nextick-args": {
"version": "1.0.7",
"bundled": true,
"dev": true
},
"punycode": {
"version": "1.4.1",
"bundled": true,
"dev": true,
"optional": true
},
"qs": {
"version": "6.4.0",
"bundled": true,
"dev": true,
"optional": true
},
"rc": {
"version": "1.2.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"deep-extend": "0.4.2",
"ini": "1.3.4",
"minimist": "1.2.0",
"strip-json-comments": "2.0.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"readable-stream": {
"version": "2.2.9",
"bundled": true,
"dev": true,
"requires": {
"buffer-shims": "1.0.0",
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "1.0.7",
"string_decoder": "1.0.1",
"util-deprecate": "1.0.2"
}
},
"request": {
"version": "2.81.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"aws-sign2": "0.6.0",
"aws4": "1.6.0",
"caseless": "0.12.0",
"combined-stream": "1.0.5",
"extend": "3.0.1",
"forever-agent": "0.6.1",
"form-data": "2.1.4",
"har-validator": "4.2.1",
"hawk": "3.1.3",
"http-signature": "1.1.1",
"is-typedarray": "1.0.0",
"isstream": "0.1.2",
"json-stringify-safe": "5.0.1",
"mime-types": "2.1.15",
"oauth-sign": "0.8.2",
"performance-now": "0.2.0",
"qs": "6.4.0",
"safe-buffer": "5.0.1",
"stringstream": "0.0.5",
"tough-cookie": "2.3.2",
"tunnel-agent": "0.6.0",
"uuid": "3.0.1"
}
},
"rimraf": {
"version": "2.6.1",
"bundled": true,
"dev": true,
"requires": {
"glob": "7.1.2"
}
},
"safe-buffer": {
"version": "5.0.1",
"bundled": true,
"dev": true
},
"semver": {
"version": "5.3.0",
"bundled": true,
"dev": true,
"optional": true
},
"set-blocking": {
"version": "2.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"signal-exit": {
"version": "3.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"sntp": {
"version": "1.0.9",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"hoek": "2.16.3"
}
},
"sshpk": {
"version": "1.13.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"asn1": "0.2.3",
"assert-plus": "1.0.0",
"bcrypt-pbkdf": "1.0.1",
"dashdash": "1.14.1",
"ecc-jsbn": "0.1.1",
"getpass": "0.1.7",
"jodid25519": "1.0.2",
"jsbn": "0.1.1",
"tweetnacl": "0.14.5"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"string-width": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
"strip-ansi": "3.0.1"
}
},
"string_decoder": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"stringstream": {
"version": "0.0.5",
"bundled": true,
"dev": true,
"optional": true
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"requires": {
"ansi-regex": "2.1.1"
}
},
"strip-json-comments": {
"version": "2.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"tar": {
"version": "2.2.1",
"bundled": true,
"dev": true,
"requires": {
"block-stream": "0.0.9",
"fstream": "1.0.11",
"inherits": "2.0.3"
}
},
"tar-pack": {
"version": "3.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"debug": "2.6.8",
"fstream": "1.0.11",
"fstream-ignore": "1.0.5",
"once": "1.4.0",
"readable-stream": "2.2.9",
"rimraf": "2.6.1",
"tar": "2.2.1",
"uid-number": "0.0.6"
}
},
"tough-cookie": {
"version": "2.3.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"punycode": "1.4.1"
}
},
"tunnel-agent": {
"version": "0.6.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"tweetnacl": {
"version": "0.14.5",
"bundled": true,
"dev": true,
"optional": true
},
"uid-number": {
"version": "0.0.6",
"bundled": true,
"dev": true,
"optional": true
},
"util-deprecate": {
"version": "1.0.2",
"bundled": true,
"dev": true
},
"uuid": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"verror": {
"version": "1.3.6",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"extsprintf": "1.0.2"
}
},
"wide-align": {
"version": "1.1.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"string-width": "1.0.2"
}
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
}
}
},
"fstream": { "fstream": {
"version": "1.0.11", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@ -8728,6 +7828,15 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true "dev": true
}, },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": { "string-width": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -8755,15 +7864,6 @@
} }
} }
}, },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

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

@ -1,8 +1,56 @@
import { sequence, trigger, animate, style, group, query, transition, animateChild, state } from '@angular/animations'; import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
export class Animations const customAnimation = animation([
{ style({
public static fadeInOut = trigger('fadeInOut', [ opacity : '{{opacity}}',
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
}),
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
], {
params: {
duration: '200ms',
delay : '0ms',
opacity : '0',
scale : '1',
x : '0',
y : '0',
z : '0'
}
});
export const fuseAnimations = [
trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
trigger('animateStagger', [
state('50', style('*')),
state('100', style('*')),
state('200', style('*')),
transition('void => 50',
query('@*',
[
stagger('50ms', [
animateChild()
])
])),
transition('void => 100',
query('@*',
[
stagger('100ms', [
animateChild()
])
])),
transition('void => 200',
query('@*',
[
stagger('200ms', [
animateChild()
])
]))
]),
trigger('fadeInOut', [
state('0', style({ state('0', style({
display: 'none', display: 'none',
opacity: 0 opacity: 0
@ -13,9 +61,9 @@ export class Animations
})), })),
transition('1 => 0', animate('300ms ease-out')), transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in')) transition('0 => 1', animate('300ms ease-in'))
]); ]),
public static slideInOut = trigger('slideInOut', [ trigger('slideInOut', [
state('0', style({ state('0', style({
height : '0px', height : '0px',
display: 'none' display: 'none'
@ -26,9 +74,9 @@ export class Animations
})), })),
transition('1 => 0', animate('300ms ease-out')), transition('1 => 0', animate('300ms ease-out')),
transition('0 => 1', animate('300ms ease-in')) transition('0 => 1', animate('300ms ease-in'))
]); ]),
public static slideInLeft = trigger('slideInLeft', [ trigger('slideInLeft', [
state('void', style({ state('void', style({
transform: 'translateX(-100%)', transform: 'translateX(-100%)',
display : 'none' display : 'none'
@ -39,9 +87,9 @@ export class Animations
})), })),
transition('void => *', animate('300ms')), transition('void => *', animate('300ms')),
transition('* => void', animate('300ms')) transition('* => void', animate('300ms'))
]); ]),
public static slideInRight = trigger('slideInRight', [ trigger('slideInRight', [
state('void', style({ state('void', style({
transform: 'translateX(100%)', transform: 'translateX(100%)',
display : 'none' display : 'none'
@ -52,9 +100,9 @@ export class Animations
})), })),
transition('void => *', animate('300ms')), transition('void => *', animate('300ms')),
transition('* => void', animate('300ms')) transition('* => void', animate('300ms'))
]); ]),
public static slideInTop = trigger('slideInTop', [ trigger('slideInTop', [
state('void', style({ state('void', style({
transform: 'translateY(-100%)', transform: 'translateY(-100%)',
display : 'none' display : 'none'
@ -65,9 +113,9 @@ export class Animations
})), })),
transition('void => *', animate('300ms')), transition('void => *', animate('300ms')),
transition('* => void', animate('300ms')) transition('* => void', animate('300ms'))
]); ]),
public static slideInBottom = trigger('slideInBottom', [ trigger('slideInBottom', [
state('void', state('void',
style({ style({
transform: 'translateY(100%)', transform: 'translateY(100%)',
@ -79,9 +127,9 @@ export class Animations
})), })),
transition('void => *', animate('300ms')), transition('void => *', animate('300ms')),
transition('* => void', animate('300ms')) transition('* => void', animate('300ms'))
]); ]),
public static routerTransitionLeft = trigger('routerTransitionLeft', [ trigger('routerTransitionLeft', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('fuse-content > :enter, fuse-content > :leave', [
@ -106,7 +154,7 @@ export class Animations
transform: 'translateX(0)', transform: 'translateX(0)',
opacity : 1 opacity : 1
}), }),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateX(-100%)', transform: 'translateX(-100%)',
opacity : 0 opacity : 0
@ -114,7 +162,7 @@ export class Animations
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('fuse-content > :enter', [
style({transform: 'translateX(100%)'}), style({transform: 'translateX(100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateX(0%)', transform: 'translateX(0%)',
opacity : 1 opacity : 1
@ -125,9 +173,9 @@ export class Animations
query('fuse-content > :enter', animateChild(), {optional: true}) query('fuse-content > :enter', animateChild(), {optional: true})
]) ])
]) ])
]); ]),
public static routerTransitionRight = trigger('routerTransitionRight', [ trigger('routerTransitionRight', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('fuse-content > :enter, fuse-content > :leave', [
@ -152,7 +200,7 @@ export class Animations
transform: 'translateX(0)', transform: 'translateX(0)',
opacity : 1 opacity : 1
}), }),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateX(100%)', transform: 'translateX(100%)',
opacity : 0 opacity : 0
@ -160,7 +208,7 @@ export class Animations
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('fuse-content > :enter', [
style({transform: 'translateX(-100%)'}), style({transform: 'translateX(-100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateX(0%)', transform: 'translateX(0%)',
opacity : 1 opacity : 1
@ -171,9 +219,9 @@ export class Animations
query('fuse-content > :enter', animateChild(), {optional: true}) query('fuse-content > :enter', animateChild(), {optional: true})
]) ])
]) ])
]); ]),
public static routerTransitionUp = trigger('routerTransitionUp', [ trigger('routerTransitionUp', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('fuse-content > :enter, fuse-content > :leave', [
@ -191,35 +239,33 @@ export class Animations
opacity : 0 opacity : 0
}) })
], {optional: true}), ], {optional: true}),
sequence([ group([
group([ query('fuse-content > :leave', [
query('fuse-content > :leave', [ style({
transform: 'translateY(0)',
opacity : 1
}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateY(0)', transform: 'translateY(-100%)',
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
style({transform: 'translateY(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
transform: 'translateY(0%)',
opacity : 1 opacity : 1
}), }))
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', ], {optional: true})
style({ ]),
transform: 'translateY(-100%)', query('fuse-content > :leave', animateChild(), {optional: true}),
opacity : 0 query('fuse-content > :enter', animateChild(), {optional: true})
}))
], {optional: true}),
query('fuse-content > :enter', [
style({transform: 'translateY(100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({
transform: 'translateY(0%)',
opacity : 1
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
])
]) ])
]); ]),
public static routerTransitionDown = trigger('routerTransitionDown', [ trigger('routerTransitionDown', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('fuse-content > :enter, fuse-content > :leave', [
@ -244,7 +290,7 @@ export class Animations
transform: 'translateY(0)', transform: 'translateY(0)',
opacity : 1 opacity : 1
}), }),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateY(100%)', transform: 'translateY(100%)',
opacity : 0 opacity : 0
@ -252,7 +298,7 @@ export class Animations
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('fuse-content > :enter', [
style({transform: 'translateY(-100%)'}), style({transform: 'translateY(-100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
transform: 'translateY(0%)', transform: 'translateY(0%)',
opacity : 1 opacity : 1
@ -263,9 +309,9 @@ export class Animations
query('fuse-content > :enter', animateChild(), {optional: true}) query('fuse-content > :enter', animateChild(), {optional: true})
]) ])
]) ])
]); ]),
public static routerTransitionFade = trigger('routerTransitionFade', [ trigger('routerTransitionFade', [
transition('* => *', group([ transition('* => *', group([
@ -278,6 +324,7 @@ export class Animations
right : 0 right : 0
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('fuse-content > :enter', [
style({ style({
opacity: 0 opacity: 0
@ -287,7 +334,7 @@ export class Animations
style({ style({
opacity: 1 opacity: 1
}), }),
animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
opacity: 0 opacity: 0
})) }))
@ -296,7 +343,7 @@ export class Animations
style({ style({
opacity: 0 opacity: 0
}), }),
animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
opacity: 1 opacity: 1
})) }))
@ -304,5 +351,5 @@ export class Animations
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})
])) ]))
]); ])
} ];

4
src/app/core/components/material-color-picker/material-color-picker.component.ts
View File

@ -1,12 +1,12 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core'; import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { MatColors } from '../../matColors'; import { MatColors } from '../../matColors';
import { Animations } from '../../animations'; import { fuseAnimations } from '../../animations';
@Component({ @Component({
selector : 'fuse-material-color-picker', selector : 'fuse-material-color-picker',
templateUrl : './material-color-picker.component.html', templateUrl : './material-color-picker.component.html',
styleUrls : ['./material-color-picker.component.scss'], styleUrls : ['./material-color-picker.component.scss'],
animations : [Animations.slideInLeft, Animations.slideInRight], animations : fuseAnimations,
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class FuseMaterialColorPickerComponent implements OnInit, OnChanges export class FuseMaterialColorPickerComponent implements OnInit, OnChanges

4
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
View File

@ -1,5 +1,5 @@
import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core'; import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
import { Animations } from '../../../../animations'; import { fuseAnimations } from '../../../../animations';
import { FuseConfigService } from '../../../../services/config.service'; import { FuseConfigService } from '../../../../services/config.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
selector : 'fuse-nav-horizontal-collapse', selector : 'fuse-nav-horizontal-collapse',
templateUrl: './nav-horizontal-collapse.component.html', templateUrl: './nav-horizontal-collapse.component.html',
styleUrls : ['./nav-horizontal-collapse.component.scss'], styleUrls : ['./nav-horizontal-collapse.component.scss'],
animations : [Animations.slideInOut] animations : fuseAnimations
}) })
export class FuseNavHorizontalCollapseComponent implements OnDestroy export class FuseNavHorizontalCollapseComponent implements OnDestroy
{ {

4
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
View File

@ -1,13 +1,13 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core'; import { Component, HostBinding, Input, OnInit } from '@angular/core';
import { FuseNavigationService } from '../../navigation.service'; import { FuseNavigationService } from '../../navigation.service';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { Animations } from '../../../../animations'; import { fuseAnimations } from '../../../../animations';
@Component({ @Component({
selector : 'fuse-nav-vertical-collapse', selector : 'fuse-nav-vertical-collapse',
templateUrl: './nav-vertical-collapse.component.html', templateUrl: './nav-vertical-collapse.component.html',
styleUrls : ['./nav-vertical-collapse.component.scss'], styleUrls : ['./nav-vertical-collapse.component.scss'],
animations : [Animations.slideInOut] animations : fuseAnimations
}) })
export class FuseNavVerticalCollapseComponent implements OnInit export class FuseNavVerticalCollapseComponent implements OnInit
{ {

5
src/app/core/components/theme-options/theme-options.component.scss
View File

@ -15,6 +15,10 @@
right: 0; right: 0;
top: 160px; top: 160px;
&.bar-closed .theme-options-panel {
display: none;
}
.theme-options-panel { .theme-options-panel {
position: absolute; position: absolute;
right: 0; right: 0;
@ -82,4 +86,5 @@
opacity: 1; opacity: 1;
} }
} }
} }

15
src/app/core/components/theme-options/theme-options.component.ts
View File

@ -1,14 +1,14 @@
import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { FuseConfigService } from '../../services/config.service'; import { FuseConfigService } from '../../services/config.service';
import { Animations } from '../../animations'; import { fuseAnimations } from '../../animations';
@Component({ @Component({
selector : 'fuse-theme-options', selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html', templateUrl: './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'], styleUrls : ['./theme-options.component.scss'],
animations : [Animations.fadeInOut] animations : fuseAnimations
}) })
export class FuseThemeOptionsComponent implements OnInit, OnDestroy export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{ {
@ -18,10 +18,11 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
public player: AnimationPlayer; public player: AnimationPlayer;
fuseSettings: any; fuseSettings: any;
barClosed: boolean;
onSettingsChanged: Subscription; onSettingsChanged: Subscription;
@HostBinding('class.bar-closed') barClosed: boolean;
constructor( constructor(
private animationBuilder: AnimationBuilder, private animationBuilder: AnimationBuilder,
private fuseConfig: FuseConfigService, private fuseConfig: FuseConfigService,
@ -53,8 +54,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
closeBar() closeBar()
{ {
this.barClosed = true;
this.player = this.player =
this.animationBuilder this.animationBuilder
.build([ .build([
@ -63,6 +62,10 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
]).create(this.panel.nativeElement); ]).create(this.panel.nativeElement);
this.player.play(); this.player.play();
this.player.onDone(() => {
this.barClosed = true;
});
} }
openBar() openBar()

13
src/app/main/content/apps/calendar/calendar.component.html
View File

@ -1,5 +1,4 @@
<div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar> <div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header" [ngClass]="viewDate | date:'MMM'"> <div class="header" [ngClass]="viewDate | date:'MMM'">
@ -9,9 +8,9 @@
<div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center"> <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon">today</md-icon> <md-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</md-icon>
<span class="logo-text">Calendar</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span>
</div> </div>
@ -50,7 +49,8 @@
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- HEADER BOTTOM --> <!-- HEADER BOTTOM -->
<div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"> <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">
<button md-button class="mat-icon-button arrow" <button md-button class="mat-icon-button arrow"
mwlCalendarPreviousView mwlCalendarPreviousView
@ -78,7 +78,8 @@
</div> </div>
<!-- ADD EVENT BUTTON --> <!-- ADD EVENT BUTTON -->
<button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"> <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
<md-icon>add</md-icon> <md-icon>add</md-icon>
</button> </button>
<!-- / ADD EVENT BUTTON --> <!-- / ADD EVENT BUTTON -->
@ -86,7 +87,7 @@
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT --> <!-- CONTENT -->
<div class="content" fusePerfectScrollbar> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
<div [ngSwitch]="view"> <div [ngSwitch]="view">
<mwl-calendar-month-view <mwl-calendar-month-view
*ngSwitchCase="'month'" *ngSwitchCase="'month'"

13
src/app/main/content/apps/calendar/calendar.component.ts
View File

@ -1,5 +1,5 @@
import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns'; import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component'; import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
@ -13,13 +13,14 @@ import {
CalendarMonthViewDay CalendarMonthViewDay
} from 'angular-calendar'; } from 'angular-calendar';
import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-calendar', selector : 'fuse-calendar',
changeDetection: ChangeDetectionStrategy.OnPush, templateUrl : './calendar.component.html',
templateUrl : './calendar.component.html', styleUrls : ['./calendar.component.scss'],
styleUrls : ['./calendar.component.scss'], encapsulation: ViewEncapsulation.None,
encapsulation : ViewEncapsulation.None animations : fuseAnimations
}) })
export class FuseCalendarComponent implements OnInit export class FuseCalendarComponent implements OnInit
{ {

7
src/app/main/content/apps/chat/chat-start/chat-start.component.html
View File

@ -1,14 +1,15 @@
<div fxFlex fxLayout="column" fxLayoutAlign="center center"> <div fxFlex fxLayout="column" fxLayoutAlign="center center">
<div class="big-circle mat-elevation-z1" fxLayout="column" fxLayoutAlign="center center"> <div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<md-icon class="s-64 s-md-128">chat</md-icon> <md-icon class="s-64 s-md-128">chat</md-icon>
</div> </div>
<span class="app-title my-24">Chat App</span> <span class="app-title my-24" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
<span fxHide fxShow.gt-md class="app-message">Select contact to start the chat!..</span> <span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span>
<button md-raised-button fxHide.gt-md class="" fuseMdSidenavToggler="chat-left-sidenav"> <button md-raised-button fxHide.gt-md class="" fuseMdSidenavToggler="chat-left-sidenav">
Select contact to start the chat!.. Select contact to start the chat!..

4
src/app/main/content/apps/chat/chat-start/chat-start.component.ts
View File

@ -1,9 +1,11 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-chat-start', selector : 'fuse-chat-start',
templateUrl: './chat-start.component.html', templateUrl: './chat-start.component.html',
styleUrls : ['./chat-start.component.scss'] styleUrls : ['./chat-start.component.scss'],
animations : fuseAnimations
}) })
export class FuseChatStartComponent implements OnInit export class FuseChatStartComponent implements OnInit
{ {

4
src/app/main/content/apps/chat/chat.component.ts
View File

@ -1,11 +1,13 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ChatService } from './chat.service'; import { ChatService } from './chat.service';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-chat', selector : 'fuse-chat',
templateUrl : './chat.component.html', templateUrl : './chat.component.html',
styleUrls : ['./chat.component.scss'], styleUrls : ['./chat.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
}) })
export class FuseChatComponent implements OnInit export class FuseChatComponent implements OnInit
{ {

8
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
View File

@ -101,7 +101,7 @@
<div class="sidenav-content" fusePerfectScrollbar fxFlex> <div class="sidenav-content" fusePerfectScrollbar fxFlex>
<!-- CHATS CONTENT --> <!-- CHATS CONTENT -->
<div> <div *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- CHATS LIST--> <!-- CHATS LIST-->
<div class="chat-list" fxLayout="column"> <div class="chat-list" fxLayout="column">
@ -112,7 +112,8 @@
<button md-button class="contact" <button md-button class="contact"
*ngFor="let chat of user.chatList | filter: searchText" *ngFor="let chat of user.chatList | filter: searchText"
(click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}"> (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}"
[@animate]="{value:'*',params:{y:'100%'}}">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
@ -152,7 +153,8 @@
<button md-button class="contact" <button md-button class="contact"
ng-show="chatSearch" ng-show="chatSearch"
*ngFor="let contact of contacts| filter: searchText" *ngFor="let contact of contacts| filter: searchText"
(click)="getChat(contact.id)"> (click)="getChat(contact.id)"
[@animate]="{value:'*',params:{y:'100%'}}">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<div class="avatar-wrapper" fxFlex="0 1 auto"> <div class="avatar-wrapper" fxFlex="0 1 auto">

4
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { ChatService } from '../../../chat.service'; import { ChatService } from '../../../chat.service';
import { FuseMdSidenavHelperService } from '../../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service'; import { FuseMdSidenavHelperService } from '../../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service';
import { ObservableMedia } from '@angular/flex-layout'; import { ObservableMedia } from '@angular/flex-layout';
import { fuseAnimations } from '../../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-chat-chats-sidenav', selector : 'fuse-chat-chats-sidenav',
templateUrl: './chats.component.html', templateUrl: './chats.component.html',
styleUrls : ['./chats.component.scss'] styleUrls : ['./chats.component.scss'],
animations : fuseAnimations
}) })
export class FuseChatChatsSidenavComponent implements OnInit export class FuseChatChatsSidenavComponent implements OnInit
{ {

4
src/app/main/content/apps/chat/sidenavs/left/left.component.ts
View File

@ -1,12 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Animations } from '../../../../../../core/animations'; import { fuseAnimations } from '../../../../../../core/animations';
import { ChatService } from '../../chat.service'; import { ChatService } from '../../chat.service';
@Component({ @Component({
selector : 'fuse-chat-left-sidenav', selector : 'fuse-chat-left-sidenav',
templateUrl: './left.component.html', templateUrl: './left.component.html',
styleUrls : ['./left.component.scss'], styleUrls : ['./left.component.scss'],
animations : [Animations.slideInLeft, Animations.slideInRight] animations : fuseAnimations
}) })
export class FuseChatLeftSidenavComponent implements OnInit export class FuseChatLeftSidenavComponent implements OnInit
{ {

4
src/app/main/content/apps/chat/sidenavs/right/right.component.ts
View File

@ -1,12 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Animations } from '../../../../../../core/animations'; import { fuseAnimations } from '../../../../../../core/animations';
import { ChatService } from '../../chat.service'; import { ChatService } from '../../chat.service';
@Component({ @Component({
selector : 'fuse-chat-right-sidenav', selector : 'fuse-chat-right-sidenav',
templateUrl: './right.component.html', templateUrl: './right.component.html',
styleUrls : ['./right.component.scss'], styleUrls : ['./right.component.scss'],
animations : [Animations.slideInLeft, Animations.slideInRight] animations : fuseAnimations
}) })
export class FuseChatRightSidenavComponent implements OnInit export class FuseChatRightSidenavComponent implements OnInit
{ {

11
src/app/main/content/apps/contacts/contact-list/contact-list.component.html
View File

@ -1,5 +1,5 @@
<md-table #table [dataSource]="dataSource"> <md-table #table [dataSource]="dataSource"
[@animateStagger]="{value:'50'}">
<!-- Checkbox Column --> <!-- Checkbox Column -->
<ng-container cdkColumnDef="checkbox"> <ng-container cdkColumnDef="checkbox">
<md-header-cell *cdkHeaderCellDef></md-header-cell> <md-header-cell *cdkHeaderCellDef></md-header-cell>
@ -95,15 +95,18 @@
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let contact; columns: displayedColumns;" <md-row *cdkRowDef="let contact; columns: displayedColumns;"
class="contact"
(click)="editContact(contact)" (click)="editContact(contact)"
[ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}" [ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}"
md-ripple> md-ripple
[@animate]="{value:'*',params:{y:'100%'}}">
</md-row> </md-row>
</md-table> </md-table>
<!-- ADD CONTACT BUTTON --> <!-- ADD CONTACT BUTTON -->
<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"> <button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
<md-icon>person_add</md-icon> <md-icon>person_add</md-icon>
</button> </button>
<!-- / ADD CONTACT BUTTON --> <!-- / ADD CONTACT BUTTON -->

4
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@ -6,11 +6,13 @@ import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-contacts-contact-list', selector : 'fuse-contacts-contact-list',
templateUrl: './contact-list.component.html', templateUrl: './contact-list.component.html',
styleUrls : ['./contact-list.component.scss'] styleUrls : ['./contact-list.component.scss'],
animations : fuseAnimations
}) })
export class FuseContactsContactListComponent implements OnInit export class FuseContactsContactListComponent implements OnInit
{ {

6
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -14,8 +14,8 @@
</button> </button>
<div class="logo" fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon mr-16">account_box</md-icon> <md-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</md-icon>
<span class="logo-text h1">Contacts</span> <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
</div> </div>
</div> </div>
@ -45,7 +45,7 @@
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side" <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md"> fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
<fuse-contacts-main-sidenav></fuse-contacts-main-sidenav> <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
</md-sidenav> </md-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->

4
src/app/main/content/apps/contacts/contacts.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ContactsService } from './contacts.service'; import { ContactsService } from './contacts.service';
import { Animations } from '../../../../core/animations'; import { fuseAnimations } from '../../../../core/animations';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
@Component({ @Component({
@ -8,7 +8,7 @@ import { FormControl } from '@angular/forms';
templateUrl : './contacts.component.html', templateUrl : './contacts.component.html',
styleUrls : ['./contacts.component.scss'], styleUrls : ['./contacts.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : [Animations.slideInTop] animations : fuseAnimations
}) })
export class FuseContactsComponent implements OnInit export class FuseContactsComponent implements OnInit
{ {

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

@ -10,7 +10,7 @@
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between start">
<span class="mat-display-1 mb-0">Welcome back, John!</span> <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span>
<button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md> <button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
@ -41,10 +41,10 @@
<md-tab label="Home"> <md-tab label="Home">
<div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap> <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- WIDGET 1 --> <!-- WIDGET 1 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -93,7 +93,7 @@
<!-- / WIDGET 1 --> <!-- / WIDGET 1 -->
<!-- WIDGET 2 --> <!-- WIDGET 2 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -135,7 +135,7 @@
<!-- / WIDGET 2 --> <!-- / WIDGET 2 -->
<!-- WIDGET 3 --> <!-- WIDGET 3 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -177,7 +177,7 @@
<!-- / WIDGET 3 --> <!-- / WIDGET 3 -->
<!-- WIDGET 4 --> <!-- WIDGET 4 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -219,7 +219,7 @@
<!-- WIDGET 5 --> <!-- WIDGET 5 -->
<fuse-widget class="" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -295,7 +295,7 @@
<!-- WIDGET 6 --> <!-- WIDGET 6 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -345,7 +345,7 @@
<!-- / WIDGET 6 --> <!-- / WIDGET 6 -->
<!-- WIDGET 7 --> <!-- WIDGET 7 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -394,10 +394,10 @@
<md-tab label="Budget Summary"> <md-tab label="Budget Summary">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap> <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- WIDGET 8 --> <!-- WIDGET 8 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -428,7 +428,7 @@
<!-- / WIDGET 8 --> <!-- / WIDGET 8 -->
<!-- WIDGET 9 --> <!-- WIDGET 9 -->
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -542,7 +542,7 @@
<!-- / WIDGET 9 --> <!-- / WIDGET 9 -->
<!-- WIDGET 10 --> <!-- WIDGET 10 -->
<fuse-widget class="" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -589,10 +589,10 @@
<md-tab label="Team Members"> <md-tab label="Team Members">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap> <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- WIDGET 11 --> <!-- WIDGET 11 -->
<fuse-widget class="" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@ -687,15 +687,15 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar> <div class="sidenav-content" fusePerfectScrollbar>
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="column" fxFlex="100"> <div class="widget-group" fxLayout="column" fxFlex="100" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- NOW WIDGET --> <!-- NOW WIDGET -->
<fuse-widget class="sidenav-widget p-0"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front"> <div class="fuse-widget-front">
@ -738,9 +738,8 @@
</fuse-widget> </fuse-widget>
<!-- / NOW WIDGET --> <!-- / NOW WIDGET -->
<!-- WEATHER WIDGET --> <!-- WEATHER WIDGET -->
<fuse-widget class="sidenav-widget p-0"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front"> <div class="fuse-widget-front">

9
src/app/main/content/apps/dashboards/project/project.component.scss
View File

@ -30,6 +30,15 @@
} }
> .content { > .content {
flex: 1;
md-tab-group {
height: 100%;
.mat-tab-body-wrapper {
flex-grow: 1;
}
}
.mat-tab-label-container { .mat-tab-label-container {
padding: 0 24px; padding: 0 24px;

4
src/app/main/content/apps/dashboards/project/project.component.ts
View File

@ -4,12 +4,14 @@ import * as shape from 'd3-shape';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-project', selector : 'fuse-project',
templateUrl : './project.component.html', templateUrl : './project.component.html',
styleUrls : ['./project.component.scss'], styleUrls : ['./project.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
}) })
export class FuseProjectComponent implements OnInit, OnDestroy export class FuseProjectComponent implements OnInit, OnDestroy
{ {

6
src/app/main/content/apps/file-manager/file-list/file-list.component.html
View File

@ -1,4 +1,4 @@
<md-table #table [dataSource]="dataSource"> <md-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- Type Column --> <!-- Type Column -->
<ng-container cdkColumnDef="icon"> <ng-container cdkColumnDef="icon">
@ -53,6 +53,8 @@
<md-row *cdkRowDef="let row; columns: displayedColumns;" <md-row *cdkRowDef="let row; columns: displayedColumns;"
(click)="onSelect(row)" (click)="onSelect(row)"
[ngClass]="{'md-light-blue-50-bg':row == selected}" [ngClass]="{'md-light-blue-50-bg':row == selected}"
md-ripple> md-ripple
[@animate]="{value:'*',params:{y:'100%'}}"
>
</md-row> </md-row>
</md-table> </md-table>

4
src/app/main/content/apps/file-manager/file-list/file-list.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FileManagerService } from '../file-manager.service'; import { FileManagerService } from '../file-manager.service';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-file-list', selector : 'fuse-file-list',
templateUrl: './file-list.component.html', templateUrl: './file-list.component.html',
styleUrls : ['./file-list.component.scss'] styleUrls : ['./file-list.component.scss'],
animations : fuseAnimations
}) })
export class FuseFileManagerFileListComponent implements OnInit export class FuseFileManagerFileListComponent implements OnInit
{ {

6
src/app/main/content/apps/file-manager/file-manager.component.html
View File

@ -34,7 +34,8 @@
<!-- / TOOLBAR --> <!-- / TOOLBAR -->
<!-- BREADCRUMB --> <!-- BREADCRUMB -->
<div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"> <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
*fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
<div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center"> <div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span> <span>{{path}}</span>
<md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon> <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
@ -48,7 +49,8 @@
<button md-fab <button md-fab
class="add-file-button mat-warn" class="add-file-button mat-warn"
(click)="fileInput.click()" (click)="fileInput.click()"
aria-label="Add file"> aria-label="Add file"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
<md-icon>add</md-icon> <md-icon>add</md-icon>
</button> </button>
</div> </div>

5
src/app/main/content/apps/file-manager/file-manager.component.ts
View File

@ -1,11 +1,13 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FileManagerService } from './file-manager.service'; import { FileManagerService } from './file-manager.service';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-file-manager', selector : 'fuse-file-manager',
templateUrl : './file-manager.component.html', templateUrl : './file-manager.component.html',
styleUrls : ['./file-manager.component.scss'], styleUrls : ['./file-manager.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
}) })
export class FuseFileManagerComponent implements OnInit export class FuseFileManagerComponent implements OnInit
{ {
@ -15,7 +17,6 @@ export class FuseFileManagerComponent implements OnInit
constructor(private fileManagerService: FileManagerService) constructor(private fileManagerService: FileManagerService)
{ {
} }
ngOnInit() ngOnInit()

3
src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
View File

@ -29,7 +29,8 @@
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content p-24 md-white-bg" fusePerfectScrollbar> <div class="content p-24 md-white-bg" fusePerfectScrollbar>
<div class="file-details"> <div class="file-details"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center"> <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
<md-icon class="type-icon s-48" [class]="selected.type"></md-icon> <md-icon class="type-icon s-48" [class]="selected.type"></md-icon>

4
src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts
View File

@ -1,10 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FileManagerService } from '../../file-manager.service'; import { FileManagerService } from '../../file-manager.service';
import { fuseAnimations } from '../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-file-manager-details-sidenav', selector : 'fuse-file-manager-details-sidenav',
templateUrl: './details.component.html', templateUrl: './details.component.html',
styleUrls : ['./details.component.scss'] styleUrls : ['./details.component.scss'],
animations : fuseAnimations
}) })
export class FuseFileManagerDetailsSidenavComponent implements OnInit export class FuseFileManagerDetailsSidenavComponent implements OnInit
{ {

4
src/app/main/content/apps/mail/mail-details/mail-details.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<md-icon class="s-128 mb-16">email</md-icon> <md-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</md-icon>
<span class="select-message-text hint-text">Select a message to read</span> <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span>
</div> </div>
<div *ngIf="mail"> <div *ngIf="mail">

4
src/app/main/content/apps/mail/mail-details/mail-details.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { MailService } from '../mail.service'; import { MailService } from '../mail.service';
import { Mail } from '../mail.model'; import { Mail } from '../mail.model';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-mail-details', selector : 'fuse-mail-details',
templateUrl: './mail-details.component.html', templateUrl: './mail-details.component.html',
styleUrls : ['./mail-details.component.scss'] styleUrls : ['./mail-details.component.scss'],
animations : fuseAnimations
}) })
export class FuseMailDetailsComponent implements OnInit, OnDestroy export class FuseMailDetailsComponent implements OnInit, OnDestroy
{ {

9
src/app/main/content/apps/mail/mail-list/mail-list.component.html
View File

@ -2,6 +2,9 @@
<span class="no-messages-text hint-text">There are no messages!</span> <span class="no-messages-text hint-text">There are no messages!</span>
</div> </div>
<fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)" <div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
[ngClass]="{'current-mail':mail?.id == currentMail?.id}"> <fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
</fuse-mail-list-item> [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
[@animate]="{value:'*',params:{y:'100%'}}">
</fuse-mail-list-item>
</div>

7
src/app/main/content/apps/mail/mail-list/mail-list.component.scss
View File

@ -11,4 +11,11 @@
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
} }
.mail-list {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
}
} }

4
src/app/main/content/apps/mail/mail-list/mail-list.component.ts
View File

@ -4,11 +4,13 @@ import { ActivatedRoute } from '@angular/router';
import { MailService } from '../mail.service'; import { MailService } from '../mail.service';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-mail-list', selector : 'fuse-mail-list',
templateUrl: './mail-list.component.html', templateUrl: './mail-list.component.html',
styleUrls : ['./mail-list.component.scss'] styleUrls : ['./mail-list.component.scss'],
animations : fuseAnimations
}) })
export class FuseMailListComponent implements OnInit, OnDestroy export class FuseMailListComponent implements OnInit, OnDestroy
{ {

8
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -2,11 +2,11 @@
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg"> class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon s-32">mail</md-icon> <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon>
<span class="logo-text">Mailbox</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
</div> </div>
<div class="account" fxLayout="column"> <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<md-select class="account-selection" placeholder="Mail Selection" <md-select class="account-selection" placeholder="Mail Selection"
floatPlaceholder="never" floatPlaceholder="never"
@ -21,7 +21,7 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content" fusePerfectScrollbar> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button md-raised-button fxFlex <button md-raised-button fxFlex

4
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
View File

@ -4,11 +4,13 @@ import { Subscription } from 'rxjs/Subscription';
import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component'; import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
import { MdDialog } from '@angular/material'; import { MdDialog } from '@angular/material';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { fuseAnimations } from '../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-mail-main-sidenav', selector : 'fuse-mail-main-sidenav',
templateUrl: './main-sidenav.component.html', templateUrl: './main-sidenav.component.html',
styleUrls : ['./main-sidenav.component.scss'] styleUrls : ['./main-sidenav.component.scss'],
animations : fuseAnimations
}) })
export class FuseMailMainSidenavComponent implements OnInit, OnDestroy export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
{ {

14
src/app/main/content/apps/scrumboard/board/board.component.html
View File

@ -50,11 +50,12 @@
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<div fxFlex class="board-content-wrapper p-16 p-md-24"> <div fxFlex class="board-content-wrapper p-16 p-md-24" [class]="board.settings.color+'-100-bg'">
<!-- BOARD --> <!-- BOARD -->
<div class="board-content ngx-dnd-container p-16 p-md-24" [class]="board.settings.color+'-100-bg'" fxLayout="row" <div class="board-content ngx-dnd-container p-16 p-md-24" fxLayout="row"
ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)"> ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- LIST --> <!-- LIST -->
<fuse-scrumboard-board-list <fuse-scrumboard-board-list
@ -62,12 +63,15 @@
ngxDraggable ngxDraggable
*ngFor="let list of board.lists" *ngFor="let list of board.lists"
[model]="list" [model]="list"
[list]="list"> [list]="list"
[@animate]="{value:'*',params:{duration:'350ms',x:'100%'}}">
</fuse-scrumboard-board-list> </fuse-scrumboard-board-list>
<!-- / LIST --> <!-- / LIST -->
<!-- NEW LIST BUTTON--> <!-- NEW LIST BUTTON-->
<fuse-scrumboard-board-add-list class="new-list-wrapper" (onlistAdd)="onListAdd($event)"></fuse-scrumboard-board-add-list> <fuse-scrumboard-board-add-list class="new-list-wrapper" (onlistAdd)="onListAdd($event)"
[@animate]="{value:'*',params:{duration:'350ms',x:'100%'}}">
</fuse-scrumboard-board-add-list>
<!-- / NEW LIST BUTTON--> <!-- / NEW LIST BUTTON-->
</div> </div>

2
src/app/main/content/apps/scrumboard/board/board.component.scss
View File

@ -100,6 +100,7 @@
.board-content-wrapper { .board-content-wrapper {
position: relative; position: relative;
background: #E5E7E8;
.board-content { .board-content {
position: absolute; position: absolute;
@ -108,7 +109,6 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 100%; height: 100%;
background: #E5E7E8;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

4
src/app/main/content/apps/scrumboard/board/board.component.ts
View File

@ -4,11 +4,13 @@ import { ScrumboardService } from '../scrumboard.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { List } from '../list.model'; import { List } from '../list.model';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-scrumboard-board', selector : 'fuse-scrumboard-board',
templateUrl: './board.component.html', templateUrl: './board.component.html',
styleUrls : ['./board.component.scss'] styleUrls : ['./board.component.scss'],
animations : fuseAnimations
}) })
export class FuseScrumboardBoardComponent implements OnInit, OnDestroy export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
{ {

4
src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts
View File

@ -2,14 +2,14 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsul
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { ScrumboardService } from '../../../../scrumboard.service'; import { ScrumboardService } from '../../../../scrumboard.service';
import { FuseUtils } from '../../../../../../../../core/fuseUtils'; import { FuseUtils } from '../../../../../../../../core/fuseUtils';
import { Animations } from '../../../../../../../../core/animations'; import { fuseAnimations } from '../../../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-scrumboard-label-selector', selector : 'fuse-scrumboard-label-selector',
templateUrl : './label-selector.component.html', templateUrl : './label-selector.component.html',
styleUrls : ['./label-selector.component.scss'], styleUrls : ['./label-selector.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : [Animations.slideInLeft, Animations.slideInRight] animations : fuseAnimations
}) })
export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy

5
src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
View File

@ -1,13 +1,13 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { ScrumboardService } from '../../../scrumboard.service'; import { ScrumboardService } from '../../../scrumboard.service';
import { Animations } from '../../../../../../../core/animations'; import { fuseAnimations } from '../../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-scrumboard-board-settings', selector : 'fuse-scrumboard-board-settings',
templateUrl: './settings.component.html', templateUrl: './settings.component.html',
styleUrls : ['./settings.component.scss'], styleUrls : ['./settings.component.scss'],
animations : [Animations.slideInLeft, Animations.slideInRight] animations : fuseAnimations
}) })
export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy
{ {
@ -19,7 +19,6 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDe
private scrumboardService: ScrumboardService private scrumboardService: ScrumboardService
) )
{ {
} }
ngOnInit() ngOnInit()

11
src/app/main/content/apps/scrumboard/scrumboard.component.html
View File

@ -1,17 +1,19 @@
<!-- BOARDS --> <!-- BOARDS -->
<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar> <div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar>
<div class="header pt-44 pt-md-88" fxFlex="0 0 auto"> <div class="header pt-44 pt-md-88" fxFlex="0 0 auto" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms'}}">
<h1>Scrumboard App</h1> <h1>Scrumboard App</h1>
</div> </div>
<!-- BOARD LIST --> <!-- BOARD LIST -->
<div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap> <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- BOARD --> <!-- BOARD -->
<div class="board-list-item" *ngFor="let board of boards" <div class="board-list-item" *ngFor="let board of boards"
[routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri" [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
fxLayout="column" fxLayoutAlign="center center"> fxLayout="column" fxLayoutAlign="center center"
[@animate]="{value:'*',params:{y:'100%'}}">
<md-icon class="s-64">assessment</md-icon> <md-icon class="s-64">assessment</md-icon>
<div class="board-name">{{board.name}}</div> <div class="board-name">{{board.name}}</div>
</div> </div>
@ -19,7 +21,8 @@
<!-- NEW BOARD BUTTON --> <!-- NEW BOARD BUTTON -->
<div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center" <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
(click)="newBoard()"> (click)="newBoard()"
[@animate]="{value:'*',params:{y:'100%'}}">
<md-icon class="s-64">add_circle</md-icon> <md-icon class="s-64">add_circle</md-icon>
<div class="board-name">Add new board</div> <div class="board-name">Add new board</div>
</div> </div>

4
src/app/main/content/apps/scrumboard/scrumboard.component.ts
View File

@ -3,11 +3,13 @@ import { ScrumboardService } from './scrumboard.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Board } from './board.model'; import { Board } from './board.model';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-scrumboard', selector : 'fuse-scrumboard',
templateUrl: './scrumboard.component.html', templateUrl: './scrumboard.component.html',
styleUrls : ['./scrumboard.component.scss'] styleUrls : ['./scrumboard.component.scss'],
animations : fuseAnimations
}) })
export class FuseScrumboardComponent implements OnInit, OnDestroy export class FuseScrumboardComponent implements OnInit, OnDestroy
{ {

8
src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -2,11 +2,11 @@
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg"> class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon s-32">check_box</md-icon> <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</md-icon>
<span class="logo-text">To-do</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
</div> </div>
<div class="account" fxLayout="column"> <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<md-select class="account-selection" placeholder="Todo Selection" <md-select class="account-selection" placeholder="Todo Selection"
floatPlaceholder="never" floatPlaceholder="never"
@ -21,7 +21,7 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content" fusePerfectScrollbar> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button md-raised-button fxFlex <button md-raised-button fxFlex

4
src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { TodoService } from '../../todo.service'; import { TodoService } from '../../todo.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { fuseAnimations } from '../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-todo-main-sidenav', selector : 'fuse-todo-main-sidenav',
templateUrl: './main-sidenav.component.html', templateUrl: './main-sidenav.component.html',
styleUrls : ['./main-sidenav.component.scss'] styleUrls : ['./main-sidenav.component.scss'],
animations : fuseAnimations
}) })
export class FuseTodoMainSidenavComponent implements OnInit, OnDestroy export class FuseTodoMainSidenavComponent implements OnInit, OnDestroy
{ {

4
src/app/main/content/apps/todo/todo-details/todo-details.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<md-icon class="s-120 mb-12">check_box</md-icon> <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box</md-icon>
<span class="hint-text mat-h1">Select a todo</span> <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a todo</span>
</div> </div>
<div *ngIf="todo"> <div *ngIf="todo">

4
src/app/main/content/apps/todo/todo-details/todo-details.component.ts
View File

@ -4,11 +4,13 @@ import { Todo } from '../todo.model';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { FuseUtils } from '../../../../../core/fuseUtils'; import { FuseUtils } from '../../../../../core/fuseUtils';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-todo-details', selector : 'fuse-todo-details',
templateUrl: './todo-details.component.html', templateUrl: './todo-details.component.html',
styleUrls : ['./todo-details.component.scss'] styleUrls : ['./todo-details.component.scss'],
animations : fuseAnimations
}) })
export class FuseTodoDetailsComponent implements OnInit, OnDestroy export class FuseTodoDetailsComponent implements OnInit, OnDestroy
{ {

5
src/app/main/content/apps/todo/todo-list/todo-list.component.html
View File

@ -1,13 +1,14 @@
<div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<span class="hint-text mat-h3">There are no todos!</span> <span class="hint-text mat-h3">There are no todos!</span>
</div> </div>
<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)"> <div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<fuse-todo-list-item class="todo-list-item has-handle" <fuse-todo-list-item class="todo-list-item has-handle"
*ngFor="let todo of todos" [todo]="todo" *ngFor="let todo of todos" [todo]="todo"
ngxDraggable ngxDraggable
[model]="todo" [model]="todo"
(click)="readTodo(todo.id)" (click)="readTodo(todo.id)"
[ngClass]="{'current-todo':todo?.id == currentTodo?.id}" [ngClass]="{'current-todo':todo?.id == currentTodo?.id}"
md-ripple> md-ripple
[@animate]="{value:'*',params:{y:'100%'}}">
</fuse-todo-list-item> </fuse-todo-list-item>
</div> </div>

4
src/app/main/content/apps/todo/todo-list/todo-list.component.ts
View File

@ -4,11 +4,13 @@ import { ActivatedRoute } from '@angular/router';
import { TodoService } from '../todo.service'; import { TodoService } from '../todo.service';
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-todo-list', selector : 'fuse-todo-list',
templateUrl: './todo-list.component.html', templateUrl: './todo-list.component.html',
styleUrls : ['./todo-list.component.scss'] styleUrls : ['./todo-list.component.scss'],
animations : fuseAnimations
}) })
export class FuseTodoListComponent implements OnInit, OnDestroy export class FuseTodoListComponent implements OnInit, OnDestroy
{ {

6
src/app/main/content/apps/todo/todo.component.ts
View File

@ -1,13 +1,15 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { TodoService } from './todo.service'; import { TodoService } from './todo.service';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
import { Todo } from './todo.model'; import { Todo } from './todo.model';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-todo', selector : 'fuse-todo',
templateUrl: './todo.component.html', templateUrl: './todo.component.html',
styleUrls : ['./todo.component.scss'] styleUrls : ['./todo.component.scss'],
animations : fuseAnimations
}) })
export class FuseTodoComponent implements OnInit, OnDestroy export class FuseTodoComponent implements OnInit, OnDestroy
{ {

10
src/app/main/content/content.component.ts
View File

@ -1,6 +1,6 @@
import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core'; import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Animations } from '../../core/animations'; import { fuseAnimations } from '../../core/animations';
import { FuseConfigService } from '../../core/services/config.service'; import { FuseConfigService } from '../../core/services/config.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/filter';
@ -10,13 +10,7 @@ import 'rxjs/add/operator/map';
selector : 'fuse-content', selector : 'fuse-content',
templateUrl: './content.component.html', templateUrl: './content.component.html',
styleUrls : ['./content.component.scss'], styleUrls : ['./content.component.scss'],
animations : [ animations : fuseAnimations
Animations.routerTransitionUp,
Animations.routerTransitionDown,
Animations.routerTransitionRight,
Animations.routerTransitionLeft,
Animations.routerTransitionFade
]
}) })
export class FuseContentComponent implements OnInit, OnDestroy export class FuseContentComponent implements OnInit, OnDestroy
{ {

2
src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
View File

@ -1,6 +1,6 @@
<div id="forgot-password" fxLayout="column" fusePerfectScrollbar> <div id="forgot-password" fxLayout="column" fusePerfectScrollbar>
<div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div id="forgot-password-form"> <div id="forgot-password-form">

4
src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
View File

@ -1,11 +1,13 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-forgot-password', selector : 'fuse-forgot-password',
templateUrl: './forgot-password.component.html', templateUrl: './forgot-password.component.html',
styleUrls : ['./forgot-password.component.scss'] styleUrls : ['./forgot-password.component.scss'],
animations : fuseAnimations
}) })
export class FuseForgotPasswordComponent implements OnInit export class FuseForgotPasswordComponent implements OnInit
{ {

2
src/app/main/content/pages/authentication/lock/lock.component.html
View File

@ -2,7 +2,7 @@
<div id="lock-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="lock-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="lock-form"> <div id="lock-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.sm="column" fxLayoutAlign.sm="center center"> <div fxLayout="row" fxLayoutAlign="start center" fxLayout.sm="column" fxLayoutAlign.sm="center center">
<div class="avatar-container"> <div class="avatar-container">

4
src/app/main/content/pages/authentication/lock/lock.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector: 'fuse-lock', selector: 'fuse-lock',
templateUrl: './lock.component.html', templateUrl: './lock.component.html',
styleUrls: ['./lock.component.scss'] styleUrls: ['./lock.component.scss'],
animations : fuseAnimations
}) })
export class FuseLockComponent implements OnInit export class FuseLockComponent implements OnInit
{ {

8
src/app/main/content/pages/authentication/login-2/login-2.component.html
View File

@ -1,21 +1,21 @@
<div id="login" fxLayout="row" fxLayoutAlign="start"> <div id="login" fxLayout="row" fxLayoutAlign="start">
<div id="login-intro" fxFlex fxHide fxShow.gt-xs> <div id="login-intro" fxFlex fxHide fxShow.gt-xs>
<div class="logo"> <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
<span>F</span> <span>F</span>
</div> </div>
<div class="title"> <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
Welcome to the FUSE! Welcome to the FUSE!
</div> </div>
<div class="description"> <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
</div> </div>
</div> </div>
<div id="login-form-wrapper" fusePerfectScrollbar> <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
<div id="login-form"> <div id="login-form">

7
src/app/main/content/pages/authentication/login-2/login-2.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-login-2', selector : 'fuse-login-2',
templateUrl: './login-2.component.html', templateUrl: './login-2.component.html',
styleUrls : ['./login-2.component.scss'] styleUrls : ['./login-2.component.scss'],
animations : fuseAnimations
}) })
export class FuseLogin2Component implements OnInit export class FuseLogin2Component implements OnInit
{ {
@ -15,7 +17,8 @@ export class FuseLogin2Component implements OnInit
constructor( constructor(
private fuseConfig: FuseConfigService, private fuseConfig: FuseConfigService,
private formBuilder: FormBuilder) private formBuilder: FormBuilder
)
{ {
this.fuseConfig.setSettings({ this.fuseConfig.setSettings({
layout: { layout: {

2
src/app/main/content/pages/authentication/login/login.component.html
View File

@ -2,7 +2,7 @@
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="login-form"> <div id="login-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo md-accent-bg"> <div class="logo md-accent-bg">
<span>F</span> <span>F</span>
</div> </div>

4
src/app/main/content/pages/authentication/login/login.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-login', selector : 'fuse-login',
templateUrl: './login.component.html', templateUrl: './login.component.html',
styleUrls : ['./login.component.scss'] styleUrls : ['./login.component.scss'],
animations : fuseAnimations
}) })
export class FuseLoginComponent implements OnInit export class FuseLoginComponent implements OnInit
{ {

8
src/app/main/content/pages/authentication/register-2/register-2.component.html
View File

@ -1,21 +1,21 @@
<div id="register" fxLayout="row" fxLayoutAlign="start"> <div id="register" fxLayout="row" fxLayoutAlign="start">
<div id="register-intro" fxFlex fxHide fxShow.gt-xs> <div id="register-intro" fxFlex fxHide fxShow.gt-xs>
<div class="logo"> <div class="logo" *fuseIfOnDom [@animate]="{value:'*',params:{scale:'0.2'}}">
<span>F</span> <span>F</span>
</div> </div>
<div class="title"> <div class="title" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',y:'25px'}}">
Welcome to the FUSE! Welcome to the FUSE!
</div> </div>
<div class="description"> <div class="description" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper nisl erat,
vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra. vel convallis elit fermentum pellentesque. Sed mollis velit facilisis facilisis viverra.
</div> </div>
</div> </div>
<div id="register-form-wrapper" fusePerfectScrollbar> <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
<div id="register-form"> <div id="register-form">

7
src/app/main/content/pages/authentication/register-2/register-2.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-register-2', selector : 'fuse-register-2',
templateUrl: './register-2.component.html', templateUrl: './register-2.component.html',
styleUrls : ['./register-2.component.scss'] styleUrls : ['./register-2.component.scss'],
animations : fuseAnimations
}) })
export class FuseRegister2Component implements OnInit export class FuseRegister2Component implements OnInit
{ {
@ -15,7 +17,8 @@ export class FuseRegister2Component implements OnInit
constructor( constructor(
private fuseConfig: FuseConfigService, private fuseConfig: FuseConfigService,
private formBuilder: FormBuilder) private formBuilder: FormBuilder
)
{ {
this.fuseConfig.setSettings({ this.fuseConfig.setSettings({
layout: { layout: {

2
src/app/main/content/pages/authentication/register/register.component.html
View File

@ -2,7 +2,7 @@
<div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="register-form"> <div id="register-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo md-accent-bg"> <div class="logo md-accent-bg">
<span>F</span> <span>F</span>
</div> </div>

7
src/app/main/content/pages/authentication/register/register.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-register', selector : 'fuse-register',
templateUrl: './register.component.html', templateUrl: './register.component.html',
styleUrls : ['./register.component.scss'] styleUrls : ['./register.component.scss'],
animations : fuseAnimations
}) })
export class FuseRegisterComponent implements OnInit export class FuseRegisterComponent implements OnInit
{ {
@ -15,7 +17,8 @@ export class FuseRegisterComponent implements OnInit
constructor( constructor(
private fuseConfig: FuseConfigService, private fuseConfig: FuseConfigService,
private formBuilder: FormBuilder) private formBuilder: FormBuilder
)
{ {
this.fuseConfig.setSettings({ this.fuseConfig.setSettings({
layout: { layout: {

3
src/app/main/content/pages/authentication/reset-password/reset-password.component.html
View File

@ -1,6 +1,7 @@
<div id="reset-password" fxLayout="column" fusePerfectScrollbar> <div id="reset-password" fxLayout="column" fusePerfectScrollbar>
<div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div id="reset-password-form"> <div id="reset-password-form">

4
src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../../core/services/config.service'; import { FuseConfigService } from '../../../../../core/services/config.service';
import { fuseAnimations } from '../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-reset-password', selector : 'fuse-reset-password',
templateUrl: './reset-password.component.html', templateUrl: './reset-password.component.html',
styleUrls : ['./reset-password.component.scss'] styleUrls : ['./reset-password.component.scss'],
animations : fuseAnimations
}) })
export class FuseResetPasswordComponent implements OnInit export class FuseResetPasswordComponent implements OnInit
{ {

2
src/app/main/content/pages/coming-soon/coming-soon.component.html
View File

@ -2,7 +2,7 @@
<div id="coming-soon-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="coming-soon-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="coming-soon-form"> <div id="coming-soon-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="top"> <div class="top">

4
src/app/main/content/pages/coming-soon/coming-soon.component.ts
View File

@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FuseConfigService } from '../../../../core/services/config.service'; import { FuseConfigService } from '../../../../core/services/config.service';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-coming-soon', selector : 'fuse-coming-soon',
templateUrl: './coming-soon.component.html', templateUrl: './coming-soon.component.html',
styleUrls : ['./coming-soon.component.scss'] styleUrls : ['./coming-soon.component.scss'],
animations : fuseAnimations
}) })
export class FuseComingSoonComponent implements OnInit export class FuseComingSoonComponent implements OnInit
{ {

2
src/app/main/content/pages/maintenance/maintenance.component.html
View File

@ -2,7 +2,7 @@
<div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center"> <div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div id="maintenance-form"> <div id="maintenance-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo"> <div class="logo">
<span>F</span> <span>F</span>

6
src/app/main/content/pages/maintenance/maintenance.component.ts
View File

@ -1,16 +1,18 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FuseConfigService } from '../../../../core/services/config.service'; import { FuseConfigService } from '../../../../core/services/config.service';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-maintenance', selector : 'fuse-maintenance',
templateUrl: './maintenance.component.html', templateUrl: './maintenance.component.html',
styleUrls : ['./maintenance.component.scss'] styleUrls : ['./maintenance.component.scss'],
animations : fuseAnimations
}) })
export class FuseMaintenanceComponent implements OnInit export class FuseMaintenanceComponent implements OnInit
{ {
constructor( constructor(
private fuseConfig: FuseConfigService, private fuseConfig: FuseConfigService
) )
{ {
this.fuseConfig.setSettings({ this.fuseConfig.setSettings({

9
src/app/main/content/pages/profile/profile.component.html
View File

@ -6,11 +6,12 @@
<div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row" <div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
fxLayoutAlign.gt-sm="start center"> fxLayoutAlign.gt-sm="start center">
<img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"> <img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"
<div class="name">Katherine Wilson</div> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson</div>
</div> </div>
<div class="actions" fxLayout="row" fxLayoutAlign="end center"> <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<button md-raised-button color="accent" aria-label="Follow">Follow</button> <button md-raised-button color="accent" aria-label="Follow">Follow</button>
<button md-raised-button color="primary" aria-label="Send Message">Send Message</button> <button md-raised-button color="primary" aria-label="Send Message">Send Message</button>
</div> </div>
@ -21,7 +22,7 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="content"> <div class="content">
<md-tab-group md-dynamic-height="true"> <md-tab-group dynamicHeight="true">
<md-tab label="Timeline"> <md-tab label="Timeline">
<fuse-profile-timeline></fuse-profile-timeline> <fuse-profile-timeline></fuse-profile-timeline>

67
src/app/main/content/pages/profile/profile.component.scss
View File

@ -1,43 +1,52 @@
@import "../../../../core/scss/fuse"; @import "../../../../core/scss/fuse";
:host { #profile {
#profile { .header {
height: 320px;
min-height: 320px;
max-height: 320px;
background: url('/assets/images/backgrounds/march.jpg') no-repeat 0 45%;
background-size: 100% auto;
.header { .profile-image {
height: 320px; margin-right: 24px;
min-height: 320px;
max-height: 320px;
background: url('/assets/images/backgrounds/march.jpg') no-repeat 0 45%;
background-size: 100% auto;
.profile-image { @include media-breakpoint('sm') {
margin-right: 24px; margin: 0 0 16px 0;
@include media-breakpoint('sm') {
margin: 0 0 16px 0;
}
} }
}
.name { .name {
font-size: 34px; font-size: 34px;
color: #FFFFFF; color: #FFFFFF;
@include media-breakpoint('sm') { @include media-breakpoint('sm') {
margin-bottom: 32px; margin-bottom: 32px;
}
} }
}
.actions { .actions {
button { button {
text-transform: none; text-transform: none;
padding: 0 16px; padding: 0 16px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
margin: 0 0 0 8px; margin: 0 0 0 8px;
}
} }
} }
} }
}
.content {
flex: 1;
md-tab-group {
height: 100%;
.mat-tab-body-wrapper {
flex-grow: 1;
}
}
}
}

11
src/app/main/content/pages/profile/profile.component.ts
View File

@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '../../../../core/animations';
@Component({ @Component({
selector : 'fuse-profile', selector : 'fuse-profile',
templateUrl: './profile.component.html', templateUrl : './profile.component.html',
styleUrls : ['./profile.component.scss'] styleUrls : ['./profile.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
}) })
export class FuseProfileComponent implements OnInit export class FuseProfileComponent implements OnInit
{ {

21
src/app/main/content/pages/profile/tabs/about/about.component.html
View File

@ -1,8 +1,10 @@
<div id="about" class="p-24" fxLayout="row" fxLayoutWrap> <div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65"> <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="profile-box info-box general" fxLayout="column"> <div class="profile-box info-box general" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<header class="md-accent-bg"> <header class="md-accent-bg">
<div class="title">General Information</div> <div class="title">General Information</div>
@ -36,7 +38,8 @@
</div> </div>
<div class="profile-box info-box work" fxLayout="column"> <div class="profile-box info-box work" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<header class="md-accent-bg"> <header class="md-accent-bg">
<div class="title">Work</div> <div class="title">Work</div>
@ -65,7 +68,8 @@
</div> </div>
</div> </div>
<div class="profile-box info-box contact" fxLayout="column"> <div class="profile-box info-box contact" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<header class="md-accent-bg"> <header class="md-accent-bg">
<div class="title">Contact</div> <div class="title">Contact</div>
@ -100,9 +104,11 @@
</div> </div>
<div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35"> <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="profile-box friends" fxLayout="column"> <div class="profile-box friends" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center"> <header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="title">Friends</div> <div class="title">Friends</div>
@ -119,7 +125,8 @@
</div> </div>
<div class="profile-box groups" fxLayout="column"> <div class="profile-box groups" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center"> <header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="title">Joined Groups</div> <div class="title">Joined Groups</div>

4
src/app/main/content/pages/profile/tabs/about/about.component.ts
View File

@ -1,10 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ProfileService } from '../../profile.service'; import { ProfileService } from '../../profile.service';
import { fuseAnimations } from '../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-profile-about', selector : 'fuse-profile-about',
templateUrl: './about.component.html', templateUrl: './about.component.html',
styleUrls : ['./about.component.scss'] styleUrls : ['./about.component.scss'],
animations : fuseAnimations
}) })
export class FuseProfileAboutComponent implements OnInit export class FuseProfileAboutComponent implements OnInit
{ {

6
src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
View File

@ -1,12 +1,14 @@
<div id="photos-videos" class="p-24"> <div id="photos-videos" class="p-24" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="period" *ngFor="let period of photosVideos"> <div class="period" *ngFor="let period of photosVideos">
<div class="period-title"> <div class="period-title">
<span class="name">{{period.name}}</span> <span class="name">{{period.name}}</span>
<span class="info">{{period.info}}</span> <span class="info">{{period.info}}</span>
</div> </div>
<div class="period-media" fxLayout="row" fxLayoutWrap> <div class="period-media" fxLayout="row" fxLayoutWrap>
<div class="media" *ngFor="let media of period.media"> <div class="media" *ngFor="let media of period.media"
[@animate]="{value:'*',params:{y:'100%'}}">
<img class="preview" [src]="media.preview" title="{{media.title}}"> <img class="preview" [src]="media.preview" title="{{media.title}}">
<div class="title">{{media.title}}</div> <div class="title">{{media.title}}</div>
</div> </div>

4
src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts
View File

@ -1,11 +1,13 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ProfileService } from '../../profile.service'; import { ProfileService } from '../../profile.service';
import { fuseAnimations } from '../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-profile-photos-videos', selector : 'fuse-profile-photos-videos',
templateUrl: './photos-videos.component.html', templateUrl: './photos-videos.component.html',
styleUrls : ['./photos-videos.component.scss'] styleUrls : ['./photos-videos.component.scss'],
animations : fuseAnimations
}) })
export class FuseProfilePhotosVideosComponent implements OnInit export class FuseProfilePhotosVideosComponent implements OnInit
{ {

13
src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
View File

@ -1,9 +1,11 @@
<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap> <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2" <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
fxFlexOrder.gt-sm="1"> fxFlexOrder.gt-sm="1"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="profile-box add-post"> <div class="profile-box add-post"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="form" fxFlex> <div class="form" fxFlex>
@ -36,7 +38,8 @@
<md-divider></md-divider> <md-divider></md-divider>
<div class="timeline-item" *ngFor="let post of timeline.posts"> <div class="timeline-item" *ngFor="let post of timeline.posts"
[@animate]="{value:'*',params:{y:'100%'}}">
<header fxLayout="row" fxLayoutAlign="space-between start"> <header fxLayout="row" fxLayoutAlign="space-between start">
<div class="user" fxLayout="row" fxLayoutAlign="start center"> <div class="user" fxLayout="row" fxLayoutAlign="start center">
@ -135,7 +138,9 @@
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1" <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1"
fxFlexOrder.gt-sm="2"> fxFlexOrder.gt-sm="2">
<div class="profile-box latest-activity" fxLayout="column"> <div class="profile-box latest-activity" fxLayout="column"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
<header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center"> <header class="md-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="title">Latest Activity</div> <div class="title">Latest Activity</div>
<div class="more secondary-text">See All</div> <div class="more secondary-text">See All</div>

4
src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts
View File

@ -1,10 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ProfileService } from '../../profile.service'; import { ProfileService } from '../../profile.service';
import { fuseAnimations } from '../../../../../../core/animations';
@Component({ @Component({
selector : 'fuse-profile-timeline', selector : 'fuse-profile-timeline',
templateUrl: './timeline.component.html', templateUrl: './timeline.component.html',
styleUrls : ['./timeline.component.scss'] styleUrls : ['./timeline.component.scss'],
animations : fuseAnimations
}) })
export class FuseProfileTimelineComponent implements OnInit export class FuseProfileTimelineComponent implements OnInit
{ {