Add an information entry to the grower log, including a button to close it.

diff --git a/horde/js/growler.js b/horde/js/growler.js
index 65663f1..a5d579c 100644 (file)
--- a/horde/js/growler.js
+++ b/horde/js/growler.js
@@ -23,6 +23,8 @@
  * 'log' - (boolean) Enable logging.
  * 'noalerts' - (string) The localized string to display when no log entries
  *              are present.
+ * 'info' - (string) The localized string to display as an information message
+ *          at the top of the log.
  *
  * Custom Events:
  * --------------
@@ -37,6 +39,10 @@
  *   Fired on TODO
  *   params: NONE
  *
+ * Growler:toggled
+ *   Fired on toggling of the backlog
+ *   params: The state after the toggling
+ *
  *
  * Growler has been tested with Safari 3(Mac|Win), Firefox 3(Mac|Win), IE6,
  * IE7, and Opera.
@@ -66,7 +72,8 @@
     growlerOptions = {
         location: 'tr',
         log: false,
-        noalerts: 'No Alerts'
+        noalerts: 'No Alerts',
+        info: 'This is the notification backlog'
     },
 
     IE6 = Prototype.Browser.IE
@@ -116,7 +123,7 @@
         initialize: function(opts)
         {
             var ch, cw, sl, st;
-            opts = Object.extend(Object.clone(growlerOptions), opts || {});
+            this.opts = Object.extend(Object.clone(growlerOptions), opts || {});
 
             this.growler = new Element('DIV', { id: 'Growler' }).setStyle({ position: IE6 ? 'absolute' : 'fixed', padding: '10px', zIndex: 50000 }).hide();
 
@@ -125,12 +132,21 @@
                 cw = '0 - this.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth )';
                 sl = '( document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft )';
                 st = '( document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )';
-            } else if (opts.log) {
-                this.growlerlog = new Element('DIV', { id: 'GrowlerLog' }).insert(new Element('DIV').hide().insert(new Element('UL').insert(new Element('LI', { className: 'NoAlerts' }).insert(opts.noalerts))));
+            } else if (this.opts.log) {
+                var logExit = new Element('DIV', { className: 'GrowlerNoticeExit' }).update("×");
+                logExit.observe('click', this.toggleLog.bind(this));
+                this.growlerlog = new Element('DIV', { id: 'GrowlerLog' })
+                    .insert(new Element('DIV').hide()
+                            .insert(new Element('UL')
+                                    .insert(new Element('LI', { className: 'GrowlerInfo' })
+                                            .insert(this.opts.info)
+                                            .insert(logExit))
+                                    .insert(new Element('LI', { className: 'GrowlerNoAlerts' })
+                                            .insert(this.opts.noalerts))));
                 $(document.body).insert(this.growlerlog);
             }
 
-            switch (opts.location) {
+            switch (this.opts.location) {
             case 'br':
                 if (IE6) {
                     this.growler.style.setExpression('left', "( " + cw + " + " + sl + " ) + 'px'");
@@ -193,10 +209,10 @@
 
             if (opts.log && this.growlerlog) {
                 tmp = this.growlerlog.down('DIV UL');
-                if (tmp.down().hasClassName('NoAlerts')) {
+                if (tmp.down().hasClassName('GrowlerNoAlerts')) {
                     tmp.down().remove();
                 }
-                log = new Element('LI', { className: opts.className.empty() ? null : opts.className }).insert(msg).insert(new Element('SPAN', { className: 'alertdate'} ).insert('[' + (new Date).toLocaleString() + ']'));
+                log = new Element('LI', { className: opts.className.empty() ? null : opts.className }).insert(msg).insert(new Element('SPAN', { className: 'GrowlerAlertDate'} ).insert('[' + (new Date).toLocaleString() + ']'));
                 logExit = new Element('DIV', { className: 'GrowlerNoticeExit' }).update("×");
                 logExit.observe('click', removeLog.curry(log));
                 log.insert(logExit);
@@ -250,6 +266,7 @@
                 }
             });
             this.logvisible = !this.logvisible;
+            this.growlerlog.fire('Growler:toggled', { visible: this.logvisible });
             return this.logvisible;
         },
 
@@ -260,7 +277,7 @@
 
         logSize: function()
         {
-            return (this.growlerlog && this.growlerlog.down('.NoAlerts'))
+            return (this.growlerlog && this.growlerlog.down('.GrowlerNoAlerts'))
                 ? 0
                 : this.growlerlog.down('UL').childElements().size();
         }

diff --git a/horde/themes/screen.css b/horde/themes/screen.css
index 44d0a9e..f698623 100644 (file)
--- a/horde/themes/screen.css
+++ b/horde/themes/screen.css
@@ -1017,11 +1017,14 @@ ul.sound-list {
 #GrowlerLog ul li:last-child {
     border: 0;
 }
-#GrowlerLog li.NoAlerts {
+#GrowlerLog li.GrowlerInfo {
     font-weight: bold;
     background: #999;
 }
