From 00eea89768325b98dd606c2fd446b9141c06542c Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Tue, 20 Oct 2015 18:27:30 +0530 Subject: [PATCH] Add some more (currently inactive) buttons to the top bar --- src/pyj/book_list/theme.pyj | 1 + src/pyj/book_list/top_bar.pyj | 34 ++++++++++++++++++++++++++++++---- src/pyj/book_list/ui.pyj | 19 ++++++++++++++++++- src/pyj/dom.pyj | 14 +++++++++++++- 4 files changed, 62 insertions(+), 6 deletions(-) diff --git a/src/pyj/book_list/theme.pyj b/src/pyj/book_list/theme.pyj index 23f25da6a8..f342749b9d 100644 --- a/src/pyj/book_list/theme.pyj +++ b/src/pyj/book_list/theme.pyj @@ -7,6 +7,7 @@ def get_color(name): 'window-foreground': 'black', 'bar-background': '#39322B', 'bar-foreground': '#F6F3E9', + 'bar-highlight': 'red', 'heart': '#B92111', }[name] diff --git a/src/pyj/book_list/top_bar.pyj b/src/pyj/book_list/top_bar.pyj index 52ce664b05..37ab0f40b7 100644 --- a/src/pyj/book_list/top_bar.pyj +++ b/src/pyj/book_list/top_bar.pyj @@ -2,7 +2,7 @@ # License: GPL v3 Copyright: 2015, Kovid Goyal from book_list.theme import get_color, get_font_size -from dom import set_css, clear, create_keyframes +from dom import set_css, clear, create_keyframes, build_rule from elementmaker import E from gettext import gettext as _ @@ -10,17 +10,21 @@ bar_counter = 0 class TopBar: + SPACING = '0.5em' + def __init__(self): nonlocal bar_counter bar_counter += 1 self.bar_id, self.dummy_bar_id = 'top-bar-' + bar_counter, 'dummy-top-bar-' + bar_counter self.throbber_name = self.bar_id + '-throbber' style = create_keyframes(self.throbber_name, 'from { transform: scale(1); } 50% { transform: scale(0.5); } to { transform: scale(1); }') + style += build_rule('#' + self.bar_id + ' a:hover', transform='scale(1.4)') + style += build_rule('#' + self.bar_id + ' a:active', color=get_color('bar-highlight')) for bid in self.dummy_bar_id, self.bar_id: bar = E.div( id=bid, class_='top-bar', style="padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.5ex; padding-bottom: 0.5ex", E.div(style="display:table-cell;"), - E.div(style="display:table-cell; text-align:right;") + E.div(style="display:table-cell; text-align:right; padding-right: " + self.SPACING) ) if bid == self.bar_id: set_css(bar, position='fixed', left='0', top='0') @@ -29,7 +33,6 @@ class TopBar: width='100%', display='table', font_size=get_font_size('title'), color=get_color('bar-foreground'), background_color=get_color('bar-background')) document.body.appendChild(bar) - self.set_left(run_animation=True) @property def bar(self): @@ -53,7 +56,7 @@ class TopBar: E.i(class_='fa fa-' + icon_name) )) a = left.firstChild - left.appendChild(E.span(title, style='margin-left: 0.5em; font-weight: bold; text-overflow:ellipsis; overflow: hidden')) + left.appendChild(E.span(title, style=str.format('margin-left: {}; font-weight: bold; text-overflow:ellipsis; overflow: hidden', self.SPACING))) if bar is self.bar: if icon_name == 'heart': set_css(a, @@ -65,3 +68,26 @@ class TopBar: a.setAttribute('target', 'donate-to-calibre') if action is not None: a.addEventListener('click', def(event): event.preventDefault(), action();) + + def add_button(self, icon_name=None, action=None, tooltip=''): + if not icon_name: + return + for bar in self.bar, self.dummy_bar: + right = bar.firstChild.nextSibling + right.appendChild(E.a( + style="overflow: hidden; display:inline-block; vertical-align:text-top; margin-right: " + self.SPACING, + href="javascript:void(0)", title=tooltip, + E.i(class_='fa fa-' + icon_name) + )) + a = right.firstChild + if bar is self.bar: + if action is not None: + a.addEventListener('click', def(event): event.preventDefault(), action();) + + def apply_state(self, left, buttons): + self.set_left(**left) + for bar in self.bar, self.dummy_bar: + right = bar.firstChild.nextSibling + clear(right) + for button in buttons: + self.add_button(**button) diff --git a/src/pyj/book_list/ui.pyj b/src/pyj/book_list/ui.pyj index 7da6f5a46a..7606cfd8a5 100644 --- a/src/pyj/book_list/ui.pyj +++ b/src/pyj/book_list/ui.pyj @@ -4,10 +4,27 @@ from book_list.theme import get_color from book_list.top_bar import TopBar from dom import set_css +from gettext import gettext as _ + +class BarState: + + def __init__(self, **kw): + self.left_state = kw + self.buttons = v'[]' + + def add_button(self, **kw): + self.buttons.push(kw) class BookList: def __init__(self, interface_data): set_css(document.body, background_color=get_color('window-background')) + self.states = [] + self.initial_bar_state = ibs = BarState(run_animation=True) + ibs.add_button(icon_name='sort-alpha-asc', tooltip=_('Sort books')) + ibs.add_button(icon_name='search', tooltip=_('Search for books')) + ibs.add_button(icon_name='bars', tooltip=_('More actions')) + self.states.append(ibs) self.top_bar = TopBar() - + self.top_bar.apply_state(ibs.left_state, ibs.buttons) + ibs.left_state.run_animation = False diff --git a/src/pyj/dom.pyj b/src/pyj/dom.pyj index 23c2e7d687..e93a8d9d3b 100644 --- a/src/pyj/dom.pyj +++ b/src/pyj/dom.pyj @@ -31,6 +31,18 @@ def set_css(elem, **kw): else: s.setProperty('-' + prefix + '-' + name, val) +def build_rule(selector, **kw): + ans = v'[selector + " { "]' + for prop in kw: + name, val = str.replace(str.rstrip(prop, '_'), '_', '-'), kw[prop] + ans.push(name + ':' + val + ';') + prefixes = simple_vendor_prefixes[name] + if prefixes: + for prefix in prefixes: + ans.push('-' + prefix + '-' + name + ':' + val + ';') + ans.push('}') + return ans.join('\n') + '\n' + def clear(*nodes): for node in nodes: node.innerHTML = '' @@ -42,4 +54,4 @@ def create_keyframes(animation_name, *frames): for frame in frames: ans.push(frame) ans.push('}') - return ans.join('\n') + return ans.join('\n') + '\n'