Add some more (currently inactive) buttons to the top bar

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]
 

src/pyj/book_list/top_bar.pyj

@@ -2,7 +2,7 @@
 # License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
 
 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)

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

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'