Use icons + text for the preferences UI instead of just icons

imgsrc/srv/bookmark.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1420 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z"/></svg>

imgsrc/srv/chevron-right.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"/></svg>

src/pyj/read_book/overlay.pyj

@@ -97,14 +97,19 @@ class DeleteBook:  # {{{
 # MainOverlay {{{
 
 MAIN_OVERLAY_TS_CLASS = 'read-book-main-overlay-top-section'
+MAIN_OVERLAY_ACTIONS_CLASS = 'read-book-main-overlay-actions'
 
 add_extra_css(def():
-    sel = '.' + MAIN_OVERLAY_TS_CLASS + ' '
+    style = ''
-    style = build_rule(sel + '.button-row > div:hover', transform='scale(1.5)')
+    sel = '.' + MAIN_OVERLAY_TS_CLASS + ' > .' + MAIN_OVERLAY_ACTIONS_CLASS + ' '
-    style += build_rule(sel + '.button-row > div:active', transform='scale(2)')
+    style += build_rule(sel, overflow='hidden')
-    style += build_rule(sel + '.item-list > li', padding='1ex 1rem', border_bottom='solid 1px currentColor', cursor='pointer')
+    sel += '> ul '
-    style += build_rule(sel + '.item-list > li:hover', color=get_color('window-background'), background_color=get_color('window-foreground'))
+    style += build_rule(sel, display='flex', flex_wrap='wrap', margin_right='-1px', list_style='none', border_bottom='1px solid currentColor')
-    style += build_rule(sel + '.item-list > li:active', transform='scaleY(2)')
+    sel += '> li'
+    style += build_rule(sel, border_right='1px solid currentColor', padding='0.5em 1ex', display='flex', align_items='center', cursor='pointer')
+    style += build_rule(sel + ':last-child', border_right='0px solid currentColor')
+    style += build_rule(sel + ':hover > *:first-child', color='red')
+    style += build_rule(sel + ':active > *:first-child', transform='scale(1.8)')
     return style
 )
 
@@ -123,6 +128,15 @@ class MainOverlay:
 
     def show(self, container):
         self.container_id = container.getAttribute('id')
+
+        def ac(text, tooltip, action, icon, is_text_button):
+            if is_text_button:
+                icon = E.span(icon, style='font-size: 175%; font-weight: bold')
+            else:
+                icon = svgicon(icon, '3.5ex', '3.5ex') if icon else ''
+
+            return E.li(icon, '\xa0', text, onclick=action, title=tooltip)
+
         container.appendChild(set_css(E.div(class_=MAIN_OVERLAY_TS_CLASS,  # top section
             onclick=def (evt):evt.stopPropagation();,
 
@@ -131,47 +145,39 @@ class MainOverlay:
                 E.div(self.date_formatter.format(Date()), id=self.timer_id, style='max-width: 9%; text-overflow: ellipsis'),
             ), display='flex', justify_content='space-between', align_items='baseline', font_size='smaller', padding='0.5ex 1rem', border_bottom='solid 1px currentColor'),
 
-            set_css(E.div(class_='button-row'),  # button row
+            E.div( # actions
-               display='flex', align_items='center', flex_wrap='wrap', padding='0 0.5rem', border_bottom='solid 1px currentColor'),
+                E.ul(
+                    ac(_('Home'), _('Return to list of books'), self.return_to_book_list, 'home'),
+                    ac(_('Back'), None, self.back, 'arrow-left'),
+                    ac(_('Forward'), None, self.forward, 'arrow-right'),
+                ),
 
-            set_css(E.ul(class_='item-list', # list of items
+                E.ul(
-               E.li(_('Table of Contents'), onclick=self.overlay.show_toc),
+                    ac(_('Search'), _('Search for text in this book'), None, 'search'),
-               E.li(_('Bookmarks')),
+                    ac(_('Go to'), _('Go to a specific location in the book'), None, 'chevron-right'),
-               E.li(_('Go to a specific location in the book')),
+                ),
-            ), list_style_type='none'),
+
+                E.ul(
+                    ac(_('Sync'), _('Get last read position and annotations from the server'), None, 'cloud-download'),
+                    ac(_('Delete'), _('Delete this book from the device'), self.overlay.delete_book, 'trash'),
+                    ac(_('Reload'), _('Reload this book from the server'), self.overlay.reload_book, 'refresh')
+                ),
+
+                E.ul(
+                    ac(_('Table of Contents'), None, self.overlay.show_toc, 'TC', True),
+                    ac(_('Bookmarks'), None, None, 'bookmark'),
+                ),
+
+                E.ul(
+                    ac(_('Font size'), _('Change text size'), None, 'Aa', True),
+                    ac(_('Preferences'), _('Configure the book reader'), self.overlay.show_prefs, 'cogs'),
+                ),
+            class_=MAIN_OVERLAY_ACTIONS_CLASS),
 
         ), user_select='none', background_color=get_color('window-background')))
 
         self.on_hide()
         self.timer = setInterval(self.update_time, 1000)
-        button_row = container.querySelector('.button-row')
-
-        def add_button(icon, title, action, text_button=False):
-            if not icon:
-                button_row.appendChild(set_css(E.span(), border_left='solid 1px currentColor', width='1px', align_self='stretch'))
-                return
-            if text_button:
-                icon = E.span(icon, style='font-size: 175%; font-weight: bold')
-            else:
-                icon = svgicon(icon, '3.5ex', '3.5ex')
-            button_row.appendChild(set_css(E.div(
-                icon, title=title, onclick=action),
-                cursor='pointer', padding='0.5ex 0', margin='0 0.5rem',
-            ))
-
-        add_button('home', _('Return to list of books'), self.return_to_book_list)
-        add_button('arrow-left', _('Back'), self.back)
-        add_button('arrow-right', _('Forward'), self.forward)
-        add_button()
-        add_button('refresh', _('Reload this book from the server'), self.overlay.reload_book)
-        add_button('cloud-download', _('Get last read position and annotations from the server'))
-        add_button('trash', _('Delete this book from the device'), self.overlay.delete_book)
-        add_button()
-        add_button('search', _('Search for text in this book'))
-        add_button()
-        add_button('Aa', _('Change text size'), text_button=True)
-        add_button('cogs', _('Configure the book reader'), self.overlay.show_prefs)
-        add_button()
 
     def update_time(self):
         document.getElementById(self.timer_id).textContent = self.date_formatter.format(Date())