File Browser

New: File Browser to navigate to folders when choosing paths

src/UI/AddSeries/RootFolders/RootFolderItemViewTemplate.hbs

@@ -4,7 +4,6 @@
 <td class="col-md-3 x-folder folder-free-space">
     <span>{{Bytes freeSpace}}</span>
 </td>
-<td class="col-md-1 nz-row-action">
-    <div class="btn btn-sm btn-icon-only  icon-nd-delete x-delete">
-    </div>
+<td class="col-md-1">
+    <i class="icon-nd-delete x-delete"></i>
 </td>

src/UI/AddSeries/RootFolders/RootFolderLayout.js

@@ -8,14 +8,14 @@ define(
         'AddSeries/RootFolders/RootFolderModel',
         'Shared/LoadingView',
         'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
+        'Mixins/FileBrowser'
     ], function (Marionette, RootFolderCollectionView, RootFolderCollection, RootFolderModel, LoadingView, AsValidatedView) {
 
         var layout = Marionette.Layout.extend({
             template: 'AddSeries/RootFolders/RootFolderLayoutTemplate',
 
             ui: {
-                pathInput: '.x-path input'
+                pathInput: '.x-path'
             },
 
             regions: {
@@ -42,7 +42,7 @@ define(
                     this._showCurrentDirs();
                 }
 
-                this.ui.pathInput.autoComplete('/directories');
+                this.ui.pathInput.fileBrowser({ showFiles: true, showLastModified: true });
             },
 
             _onFolderSelected: function (options) {

src/UI/AddSeries/RootFolders/RootFolderLayoutTemplate.hbs

@@ -7,22 +7,28 @@
         <div class="validation-errors"></div>
         <div class="alert alert-info">Enter the path that contains some or all of your TV series, you will be able to choose which series you want to import<button type="button" class="close" data-dismiss="alert">×</button></div>
 
-        <div class="form-group">
-            <div class="input-group x-path">
-                <span class="input-group-addon">&nbsp;<i class="icon-folder-open"></i></span>
-                <input class="col-md-9 form-control" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
-                <span class="input-group-btn ">
-                    <button class="btn btn-success x-add">
-                        <i class="icon-ok"/>
-                    </button>
-                </span>
+        <div class="row">
+            <div class="form-group">
+
+                <div class="col-md-12">
+
+                    <div class="input-group">
+                        <span class="input-group-addon">&nbsp;<i class="icon-folder-open"></i></span>
+                        <input class="form-control x-path" type="text" validation-name="path" placeholder="Enter path to folder that contains your shows">
+                        <span class="input-group-btn"><button class="btn btn-success x-add"><i class="icon-ok"/></button></span>
+                    </div>
+                </div>
             </div>
         </div>
 
-        {{#if items}}
-            <h4>Recent Folders</h4>
-        {{/if}}
-        <div id="current-dirs" class="root-folders-list"></div>
+        <div class="row root-folders">
+            <div class="col-md-12">
+                {{#if items}}
+                    <h4>Recent Folders</h4>
+                {{/if}}
+                <div id="current-dirs" class="root-folders-list"></div>
+            </div>
+        </div>
     </div>
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>

src/UI/AddSeries/addSeries.less

@@ -126,20 +126,28 @@ li.add-new:hover {
 }
 
 .root-folders-modal {
-  overflow: visible;
+  overflow : visible;
 
   .root-folders-list {
-    overflow: auto;
-    max-height: 300px;
+    overflow   : auto;
+    max-height : 300px;
+
+    i {
+      .clickable();
+    }
   }
 
   .validation-errors {
-    display: none;
+    display : none;
   }
 
   .input-group {
     .form-control {
-      background-color: white;
+      background-color : white;
     }
   }
+
+  .root-folders {
+    margin-top : 20px;
+  }
 }

src/UI/AppLayout.js

@@ -2,8 +2,9 @@
     [
         'marionette',
         'Shared/Modal/ModalRegion',
+        'Shared/FileBrowser/FileBrowserModalRegion',
         'Shared/ControlPanel/ControlPanelRegion'
-    ], function (Marionette, ModalRegion, ControlPanelRegion) {
+    ], function (Marionette, ModalRegion, FileBrowserModalRegion, ControlPanelRegion) {
         'use strict';
 
         var Layout = Marionette.Layout.extend({
@@ -15,8 +16,9 @@
 
             initialize: function () {
                 this.addRegions({
-                    modalRegion       : ModalRegion,
-                    controlPanelRegion: ControlPanelRegion
+                    modalRegion            : ModalRegion,
+                    fileBrowserModalRegion : FileBrowserModalRegion,
+                    controlPanelRegion     : ControlPanelRegion
                 });
             }
         });

src/UI/Content/theme.less

@@ -17,6 +17,7 @@
 @import "typeahead";
 @import "utilities";
 @import "../Hotkeys/hotkeys";
+@import "../Shared/FileBrowser/filebrowser";
 
 .main-region {
   @media (min-width : @screen-lg-min) {
@@ -281,4 +282,4 @@ dl.info {
   &.protocol-usenet {
     background-color : #17B1D9;
   }
-}
+}

src/UI/Mixins/AutoComplete.js

@@ -5,7 +5,19 @@ define(
         'typeahead'
     ], function ($) {
 
-    $.fn.autoComplete = function (resource) {
+    $.fn.autoComplete = function (options) {
+        if (!options) {
+            throw 'options are required';
+        }
+
+        if (!options.resource) {
+            throw 'resource is required';
+        }
+
+        if (!options.query) {
+            throw 'query is required';
+        }
+
         $(this).typeahead({
                 hint      : true,
                 highlight : true,
@@ -13,25 +25,34 @@ define(
                 items     : 20
             },
             {
-                name: resource.replace('/'),
+                name: options.resource.replace('/'),
                 displayKey: '',
                 source   : function (filter, callback) {
+                    var data = {};
+                    data[options.query] = filter;
+
                     $.ajax({
-                        url     : window.NzbDrone.ApiRoot + resource,
+                        url     : window.NzbDrone.ApiRoot + options.resource,
                         dataType: 'json',
                         type    : 'GET',
-                        data    : { query: filter },
-                        success : function (data) {
+                        data    : data,
+                        success : function (response) {
 
-                            var matches = [];
+                            if (options.filter) {
+                                options.filter.call(this, filter, response, callback);
+                            }
 
-                            $.each(data, function(i, d) {
-                                if (d.startsWith(filter)) {
-                                    matches.push({ value: d });
-                                }
-                            });
+                            else {
+                                var matches = [];
 
-                            callback(matches);
+                                $.each(response, function(i, d) {
+                                    if (d[options.query] && d[options.property].startsWith(filter)) {
+                                        matches.push({ value: d[options.property] });
+                                    }
+                                });
+
+                                callback(matches);
+                            }
                         }
                     });
                 }

src/UI/Mixins/DirectoryAutoComplete.js

@@ -0,0 +1,29 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'Mixins/AutoComplete'
+    ], function ($) {
+
+    $.fn.directoryAutoComplete = function () {
+
+        var query = 'path';
+
+        $(this).autoComplete({
+            resource : '/filesystem',
+            query    : query,
+            filter   : function (filter, response, callback) {
+
+                var matches = [];
+
+                $.each(response.directories, function(i, d) {
+                    if (d[query] && d[query].startsWith(filter)) {
+                        matches.push({ value: d[query] });
+                    }
+                });
+
+                callback(matches);
+            }
+        });
+    };
+});

src/UI/Mixins/FileBrowser.js

@@ -0,0 +1,38 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'vent',
+        'Shared/FileBrowser/FileBrowserLayout',
+        'Mixins/DirectoryAutoComplete'
+    ], function ($, vent) {
+
+    $.fn.fileBrowser = function (options) {
+        var inputs = $(this);
+
+        inputs.each(function () {
+            var input = $(this);
+            var inputOptions = $.extend({ input: input }, options);
+
+            var inputGroup = $('<div class="input-group"></div>');
+            var inputGroupButton = $('<span class="input-group-btn "></span>');
+            var button = $('<button class="btn btn-primary x-file-browser" title="Browse"><i class="icon-folder-open"/></button>');
+
+            if (input.parent('.input-group').length > 0) {
+                input.parent('.input-group').find('.input-group-btn').prepend(button);
+            }
+
+            else {
+                inputGroupButton.append(button);
+                input.wrap(inputGroup);
+                input.after(inputGroupButton);
+            }
+
+            button.on('click', function () {
+                vent.trigger(vent.Commands.ShowFileBrowser, inputOptions);
+            });
+        });
+
+        inputs.directoryAutoComplete();
+    };
+});

src/UI/Series/Edit/EditSeriesView.js

@@ -7,8 +7,8 @@ define(
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
         'Mixins/AsEditModalView',
-        'Mixins/AutoComplete',
-        'Mixins/TagInput'
+        'Mixins/TagInput',
+        'Mixins/FileBrowser'
     ], function (vent, Marionette, Profiles, AsModelBoundView, AsValidatedView, AsEditModalView) {
 
         var view = Marionette.ItemView.extend({
@@ -28,6 +28,15 @@ define(
                 this.model.set('profiles', Profiles);
             },
 
+            onRender: function () {
+                this.ui.path.fileBrowser();
+
+                this.ui.tags.tagInput({
+                    model    : this.model,
+                    property : 'tags'
+                });
+            },
+
             _onBeforeSave: function () {
                 var profileId = this.ui.profile.val();
                 this.model.set({ profileId: profileId});
@@ -38,14 +47,6 @@ define(
                 vent.trigger(vent.Commands.CloseModalCommand);
             },
 
-            onRender: function () {
-                this.ui.path.autoComplete('/directories');
-                this.ui.tags.tagInput({
-                    model    : this.model,
-                    property : 'tags'
-                });
-            },
-
             _removeSeries: function () {
                 vent.trigger(vent.Commands.DeleteSeriesCommand, {series:this.model});
             }

src/UI/Settings/DownloadClient/DroneFactory/DroneFactoryView.js

@@ -4,7 +4,7 @@ define(
         'marionette',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
+        'Mixins/FileBrowser'
     ], function (Marionette, AsModelBoundView, AsValidatedView) {
 
         var view = Marionette.ItemView.extend({
@@ -15,7 +15,7 @@ define(
             },
 
             onShow: function () {
-                this.ui.droneFactory.autoComplete('/directories');
+                this.ui.droneFactory.fileBrowser();
             }
         });
 

src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js

@@ -11,7 +11,7 @@ define([
     'Mixins/AsValidatedView',
     'Mixins/AsEditModalView',
     'Form/FormBuilder',
-    'Mixins/AutoComplete',
+    'Mixins/FileBrowser',
     'bootstrap'
 ], function (_, vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
 
@@ -39,7 +39,7 @@ define([
                 this.ui.modalBody.addClass('modal-overflow');
             }
 
-            this.ui.path.autoComplete('/directories');
+            this.ui.path.fileBrowser({ showFiles: true });
         },
 
         _onAfterSave: function () {

src/UI/Settings/DownloadClient/RemotePathMapping/RemotePathMappingEditView.js

@@ -10,7 +10,7 @@ define([
     'Mixins/AsModelBoundView',
     'Mixins/AsValidatedView',
     'Mixins/AsEditModalView',
-    'Mixins/AutoComplete',
+    'Mixins/FileBrowser',
     'bootstrap'
 ], function (_, vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
 
@@ -34,7 +34,7 @@ define([
                 this.ui.modalBody.addClass('modal-overflow');
             }
 
-            this.ui.path.autoComplete('/directories');
+            this.ui.path.fileBrowser();
         },
 
         _onAfterSave : function () {

src/UI/Settings/MediaManagement/FileManagement/FileManagementView.js

@@ -1,11 +1,13 @@
 'use strict';
 define(
     [
+        'vent',
         'marionette',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
-    ], function (Marionette, AsModelBoundView, AsValidatedView) {
+        'Mixins/DirectoryAutoComplete',
+        'Mixins/FileBrowser'
+    ], function (vent, Marionette, AsModelBoundView, AsValidatedView) {
 
         var view = Marionette.ItemView.extend({
             template: 'Settings/MediaManagement/FileManagement/FileManagementViewTemplate',
@@ -15,7 +17,7 @@ define(
             },
 
             onShow: function () {
-                this.ui.recyclingBin.autoComplete('/directories');
+                this.ui.recyclingBin.fileBrowser();
             }
         });
 

src/UI/Settings/MediaManagement/FileManagement/FileManagementViewTemplate.hbs

@@ -93,5 +93,6 @@
         <div class="col-sm-8 col-sm-pull-1">
             <input type="text" name="recycleBin" class="form-control x-path"/>
         </div>
+
     </div>
 </fieldset>

src/UI/Settings/MediaManagement/Permissions/PermissionsView.js

@@ -3,37 +3,11 @@ define(
     [
         'marionette',
         'Mixins/AsModelBoundView',
-        'Mixins/AsValidatedView',
-        'Mixins/AutoComplete'
+        'Mixins/AsValidatedView'
     ], function (Marionette, AsModelBoundView, AsValidatedView) {
 
         var view = Marionette.ItemView.extend({
-            template: 'Settings/MediaManagement/Permissions/PermissionsViewTemplate',
-
-            ui: {
-                recyclingBin                  : '.x-path',
-                failedDownloadHandlingCheckbox: '.x-failed-download-handling',
-                failedDownloadOptions         : '.x-failed-download-options'
-            },
-
-            events: {
-                'change .x-failed-download-handling': '_setFailedDownloadOptionsVisibility'
-            },
-
-            onShow: function () {
-                this.ui.recyclingBin.autoComplete('/directories');
-            },
-
-            _setFailedDownloadOptionsVisibility: function () {
-                var checked = this.ui.failedDownloadHandlingCheckbox.prop('checked');
-                if (checked) {
-                    this.ui.failedDownloadOptions.slideDown();
-                }
-
-                else {
-                    this.ui.failedDownloadOptions.slideUp();
-                }
-            }
+            template: 'Settings/MediaManagement/Permissions/PermissionsViewTemplate'
         });
 
         AsModelBoundView.call(view);

src/UI/Shared/FileBrowser/EmptyView.js

@@ -0,0 +1,11 @@
+'use strict';
+
+define(
+    [
+        'marionette'
+    ], function (Marionette) {
+
+        return Marionette.CompositeView.extend({
+            template: 'Shared/FileBrowser/EmptyViewTemplate'
+        });
+    });

src/UI/Shared/FileBrowser/EmptyViewTemplate.hbs

@@ -0,0 +1,3 @@
+<div class="text-center col-md-12 file-browser-empty">
+    <span>No files/folders were found, edit the path above, or clear to start again</span>
+</div>

src/UI/Shared/FileBrowser/FileBrowserCollection.js

@@ -0,0 +1,39 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'backbone',
+        'Shared/FileBrowser/FileBrowserModel'
+    ], function ($, Backbone, FileBrowserModel) {
+
+        return Backbone.Collection.extend({
+            model: FileBrowserModel,
+            url  : window.NzbDrone.ApiRoot + '/filesystem',
+
+            parse: function(response) {
+                var contents = [];
+
+                if (response.parent || response.parent === '') {
+
+                    var type = 'parent';
+                    var name = '...';
+
+                    if (response.parent === '') {
+                        type = 'computer';
+                        name = 'My Computer';
+                    }
+
+                    contents.push({
+                        type : type,
+                        name : name,
+                        path : response.parent
+                    });
+                }
+
+                $.merge(contents, response.directories);
+                $.merge(contents, response.files);
+
+                return contents;
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserLayout.js

@@ -0,0 +1,169 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'vent',
+        'marionette',
+        'backgrid',
+        'Shared/FileBrowser/FileBrowserCollection',
+        'Shared/FileBrowser/EmptyView',
+        'Shared/FileBrowser/FileBrowserRow',
+        'Shared/FileBrowser/FileBrowserTypeCell',
+        'Shared/FileBrowser/FileBrowserNameCell',
+        'Cells/RelativeDateCell',
+        'Cells/FileSizeCell',
+        'Shared/LoadingView',
+        'Mixins/DirectoryAutoComplete'
+    ], function (_,
+                 vent,
+                 Marionette,
+                 Backgrid,
+                 FileBrowserCollection,
+                 EmptyView,
+                 FileBrowserRow,
+                 FileBrowserTypeCell,
+                 FileBrowserNameCell,
+                 RelativeDateCell,
+                 FileSizeCell,
+                 LoadingView) {
+
+        return Marionette.Layout.extend({
+            template: 'Shared/FileBrowser/FileBrowserLayoutTemplate',
+
+            regions: {
+                browser : '#x-browser'
+            },
+
+            ui: {
+                path: '.x-path'
+            },
+
+            events: {
+                'typeahead:selected .x-path'      : '_pathChanged',
+                'typeahead:autocompleted .x-path' : '_pathChanged',
+                'keyup .x-path'                   : '_inputChanged',
+                'click .x-ok'                     : '_selectPath'
+            },
+
+            initialize: function (options) {
+                this.collection = new FileBrowserCollection();
+                this.collection.showFiles = options.showFiles || false;
+                this.collection.showLastModified = options.showLastModified || false;
+
+                this.input = options.input;
+
+                this._setColumns();
+                this._fetchCollection(this.input.val());
+                this.listenTo(this.collection, 'sync', this._showGrid);
+                this.listenTo(this.collection, 'filebrowser:folderselected', this._rowSelected);
+            },
+
+            onRender: function () {
+                this.browser.show(new LoadingView());
+            },
+
+            onShow: function () {
+                this.ui.path.directoryAutoComplete();
+                this._updatePath(this.input.val());
+            },
+
+            _setColumns: function () {
+                this.columns = [
+                    {
+                        name      : 'type',
+                        label     : '',
+                        sortable  : false,
+                        cell      : FileBrowserTypeCell
+                    },
+                    {
+                        name      : 'name',
+                        label     : 'Name',
+                        sortable  : false,
+                        cell      : FileBrowserNameCell
+                    }
+                ];
+
+                if (this.collection.showLastModified) {
+                    this.columns.push({
+                        name      : 'lastModified',
+                        label     : 'Last Modified',
+                        sortable  : false,
+                        cell      : RelativeDateCell
+                    });
+                }
+
+                if (this.collection.showFiles) {
+                    this.columns.push({
+                        name      : 'size',
+                        label     : 'Size',
+                        sortable  : false,
+                        cell      : FileSizeCell
+                    });
+                }
+            },
+
+            _fetchCollection: function (path) {
+                var data = {
+                    includeFiles : this.collection.showFiles
+                };
+
+                if (path) {
+                    data.path = path;
+                }
+
+                this.collection.fetch({
+                    data: data
+                });
+            },
+
+            _showGrid: function () {
+
+                if (this.collection.models.length === 0) {
+                    this.browser.show(new EmptyView());
+                    return;
+                }
+
+                var grid = new Backgrid.Grid({
+                    row        : FileBrowserRow,
+                    collection : this.collection,
+                    columns    : this.columns,
+                    className  : 'table table-hover'
+                });
+
+                this.browser.show(grid);
+            },
+
+            _rowSelected: function (model) {
+                var path = model.get('path');
+
+                this._updatePath(path);
+                this._fetchCollection(path);
+            },
+
+            _pathChanged: function (e, path) {
+                this._fetchCollection(path.value);
+                this._updatePath(path.value);
+            },
+
+            _inputChanged: function () {
+                var path = this.ui.path.val();
+
+                if (path === '' || path.endsWith('\\') || path.endsWith('/')) {
+                    this._fetchCollection(path);
+                }
+            },
+
+            _updatePath: function (path) {
+                if (path !== undefined || path !== null) {
+                    this.ui.path.val(path);
+                }
+            },
+
+            _selectPath: function () {
+                this.input.val(this.ui.path.val());
+                this.input.trigger('change');
+
+                vent.trigger(vent.Commands.CloseFileBrowser);
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserLayoutTemplate.hbs

@@ -0,0 +1,26 @@
+<div class="modal-content">
+    <div class="modal-header">
+    <button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
+    <h3>File Browser</h3>
+</div>
+    <div class="modal-body">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="form-group">
+                    <input type="text" class="form-control x-path" placeholder="Start typing or select a path below"/>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-sm-12">
+                <div id="x-browser"></div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
+        <button class="btn" data-dismiss="modal">close</button>
+        <button class="btn btn-primary x-ok">ok</button>
+    </div>
+</div>

src/UI/Shared/FileBrowser/FileBrowserModalRegion.js

@@ -0,0 +1,63 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'backbone',
+        'marionette',
+        'bootstrap'
+    ], function ($, Backbone, Marionette) {
+        var region = Marionette.Region.extend({
+            el: '#file-browser-modal-region',
+
+            constructor: function () {
+                Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+                this.on('show', this.showModal, this);
+            },
+
+            getEl: function (selector) {
+                var $el = $(selector);
+                $el.on('hidden', this.close);
+                return $el;
+            },
+
+            showModal: function () {
+                this.$el.addClass('modal fade');
+
+                //need tab index so close on escape works
+                //https://github.com/twitter/bootstrap/issues/4663
+                this.$el.attr('tabindex', '-1');
+                this.$el.css('z-index', '1060');
+
+                this.$el.modal({
+                    show     : true,
+                    keyboard : true,
+                    backdrop : true
+                });
+
+                this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
+
+                this.$el.on('shown.bs.modal', function () {
+                    $('.modal-backdrop:last').css('z-index', 1059);
+                });
+
+                this.currentView.$el.addClass('modal-dialog');
+            },
+
+            closeModal: function () {
+                $(this.el).modal('hide');
+                this.reset();
+            },
+
+            _closing: function () {
+
+                if (this.$el) {
+                    this.$el.off('hide.bs.modal');
+                    this.$el.off('shown.bs.modal');
+                }
+
+                this.reset();
+            }
+        });
+
+        return region;
+    });

src/UI/Shared/FileBrowser/FileBrowserModel.js

@@ -0,0 +1,10 @@
+'use strict';
+define(
+    [
+        'backbone'
+    ], function (Backbone) {
+        return  Backbone.Model.extend({
+
+        });
+    });
+

src/UI/Shared/FileBrowser/FileBrowserNameCell.js

@@ -0,0 +1,23 @@
+'use strict';
+
+define(
+    [
+        'vent',
+        'Cells/NzbDroneCell'
+    ], function (vent, NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'file-browser-name-cell',
+
+            render: function () {
+                this.$el.empty();
+
+                var name = this.model.get(this.column.get('name'));
+
+                this.$el.html(name);
+
+                this.delegateEvents();
+                return this;
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserRow.js

@@ -0,0 +1,31 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'backgrid'
+    ], function (_, Backgrid) {
+
+        return Backgrid.Row.extend({
+            className: 'file-browser-row',
+
+            events: {
+                'click': '_selectRow'
+            },
+
+            _originalInit: Backgrid.Row.prototype.initialize,
+
+            initialize: function () {
+                this._originalInit.apply(this, arguments);
+            },
+
+            _selectRow: function () {
+                if (this.model.get('type') === 'file') {
+                    this.model.collection.trigger('filebrowser:fileselected', this.model);
+                }
+
+                else {
+                    this.model.collection.trigger('filebrowser:folderselected', this.model);
+                }
+            }
+        });
+    });

src/UI/Shared/FileBrowser/FileBrowserTypeCell.js

@@ -0,0 +1,40 @@
+'use strict';
+
+define(
+    [
+        'vent',
+        'Cells/NzbDroneCell'
+    ], function (vent, NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'file-browser-type-cell',
+
+            render: function () {
+                this.$el.empty();
+
+                var type = this.model.get(this.column.get('name'));
+                var icon = 'icon-hdd';
+
+                if (type === 'computer') {
+                    icon = 'icon-desktop';
+                }
+
+                else if (type === 'parent') {
+                    icon = 'icon-level-up';
+                }
+
+                else if (type === 'folder') {
+                    icon = 'icon-folder-close';
+                }
+
+                else if (type === 'file') {
+                    icon = 'icon-file';
+                }
+
+                this.$el.html('<i class="{0}"></i>'.format(icon));
+
+                this.delegateEvents();
+                return this;
+            }
+        });
+    });

src/UI/Shared/FileBrowser/filebrowser.less

@@ -0,0 +1,24 @@
+.file-browser-row {
+  cursor : pointer;
+
+  .file-size-cell {
+    white-space : nowrap;
+  }
+
+  .relative-date-cell {
+    width : 120px;
+    white-space : nowrap;
+  }
+}
+
+.file-browser-type-cell {
+  width : 16px;
+}
+
+.file-browser-name-cell {
+  word-break : break-all;
+}
+
+.file-browser-empty {
+  margin-top : 20px;
+}

src/UI/Shared/Modal/ModalController.js

@@ -9,8 +9,18 @@ define(
         'Episode/EpisodeDetailsLayout',
         'Activity/History/Details/HistoryDetailsLayout',
         'System/Logs/Table/Details/LogDetailsView',
-        'Rename/RenamePreviewLayout'
-    ], function (vent, AppLayout, Marionette, EditSeriesView, DeleteSeriesView, EpisodeDetailsLayout, HistoryDetailsLayout, LogDetailsView, RenamePreviewLayout) {
+        'Rename/RenamePreviewLayout',
+        'Shared/FileBrowser/FileBrowserLayout'
+    ], function (vent,
+                 AppLayout,
+                 Marionette,
+                 EditSeriesView,
+                 DeleteSeriesView,
+                 EpisodeDetailsLayout,
+                 HistoryDetailsLayout,
+                 LogDetailsView,
+                 RenamePreviewLayout,
+                 FileBrowserLayout) {
 
         return Marionette.AppRouter.extend({
 
@@ -23,6 +33,8 @@ define(
                 vent.on(vent.Commands.ShowHistoryDetails, this._showHistory, this);
                 vent.on(vent.Commands.ShowLogDetails, this._showLogDetails, this);
                 vent.on(vent.Commands.ShowRenamePreview, this._showRenamePreview, this);
+                vent.on(vent.Commands.ShowFileBrowser, this._showFileBrowser, this);
+                vent.on(vent.Commands.CloseFileBrowser, this._closeFileBrowser, this);
             },
 
             _openModal: function (view) {
@@ -61,6 +73,15 @@ define(
             _showRenamePreview: function (options) {
                 var view = new RenamePreviewLayout(options);
                 AppLayout.modalRegion.show(view);
+            },
+
+            _showFileBrowser: function (options) {
+                var view = new FileBrowserLayout(options);
+                AppLayout.fileBrowserModalRegion.show(view);
+            },
+
+            _closeFileBrowser: function () {
+                AppLayout.fileBrowserModalRegion.closeModal();
             }
         });
     });

src/UI/index.html

@@ -52,6 +52,7 @@
                 </div>
             </div>
             <div id="modal-region"></div>
+            <div id="file-browser-modal-region"></div>
         </div>
     </div>
     <a id="scroll-up" title="Back to the top!">

src/UI/vent.js

@@ -26,6 +26,8 @@ define(
             SaveSettings              : 'saveSettings',
             ShowLogFile               : 'showLogFile',
             ShowRenamePreview         : 'showRenamePreview',
+            ShowFileBrowser           : 'showFileBrowser',
+            CloseFileBrowser          : 'closeFileBrowser',
             OpenControlPanelCommand   : 'OpenControlPanelCommand',
             CloseControlPanelCommand  : 'CloseControlPanelCommand'
         };