[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
This commit is contained in:
parent
d9ef65d745
commit
848d668af9
|
@ -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) {
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in New Issue