[WebUI] Add a way to change themes

Currently, the only way to change the themes is by manually set a value
in the `web.conf` file itself.

Closes: https://dev.deluge-torrent.org/ticket/3536

3 files changed, 94 insertions, 6 deletions

diff --git a/deluge/ui/web/js/deluge-all/preferences/InterfacePage.js b/deluge/ui/web/js/deluge-all/preferences/InterfacePage.js
index 1b710f2db..a5a7909f9 100644
--- a/deluge/ui/web/js/deluge-all/preferences/InterfacePage.js
+++ b/deluge/ui/web/js/deluge-all/preferences/InterfacePage.js
@@ -88,6 +88,33 @@ Deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
             })
         );
 
+        var themePanel = this.add({
+            xtype: 'fieldset',
+            border: false,
+            title: _('Theme'),
+            style: 'margin-bottom: 0px; padding-bottom: 5px; padding-top: 5px',
+            autoHeight: true,
+            labelWidth: 1,
+            defaultType: 'checkbox',
+        });
+        this.theme = om.bind(
+            'theme',
+            themePanel.add({
+                xtype: 'combo',
+                name: 'theme',
+                labelSeparator: '',
+                mode: 'local',
+                width: 200,
+                store: new Ext.data.ArrayStore({
+                    fields: ['id', 'text'],
+                }),
+                editable: false,
+                triggerAction: 'all',
+                valueField: 'id',
+                displayField: 'text',
+            })
+        );
+
         fieldset = this.add({
             xtype: 'fieldset',
             border: false,
@@ -217,6 +244,24 @@ Deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
                     icon: Ext.MessageBox.QUESTION,
                 });
             }
+            if ('theme' in changed) {
+                deluge.client.web.set_theme(changed['theme']);
+                Ext.Msg.show({
+                    title: _('WebUI Theme Changed'),
+                    msg: _(
+                        'Do you want to refresh the page now to use the new theme?'
+                    ),
+                    buttons: {
+                        yes: _('Refresh'),
+                        no: _('Close'),
+                    },
+                    multiline: false,
+                    fn: function (btnText) {
+                        if (btnText === 'yes') location.reload();
+                    },
+                    icon: Ext.MessageBox.QUESTION,
+                });
+            }
         }
         if (this.oldPassword.getValue() || this.newPassword.getValue()) {
             this.onPasswordChange();
@@ -237,6 +282,11 @@ Deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
         this.language.setValue(this.optionsManager.get('language'));
     },
 
+    onGotThemes: function (info, obj, response, request) {
+        this.theme.store.loadData(info);
+        this.theme.setValue(this.optionsManager.get('theme'));
+    },
+
     onPasswordChange: function () {
         var newPassword = this.newPassword.getValue();
         if (newPassword != this.confirmPassword.getValue()) {
@@ -295,6 +345,10 @@ Deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
             success: this.onGotLanguages,
             scope: this,
         });
+        deluge.client.webutils.get_themes({
+            success: this.onGotThemes,
+            scope: this,
+        });
     },
 
     onSSLCheck: function (e, checked) {
diff --git a/deluge/ui/web/json_api.py b/deluge/ui/web/json_api.py
index ea8105db4..ea34efb86 100644
--- a/deluge/ui/web/json_api.py
+++ b/deluge/ui/web/json_api.py
@@ -982,6 +982,16 @@ class WebApi(JSONComponent):
         """
         return self.event_queue.get_events(__request__.session_id)
 
+    @export
+    def set_theme(self, theme):
+        """
+        Sets a new Theme to the WebUI
+
+        Args:
+            theme (str): the theme to apply
+        """
+        component.get('DelugeWeb').set_theme(theme)
+
 
 class WebUtils(JSONComponent):
     """
@@ -1000,3 +1010,13 @@ class WebUtils(JSONComponent):
              list: of tuples ``[(lang-id, language-name), ...]``
         """
         return get_languages()
+
+    @export
+    def get_themes(self):
+        """
+        Get the available themes
+
+        Returns:
+            list: of themes ``[theme1, theme2, ...]``
+        """
+        return component.get('DelugeWeb').get_themes_list()
diff --git a/deluge/ui/web/server.py b/deluge/ui/web/server.py
index 77c1ddf60..9518f8560 100644
--- a/deluge/ui/web/server.py
+++ b/deluge/ui/web/server.py
@@ -540,14 +540,19 @@ class TopLevel(resource.Resource):
         self.putChild(b'tracker', Tracker())
 
         theme = component.get('DelugeWeb').config['theme']
-        if not os.path.isfile(rpath('themes', 'css', 'xtheme-%s.css' % theme)):
+        if not os.path.isfile(rpath('themes', 'css', f'xtheme-{theme}.css')):
             theme = CONFIG_DEFAULTS.get('theme')
-        self.__stylesheets.insert(1, 'themes/css/xtheme-%s.css' % theme)
+        self.__stylesheets.insert(1, f'themes/css/xtheme-{theme}.css')
 
     @property
     def stylesheets(self):
         return self.__stylesheets
 
+    def change_theme(self, theme: str):
+        if not os.path.isfile(rpath('themes', 'css', f'xtheme-{theme}.css')):
+            theme = CONFIG_DEFAULTS.get('theme')
+        self.__stylesheets[1] = f'themes/css/xtheme-{theme}.css'
+
     def add_script(self, script):
         """
         Adds a script to the server so it is included in the <head> element
@@ -741,8 +746,8 @@ class DelugeWeb(component.Component):
     def start_normal(self):
         self.socket = reactor.listenTCP(self.port, self.site, interface=self.interface)
         ip = self.socket.getHost().host
-        ip = '[%s]' % ip if is_ipv6(ip) else ip
-        log.info('Serving at http://%s:%s%s', ip, self.port, self.base)
+        ip = f'[{ip}]' if is_ipv6(ip) else ip
+        log.info(f'Serving at http://{ip}:{self.port}{self.base}')
 
     def start_ssl(self):
         check_ssl_keys()
@@ -758,8 +763,8 @@ class DelugeWeb(component.Component):
             interface=self.interface,
         )
         ip = self.socket.getHost().host
-        ip = '[%s]' % ip if is_ipv6(ip) else ip
-        log.info('Serving at https://%s:%s%s', ip, self.port, self.base)
+        ip = f'[{ip}]' if is_ipv6(ip) else ip
+        log.info(f'Serving at https://{ip}:{self.port}{self.base}')
 
     def stop(self):
         log.info('Shutting down webserver')
@@ -789,6 +794,15 @@ class DelugeWeb(component.Component):
         config['language'] = CONFIG_DEFAULTS['language']
         return config
 
+    def get_themes_list(self):
+        return [
+            (file[7:-4], _(file[7:-4].capitalize()))
+            for file in os.listdir(rpath('themes', 'css'))
+        ]
+
+    def set_theme(self, theme: str):
+        self.top_level.change_theme(theme)
+
 
 if __name__ == '__builtin__':
     deluge_web = DelugeWeb()