From 73585a5dc0d1faf487417b906a5da37379bd5c26 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Thu, 22 Sep 2016 11:06:45 +0530 Subject: [PATCH] Start work on the color preferences UI --- imgsrc/srv/check.svg | 1 + src/pyj/book_list/ui.pyj | 8 +++- src/pyj/read_book/globals.pyj | 4 +- src/pyj/read_book/prefs.pyj | 74 +++++++++++++++++++++++++++++++++-- 4 files changed, 80 insertions(+), 7 deletions(-) create mode 100644 imgsrc/srv/check.svg diff --git a/imgsrc/srv/check.svg b/imgsrc/srv/check.svg new file mode 100644 index 0000000000..916c749876 --- /dev/null +++ b/imgsrc/srv/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pyj/book_list/ui.pyj b/src/pyj/book_list/ui.pyj index bb049319ac..bb2a067219 100644 --- a/src/pyj/book_list/ui.pyj +++ b/src/pyj/book_list/ui.pyj @@ -88,6 +88,10 @@ def change_library_actions(): class DevelopPanel: + # To use, go to URL: + # http://localhost:8080/?panel=develop-widgets&widget_module= + # Implement the develop(container) method in that module. + def __init__(self, interface_data, book_list_container): c = E.div() book_list_container.appendChild(c) @@ -110,8 +114,8 @@ class DevelopPanel: m = q.widget_module if m: m = get_module(m) - if m?.main: - m.main(self.container) + if m?.develop: + m.develop(self.container) class UI: diff --git a/src/pyj/read_book/globals.pyj b/src/pyj/read_book/globals.pyj index 4401a56103..d2a92835a0 100644 --- a/src/pyj/read_book/globals.pyj +++ b/src/pyj/read_book/globals.pyj @@ -55,8 +55,8 @@ def set_current_spine_item(val): default_color_schemes = { 'white':{'foreground':'black', 'background':'white', 'name':_('White')}, 'black':{'foreground':'white', 'background':'black', 'name':_('Black')}, - 'sepia-light':{'foreground':'#643b0f', 'background':'#2a2c05', 'name':_('Sepia Light')}, - 'sepia-dark':{'background':'#643b0f', 'foreground':'#2a2c05', 'name':_('Sepia Dark')}, + 'sepia-light':{'foreground':'#39322B', 'background':'#F6F3E9', 'name':_('Sepia Light')}, + 'sepia-dark': {'background':'#39322B', 'foreground':'#F6F3E9', 'name':_('Sepia Dark')}, } register_callback(def(): diff --git a/src/pyj/read_book/prefs.pyj b/src/pyj/read_book/prefs.pyj index 47f6d1c616..115f89a1ca 100644 --- a/src/pyj/read_book/prefs.pyj +++ b/src/pyj/read_book/prefs.pyj @@ -3,14 +3,63 @@ from __python__ import hash_literals, bound_methods from gettext import gettext as _ -from dom import svgicon, ensure_id, clear +from dom import svgicon, ensure_id, clear, set_css, add_extra_css, build_rule from elementmaker import E from book_list.item_list import build_list, create_item +from book_list.globals import get_session_data +from read_book.globals import default_color_schemes + +# Colors {{{ +add_extra_css(def(): + sel = 'ul.color-preferences-list' + style = build_rule(sel, list_style_type='none', display='flex', flex_wrap='wrap') + sel += ' > li' + style += build_rule(sel, padding='1ex 1rem', margin='1ex 1rem', border_radius='4px', cursor='pointer', border='solid 1px currentColor') + style += build_rule(sel + ' svg', visibility='hidden') + sel += '.current-color' + style += build_rule(sel + ' svg', visibility='visible') + return style +) + +def change_current_color(ev): + ul = ev.currentTarget.parentNode + for li in ul.childNodes: + li.setAttribute('class', 'current-color' if li is ev.currentTarget else '') + +def current_color_scheme(container): + return container.querySelector('li.current-color').getAttribute('data-name') + +def create_colors_panel(container): + container.appendChild(E.p(_('Choose a color scheme below'), style='margin:1ex 1em; padding: 1ex 0')) + all_schemes = {} + for k in default_color_schemes: + all_schemes[k] = default_color_schemes[k] + sd = get_session_data() + ucs = sd.get('user_color_schemes') + for k in ucs: + all_schemes[k] = ucs[k] + ul = E.ul(class_='color-preferences-list') + container.appendChild(ul) + for name in sorted(all_schemes, key=def(k):all_schemes[k].name;): + scheme = all_schemes[name] + item = set_css(E.li(svgicon('check'), '\xa0' + scheme.name, data_name=name, onclick=change_current_color, + class_='current-color' if name is sd.get('current_color_scheme') else ''), + color=scheme.foreground, background_color=scheme.background) + ul.appendChild(item) + +def commit_colors(onchange, container): + ccs = current_color_scheme(container) + sd = get_session_data() + if sd.get('current_color_scheme') is not ccs: + sd.set('current_color_scheme', ccs) + onchange() +# }}} class Prefs: def __init__(self, container, close_func): self.close_func = close_func + self.changes_occurred = False title = E.h2(_('Configure book reader')) self.title_id = ensure_id(title) container.appendChild(E.div( @@ -23,9 +72,15 @@ class Prefs: self.stack = v'["top"]' self.display_top(container.lastChild) + def onchange(self): + self.changes_occurred = True + def onclose(self): if self.stack.length > 1: - self.stack.pop() + which = self.stack.pop() + close_func = getattr(self, 'close_' + which, None) + if close_func: + close_func.bind(self)() self.display_panel(self.stack[-1]) else: self.close_func() @@ -48,9 +103,22 @@ class Prefs: container.appendChild(c) build_list(c, [ create_item(_('Colors'), def():self.show_panel('colors');, _('Change the colors of the page and text')), - create_item(_('Page Layout'), def():self.show_panel('layout');, _('Change the page margins and number of columns per page')), + create_item(_('Page Layout'), def():self.show_panel('layout');, _('Change the page margins and number of pages per screen')), ]) + def display_colors(self, container): + document.getElementById(self.title_id).textContent = _('Colors') + create_colors_panel(container) + + def close_colors(self): + commit_colors(self.onchange, self.container) + + def display_layout(self, container): + document.getElementById(self.title_id).textContent = _('Page Layout') + def create_prefs_panel(container, close_func): Prefs(container, close_func) + +def develop(container): + create_colors_panel(container)