From 93c54616f6837e0f724d537afb2f3bb952b9539c Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Mon, 6 Oct 2014 23:06:20 +0100
Subject: [PATCH] Notification view integrated into the core

---
 client/assets/css/style.css            | 25 +++++++++++++
 client/assets/themes/basic/style.css   | 48 ++++++++++++++++++++++++-
 client/assets/themes/cli/style.css     | 49 +++++++++++++++++++++++++-
 client/assets/themes/mini/style.css    | 48 ++++++++++++++++++++++++-
 client/assets/themes/relaxed/style.css | 48 ++++++++++++++++++++++++-
 client/build.js                        |  1 +
 client/src/index.html.tmpl             |  9 +++++
 client/src/views/notification.js       | 42 ++++++++++++++++++++++
 server/settingsgenerator.js            |  3 +-
 9 files changed, 268 insertions(+), 5 deletions(-)
 create mode 100644 client/src/views/notification.js

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index f973687..7c74db5 100644
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -528,3 +528,28 @@ html, body { height:100%; }
 #kiwi .applet .applet_chanlist td {
     min-width: 120px;
 }
+
+
+#kiwi .notification {
+    z-index: 1;
+    position:absolute;
+    top:3px; right:3px;
+    width: 300px;
+    max-width: 90%;
+
+    /* .show class reveals this element */
+    display: none;
+}
+#kiwi .notification.show { display: block; }
+#kiwi .notification-inner {
+    position:relative;
+    padding:0 10px 23px 10px;
+}
+#kiwi .notification .close {
+    position:absolute;
+    bottom: 10px;
+    left: 10px;
+    margin: -10px;
+    cursor:pointer;
+    width: 40px;
+}
diff --git a/client/assets/themes/basic/style.css b/client/assets/themes/basic/style.css
index 775a3af..f59b6ee 100644
--- a/client/assets/themes/basic/style.css
+++ b/client/assets/themes/basic/style.css
@@ -376,4 +376,50 @@
 
 #kiwi .channel_info .channel-banlist table { margin-top: 10px; border-spacing: 10px 3px; }
 #kiwi .channel_info .channel-banlist thead { font-style: italic; }
