From 94806c60dbad36b1b869041ccb47e47b0f69fccf Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Thu, 26 May 2016 19:37:15 +0530
Subject: [PATCH] Add text based buttons in a list

---
 src/pyj/read_book/overlay.pyj | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/pyj/read_book/overlay.pyj b/src/pyj/read_book/overlay.pyj
index fd0d281e64..99ebd6b933 100644
--- a/src/pyj/read_book/overlay.pyj
+++ b/src/pyj/read_book/overlay.pyj
@@ -42,15 +42,21 @@ class MainOverlay:  # {{{
     def show(self, container):
         self.container_id = container.getAttribute('id')
         container.appendChild(set_css(E.div(  # top section
+            onclick=def (evt):evt.stopPropagation();,
 
             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; 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'),
 
             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')
+            ), display='flex', align_items='center', flex_wrap='wrap', padding='0 0.5rem', border_bottom='solid 1px currentColor'),
+
+            set_css(E.ul(class_='item-list', # list of items
+               E.li(_('Table of Contents')),
+               E.li(_('Bookmarks')),
+               E.li(_('Go to a specific location in the book')),
+            ), list_style_type='none'),
 
         ), user_select='none', background_color=get_color('window-background')))
 
@@ -59,7 +65,7 @@ class MainOverlay:  # {{{
 
         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'))
+                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')
@@ -85,9 +91,13 @@ class MainOverlay:  # {{{
         add_button()
 
         sel = '#{} .button-row '.format(self.container_id)
+        sel2 = '#{} .item-list'.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)')
+            build_rule(sel + '> div:active', transform='scale(2)'),
+            build_rule(sel2 + '> li', padding='1ex 1rem', border_bottom='solid 1px currentColor', cursor='pointer'),
+            build_rule(sel2 + '> li:hover', color=get_color('window-background'), background_color=get_color('window-foreground')),
+            build_rule(sel2 + '> li:active', transform='scaleY(2)'),
         ))
 
     def update_time(self):