Start work on the color preferences UI

imgsrc/srv/check.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"/></svg>

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=<module name>
+    # 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:

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():

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)