Viewer: Improve the UI for changing font sizes

src/pyj/read_book/prefs/font_size.pyj

@@ -7,16 +7,17 @@ from gettext import gettext as _
 
 from book_list.globals import get_session_data
 from book_list.theme import get_color
-from dom import add_extra_css, element, rule, set_css, unique_id
+from dom import add_extra_css, rule, unique_id
 from read_book.globals import ui_operations
 from widgets import create_button
 
 CONTAINER = unique_id('font-size-prefs')
-QUICK = unique_id('quick')
+MIN_FONT_SIZE = 8
+MAX_FONT_SIZE = 80
 
 add_extra_css(def():
-    style = rule(QUICK, 'li.current', background_color=get_color('window-background2'))
+    style = rule(CONTAINER, 'option.current', background_color=get_color('window-background2'))
-    style += rule(QUICK, 'li:hover', background_color=get_color('window-background2'))
+    style += rule(CONTAINER, 'option:hover', background_color=get_color('window-background2'))
     style += rule(CONTAINER, 'a:hover', color=get_color('window-hover-foreground'))
     style += rule(CONTAINER, 'a.calibre-push-button:hover', color=get_color('button-text'))
     return style
@@ -28,64 +29,98 @@ def change_font_size(sz):
         sd.set('base_font_size', sz)
         ui_operations.update_font_size()
 
-def set_quick_size(ev):
-    li = ev.currentTarget
-    sz = int(li.dataset.sz)
-    change_font_size(sz)
 
-def set_custom_size(ev):
+def apply_font_size():
-    sz = int(element(CONTAINER, 'input').value)
+    fs = int(document.getElementById(CONTAINER).dataset.cfs)
-    change_font_size(sz)
+    change_font_size(fs)
+
+
+def set_quick_size(ev):
+    newval = ev.currentTarget.value
+    try:
+        int(newval)
+    except:
+        return
+    if newval is not document.getElementById(CONTAINER).dataset.cfs:
+        display_changed_font_size(newval)
+
 
 def change_font_size_by(frac):
     sd = get_session_data()
     sz = sd.get('base_font_size')
     amt = sz * frac
-    nsz = sz + amt
+    nsz = int(sz + amt)
-    nsz = max(8, min(nsz, 80))
+    nsz = max(MIN_FONT_SIZE, min(nsz, MAX_FONT_SIZE))
     change_font_size(nsz)
 
-def show_custom_size(ev):
+
-    c = element(CONTAINER)
+def display_changed_font_size(sz):
-    for child in c.childNodes:
+    sz = max(MIN_FONT_SIZE, min(int(sz), MAX_FONT_SIZE))
-        child.style.display = 'none'
+    sz += ''
-    c.lastChild.style.display = 'block'
+    c = document.getElementById(CONTAINER)
-    c.lastChild.querySelector('input').focus()
+    c.dataset.cfs = sz
+    for option in c.querySelectorAll('option'):
+        if option.value is sz:
+            option.classList.add('current')
+        else:
+            option.classList.remove('current')
+    for input in c.querySelectorAll('input'):
+        input.value = sz
+    c.querySelector('.cfs_preview').style.fontSize = f'{sz}px'
+
 
 def create_font_size_panel(container, close):
-    container.appendChild(E.div(id=CONTAINER,
-        style='margin:15vh auto; max-width: 500px; border-radius: 8px; border: solid 1px currentColor; padding:1ex 1rem',
-        onclick=def(ev): ev.preventDefault(), ev.stopPropagation()
-    ))
-    container = container.lastChild
-    container.style.backgroundColor = get_color('window-background')
-    quick = E.ul(id=QUICK, style='display:flex; justify-content:space-around; flex-wrap: wrap; align-items: baseline; list-style: none')
-    container.appendChild(quick)
     sd = get_session_data()
     cfs = sd.get('base_font_size')
+    container.appendChild(E.div(
+        style='width: 100%; height: 100%; display: flex; justify-content: center; align-items: center',
+        E.div(
+            id=CONTAINER,
+            style='max-width: 500px; width: 80vw; border-radius: 8px; border: solid 1px currentColor; padding:1ex 1rem;',
+            onclick=def(ev): ev.preventDefault(), ev.stopPropagation()
+    )))
+    container = container.lastChild.lastChild
+    container.style.backgroundColor = get_color('window-background')
+    container.dataset.cfs = cfs + ''
+    quick = E.datalist(style='display:flex; justify-content:space-around; flex-wrap: wrap; align-items: baseline;')
+    container.appendChild(quick)
     for sz in (10, 12, 14, 16, 18, 20, 22):
-        quick.appendChild(set_css(E.li('Aa', title='{} px'.format(sz), class_='current' if cfs is sz else '', data_sz=str(sz), onclick=def(ev):set_quick_size(ev), close();),
+        quick.appendChild(E.option(
-            display='inline-block', font_size=sz + 'px', padding='5px', cursor='pointer', border_radius='2px'))
+            'Aa', title='{} px'.format(sz),
+            class_='current' if cfs is sz else '',
+            value=sz + '',
+            style=f'display: inline-block; font-size:{sz}px; padding: 5px; cursor: pointer; border-radius: 4px; margin: 0 0.5rem',
+            onclick=def(ev):
+                set_quick_size(ev)
+        ))
 
     container.appendChild(E.div(
-        E.a(_('Custom size'), class_='blue-link', href='javascript:void', onclick=show_custom_size, style='cursor:pointer'),
+        style='display: flex; margin-top: 1rem',
-        style='text-align: right; font-size: smaller; margin-top: 2ex'
+        E.input(
+            type='range', min=MIN_FONT_SIZE + '', max=MAX_FONT_SIZE + '', value=cfs + '', style='flex-grow: 4',
+            oninput=set_quick_size,
+        ),
+
+        E.span('\xa0', E.input(
+            value=f'{cfs}', type='text', oninput=set_quick_size, type='number', min=MIN_FONT_SIZE, max=MAX_FONT_SIZE,
+            step='1', style='width: 3em',
+        ), '\xa0px')
     ))
 
-    container.appendChild(E.div(style='display:none',
+    container.appendChild(E.div(
-        E.div(E.label(_('Font size (pixels):'), '\xa0', E.input(
+        style=f'font-size: {cfs}px; margin-top: 1rem; min-height: 60px; max-height: 60px; overflow: hidden; display: flex;',
-            type='number', min=8, max=60, step=1,
+        E.div(class_='cfs_preview', _('Sample to preview font size'))
-            value=sd.get('base_font_size') + '',
+    ))
-            onkeydown=def(evt):
-                if evt.key is 'Enter':
-                    evt.preventDefault()
-                    set_custom_size(), close()
-        ))),
-    E.div(style='text-align:right; margin-top:1ex; display:flex; justify-content: flex-end',
-            create_button(_('OK'), 'check', def(): set_custom_size(), close();), E.span('\xa0'),
-            create_button(_('Cancel'), action=close)
-    )))
 
+    container.appendChild(E.div(
+        style='margin-top: 1rem; text-align: right',
+        create_button(_('OK'), highlight=True, action=def():
+            apply_font_size()
+            close()
+        ),
+        '\xa0\xa0',
+        create_button(_('Cancel'), action=close),
+    ))
 
 
 def develop(container):