search

flauc / angular2-notifications

A light and easy to use notifications library for Angular.
https://stackblitz.com/edit/angular2-notifications-example
MIT License
746 stars 164 forks source link

Animate `fromTop` option #69

Open armno opened 8 years ago

armno commented 8 years ago

In my app, notification messages are displayed on the top of the screen, as the message's position can be changed via CSS, positioning is not a problem.

notification-on-top

However, animation of the message is not controlled by CSS. Would it make sense to add fromTop (and maybe fromBottom) values for animate option?

I have already made fromTop available in my fork to use in my app https://github.com/armno/angular2-notifications/blob/master/src/notification.component.ts#L51-L61 but not sure if this should be added in. Also I'm not yet able to build the project using npm run build so I don't submit a PR yet.

flauc commented 8 years ago

Hi @armno i really like what you did with the notifications on your project 👍

In regards to the PR, i think that the -100% transition you use works great on your project because of the way you use the notifications. However i think that for the standard style a -10% to -5% would work better. Feel free to test it out and send a PR 👍

Now when you say you aren't able to build the project. I'm not sure what you mean the build npm script only runs the typescript compilation and typings installation. I use the example project to test my changes. I run gulp serve in my root and that launches a live reload server with browsersynic and copies all of the lib files to my example npm package. This simulates an npm install.

armno commented 8 years ago

@flauc agreed with your comment on transition values. I have tested only on my app and it worked fined, but haven't test on the demo page. I think so that -100% will not fit in with every style of notifications.

about building: I had a problem where I ran gulp serve but the page shows empty screen with errors in console about 404 of some .js files. For me, the command npm run build does not seem to transpile files in example directory.

anyway, I'm setting up a new mac and yet don't have this project and required environment set up. I'll post an update when I'm ready. maybe you can have a look at https://github.com/flauc/angular2-notifications/issues/31#issuecomment-244771378 ? it was tested on a few versions before but maybe you get the idea of what errors might relate.

flauc commented 8 years ago

That's weird but what you can do is cd in to the example folder and run npm install and tsc you have to have typescript installed globally for this to work.

armno commented 8 years ago

here are what I have done so far ..

after cloned the project from github

$ npm install -g typescript typings gulp
$ npm install # in project's root directory
$ gulp serve

I got an empty page with some 404s

screen shot 2559-09-16 at 10 02 16 pm

Then I did what you suggested

$ cd example/
$ npm install
$ tsc
$ cd ..
$ gulp serve

The errors disappeared but the page looks un-styled. The notification works though.

screen shot 2559-09-16 at 10 07 21 pm

Running the command tsc in both project root and example directories gives a bunch of errors, but it does transpile .ts to .js.

$ npm run build

> angular2-notifications@0.3.7 build /Users/armno/code/forks/angular2-notifications
> typings install && tsc

└── (No dependencies)

node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(106,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(122,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(148,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(150,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/@angular/core/src/facade/collection.d.ts(3,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/@angular/core/src/facade/collection.d.ts(5,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(5,39): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(8,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(9,30): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(12,43): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(13,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(15,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(16,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(101,41): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/collection.d.ts(102,22): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/collection.d.ts(103,25): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/lang.d.ts(51,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts(18,37): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(3,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(5,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(5,39): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(8,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(9,30): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(12,43): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(13,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(15,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(16,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(101,41): error TS2304: Cannot find name 'Set'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(102,22): error TS2304: Cannot find name 'Set'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(103,25): error TS2304: Cannot find name 'Set'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(40,31): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(41,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(7,59): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(7,69): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(9,9): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Promise'.

npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/Cellar/node/6.5.0/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.5.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! angular2-notifications@0.3.7 build: `typings install && tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular2-notifications@0.3.7 build script 'typings install && tsc'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-notifications package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install && tsc
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-notifications
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-notifications
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/armno/code/forks/angular2-notifications/npm-debug.log

Not sure what I did wrong, or which step I missed.

rainstormza commented 7 years ago

+1