The button bar

imgsrc/srv/arrow-left.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 896v128q0 53-32.5 90.5t-84.5 37.5h-704l293 294q38 36 38 90t-38 90l-75 76q-37 37-90 37-52 0-91-37l-651-652q-37-37-37-90 0-52 37-91l651-650q38-38 91-38 52 0 90 38l75 74q38 38 38 91t-38 91l-293 293h704q52 0 84.5 37.5t32.5 90.5z"/></svg>

imgsrc/srv/arrow-right.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1600 960q0 54-37 91l-651 651q-39 37-91 37-51 0-90-37l-75-75q-38-38-38-91t38-91l293-293h-704q-52 0-84.5-37.5t-32.5-90.5v-128q0-53 32.5-90.5t84.5-37.5h704l-293-294q-38-36-38-90t38-90l75-75q38-38 90-38 53 0 91 38l651 651q37 35 37 90z"/></svg>

imgsrc/srv/trash.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M704 1376v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm256 0v-704q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v704q0 14 9 23t23 9h64q14 0 23-9t9-23zm-544-992h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z"/></svg>

src/pyj/read_book/overlay.pyj

@@ -2,10 +2,11 @@
 # License: GPL v3 Copyright: 2016, Kovid Goyal <kovid at kovidgoyal.net>
 from __python__ import hash_literals, bound_methods
 
-from dom import clear, set_css, element
+from dom import clear, set_css, element, svgicon, build_rule
 from elementmaker import E
 from book_list.theme import get_color
 from widgets import create_spinner
+from gettext import gettext as _
 
 class LoadingMessage:  # {{{
 
@@ -40,14 +41,52 @@ class MainOverlay:  # {{{
 
     def show(self, container):
         self.container_id = container.getAttribute('id')
-        container.appendChild(set_css(E.div(
-            set_css(E.div(
+        container.appendChild(set_css(E.div(  # top section
+
+            set_css(E.div(  # top row
                 onclick=def (evt):evt.stopPropagation();,
-                E.div(self.overlay.view.book.metadata.title, style='max-width: 90%; text-overflow: ellipsis'),
+                E.div(self.overlay.view.book.metadata.title, style='max-width: 90%; text-overflow: ellipsis; font-weight: bold'),
                 E.div(self.date_formatter.format(Date()), data_time='1', 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')
-        ), background_color=get_color('window-background')))
+            ), 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
+            ), display='flex', align_items='center', flex_wrap='wrap', padding='0 0.5rem', border_bottom='solid 1px currentColor')
+
+        ), user_select='none', background_color=get_color('window-background')))
+
         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.div(), 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'))
+        add_button('arrow-left', _('Back'))
+        add_button('arrow-right', _('Forward'))
+        add_button()
+        add_button('refresh', _('Reload this book from the server'))
+        add_button('cloud-download', _('Get last read position and annotations from the server'))
+        add_button('trash', _('Delete this book from the device'))
+        add_button()
+        add_button('Aa', _('Change text size'), text_button=True)
+        add_button('cogs', _('Configure the book reader'))
+        add_button()
+
+        sel = '#{} .button-row '.format(self.container_id)
+        container.appendChild(E.style(
+            build_rule(sel + '> div:hover', transform='scale(1.5)'),
+            build_rule(sel + '> div:active', transform='scale(2)')
+        ))
 
     def update_time(self):
         element(self.container_id, '[data-time]').textContent = self.date_formatter.format(Date())