From ef4ad532777e03759e95ff08599dbfa1aaa38866 Mon Sep 17 00:00:00 2001
From: Keivan Beigi <kay.one@gmail.com>
Date: Tue, 2 Jul 2013 17:44:22 -0700
Subject: [PATCH] show rejection reasons in a tool tip instead of plaint text
 in the grid.

---
 UI/Cells/ApprovalStatusCell.js           | 40 ++++++++++++++++++++++++
 UI/Cells/ApprovalStatusCellTemplate.html |  6 ++++
 UI/Cells/cells.less                      | 26 ++++++++++++---
 UI/Controller.js                         |  4 +--
 UI/Episode/Search/ManualLayout.js        |  4 +--
 UI/Release/ApprovalStatusCell.js         | 26 ---------------
 UI/Release/DownloadReportCell.js         |  6 ++--
 UI/Release/Layout.js                     |  4 +--
 8 files changed, 76 insertions(+), 40 deletions(-)
 create mode 100644 UI/Cells/ApprovalStatusCell.js
 create mode 100644 UI/Cells/ApprovalStatusCellTemplate.html
 delete mode 100644 UI/Release/ApprovalStatusCell.js

diff --git a/UI/Cells/ApprovalStatusCell.js b/UI/Cells/ApprovalStatusCell.js
new file mode 100644
index 000000000..53ad8683f
--- /dev/null
+++ b/UI/Cells/ApprovalStatusCell.js
@@ -0,0 +1,40 @@
+'use strict';
+define(
+    [
+        'backgrid',
+        'marionette',
+        'bootstrap'
+    ], function (Backgrid, Marionette) {
+
+        return Backgrid.Cell.extend({
+
+            className: 'approval-status-cell',
+            template : 'Cells/ApprovalStatusCellTemplate',
+
+
+            render: function () {
+
+                var rejections = this.model.get(this.column.get('name'));
+
+                if (rejections.length === 0) {
+                    return this;
+                }
+
+                this.templateFunction = Marionette.TemplateCache.get(this.template);
+
+                var html = this.templateFunction(rejections);
+                this.$el.html('<i class="icon-exclamation-sign"/>');
+
+                this.$el.popover({
+                    content  : html,
+                    html     : true,
+                    trigger  : 'hover',
+                    title    : 'Release Rejected',
+                    placement: 'left',
+                    container: this.$el
+                });
+
+                return this;
+            }
+        });
+    });
diff --git a/UI/Cells/ApprovalStatusCellTemplate.html b/UI/Cells/ApprovalStatusCellTemplate.html
new file mode 100644
index 000000000..336b12024
--- /dev/null
+++ b/UI/Cells/ApprovalStatusCellTemplate.html
@@ -0,0 +1,6 @@
+<ul>
+    {{#each this}}
+    <li>{{this}}</li>
+    {{debug}}
+    {{/each}}
+</ul>
diff --git a/UI/Cells/cells.less b/UI/Cells/cells.less
index a58aeceeb..32c9d580e 100644
--- a/UI/Cells/cells.less
+++ b/UI/Cells/cells.less
@@ -1,23 +1,39 @@
 @import "../content/Bootstrap/mixins";
 @import "../content/Bootstrap/variables";
 @import "../content/Bootstrap/buttons";
+@import "../shared/styles/clickable";
 
 .episode-title-cell {
   .btn-link;
 }
 
 .air-date-cell {
-  width: 100px;
+  width : 100px;
 }
 
 .relative-date-cell {
-  width: 150px;
+  width : 150px;
 }
 
-.quality-cell{
-  width: 130px;
+.quality-cell {
+  width : 130px;
 }
 
-.history-event-type-cell{
+.history-event-type-cell {
   width : 10px;
 }
+
+.download-report-cell {
+  .clickable();
+}
+
+.approval-status-cell {
+  widows : 10px;
+  .popover {
+    max-width : 400px;
+  }
+
+  i {
+    color : @red;
+  }
+}
diff --git a/UI/Controller.js b/UI/Controller.js
index 8c2a7b783..71948fc82 100644
--- a/UI/Controller.js
+++ b/UI/Controller.js
@@ -14,8 +14,8 @@ define(
         'Logs/Layout',
         'Release/Layout',
         'Shared/NotFoundView'
-    ], function (App, Marionette, HistoryLayout, SettingsLayout, AddSeriesLayout, SeriesIndexLayout, SeriesDetailsLayout, MissingLayout, SeriesModel, CalendarLayout, NotFoundView,
-        LogsLayout, ReleaseLayout) {
+    ], function (App, Marionette, HistoryLayout, SettingsLayout, AddSeriesLayout, SeriesIndexLayout, SeriesDetailsLayout, MissingLayout, SeriesModel, CalendarLayout,
+        LogsLayout, ReleaseLayout, NotFoundView) {
         return Marionette.Controller.extend({
 
             series       : function () {
diff --git a/UI/Episode/Search/ManualLayout.js b/UI/Episode/Search/ManualLayout.js
index 430f9f1d7..cf0ca1aeb 100644
--- a/UI/Episode/Search/ManualLayout.js
+++ b/UI/Episode/Search/ManualLayout.js
@@ -5,7 +5,7 @@ define(
         'backgrid',
         'Cells/FileSizeCell',
         'Cells/QualityCell',
-        'Release/ApprovalStatusCell',
+        'Cells/ApprovalStatusCell',
         'Release/DownloadReportCell'
 
     ], function (Marionette, Backgrid, FileSizeCell, QualityCell, ApprovalStatusCell, DownloadReportCell) {
@@ -46,7 +46,7 @@ define(
 
                     {
                         name : 'rejections',
-                        label: 'decision',
+                        label: '',
                         cell : ApprovalStatusCell
                     },
                     {
diff --git a/UI/Release/ApprovalStatusCell.js b/UI/Release/ApprovalStatusCell.js
deleted file mode 100644
index cdaa82350..000000000
--- a/UI/Release/ApprovalStatusCell.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-define(
-    [
-        'backgrid'
-    ], function (Backgrid) {
-
-
-        return Backgrid.Cell.extend({
-
-            className: 'approval-status-cell',
-
-            render: function () {
-                var rejections = this.model.get(this.column.get('name'));
-
-                var result = '';
-
-                _.each(rejections, function (reason) {
-                    result += reason + ' ';
-                });
-
-                this.$el.html(result);
-                this.delegateEvents();
-                return this;
-            }
-        });
-    });
diff --git a/UI/Release/DownloadReportCell.js b/UI/Release/DownloadReportCell.js
index 63f70343d..bdb1f44bf 100644
--- a/UI/Release/DownloadReportCell.js
+++ b/UI/Release/DownloadReportCell.js
@@ -18,13 +18,13 @@ define(
 
                 this.$el.html('<i class =\'icon-spinner icon-spin\' />');
                 this.model.save().always(function () {
-                        self.$el.html('<i class =\'icon-download-alt\' />');
-                    });
+                    self.$el.html('<i class =\'icon-download-alt\' title=\'Add to download queue\' />');
+                });
             },
 
             render: function () {
 
-                this.$el.html('<i class =\'icon-download-alt\' />');
+                this.$el.html('<i class =\'icon-download-alt\' title=\'Add to download queue\' />');
                 return this;
 
             }
diff --git a/UI/Release/Layout.js b/UI/Release/Layout.js
index 0f0a61ef0..32a73e2e0 100644
--- a/UI/Release/Layout.js
+++ b/UI/Release/Layout.js
@@ -8,7 +8,7 @@ define(
         'Cells/EpisodeNumberCell',
         'Cells/FileSizeCell',
         'Cells/QualityCell',
-        'Release/ApprovalStatusCell',
+        'Cells/ApprovalStatusCell',
         'Shared/SpinnerView'
     ], function (Marionette, Backgrid, ReleaseCollection, IndexerCell, EpisodeNumberCell, FileSizeCell, QualityCell, ApprovalStatusCell, SpinnerView) {
         return Marionette.Layout.extend({
@@ -55,7 +55,7 @@ define(
 
                     {
                         name : 'rejections',
-                        label: 'decision',
+                        label: '',
                         cell : ApprovalStatusCell
                     }
                 ],