-#kiwi .channel_info .remove-ban:hover { color: #900; }
\ No newline at end of file
+#kiwi .channel_info .remove-ban:hover { color: #900; }
+
+
+#kiwi .notification {
+    /* .show class reveals this element */
+    max-height: 0;
+    overflow: hidden;
+    -webkit-transition: max-height 1s;
+    -moz-transition: max-height 1s;
+    transition: max-height 1s;
+
+    display: block;
+
+    color: #DBDBDB;
+    text-shadow: 0 -1px black;
+    background: rgba(65, 65, 65, 0.95);
+    background-clip: padding-box;
+    border: 1px solid;
+    border-color: rgba(17, 17, 17, 0.6) rgba(17, 17, 17, 0.7) rgba(17, 17, 17, 0.9);
+    border-radius: 5px;
+
+    background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+
+}
+#kiwi .notification.show { max-height: 500px; }
+#kiwi .notification .close {
+    font-size:16px;
+    border:1px solid #1b1b1b;
+    border-left, border-bottom: none;
+    border-radius: 0 8px 0 0;
+    line-height: 20px;
+    text-align: center;
+    color: #747474;
+    background-image: -webkit-linear-gradient(top, #383838, #111111);
+    background-image: -moz-linear-gradient(top, #383838, #111111);
+    background-image: -o-linear-gradient(top, #383838, #111111);
+    background-image: linear-gradient(to bottom, #383838, #111111);
+    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+}
+#kiwi .notification .close:hover { color: #DBDBDB; }
diff --git a/client/assets/themes/cli/style.css b/client/assets/themes/cli/style.css
index 2f1c258..48a6209 100644
--- a/client/assets/themes/cli/style.css
+++ b/client/assets/themes/cli/style.css
@@ -316,4 +316,51 @@
 
 #kiwi .channel_info .channel-banlist table { margin-top: 10px; border-spacing: 10px 3px; }
 #kiwi .channel_info .channel-banlist thead { font-style: italic; }
-#kiwi .channel_info .remove-ban:hover { color: #900; }
\ No newline at end of file
+#kiwi .channel_info .remove-ban:hover { color: #900; }
+
+
+
+#kiwi .notification {
+    /* .show class reveals this element */
+    max-height: 0;
+    overflow: hidden;
+    -webkit-transition: max-height 1s;
+    -moz-transition: max-height 1s;
+    transition: max-height 1s;
+
+    display: block;
+
+    color: #DBDBDB;
+    text-shadow: 0 -1px black;
+    background: rgba(65, 65, 65, 0.95);
+    background-clip: padding-box;
+    border: 1px solid;
+    border-color: rgba(17, 17, 17, 0.6) rgba(17, 17, 17, 0.7) rgba(17, 17, 17, 0.9);
+    border-radius: 5px;
+
+    background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+
+}
+#kiwi .notification.show { max-height: 500px; }
+#kiwi .notification .close {
+    font-size:16px;
+    border:1px solid #1b1b1b;
+    border-left, border-bottom: none;
+    border-radius: 0 8px 0 0;
+    line-height: 20px;
+    text-align: center;
+    color: #747474;
+    background-image: -webkit-linear-gradient(top, #383838, #111111);
+    background-image: -moz-linear-gradient(top, #383838, #111111);
+    background-image: -o-linear-gradient(top, #383838, #111111);
+    background-image: linear-gradient(to bottom, #383838, #111111);
+    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+}
+#kiwi .notification .close:hover { color: #DBDBDB; }
\ No newline at end of file
diff --git a/client/assets/themes/mini/style.css b/client/assets/themes/mini/style.css
index 8dd3a43..be3fa1d 100644
--- a/client/assets/themes/mini/style.css
+++ b/client/assets/themes/mini/style.css
@@ -313,4 +313,50 @@
     width: auto !important;
     padding: 0 !important;
     margin: 2em 0 0 0 !important;
-}
\ No newline at end of file
+}
+
+
+#kiwi .notification {
+    /* .show class reveals this element */
+    max-height: 0;
+    overflow: hidden;
+    -webkit-transition: max-height 1s;
+    -moz-transition: max-height 1s;
+    transition: max-height 1s;
+
+    display: block;
+
+    color: #DBDBDB;
+    text-shadow: 0 -1px black;
+    background: rgba(65, 65, 65, 0.95);
+    background-clip: padding-box;
+    border: 1px solid;
+    border-color: rgba(17, 17, 17, 0.6) rgba(17, 17, 17, 0.7) rgba(17, 17, 17, 0.9);
+    border-radius: 5px;
+
+    background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+
+}
+#kiwi .notification.show { max-height: 500px; }
+#kiwi .notification .close {
+    font-size:16px;
+    border:1px solid #1b1b1b;
+    border-left, border-bottom: none;
+    border-radius: 0 8px 0 0;
+    line-height: 20px;
+    text-align: center;
+    color: #747474;
+    background-image: -webkit-linear-gradient(top, #383838, #111111);
+    background-image: -moz-linear-gradient(top, #383838, #111111);
+    background-image: -o-linear-gradient(top, #383838, #111111);
+    background-image: linear-gradient(to bottom, #383838, #111111);
+    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+}
+#kiwi .notification .close:hover { color: #DBDBDB; }
diff --git a/client/assets/themes/relaxed/style.css b/client/assets/themes/relaxed/style.css
index e703554..ffefed5 100644
--- a/client/assets/themes/relaxed/style.css
+++ b/client/assets/themes/relaxed/style.css
@@ -455,4 +455,50 @@
 }
 #kiwi .channel_info .channel-banlist table { margin-top: 10px; border-spacing: 10px 3px; }
 #kiwi .channel_info .channel-banlist thead { font-style: italic; }
-#kiwi .channel_info .remove-ban:hover { color: #900; }
\ No newline at end of file
+#kiwi .channel_info .remove-ban:hover { color: #900; }
+
+
+#kiwi .notification {
+    /* .show class reveals this element */
+    max-height: 0;
+    overflow: hidden;
+    -webkit-transition: max-height 1s;
+    -moz-transition: max-height 1s;
+    transition: max-height 1s;
+
+    display: block;
+
+    color: #DBDBDB;
+    text-shadow: 0 -1px black;
+    background: rgba(65, 65, 65, 0.95);
+    background-clip: padding-box;
+    border: 1px solid;
+    border-color: rgba(17, 17, 17, 0.6) rgba(17, 17, 17, 0.7) rgba(17, 17, 17, 0.9);
+    border-radius: 5px;
+
+    background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
+    -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+
+}
+#kiwi .notification.show { max-height: 500px; }
+#kiwi .notification .close {
+    font-size:16px;
+    border:1px solid #1b1b1b;
+    border-left, border-bottom: none;
+    border-radius: 0 8px 0 0;
+    line-height: 20px;
+    text-align: center;
+    color: #747474;
+    background-image: -webkit-linear-gradient(top, #383838, #111111);
+    background-image: -moz-linear-gradient(top, #383838, #111111);
+    background-image: -o-linear-gradient(top, #383838, #111111);
+    background-image: linear-gradient(to bottom, #383838, #111111);
+    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+}
+#kiwi .notification .close:hover { color: #DBDBDB; }
diff --git a/client/build.js b/client/build.js
index baf3461..8d62437 100644
--- a/client/build.js
+++ b/client/build.js
@@ -80,6 +80,7 @@ var source_files = [
     __dirname + '/src/views/channeltools.js',
     __dirname + '/src/views/channelinfo.js',
     __dirname + '/src/views/rightbar.js',
+    __dirname + '/src/views/notification.js',
 
     __dirname + '/src/misc/clientuicommands.js',
 
diff --git a/client/src/index.html.tmpl b/client/src/index.html.tmpl
index d4a6515..3d56e88 100644
--- a/client/src/index.html.tmpl
+++ b/client/src/index.html.tmpl
@@ -385,6 +385,15 @@
     </script>
 
 
+    <script type="text/html" id="tmpl_notifications">
+        <div class="notification-inner">
+            <i class="fa fa-times close"></i>
+            <h6></h6>
+            <div class="content"></div>
+        </div>
+    </script>
+
+
 <script src="<%base_path%>/assets/libs/jquery-1.11.1.min.js"></script>
 <script>
 /* Script loader (https://github.com/ded/script.js) */
diff --git a/client/src/views/notification.js b/client/src/views/notification.js
new file mode 100644
index 0000000..98d848d
--- /dev/null
+++ b/client/src/views/notification.js
@@ -0,0 +1,42 @@
+_kiwi.view.Notification = Backbone.View.extend({
+    className: 'notification',
+
+    events: {
+        'click .close': 'close'
+    },
+
+    initialize: function(title, content) {
+        this.title = title;
+        this.content = content;
+    },
+
+    render: function() {
+        this.$el.html($('#tmpl_notifications').html());
+        this.$('h6').text(this.title);
+
+        // HTML string or jquery object
+        if (typeof this.content === 'string') {
+                this.$('.content').html(this.content);
+            } else if (typeof this.content === 'object') {
+                this.$('.content').empty().append(this.content);
+            }
+
+        return this;
+    },
+
+    show: function() {
+        var that = this;
+
+        this.render().$el.appendTo(_kiwi.app.view.$el);
+
+        // The element won't have any CSS transitions applied
+        // until after a tick + paint.
+        _.defer(function() {
+            that.$el.addClass('show');
+        });
+    },
+
+    close: function() {
+        this.remove();
+    }
+});
\ No newline at end of file
diff --git a/server/settingsgenerator.js b/server/settingsgenerator.js
index 0eefe79..479dca1 100644
--- a/server/settingsgenerator.js
+++ b/server/settingsgenerator.js
@@ -251,7 +251,8 @@ function addScripts(vars, debug) {
             'src/views/userbox.js',
             'src/views/channeltools.js',
             'src/views/channelinfo.js',
-            'src/views/rightbar.js'
+            'src/views/rightbar.js',
+            'src/views/notification.js'
         ],
 
         [
-- 
2.25.1