System now uses tabs instead of toolbar

pull/33/merge
Mark McDowall 11 years ago
parent ea5549d736
commit 6a10382e7b

@ -71,9 +71,9 @@ module.exports = function (grunt) {
'UI/AddSeries/addSeries.less',
'UI/Calendar/calendar.less',
'UI/Cells/cells.less',
'UI/Logs/logs.less',
'UI/Settings/settings.less',
'UI/Update/update.less'
'UI/System/Logs/logs.less',
'UI/System/Update/update.less'
],
dest : outputRoot,
ext: '.css'

@ -126,4 +126,34 @@
.icon-nd-unmonitored:before {
.icon(@bookmark-empty);
}
.icon-info:before {
.icon(@info-sign);
color : dodgerblue;
}
.icon-debug:before {
.icon(@info-sign);
color : gray;
}
.icon-trace:before {
.icon(@info-sign);
color : lightgrey;
}
.icon-warn:before {
.icon(@exclamation-sign);
color : orange;
}
.icon-error:before {
.icon(@bug);
color : red;
}
.icon-fatal:before {
.icon(@remove-sign);
color : purple;
}

@ -11,16 +11,27 @@ define(
'Series/SeriesCollection',
'Missing/MissingLayout',
'Calendar/CalendarLayout',
'Logs/Layout',
'Logs/Files/Layout',
'Release/Layout',
'System/Layout',
'System/SystemLayout',
'SeasonPass/SeasonPassLayout',
'Update/UpdateLayout',
'System/Update/UpdateLayout',
'Shared/NotFoundView',
'Shared/Modal/Region'
], function (App, Marionette, HistoryLayout, SettingsLayout, AddSeriesLayout, SeriesIndexLayout, SeriesDetailsLayout, SeriesCollection, MissingLayout, CalendarLayout,
LogsLayout, LogFileLayout, ReleaseLayout, SystemLayout, SeasonPassLayout, UpdateLayout, NotFoundView) {
], function (App,
Marionette,
HistoryLayout,
SettingsLayout,
AddSeriesLayout,
SeriesIndexLayout,
SeriesDetailsLayout,
SeriesCollection,
MissingLayout,
CalendarLayout,
ReleaseLayout,
SystemLayout,
SeasonPassLayout,
UpdateLayout,
NotFoundView) {
return Marionette.Controller.extend({
series: function () {
@ -31,7 +42,7 @@ define(
seriesDetails: function (query) {
var series = SeriesCollection.where({titleSlug: query});
if (series.length != 0) {
if (series.length !== 0) {
var targetSeries = series[0];
this._setTitle(targetSeries.get('title'));
App.mainRegion.show(new SeriesDetailsLayout({ model: targetSeries }));
@ -53,7 +64,7 @@ define(
settings: function (action) {
this._setTitle('Settings');
App.mainRegion.show(new SettingsLayout({action: action}));
App.mainRegion.show(new SettingsLayout({ action: action }));
},
missing: function () {
@ -73,21 +84,9 @@ define(
App.mainRegion.show(new ReleaseLayout());
},
logs: function (action) {
if (action) {
this._setTitle('log files');
App.mainRegion.show(new LogFileLayout());
}
else {
this._setTitle('logs');
App.mainRegion.show(new LogsLayout());
}
},
system: function () {
this._setTitle('system');
App.mainRegion.show(new SystemLayout());
system: function (action) {
this._setTitle('System');
App.mainRegion.show(new SystemLayout({ action: action }));
},
seasonPass: function () {

@ -1,53 +0,0 @@
@import "../Content/FontAwesome/font-awesome";
@import "../Shared/Styles/clickable";
#logs-screen {
.log-time-cell{
width: 80px;
}
.log-level-cell{
width: 12px;
font-size: 14px;
}
td{
font-size: 13px;
}
.icon-info:before {
.icon(@info-sign);
color : dodgerblue;
}
.icon-debug:before {
.icon(@info-sign);
color : gray;
}
.icon-trace:before {
.icon(@info-sign);
color : lightgrey;
}
.icon-warn:before {
.icon(@exclamation-sign);
color : orange;
}
.icon-error:before {
.icon(@bug);
color : red;
}
.icon-fatal:before {
.icon(@remove-sign);
color : purple;
}
}
.log-file-row {
.clickable;
}

@ -2,6 +2,7 @@
require(
[
'app',
'backbone',
'marionette',
'Controller',
'Series/SeriesCollection',
@ -10,7 +11,16 @@ require(
'Navbar/NavbarView',
'jQuery/RouteBinder',
'jquery'
], function (App, Marionette, Controller, SeriesCollection, ProgressMessageCollection, CommandMessengerCollectionView, NavbarView, RouterBinder, $) {
], function (App,
Backbone,
Marionette,
Controller,
SeriesCollection,
ProgressMessageCollection,
CommandMessengerCollectionView,
NavbarView,
RouterBinder,
$) {
var Router = Marionette.AppRouter.extend({
@ -26,12 +36,10 @@ require(
'settings/:action(/:query)' : 'settings',
'missing' : 'missing',
'history' : 'history',
'logs' : 'logs',
'logs/:action' : 'logs',
'rss' : 'rss',
'system' : 'system',
'system/:action' : 'system',
'seasonpass' : 'seasonPass',
'update' : 'update',
':whatever' : 'notFound'
}
});

@ -0,0 +1,14 @@
'use strict';
define(
[
'marionette',
'System/StatusModel'
], function (Marionette, StatusModel) {
return Marionette.ItemView.extend({
template: 'System/About/AboutViewTemplate',
initialize: function () {
this.model = StatusModel;
}
});
});

@ -1,9 +0,0 @@
'use strict';
define(
[
'marionette'
], function (Marionette) {
return Marionette.ItemView.extend({
template: 'System/About/ViewTemplate'
});
});

@ -1,63 +0,0 @@
'use strict';
define(
[
'app',
'marionette',
'System/StatusModel',
'System/About/View',
'Logs/Layout',
'Shared/Toolbar/ToolbarLayout'
], function (App,
Marionette,
StatusModel,
AboutView,
LogsLayout,
ToolbarLayout) {
return Marionette.Layout.extend({
template: 'System/LayoutTemplate',
regions: {
toolbar : '#toolbar',
about : '#about',
loading : '#loading'
},
leftSideButtons: {
type : 'default',
storeState: false,
items :
[
{
title: 'Logs',
icon : 'icon-book',
route: 'logs'
},
{
title : 'Updates',
icon : 'icon-upload-alt',
route : 'update'
}
]
},
initialize: function () {
this.statusModel = StatusModel;
},
onRender: function () {
this._showToolbar();
this.about.show(new AboutView({ model: this.statusModel }));
},
_showToolbar: function () {
this.toolbar.show(new ToolbarLayout({
left :
[
this.leftSideButtons
],
context: this
}));
}
});
});

@ -1,17 +0,0 @@
<div class="row">
<div class="span12">
<div id="toolbar"></div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="about"></div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="loading"></div>
</div>
</div>

@ -6,6 +6,6 @@ define(
'marionette'
], function (App, Marionette) {
return Marionette.ItemView.extend({
template: 'Logs/Files/ContentsViewTemplate'
template: 'System/Logs/Files/ContentsViewTemplate'
});
});

@ -1,5 +1,6 @@
'use strict';
define(['Logs/Files/Model' ],
define(['System/Logs/Files/LogFileModel' ],
function (LogFileModel) {
return Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/log/files',

@ -4,16 +4,17 @@ define(
'app',
'marionette',
'backgrid',
'Logs/Files/FilenameCell',
'System/Logs/Files/FilenameCell',
'Cells/RelativeDateCell',
'Logs/Files/Collection',
'Logs/Files/Row',
'Logs/Files/ContentsView',
'Logs/Files/ContentsModel',
'Shared/Toolbar/ToolbarLayout'
], function (App, Marionette, Backgrid, FilenameCell, RelativeDateCell, LogFileCollection, LogFileRow, ContentsView, ContentsModel, ToolbarLayout) {
'System/Logs/Files/LogFileCollection',
'System/Logs/Files/Row',
'System/Logs/Files/ContentsView',
'System/Logs/Files/ContentsModel',
'Shared/Toolbar/ToolbarLayout',
'Shared/LoadingView'
], function (App, Marionette, Backgrid, FilenameCell, RelativeDateCell, LogFileCollection, LogFileRow, ContentsView, ContentsModel, ToolbarLayout, LoadingView) {
return Marionette.Layout.extend({
template: 'Logs/Files/LayoutTemplate',
template: 'System/Logs/Files/LogFileLayoutTemplate',
regions: {
toolbar : '#x-toolbar',
@ -38,8 +39,8 @@ define(
initialize: function () {
this.collection = new LogFileCollection();
App.vent.on(App.Commands.ShowLogFile, this._showLogFile, this);
App.vent.on(App.Events.CommandComplete, this._commandComplete, this);
},
onShow: function () {
@ -51,15 +52,19 @@ define(
_fetchAndShow: function () {
var self = this;
this.contents.close();
var promise = this.collection.fetch();
promise.done(function () {
self._showLogFile({ model: self.collection.first() });
if (self.collection.length > 0) {
self._showLogFile({ model: self.collection.first() });
}
});
},
_showToolbar: function () {
var leftSideButtons = {
var rightSideButtons = {
type : 'default',
storeState: false,
items :
@ -76,17 +81,15 @@ define(
icon : 'icon-trash',
command : 'deleteLogFiles',
successMessage : 'Log files have been deleted',
errorMessage : 'Failed to delete log files',
ownerContext : this,
onSuccess: this._refreshLogs
errorMessage : 'Failed to delete log files'
}
]
};
this.toolbar.show(new ToolbarLayout({
left :
right :
[
leftSideButtons
rightSideButtons
],
context: this
}));
@ -102,8 +105,7 @@ define(
},
_showLogFile: function (options) {
this.contents.close();
this.contents.show(new LoadingView());
if (!options.model) {
return;
@ -127,6 +129,12 @@ define(
_refreshLogs: function () {
this._fetchAndShow();
},
_commandComplete: function (options) {
if (options.command.get('name') === 'deletelogfiles') {
this._refreshLogs();
}
}
});
});

@ -1,12 +1,12 @@
<div id="x-toolbar"/>
<div class="row">
<div class="span12">
<div class="span10">
<div id="x-grid"/>
</div>
</div>
<div class="row">
<div class="span12">
<div class="span10">
<div id="x-contents"/>
</div>
</div>

@ -0,0 +1,21 @@
@import "../../Shared/Styles/clickable";
#logs-screen {
.log-time-cell{
width: 80px;
}
.log-level-cell{
width: 12px;
font-size: 14px;
}
td{
font-size: 13px;
}
}
.log-file-row {
.clickable;
}

@ -1,5 +1,7 @@
'use strict';
define(['backbone.pageable', 'Logs/Model', ], function (PagableCollection, LogsModel) {
define(['backbone.pageable', 'System/Logs/LogsModel'],
function (PagableCollection, LogsModel) {
return PagableCollection.extend({
url : window.NzbDrone.ApiRoot + '/log',
model: LogsModel,

@ -0,0 +1,48 @@
'use strict';
define(
[
'marionette',
'System/Logs/Table/LogsTableLayout',
'System/Logs/Files/LogFileLayout'
], function (Marionette, LogsTableLayout, LogsFileLayout) {
return Marionette.Layout.extend({
template: 'System/Logs/LogsLayoutTemplate',
ui: {
tableTab: '.x-table-tab',
filesTab: '.x-files-tab'
},
regions: {
table: '#table',
files: '#files'
},
events: {
'click .x-table-tab': '_showTable',
'click .x-files-tab': '_showFiles'
},
onShow: function () {
this._showTable();
},
_showTable: function (e) {
if (e) {
e.preventDefault();
}
this.ui.tableTab.tab('show');
this.table.show(new LogsTableLayout());
},
_showFiles: function (e) {
if (e) {
e.preventDefault();
}
this.ui.filesTab.tab('show');
this.files.show(new LogsFileLayout());
}
});
});

@ -0,0 +1,11 @@
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a href="#table" class="x-table-tab no-router">Table</a></li>
<li><a href="#files" class="x-files-tab no-router">Files</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="table"></div>
<div class="tab-pane" id="files"></div>
</div>
</div>

@ -3,14 +3,15 @@ define(
[
'marionette',
'backgrid',
'Logs/LogTimeCell',
'Logs/LogLevelCell',
'System/Logs/Table/LogTimeCell',
'System/Logs/Table/LogLevelCell',
'Shared/Grid/Pager',
'Logs/Collection',
'Shared/Toolbar/ToolbarLayout'
], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection, ToolbarLayout) {
'System/Logs/LogsCollection',
'Shared/Toolbar/ToolbarLayout',
'Shared/LoadingView'
], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection, ToolbarLayout, LoadingView) {
return Marionette.Layout.extend({
template: 'Logs/LayoutTemplate',
template: 'System/Logs/Table/LogsTableLayoutTemplate',
regions: {
grid : '#x-grid',
@ -55,16 +56,25 @@ define(
initialize: function () {
this.collection = new LogCollection();
this.collection.fetch();
this.collectionPromise = this.collection.fetch();
},
onRender: function () {
this.grid.show(new LoadingView());
},
onShow: function () {
var self = this;
this._showToolbar();
this._showTable();
this.collectionPromise.done(function () {
self._showTable();
});
},
_showTable: function () {
_showTable: function () {
this.grid.show(new Backgrid.Grid({
row : Backgrid.Row,
columns : this.columns,
@ -79,7 +89,7 @@ define(
},
_showToolbar: function () {
var leftSideButtons = {
var rightSideButtons = {
type : 'default',
storeState: false,
items :
@ -99,20 +109,14 @@ define(
errorMessage : 'Failed to clear logs',
ownerContext : this,
onSuccess : this._refreshLogs
},
{
title: 'Files',
icon : 'icon-file',
route: 'logs/files'
}
]
};
this.toolbar.show(new ToolbarLayout({
left :
right :
[
leftSideButtons
rightSideButtons
],
context: this
}));

@ -1,11 +1,11 @@
<div id="x-toolbar"/>
<div class="row">
<div class="span12">
<div class="span10">
<div id="x-grid"/>
</div>
</div>
<div class="row">
<div class="span12">
<div class="span10">
<div id="x-pager"/>
</div>
</div>

@ -4,12 +4,12 @@ define(
'backbone'
], function (Backbone) {
var model = Backbone.Model.extend({
var StatusModel = Backbone.Model.extend({
url: window.NzbDrone.ApiRoot + '/system/status'
});
var instance = new model();
var instance = new StatusModel();
instance.fetch();
return instance;
});

@ -0,0 +1,91 @@
'use strict';
define(
[
'app',
'marionette',
'System/About/AboutView',
'System/Logs/LogsLayout',
'System/Update/UpdateLayout'
], function (App,
Marionette,
AboutView,
LogsLayout,
UpdateLayout) {
return Marionette.Layout.extend({
template: 'System/SystemLayoutTemplate',
regions: {
about : '#about',
logs : '#logs',
updates : '#updates'
},
ui: {
aboutTab : '.x-about-tab',
logsTab : '.x-logs-tab',
updatesTab: '.x-updates-tab'
},
events: {
'click .x-about-tab' : '_showAbout',
'click .x-logs-tab' : '_showLogs',
'click .x-updates-tab': '_showUpdates'
},
initialize: function (options) {
if (options.action) {
this.action = options.action.toLowerCase();
}
},
onShow: function () {
switch (this.action) {
case 'logs':
this._showLogs();
break;
case 'updates':
this._showUpdates();
break;
default:
this._showAbout();
}
},
_navigate:function(route){
require(['Router'], function(){
App.Router.navigate(route);
});
},
_showAbout: function (e) {
if (e) {
e.preventDefault();
}
this.about.show(new AboutView());
this.ui.aboutTab.tab('show');
this._navigate('system/about');
},
_showLogs: function (e) {
if (e) {
e.preventDefault();
}
this.logs.show(new LogsLayout());
this.ui.logsTab.tab('show');
this._navigate('system/logs');
},
_showUpdates: function (e) {
if (e) {
e.preventDefault();
}
this.updates.show(new UpdateLayout());
this.ui.updatesTab.tab('show');
this._navigate('system/updates');
}
});
});

@ -0,0 +1,11 @@
<ul class="nav nav-tabs">
<li><a href="#about" class="x-about-tab no-router">About</a></li>
<li><a href="#logs" class="x-logs-tab no-router">Logs</a></li>
<li><a href="#updates" class="x-updates-tab no-router">Updates</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="about"></div>
<div class="tab-pane" id="logs"></div>
<div class="tab-pane" id="updates"></div>
</div>

@ -2,7 +2,7 @@
define(
[
'backbone',
'Update/UpdateModel'
'System/Update/UpdateModel'
], function (Backbone, UpdateModel) {
return Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/update',

@ -2,7 +2,7 @@
define(
[
'marionette',
'Update/UpdateItemView'
'System/Update/UpdateItemView'
], function (Marionette, UpdateItemView) {
return Marionette.CollectionView.extend({
itemView: UpdateItemView

@ -6,6 +6,6 @@ define(
'marionette'
], function (App, Marionette) {
return Marionette.ItemView.extend({
template: 'Update/UpdateItemViewTemplate'
template: 'System/Update/UpdateItemViewTemplate'
});
});

@ -3,13 +3,13 @@ define(
[
'marionette',
'backgrid',
'Update/UpdateCollection',
'Update/UpdateCollectionView',
'System/Update/UpdateCollection',
'System/Update/UpdateCollectionView',
'Shared/Toolbar/ToolbarLayout',
'Shared/LoadingView'
], function (Marionette, Backgrid, UpdateCollection, UpdateCollectionView, ToolbarLayout, LoadingView) {
return Marionette.Layout.extend({
template: 'Update/UpdateLayoutTemplate',
template: 'System/Update/UpdateLayoutTemplate',
regions: {
updates: '#x-updates',

@ -11,11 +11,11 @@
<link href="/Content/theme.css" rel='stylesheet' type='text/css'/>
<link href="/Cells/cells.css" rel='stylesheet' type='text/css'>
<link href="/Series/series.css" rel='stylesheet' type='text/css'/>
<link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
<link href="/System/Logs/logs.css" rel='stylesheet' type='text/css'/>
<link href="/Settings/settings.css" rel='stylesheet' type='text/css'/>
<link href="/AddSeries/addSeries.css" rel='stylesheet' type='text/css'/>
<link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/>
<link href="/Update/update.css" rel='stylesheet' type='text/css'/>
<link href="/System/Update/update.css" rel='stylesheet' type='text/css'/>
<link href="/Content/overrides.css" rel='stylesheet' type='text/css'/>
<link rel="apple-touch-icon" href="/Content/Images/touch/57.png"/>

Loading…
Cancel
Save