upd notify

yfm10 · Dec 2, 2013 · 034f145 · 034f145
1 parent 85f4aea
commit 034f145
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 77 deletions.
diff --git a/docs/css/metro-bootstrap.css b/docs/css/metro-bootstrap.css
diff --git a/docs/js/metro/metro-live-tile.js b/docs/js/metro/metro-live-tile.js
@@ -26,7 +26,9 @@
             if (element.data('duration') != undefined) {this.options.duration = element.data('duration');}
             if (element.data('easing') != undefined) {this.options.easing = element.data('easing');}
 
-            this._frames = element.children(".tile-content, .event-content");
+            //this._frames = element.children(".tile-content, .event-content");
+            this._frames = element.children("[class*='-content']");
+            //console.log(this._frames);
 
             if (this._frames.length <= 1) return;
 

diff --git a/docs/js/metro/metro-notify.js b/docs/js/metro/metro-notify.js
@@ -1,4 +1,5 @@
 (function($) {
+    var _notify_container = false;
     var _notifies = [];
 
     $.Notify = function(params) {
@@ -13,20 +14,23 @@
             width: 'auto',
             height: 'auto',
             style: false, // {background: '', color: ''}
-            position: 'top-right', //default: bottom-right, top-right, top-left, bottom-left
-            timeout: 3000
+            position: 'right', //right, left
+            timeout: 5000
         }, params);
 
+        var _container = _notify_container || $("<div/>").addClass("metro notify-container").appendTo('body'); _notify_container = _container;
+
+        console.log(_container);
+
         if (params.content == '' || params.content == undefined) return;
 
-        var _wrapper, _notify;
+        var _notify;
 
-        _wrapper = $("<div/>").addClass("metro notify-wrapper");
         _notify = $("<div/>").addClass("notify");
 
-        if (params.shadow) _wrapper.addClass("shadow");
-        if (params.style && params.style.background != undefined) _wrapper.css("background-color", params.style.background);
-        if (params.style && params.style.color != undefined) _wrapper.css("color", params.style.color);
+        if (params.shadow) _notify.addClass("shadow");
+        if (params.style && params.style.background != undefined) _notify.css("background-color", params.style.background);
+        if (params.style && params.style.color != undefined) _notify.css("color", params.style.color);
 
         // add title
         if (params.caption != '' && params.caption != undefined) {
@@ -36,56 +40,13 @@
         if (params.content != '' && params.content != undefined) {
             $("<div/>").addClass("content").html(params.content).appendTo(_notify);
         }
-        _notify.appendTo(_wrapper);
 
-        if (params.width != 'auto') _wrapper.css('min-width', params.width);
-        if (params.height != 'auto') _wrapper.css('min-height', params.width);
+        if (params.width != 'auto') _notify.css('min-width', params.width);
+        if (params.height != 'auto') _notify.css('min-height', params.height);
 
-        _wrapper.hide().appendTo('body').fadeIn('fast');
+        _notify.hide().appendTo(_container).fadeIn('slow');
         _notifies.push( _notify );
 
-        if (params.position == 'default' || params.position == 'bottom-right') {
-            var bottom_position = 5;
-            $.each(_notifies, function(i, n){
-                if (i == _notifies.length-1) return;
-                bottom_position += n.parent('.notify-wrapper').outerHeight()+5;
-            });
-            _wrapper.css({
-                bottom: bottom_position,
-                right: 5
-            });
-        } else if (params.position == 'top-right') {
-            var top_position = 5;
-            $.each(_notifies, function(i, n){
-                if (i == _notifies.length-1) return;
-                top_position += n.parent('.notify-wrapper').outerHeight()+5;
-            });
-            _wrapper.css({
-                top: top_position,
-                right: 5
-            });
-        } else if (params.position == 'bottom-left') {
-            var bottom_position = 5;
-            $.each(_notifies, function(i, n){
-                if (i == _notifies.length-1) return;
-                bottom_position += n.parent('.notify-wrapper').outerHeight()+5;
-            });
-            _wrapper.css({
-                bottom: bottom_position,
-                left: 5
-            });
-        } else {
-            var top_position = 5;
-            $.each(_notifies, function(i, n){
-                if (i == _notifies.length-1) return;
-                top_position += n.parent('.notify-wrapper').outerHeight()+5;
-            });
-            _wrapper.css({
-                top: top_position,
-                left: 5
-            });
-        }
-
         setTimeout(function(){
             $.Notify.close(_notify);
         }, params.timeout);
@@ -103,8 +64,7 @@
             return false;
         }
 
-        var _wrapper = _notify.parent(".notify-wrapper");
-        _wrapper.fadeOut(function(){
+        _notify.fadeOut('slow', function(){
             $(this).remove();
             _notifies.splice(_notifies.indexOf(_notify), 1);
         });

diff --git a/docs/js/metro/metro-streamer.js b/docs/js/metro/metro-streamer.js
@@ -11,7 +11,7 @@
                 interval: 20
             },
             slideToGroup: 1,
-            slideToTime: "10:40",
+            slideToTime: "10:20",
             slideSleep: 1000,
             slideSpeed: 1000,
             onClick: function(event){},

diff --git a/docs/notify.html b/docs/notify.html
@@ -43,7 +43,7 @@ <h1>
                         $(function(){
                             $('#notify_btn_1').on('click', function(){
                                 $.Notify({
-                                    shadow: false,
+                                    shadow: true,
                                     position: 'bottom-right',
                                     content: "Metro UI CSS is awesome!!!"
                                 });
@@ -116,11 +116,6 @@ <h3>Parameters:</h3>
                         <td>{background: 'value', color: 'value'} or false</td>
                         <td>default false, you can set background and font color</td>
                     </tr>
-                    <tr>
-                        <td>position</td>
-                        <td>string</td>
-                        <td>values: top-right, bottom-right, top-left, bottom-left</td>
-                    </tr>
                     <tr>
                         <td>timeout</td>
                         <td>int</td>

diff --git a/less/window.less b/less/window.less
@@ -224,20 +224,25 @@
     }
 }
 
-.notify-wrapper {
+.notify-container {
     position: fixed;
-    background-color: @dark;
-    width: auto;
-    height: auto;
-    min-width: 250px;
-    color: @white;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: @zindexCharms;
+    //border: 1px #000 dotted;
+    //background-color: @dark;
 
     .notify {
+        background-color: @white;
+        //border: 1px @grayLight solid;
         display: block;
-        width: 100%;
+        position: relative;
+        min-width: 220px;
         #font > .segoe;
-        color: inherit;
-        padding: 20px;
+        color: @dark;
+        padding: 10px;
+        margin: 2px 2px 2px 0;
 
         .caption {
             font-size: 18px;
@@ -248,10 +253,16 @@
             font-size: 14px;
             line-height: 16px;
         }
-    }
 
-    &.light {
-        background-color: @white;
-        color: @dark;
     }
+}
+
+.notify-wrapper {
+    position: relative;
+    background-color: @dark;
+    width: auto;
+    height: auto;
+    min-width: 250px;
+    color: @white;
+
 }