Added overlay-based notifications (e.g. success)

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 7b1c18c44d1378d5c567bf223f09cd493cfcc1d6..fce1ad5ac8cf4afd92724d5fb8415231638d6aa5 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -3303,6 +3303,36 @@ tr .columnURL {
        left: auto;
 }
 
+/* TODO: Overlay */
+
+.systemNotification {
+       /* declarations taken from .success */
+
+       background-color: rgba(238, 255, 238, 1.0);
+       border: 1px solid rgba(0, 204, 0, 1.0);
+       border-top-width: 0;
+       border-radius: 0 0 5px 5px;
+       color: rgba(0, 153, 0, 1.0);
+       left: 40%;
+       padding: 14px;
+       padding-top: 10px;
+       position: fixed;
+       text-align: center;
+       top: -38px;
+       width: auto;
+       z-index: 500;
+       
+       -webkit-transition: top .5s linear;
+       -moz-transition: top .5s linear;
+       -ms-transition: top .5s linear;
+       -o-transition: top .5s linear;
+       transition: top .5s linear;
+}
+
+.systemNotification.open {
+       top: 0px;
+}
+
 
 
 /* ############## ToDo: WCF Dialog ############## */

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index ef14b1b69e8a1d6bcc05df125c99f1af0aab66d2..b17dbc11f05aec0d0255bef129f2c10d5da9dd7d 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3328,6 +3328,80 @@ WCF.Search.User = WCF.Search.Base.extend({
        }
 });
 
+/**
+ * Namespace for system-related classes.
+ */
+WCF.System = { };
+
+/**
+ * System notification overlays.
+ * 
+ * @param      string          message
+ * @param      string          cssClassNames
+ */
+WCF.System.Notification = Class.extend({
+       /**
+        * callback on notification close
+        * @var object
+        */
+       _callback: null,
+       
+       /**
+        * notification overlay
+        * @var jQuery
+        */
+       _overlay: null,
+       
+       /**
+        * Creates a new system notification overlay.
+        * 
+        * @param       string          message
+        * @param       string          cssClassNames
+        */
+       init: function(message, cssClassNames) {
+               this._overlay = $('<div class="systemNotification"><p>' + message + '</p></div>').appendTo(document.body);
+               
+               if (cssClassNames) {
+                       this._overlay.children('p').addClass(cssClassNames);
+               }
+       },
+       
+       /**
+        * Shows the notification overlay.
+        * 
+        * @param       object          callback
+        * @param       integer         duration
+        */
+       show: function(callback, duration) {
+               duration = parseInt(duration);
+               if (!duration) duration = 2000;
+               
+               if (callback && $.isFunction(callback)) {
+                       this._callback = callback;
+               }
+               
+               // hide overlay after specified duration
+               new WCF.PeriodicalExecuter($.proxy(this._hide, this), duration);
+               
+               this._overlay.addClass('open');
+       },
+       
+       /**
+        * Hides the notification overlay after executing the callback.
+        * 
+        * @param       WCF.PeriodicalExecuter          pe
+        */
+       _hide: function(pe) {
+               if (this._callback !== null) {
+                       this._callback();
+               }
+               
+               this._overlay.removeClass('open');
+               
+               pe.stop();
+       }
+});
+
 /**
  * Provides a toggleable sidebar.
  */