New: Details for import/grab on Episode Activity tab

src/UI/Cells/cells.less

@@ -129,6 +129,16 @@ td.episode-status-cell, td.quality-cell {
   }
 }
 
+.episode-activity-details-cell {
+  width : 18px;
+}
+
+.episode-detail-modal {
+  .episode-actions-cell {
+    width : 18px;
+  }
+}
+
 .series-actions-cell {
   width     : 56px;
   min-width : 56px;

src/UI/Episode/Activity/EpisodeActivityDetailsCell.js

@@ -0,0 +1,35 @@
+'use strict';
+
+define(
+    [
+        'jquery',
+        'vent',
+        'marionette',
+        'Cells/NzbDroneCell',
+        'History/Details/HistoryDetailsView',
+        'bootstrap'
+    ], function ($, vent, Marionette, NzbDroneCell, HistoryDetailsView) {
+        return NzbDroneCell.extend({
+
+            className: 'episode-activity-details-cell',
+
+
+            render: function () {
+                this.$el.empty();
+                this.$el.html('<i class="icon-info-sign"></i>');
+
+                var html = new HistoryDetailsView({ model: this.model }).render().$el;
+
+                this.$el.popover({
+                    content  : html,
+                    html     : true,
+                    trigger  : 'hover',
+                    title    : 'Details',
+                    placement: 'left',
+                    container: this.$el
+                });
+
+                return this;
+            }
+        });
+    });

src/UI/Episode/Activity/EpisodeActivityLayout.js

@@ -8,6 +8,7 @@ define(
         'Cells/QualityCell',
         'Cells/RelativeDateCell',
         'Episode/Activity/EpisodeActivityActionsCell',
+        'Episode/Activity/EpisodeActivityDetailsCell',
         'Episode/Activity/NoActivityView',
         'Shared/LoadingView'
     ], function (Marionette,
@@ -17,6 +18,7 @@ define(
                  QualityCell,
                  RelativeDateCell,
                  EpisodeActivityActionsCell,
+                 EpisodeActivityDetailsCell,
                  NoActivityView,
                  LoadingView) {
 
@@ -50,6 +52,12 @@ define(
                         label: 'Date',
                         cell : RelativeDateCell
                     },
+                    {
+                        name    : 'this',
+                        label   : '',
+                        cell    : EpisodeActivityDetailsCell,
+                        sortable: false
+                    },
                     {
                         name    : 'this',
                         label   : '',

src/UI/History/Details/HistoryDetailsLayout.js

@@ -0,0 +1,40 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'vent',
+        'marionette',
+        'History/Details/HistoryDetailsView'
+    ], function ($, vent, Marionette, HistoryDetailsView) {
+
+        return Marionette.Layout.extend({
+            template: 'History/Details/HistoryDetailsLayoutTemplate',
+
+            regions: {
+                bodyRegion: '.modal-body'
+            },
+
+            events: {
+                'click .x-mark-as-failed': '_markAsFailed'
+            },
+
+            onShow: function () {
+                this.bodyRegion.show(new HistoryDetailsView({ model: this.model }));
+            },
+
+            _markAsFailed: function () {
+                var url = window.NzbDrone.ApiRoot + '/history/failed';
+                var data = {
+                    id: this.model.get('id')
+                };
+
+                $.ajax({
+                    url: url,
+                    type: 'POST',
+                    data: data
+                });
+
+                vent.trigger(vent.Commands.CloseModalCommand);
+            }
+        });
+    });

src/UI/History/Details/HistoryDetailsLayoutTemplate.html

@@ -0,0 +1,23 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="history-detail-modal">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+
+                <h3>
+                    {{#if_eq eventType compare="grabbed"}}Grabbed{{/if_eq}}
+                    {{#if_eq eventType compare="downloadFailed"}}Download Failed{{/if_eq}}
+                    {{#if_eq eventType compare="downloadFolderImported"}}Episode Imported{{/if_eq}}
+                </h3>
+
+            </div>
+            <div class="modal-body">
+
+            </div>
+            <div class="modal-footer">
+                {{#if_eq eventType compare="grabbed"}}<button class="btn btn-danger x-mark-as-failed">mark as failed</button>{{/if_eq}}
+                <button class="btn" data-dismiss="modal">close</button>
+            </div>
+        </div>
+    </div>
+</div>

src/UI/History/Details/HistoryDetailsView.js

@@ -1,32 +1,11 @@
 'use strict';
 define(
     [
-        'jquery',
-        'vent',
         'marionette',
         'History/Details/HistoryDetailsAge'
-    ], function ($, vent, Marionette) {
+    ], function (Marionette) {
 
         return Marionette.ItemView.extend({
-            template: 'History/Details/HistoryDetailsViewTemplate',
+            template: 'History/Details/HistoryDetailsViewTemplate'
-
-            events: {
-                'click .x-mark-as-failed': '_markAsFailed'
-            },
-
-            _markAsFailed: function () {
-                var url = window.NzbDrone.ApiRoot + '/history/failed';
-                var data = {
-                    id: this.model.get('id')
-                };
-
-                $.ajax({
-                    url: url,
-                    type: 'POST',
-                    data: data
-                });
-
-                vent.trigger(vent.Commands.CloseModalCommand);
-            }
         });
     });

src/UI/History/Details/HistoryDetailsViewTemplate.html

@@ -1,19 +1,5 @@
-<div class="modal-dialog">
+{{#if_eq eventType compare="grabbed"}}
-    <div class="modal-content">
+<dl class="dl-horizontal">
-        <div class="history-detail-modal">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-
-                <h3>
-                    {{#if_eq eventType compare="grabbed"}}Grabbed{{/if_eq}}
-                    {{#if_eq eventType compare="downloadFailed"}}Download Failed{{/if_eq}}
-                    {{#if_eq eventType compare="downloadFolderImported"}}Episode Imported{{/if_eq}}
-                </h3>
-
-            </div>
-            <div class="modal-body">
-                {{#if_eq eventType compare="grabbed"}}
-                    <dl class="dl-horizontal">
 
     <dt>Name:</dt>
     <dd>{{sourceTitle}}</dd>
@@ -48,10 +34,10 @@
     {{historyAge}}
     {{/if}}
     {{/with}}
-                    </dl>
+</dl>
-                {{/if_eq}}
+{{/if_eq}}
-                {{#if_eq eventType compare="downloadFailed"}}
+{{#if_eq eventType compare="downloadFailed"}}
-                    <dl class="dl-horizontal">
+<dl class="dl-horizontal">
 
     <dt>Name:</dt>
     <dd>{{sourceTitle}}</dd>
@@ -60,10 +46,10 @@
     <dt>Message:</dt>
     <dd>{{message}}</dd>
     {{/with}}
-                    </dl>
+</dl>
-                {{/if_eq}}
+{{/if_eq}}
-                {{#if_eq eventType compare="downloadFolderImported"}}
+{{#if_eq eventType compare="downloadFolderImported"}}
-                    <dl class="dl-horizontal">
+<dl class="dl-horizontal">
 
     {{#if sourceTitle}}
     <dt>Name:</dt>
@@ -81,13 +67,5 @@
     <dd>{{importedPath}}</dd>
     {{/if}}
     {{/with}}
-                    </dl>
+</dl>
-                {{/if_eq}}
+{{/if_eq}}
-            </div>
-            <div class="modal-footer">
-                {{#if_eq eventType compare="grabbed"}}<button class="btn btn-danger x-mark-as-failed">mark as failed</button>{{/if_eq}}
-                <button class="btn" data-dismiss="modal">close</button>
-            </div>
-        </div>
-    </div>
-</div>

src/UI/Series/series.less

@@ -266,6 +266,10 @@
     margin-top : 30px;
     font-size  : 12px;
   }
+
+  .episode-activity-details-cell .popover {
+    max-width: 800px;
+  }
 }
 
 .season-grid {

src/UI/Shared/Modal/ModalController.js

@@ -7,10 +7,10 @@ define(
         'Series/Edit/EditSeriesView',
         'Series/Delete/DeleteSeriesView',
         'Episode/EpisodeDetailsLayout',
-        'History/Details/HistoryDetailsView',
+        'History/Details/HistoryDetailsLayout',
         'System/Logs/Table/Details/LogDetailsView',
         'Rename/RenamePreviewLayout'
-    ], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsView, LogDetailsView, RenamePreviewLayout) {
+    ], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsLayout, LogDetailsView, RenamePreviewLayout) {
 
         return Marionette.AppRouter.extend({
 
@@ -49,7 +49,7 @@ define(
             },
 
             _showHistory: function (options) {
-                var view = new HistoryDetailsView({ model: options.model });
+                var view = new HistoryDetailsLayout({ model: options.model });
                 AppLayout.modalRegion.show(view);
             },