PDA

View Full Version : [VIDEO] NotificationBox component



galdaka
8 Aug 2011, 10:12 AM
VIDEO:
http://www.jadacosta.es/contents/screencast/NotificationBox.swf

LIVE: http://www.jadacosta.es/newiu/

SCREENSHOT:
27376

CALL CODE EXAMPLE:

Ext.app.io.NotificationBox.msg({
title: 'Error',
message: 'Error al cargar el menu izquierdo',
closable: false,
icon: 'img/error.png',
position: 'br', //tl, tr, bl or br
hPad: '1%', //Horizontal padding
vPad: '1%', //Vertical padding
width: '500px'
});

Regards.

Nickname
9 Aug 2011, 6:12 AM
Nice extenstion! Looks very good.

We cannot see the source, but from the example call you provided, the Image is directly configured. Would be nice, if you can configure "iconCls" and use CSS classes for the icon.

The next question is: How do you style the notification box? I'm not familiar with the new UI theming system, but I can think of creating an "error UI" or "warning UI" and style the UI with SASS/Compass. Would enhance the flexibility.

But again, looks very very good

galdaka
9 Aug 2011, 11:12 AM
Thanks Nick.

I create the required CSS dinamically.

You can put any icon by config (Max 48px x 48px).

Regards,

scottmartin
10 Aug 2011, 9:06 AM
Is this something you plan to release in the near future, or?

Regards,
Scott.

torres10
13 Aug 2011, 8:49 AM
Excellent job, Are you planning to share your code?

tayfun.ozis.erikan
15 Aug 2011, 3:12 AM
Nice extension. Congratulations.
Thanks for sharing.

We wrote a smilar extjs 3.x extension for kebab project. (www.kebab-project.com (http://www.kebab-project.com))
If you want to use, you can look this link:
https://github.com/kebab-project/kebab-project/blob/master/web/assets/kebab/system/distributions/kebab-os/kernel/Notification-debug.js
(https://github.com/kebab-project/kebab-project/blob/master/web/assets/kebab/system/distributions/kebab-os/kernel/Notification-debug.js)
CSS classes:


.notify-info {background-color:#fff !important;}
.notify-warning, .notify-critic {background-color:#ffb941 !important; color:#fff;}
.notify-error, .notify-alert {background-color:#880000 !important; color:#fff;}
.notify-notice {background-color:#006400 !important; color:#fff;}


See the action:
http://www.vimeo.com/27572892

Regards.

timothy
18 Aug 2011, 8:05 PM
This looks fantastic. Super smooth, really clean.

Do you have an ETA on when it will be released?

eirik.lorentsen
30 Aug 2011, 7:47 AM
Since there has been no reply here for a while i'm taking the liberty to promote my port/rewrite of the efattal version:
145503

It has some improvements making it similar to this one in functionality, although not so much visually. Though that could be accomplished largely by css.

New features:


Multiple managers and notifications stacks
The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
Both x and y axis can be used. Notifications can slide in sideways.
When a notification is destroyed any notifications above it slide down automatically.
Easy customization of css, animations, delays, spacings/padding etc.

scottmartin
30 Aug 2011, 9:19 AM
Eirik,

Thanks for the post. This will be helpful.

I am not sure why the OP would post in this forum about a plugin that can not be downloaded nor respond to anyone about it. I will leave it at that.

Regards,
Scott.

galdaka
31 Aug 2011, 6:20 AM
Added UI live example.

scottmartin
7 Sep 2011, 6:28 AM
I am a bit curious .. what is the purpose of this post?

-Is this still in WIP?
-Do you plan to release the code at some point?
-Any news on the progress?

It looks like a nice extension, but why create a post (in Ext/Plugins) for something that is not available?

Regards,
Scott.

galdaka
7 Sep 2011, 7:13 AM
I am a bit curious .. what is the purpose of this post?

-Is this still in WIP?
-Do you plan to release the code at some point?
-Any news on the progress?

It looks like a nice extension, but why create a post (in Ext/Plugins) for something that is not available?

Regards,
Scott.

Hey thanks four your feedback.

If you want the code please contact me: galdaka@hotmail.com.

Thanks in advance,