From dc2af41e16e9bf7133651a34574a2a4f2106cf09 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Tue, 24 Sep 2013 21:51:44 -0700 Subject: [PATCH] Advanced settings! SSL and branch --- UI/Config.js | 5 +- .../Overrides/bootstrap.toggle-switch.less | 6 +- UI/Settings/General/GeneralTemplate.html | 56 +++++-- UI/Settings/General/GeneralView.js | 62 +++++--- UI/Settings/SettingsLayout.js | 140 +++++++++++------- UI/Settings/SettingsLayoutTemplate.html | 13 ++ UI/Settings/settings.less | 36 ++++- 7 files changed, 227 insertions(+), 91 deletions(-) diff --git a/UI/Config.js b/UI/Config.js index f0d8c4722..e5409f25b 100644 --- a/UI/Config.js +++ b/UI/Config.js @@ -12,6 +12,10 @@ define( DefaultRootFolderId: 'DefaultRootFolderId' }, + getValueBoolean: function (key, defaultValue) { + return this.getValue(key, defaultValue) === 'true'; + }, + getValue: function (key, defaultValue) { var storeValue = localStorage.getItem(key); @@ -35,6 +39,5 @@ define( App.vent.trigger(this.Events.ConfigUpdatedEvent, {key: key, value: value}); } - }; }); diff --git a/UI/Content/Overrides/bootstrap.toggle-switch.less b/UI/Content/Overrides/bootstrap.toggle-switch.less index 153ff546d..1c8da8516 100644 --- a/UI/Content/Overrides/bootstrap.toggle-switch.less +++ b/UI/Content/Overrides/bootstrap.toggle-switch.less @@ -5,7 +5,7 @@ .slide-button { .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); - &.btn-danger { + &.btn-danger, &.btn-warning { .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); } } @@ -16,5 +16,9 @@ &.btn-danger { .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); } + + &.btn-warning { + .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); + } } } \ No newline at end of file diff --git a/UI/Settings/General/GeneralTemplate.html b/UI/Settings/General/GeneralTemplate.html index bb9de7626..01b9c40d1 100644 --- a/UI/Settings/General/GeneralTemplate.html +++ b/UI/Settings/General/GeneralTemplate.html @@ -7,11 +7,49 @@
- - - + + +
+ + +
+ +
+
+ +
+
+ + +
+ +
+
+ +
+ + +
+ +
+
@@ -29,9 +67,9 @@
- - - + + +
@@ -51,7 +89,7 @@ - +
@@ -91,8 +129,7 @@ - {{#unless_eq branch compare="master"}} -
+
Development
@@ -106,5 +143,4 @@
- {{/unless_eq}} diff --git a/UI/Settings/General/GeneralView.js b/UI/Settings/General/GeneralView.js index 56900fb50..6971dc5f5 100644 --- a/UI/Settings/General/GeneralView.js +++ b/UI/Settings/General/GeneralView.js @@ -5,38 +5,56 @@ define( 'Mixins/AsModelBoundView' ], function (Marionette, AsModelBoundView) { var view = Marionette.ItemView.extend({ - template: 'Settings/General/GeneralTemplate', + template: 'Settings/General/GeneralTemplate', + + events: { + 'change .x-auth': '_setAuthOptionsVisibility', + 'change .x-ssl': '_setSslOptionsVisibility' + }, + + ui: { + authToggle : '.x-auth', + authOptions: '.x-auth-options', + sslToggle : '.x-ssl', + sslOptions: '.x-ssl-options' + }, + + onRender: function(){ + if(!this.ui.authToggle.prop('checked')){ + this.ui.authOptions.hide(); + } - events: { - 'change .x-auth': '_setAuthOptionsVisibility' - }, + if(!this.ui.sslToggle.prop('checked')){ + this.ui.sslOptions.hide(); + } + }, - ui: { - authToggle : '.x-auth', - authOptions: '.x-auth-options' - }, + _setAuthOptionsVisibility: function () { + var showAuthOptions = this.ui.authToggle.prop('checked'); - onRender: function(){ - if(!this.ui.authToggle.prop('checked')){ - this.ui.authOptions.hide(); - } - }, + if (showAuthOptions) { + this.ui.authOptions.slideDown(); + } - _setAuthOptionsVisibility: function () { + else { + this.ui.authOptions.slideUp(); + } + }, - var showAuthOptions = this.ui.authToggle.prop('checked'); + _setSslOptionsVisibility: function () { - if (showAuthOptions) { - this.ui.authOptions.slideDown(); - } + var showSslOptions = this.ui.sslToggle.prop('checked'); - else { - this.ui.authOptions.slideUp(); - } + if (showSslOptions) { + this.ui.sslOptions.slideDown(); } - }); + else { + this.ui.sslOptions.slideUp(); + } + } + }); return AsModelBoundView.call(view); }); diff --git a/UI/Settings/SettingsLayout.js b/UI/Settings/SettingsLayout.js index f7c10c7a2..dd90b9a38 100644 --- a/UI/Settings/SettingsLayout.js +++ b/UI/Settings/SettingsLayout.js @@ -14,7 +14,8 @@ define( 'Settings/Notifications/CollectionView', 'Settings/Notifications/Collection', 'Settings/General/GeneralView', - 'Shared/LoadingView' + 'Shared/LoadingView', + 'Config' ], function (App, Marionette, SettingsModel, @@ -28,7 +29,8 @@ define( NotificationCollectionView, NotificationCollection, GeneralView, - LoadingView) { + LoadingView, + Config) { return Marionette.Layout.extend({ template: 'Settings/SettingsLayoutTemplate', @@ -48,7 +50,8 @@ define( indexersTab : '.x-indexers-tab', downloadClientTab : '.x-download-client-tab', notificationsTab : '.x-notifications-tab', - generalTab : '.x-general-tab' + generalTab : '.x-general-tab', + advancedSettings : '.x-advanced-settings' }, events: { @@ -58,7 +61,67 @@ define( 'click .x-download-client-tab' : '_showDownloadClient', 'click .x-notifications-tab' : '_showNotifications', 'click .x-general-tab' : '_showGeneral', - 'click .x-save-settings' : '_save' + 'click .x-save-settings' : '_save', + 'change .x-advanced-settings' : '_toggleAdvancedSettings' + }, + + initialize: function (options) { + if (options.action) { + this.action = options.action.toLowerCase(); + } + }, + + onRender: function () { + this.loading.show(new LoadingView()); + var self = this; + + this.settings = new SettingsModel(); + this.generalSettings = new GeneralSettingsModel(); + this.namingSettings = new NamingModel(); + this.indexerSettings = new IndexerCollection(); + this.notificationSettings = new NotificationCollection(); + + $.when(this.settings.fetch(), + this.generalSettings.fetch(), + this.namingSettings.fetch(), + this.indexerSettings.fetch(), + this.notificationSettings.fetch() + ).done(function () { + self.loading.$el.hide(); + self.mediaManagement.show(new MediaManagementLayout({ settings: self.settings, namingSettings: self.namingSettings })); + self.quality.show(new QualityLayout({ settings: self.settings })); + self.indexers.show(new IndexerLayout({ settings: self.settings, indexersCollection: self.indexerSettings })); + self.downloadClient.show(new DownloadClientLayout({ model: self.settings })); + self.notifications.show(new NotificationCollectionView({ collection: self.notificationSettings })); + self.general.show(new GeneralView({ model: self.generalSettings })); + }); + + this._setAdvancedSettingsState(); + }, + + onShow: function () { + switch (this.action) { + case 'quality': + this._showQuality(); + break; + case 'indexers': + this._showIndexers(); + break; + case 'downloadclient': + this._showDownloadClient(); + break; + case 'connect': + this._showNotifications(); + break; + case 'notifications': + this._showNotifications(); + break; + case 'general': + this._showGeneral(); + break; + default: + this._showMediaManagement(); + } }, _showMediaManagement: function (e) { @@ -121,65 +184,30 @@ define( }); }, - initialize: function (options) { - if (options.action) { - this.action = options.action.toLowerCase(); - } + _save: function () { + App.vent.trigger(App.Commands.SaveSettings); }, - onRender: function () { - this.loading.show(new LoadingView()); - var self = this; - - this.settings = new SettingsModel(); - this.generalSettings = new GeneralSettingsModel(); - this.namingSettings = new NamingModel(); - this.indexerSettings = new IndexerCollection(); - this.notificationSettings = new NotificationCollection(); + _setAdvancedSettingsState: function () { + var checked = Config.getValueBoolean('advancedSettings'); + this.ui.advancedSettings.prop('checked', checked); - $.when(this.settings.fetch(), - this.generalSettings.fetch(), - this.namingSettings.fetch(), - this.indexerSettings.fetch(), - this.notificationSettings.fetch() - ).done(function () { - self.loading.$el.hide(); - self.mediaManagement.show(new MediaManagementLayout({ settings: self.settings, namingSettings: self.namingSettings })); - self.quality.show(new QualityLayout({settings: self.settings})); - self.indexers.show(new IndexerLayout({ settings: self.settings, indexersCollection: self.indexerSettings })); - self.downloadClient.show(new DownloadClientLayout({model: self.settings})); - self.notifications.show(new NotificationCollectionView({collection: self.notificationSettings})); - self.general.show(new GeneralView({model: self.generalSettings})); - }); + if (checked) { + this.$el.addClass('show-advanced-settings'); + } }, - onShow: function () { - switch (this.action) { - case 'quality': - this._showQuality(); - break; - case 'indexers': - this._showIndexers(); - break; - case 'downloadclient': - this._showDownloadClient(); - break; - case 'connect': - this._showNotifications(); - break; - case 'notifications': - this._showNotifications(); - break; - case 'general': - this._showGeneral(); - break; - default: - this._showMediaManagement(); + _toggleAdvancedSettings: function () { + var checked = this.ui.advancedSettings.prop('checked'); + Config.setValue('advancedSettings', checked); + + if (checked) { + this.$el.addClass('show-advanced-settings'); } - }, - _save: function () { - App.vent.trigger(App.Commands.SaveSettings); + else { + this.$el.removeClass('show-advanced-settings'); + } } }); }); diff --git a/UI/Settings/SettingsLayoutTemplate.html b/UI/Settings/SettingsLayoutTemplate.html index 6264503ac..c5f22dd23 100644 --- a/UI/Settings/SettingsLayoutTemplate.html +++ b/UI/Settings/SettingsLayoutTemplate.html @@ -6,6 +6,19 @@
  • Connect
  • General
    • +
  • +
    • diff --git a/UI/Settings/settings.less b/UI/Settings/settings.less index e1d594cc2..5addfd8fb 100644 --- a/UI/Settings/settings.less +++ b/UI/Settings/settings.less @@ -1,5 +1,5 @@ +@import "../Content/Bootstrap/variables"; @import "../Shared/Styles/clickable.less"; - @import "Indexers/indexers"; @import "Quality/quality"; @import "Notifications/notifications"; @@ -43,4 +43,38 @@ li.save-and-add:hover { .naming-example { display: inline-block; margin-top: 5px; +} + +.advanced-settings-toggle { + margin-right: 40px; + + .checkbox { + width : 100px; + margin-left : 0px; + display : inline-block; + padding-top : 0px; + margin-bottom : 0px; + margin-top : -1px; + } + + .help-inline-checkbox { + display : inline-block; + margin-top : -23px; + margin-bottom : 0; + vertical-align : middle; + } +} + +.advanced-setting { + display: none; + + .control-label { + color: @warningText; + } +} + +.show-advanced-settings { + .advanced-setting { + display: block; + } } \ No newline at end of file