Enhaced notification system

docs/EN/notification.md

@@ -11,8 +11,8 @@ Shows a customized notification.
 **PARAMETERS**
 
 ```
-string:		Notification's title.
 string:		The icon, null for no icon.
+string:		Notification's title.
 number:		The time to show the notification, 0 for unlimited.
 function:		A function to execute when hiding the notification.
 ```
@@ -26,8 +26,9 @@ var afterNotification = function(){
 };
 
 Lungo.Notification.show(
-    "Success",              //Title
     "check",                //Icon
+    "Success",              //Title
+    3,						//Seconds
     afterNotification       //Callback function
 );
 

src/modules/Lungo.Notification.coffee

@@ -22,7 +22,7 @@ Lungo.Notification = do(lng = Lungo) ->
     MODAL: ".notification .window"
     MODAL_HREF: ".notification .window a"
     WINDOW_CLOSABLE: ".notification [data-action=close], .notification > .error, .notification > .success"
-    CONFIRM_BUTTONS: ".notification .confirm a.button, .notification .push"
+    CONFIRM_BUTTONS: ".notification .confirm button, .notification .push"
 
   STYLE =
     MODAL: "modal"
@@ -34,6 +34,12 @@ Lungo.Notification = do(lng = Lungo) ->
   MARKUP_NOTIFICATION = "<div class=\"notification\"><div class=\"window\"></div></div>"
 
   ###
+  Show a custom message, if no parameters shows a loading window.
+  @method   show
+  @param    {string} [OPTIONAL] Icon, null for no icon.
+  @param    {string} [OPTIONAL] Title
+  @param    {number} [OPTIONAL] Seconds to show the notification, 0 for unlimited.
+  @param    {function} [OPTIONAL] Callback when notification it's closed
   ###
   show = (icon, title, seconds, callback) ->
     markup = undefined
@@ -129,19 +135,21 @@ Lungo.Notification = do(lng = Lungo) ->
     "<span class=\"icon " + icon + "\"></span><strong class=\"text bold\">" + title + "</strong><small>" + description + "</small>"
 
   _button_markup = (options, callback) ->
-    "<a href=\"#\" data-callback=\"" + callback + "\" class=\"button anchor large text thin\">" + options.label + "</a>"
+    """<button data-callback="#{callback}" class="anchor">#{options.label}</a>"""
 
   _subscribeEvents = ->
-    lng.dom(SELECTOR.CONFIRM_BUTTONS).tap (event) ->
+    lng.dom(SELECTOR.CONFIRM_BUTTONS).touch (event) ->
       button = lng.dom(this)
       if _options[button.data("callback")]?
         callback = _options[button.data("callback")].callback
-        callback.call callback if callback
+        _options = null
+        callback?.call undefined, callback
       hide()
 
     lng.dom(SELECTOR.WINDOW_CLOSABLE).tap hide
 
   _init()
+
   show: show
   hide: hide
   error: error

src/stylesheets/lungo.widget.notification.styl

@@ -58,12 +58,13 @@ WINDOW_WIDTH = 280px
         top:0
         font-size: 52px
         line-height: LOADING
+
       & > strong
         height: 18px
         top: (LOADING - 20px)
         padding: 0 0.5em
         overflow: hidden
-
+        font-size: FONT_SIZE_TINY
       & > small
         display: none
 
@@ -75,19 +76,19 @@ WINDOW_WIDTH = 280px
       margin-top: 100%
 
     &.success, &.error, &.confirm
-      padding-top: 16px
+      padding-top: 1em
       & > .icon
         font-size: 5em
         line-height: 1.0em
       & > strong
-        font-size: FONT_SIZE_BIG
-        padding-top: 4px
-      & small
-        padding-top: 8px
-        padding-bottom: 16px
-      & > strong, & small
-        padding-left: 16px
-        padding-right: 16px
+        font-size: 1.1em
+      & > small
+        font-size: FONT_SIZE_SMALL
+        padding-top: 0.25em
+        padding-bottom: 1em
+      & > strong, > small
+        padding-left: 0.25em
+        padding-right: 0.25em
 
     &.html .title
       height: HEADER_HEIGHT
@@ -95,28 +96,31 @@ WINDOW_WIDTH = 280px
       font-size: FONT_SIZE_LARGE
 
     &.push
-      position: absolute
+      HEIGHT = (HEADER_HEIGHT / 1.5)
+      position: absolute !important
       text-align: left
-      height: H = (HEADER_HEIGHT / 1.75)
-      line-height: H
-      padding: 0 8px
+      height: HEIGHT
+      line-height: HEIGHT
+      padding: 0 1em
       width: 100%
       transition-property opacity, top
-      top: -(H)
+      top: -(HEIGHT) !important
+
       &.show
-        top:0
+        top: 0 !important
       & .icon
-        font-size: FONT_SIZE_LARGE
         float: left
         display: inline
-        margin-right: 6px
+        margin-right: 0.5em
+        font-size: FONT_SIZE_LARGE
 
     & button, & .button
       display: block
       margin-bottom: 1px
-      height: 48px
-      line-height: 48px
+      width: inherit
+      line-height: 3em
       border: none
-      font-size: FONT_SIZE_LARGE
+      font-size: FONT_SIZE_BIG
+
     & strong, small
       display: block

src/stylesheets/theme/theme.widget.notification.styl

@@ -13,37 +13,53 @@
   &:not(.push)
     background-color: rgba(0,0,0,0.6)
   & .window
-    &:not(.push)
-      border-radius FORM_border_radius
+    &:not(.push):not(.growl)
+      border-radius FORM_border_radius FORM_border_radius 0 0
     &.growl
-      background: rgba(0,0,0,0.75)
+      border-radius BORDER_radius
+      background-color: COLOR
       & strong
-        opacity: 0.75
-        font-weight: 400
+        color: darken(#fff, 25%)
+        font-weight: 700
+
     &:not(.growl)
-      box-shadow(0 0 8px #444)
+      box-shadow 0 0 1em lighten(COLOR, 10%)
+
+    &.confirm, &.html
       & button, .button
-        background: #fff
+        background-color: #fff
         color: THEME
-    &.confirm, &.html
-      background: #e6e6e6
-      color: #222
-    &.error
-      background: DANGER
-    &.success
-      background: SUCCESS
+        font-weight: 400
+    &.html
+      background-color: lighten(COLOR, 95%)
+      color: lighten(COLOR, 25%)
+
+    &.confirm
+      background-color: THEME
+      & > small
+        color: lighten(THEME, 75%)
+
     &.error, &.success
+      background-color: COLOR
+      border-bottom solid 0.4em
       color: #fff
       & small
-        opacity: 0.75
-        font-weight: 100
+        color: darken(#fff, 25%)
+
+    &.error
+      border-color: DANGER
+    &.success
+      border-color: SUCCESS
+
     &.html
       & .title
-        background: THEME
+        background-color: THEME
         color: #fff
-        border-radius FORM_border_radius FORM_border_radius00
+        border-radius BORDER_radius BORDER_radius 0 0
+
     &.push
-      background: rgba(0,0,0,0.75)
+      background-color: COLOR
+      box-shadow: inset 0 -0.1em #000
 
     & button, & .button
       &:last-child