-#GrowlerLog span.alertdate {
+#GrowlerLog li.GrowlerNoAlerts {
+    background: #999;
+}
+#GrowlerLog span.GrowlerAlertDate {
     font-size: 90%;
     font-style: italic;
     padding-left: 10px;

diff --git a/imp/js/dimpbase.js b/imp/js/dimpbase.js
index bccdd4a..ee8a8c8 100644 (file)
--- a/imp/js/dimpbase.js
+++ b/imp/js/dimpbase.js
@@ -1982,7 +1982,6 @@ var DimpBase = {
 
             case 'alertsloglink':
                 DimpCore.Growler.toggleLog();
-                $('alertsloglink').down('A').update(DimpCore.Growler.logVisible() ? DIMP.text.hidealog : DIMP.text.showalog);
                 break;
 
             case 'applyfilterlink':

diff --git a/imp/js/dimpcore.js b/imp/js/dimpcore.js
index 369aa0e..3f5c75c 100644 (file)
--- a/imp/js/dimpcore.js
+++ b/imp/js/dimpcore.js
@@ -562,8 +562,14 @@ var DimpCore = {
         this.Growler = new Growler({
             location: 'br',
             log: this.growler_log,
-            noalerts: DIMP.text.noalerts
+            noalerts: DIMP.text.noalerts,
+            info: DIMP.text.growlerinfo
         });
+        this.Growler.growlerlog.observe('Growler:toggled', function(e) {
+            $('alertsloglink')
+                .down('A')
+                .update(e.memo.visible ? DIMP.text.hidealog : DIMP.text.showalog);
+        }.bindAsEventListener(this));
 
         /* Add click handler. */
         document.observe('click', DimpCore.clickHandler.bindAsEventListener(DimpCore));

diff --git a/imp/templates/dimp/javascript_defs_dimp.php b/imp/templates/dimp/javascript_defs_dimp.php
index 9d94edd..d0f0fb0 100644 (file)
--- a/imp/templates/dimp/javascript_defs_dimp.php
+++ b/imp/templates/dimp/javascript_defs_dimp.php
@@ -126,6 +126,7 @@ $code['text'] = array(
     'createsub_prompt' => _("Create subfolder:"),
     'delete_folder' => _("Permanently delete %s?"),
     'empty_folder' => _("Permanently delete all messages in %s?"),
+    'growlerinfo' => _("This is the notification backlog"),
     'hidealog' => Horde::highlightAccessKey(_("Hide Alerts _Log"), Horde::getAccessKey(_("Alerts _Log"), true)),
     'listmsg_wait' => _("The server is still generating the message list."),
     'listmsg_timeout' => _("The server was unable to generate the message list."),

diff --git a/kronolith/js/kronolith.js b/kronolith/js/kronolith.js
index 9a53a18..167888a 100644 (file)
--- a/kronolith/js/kronolith.js
+++ b/kronolith/js/kronolith.js
@@ -3990,16 +3990,7 @@ KronolithCore = {
                 break;
 
             case 'kronolithNotifications':
-                var img = elt.down('img'), iconName;
-                if (this.Growler.toggleLog()) {
-                    elt.title = Kronolith.text.hidelog;
-                    elt.addClassName('kronolithClose');
-                } else {
-                    elt.title = Kronolith.text.alerts.interpolate({ count: this.growls });
-                    elt.removeClassName('kronolithClose');
-                }
-                Horde_ToolTips.detach(elt);
-                Horde_ToolTips.attach(elt);
+                this.Growler.toggleLog();
                 break;
 
             case 'kronolithEventDialog':
@@ -5491,8 +5482,21 @@ KronolithCore = {
         this.Growler = new Growler({
             log: true,
             location: 'br',
-            noalerts: Kronolith.text.noalerts
+            noalerts: Kronolith.text.noalerts,
+            info: Kronolith.text.growlerinfo,
         });
+        this.Growler.growlerlog.observe('Growler:toggled', function(e) {
+            var button = $('kronolithNotifications');
+            if (e.memo.visible) {
+                button.title = Kronolith.text.hidelog;
+                button.addClassName('kronolithClose');
+            } else {
+                button.title = Kronolith.text.alerts.interpolate({ count: this.growls });
+                button.removeClassName('kronolithClose');
+            }
+            Horde_ToolTips.detach(button);
+            Horde_ToolTips.attach(button);
+        }.bindAsEventListener(this));
 
         if (Kronolith.conf.is_ie6) {
             /* Disable text selection in preview pane for IE 6. */

diff --git a/kronolith/lib/Kronolith.php b/kronolith/lib/Kronolith.php
index fadd0ab..4064091 100644 (file)
--- a/kronolith/lib/Kronolith.php
+++ b/kronolith/lib/Kronolith.php
@@ -349,6 +349,7 @@ class Kronolith
             'noalerts' => _("No Notifications"),
             'alerts' => sprintf(_("%s notifications"), '#{count}'),
             'hidelog' => _("Hide Notifications"),
+            'growlerinfo' => _("This is the notification backlog"),
             'agenda' => _("Agenda"),
             'searching' => sprintf(_("Events matching \"%s\""), '#{term}'),
             'allday' => _("All day"),