diff --git a/background.html b/background.html index e5def473..6760c64d 100644 --- a/background.html +++ b/background.html @@ -413,23 +413,37 @@

{{ settings }}


-

{{ notifications }}

-

{{ notificationSettingsDialog }}

-
- - +
+

Theme

+
+ + +
+
+ + +
-
- - -
-
- - -
-
- - +
+
+

{{ notifications }}

+

{{ notificationSettingsDialog }}

+
+ + +
+
+ + +
+
+ + +
+
+ + +
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 624539da..74db50b8 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -89,9 +89,15 @@ Whisper.InboxView = Whisper.View.extend({ templateName: 'two-column', className: 'inbox', + applyTheme: function() { + var theme = storage.get('theme-setting') || 'android'; + this.$el.removeClass('ios') + .removeClass('android') + .addClass(theme); + }, initialize: function (options) { this.render(); - this.$el.addClass('android'); // theme + this.applyTheme(); new Whisper.FontSizeView({ el: this.el }); this.conversation_stack = new Whisper.ConversationStack({ el: this.$('.conversation-stack'), @@ -175,9 +181,9 @@ chrome.runtime.reload(); }, showSettings: function() { - var view = new Whisper.SettingsView().render(); - view.update(); + var view = new Whisper.SettingsView(); view.$el.appendTo(this.el); + view.$el.on('change-theme', this.applyTheme.bind(this)); }, filterContacts: function(e) { this.searchView.filterContacts(e); diff --git a/js/views/settings_view.js b/js/views/settings_view.js index 17077b42..71c5881e 100644 --- a/js/views/settings_view.js +++ b/js/views/settings_view.js @@ -5,29 +5,49 @@ 'use strict'; window.Whisper = window.Whisper || {}; - Whisper.SettingsView = Whisper.View.extend({ - className: 'settings modal', - templateName: 'settings', + var RadioButtonGroupView = Whisper.View.extend({ + initialize: function(options) { + this.name = options.name; + this.defaultValue = options.defaultValue; + this.populate(); + }, events: { - 'change': 'change', - 'click .close': 'remove' + 'change': 'change' }, change: function(e) { var value = this.$(e.target).val(); - storage.put('notification-setting', value); - console.log('notification setting changed to', value); + storage.put(this.name, value); + console.log(this.name, 'changed to', value); + this.$el.trigger('change-theme'); }, - update: function() { - var setting = storage.get('notification-setting'); - if (!setting) { - setting = 'message'; - } - this.$('#notification-setting-' + setting).attr('checked','checked'); + populate: function() { + var value = storage.get(this.name, this.defaultValue); + this.$('#' + this.name + '-' + value).attr('checked', 'checked'); + }, + }); + Whisper.SettingsView = Whisper.View.extend({ + className: 'settings modal', + templateName: 'settings', + initialize: function() { + this.render(); + new RadioButtonGroupView({ + el: this.$('.notification-settings'), + defaultValue: 'message', + name: 'notification-setting' + }); + new RadioButtonGroupView({ + el: this.$('.theme-settings'), + defaultValue: 'message', + name: 'theme-setting' + }); if (textsecure.storage.user.getDeviceId() != '1') { var syncView = new SyncView().render(); this.$('.content').append(syncView.el); } }, + events: { + 'click .close': 'remove' + }, render_attributes: function() { return { notifications: i18n('notifications'),