From 638ab15bf130cf42f7398da78ee0fcd57c471f30 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Thu, 26 May 2016 14:25:14 +0530 Subject: [PATCH] The button bar --- imgsrc/srv/arrow-left.svg | 1 + imgsrc/srv/arrow-right.svg | 1 + imgsrc/srv/cogs.svg | 4 +++ imgsrc/srv/trash.svg | 1 + src/pyj/read_book/overlay.pyj | 51 ++++++++++++++++++++++++++++++----- 5 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 imgsrc/srv/arrow-left.svg create mode 100644 imgsrc/srv/arrow-right.svg create mode 100644 imgsrc/srv/cogs.svg create mode 100644 imgsrc/srv/trash.svg diff --git a/imgsrc/srv/arrow-left.svg b/imgsrc/srv/arrow-left.svg new file mode 100644 index 0000000000..8b759adab5 --- /dev/null +++ b/imgsrc/srv/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgsrc/srv/arrow-right.svg b/imgsrc/srv/arrow-right.svg new file mode 100644 index 0000000000..458853ef38 --- /dev/null +++ b/imgsrc/srv/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgsrc/srv/cogs.svg b/imgsrc/srv/cogs.svg new file mode 100644 index 0000000000..fa33d53097 --- /dev/null +++ b/imgsrc/srv/cogs.svg @@ -0,0 +1,4 @@ + + + + diff --git a/imgsrc/srv/trash.svg b/imgsrc/srv/trash.svg new file mode 100644 index 0000000000..e7c9806be9 --- /dev/null +++ b/imgsrc/srv/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pyj/read_book/overlay.pyj b/src/pyj/read_book/overlay.pyj index 7ee72a6599..16c6cfc85f 100644 --- a/src/pyj/read_book/overlay.pyj +++ b/src/pyj/read_book/overlay.pyj @@ -2,10 +2,11 @@ # License: GPL v3 Copyright: 2016, Kovid Goyal 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())