From 0961e317194be92c64b2fa62af16ab92cffb087f Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Sat, 17 Sep 2016 10:33:01 +0530 Subject: [PATCH] Use icons + text for the preferences UI instead of just icons --- imgsrc/srv/bookmark.svg | 1 + imgsrc/srv/chevron-right.svg | 1 + src/pyj/read_book/overlay.pyj | 88 +++++++++++++++++++---------------- 3 files changed, 49 insertions(+), 41 deletions(-) create mode 100644 imgsrc/srv/bookmark.svg create mode 100644 imgsrc/srv/chevron-right.svg diff --git a/imgsrc/srv/bookmark.svg b/imgsrc/srv/bookmark.svg new file mode 100644 index 0000000000..06ac70834b --- /dev/null +++ b/imgsrc/srv/bookmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgsrc/srv/chevron-right.svg b/imgsrc/srv/chevron-right.svg new file mode 100644 index 0000000000..d96a6ec5b0 --- /dev/null +++ b/imgsrc/srv/chevron-right.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 650e7bdb38..d067bf708c 100644 --- a/src/pyj/read_book/overlay.pyj +++ b/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 = build_rule(sel + '.button-row > div:hover', transform='scale(1.5)') - style += build_rule(sel + '.button-row > div:active', transform='scale(2)') - style += build_rule(sel + '.item-list > li', padding='1ex 1rem', border_bottom='solid 1px currentColor', cursor='pointer') - style += build_rule(sel + '.item-list > li:hover', color=get_color('window-background'), background_color=get_color('window-foreground')) - style += build_rule(sel + '.item-list > li:active', transform='scaleY(2)') + style = '' + sel = '.' + MAIN_OVERLAY_TS_CLASS + ' > .' + MAIN_OVERLAY_ACTIONS_CLASS + ' ' + style += build_rule(sel, overflow='hidden') + sel += '> ul ' + style += build_rule(sel, display='flex', flex_wrap='wrap', margin_right='-1px', list_style='none', border_bottom='1px solid currentColor') + 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 - display='flex', align_items='center', flex_wrap='wrap', padding='0 0.5rem', border_bottom='solid 1px currentColor'), + E.div( # actions + 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.li(_('Table of Contents'), onclick=self.overlay.show_toc), - E.li(_('Bookmarks')), - E.li(_('Go to a specific location in the book')), - ), list_style_type='none'), + E.ul( + ac(_('Search'), _('Search for text in this book'), None, 'search'), + ac(_('Go to'), _('Go to a specific location in the book'), None, 'chevron-right'), + ), + + 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())