A button widget

src/pyj/book_list/item_list.pyj

@@ -19,8 +19,8 @@ class ItemsView:
         style += build_rule(cid + ' li', padding='1em', border_bottom='solid 1px ' + get_color('window-foreground'), border_top='solid 1px ' + get_color('window-background'), cursor='pointer', list_style='none')
         style += build_rule(cid + ' .title', font_size=get_font_size('item-list-title'))
         style += build_rule(cid + ' .subtitle', font_size=get_font_size('item-list-subtitle'), font_style='italic')
-        style += build_rule(cid + ' li:hover', color=get_color('bar-foreground'), background_color=get_color('bar-background'), border_top_color=get_color('bar-foreground'))
+        style += build_rule(cid + ' li:hover', color=get_color('list-hover-foreground'), background_color=get_color('list-hover-background'), border_top_color=get_color('list-hover-foreground'))
-        style += build_rule(cid + ' li:active', color=get_color('bar-highlight'))
+        style += build_rule(cid + ' li:active')
         self.base_style = style
         div = E.div(
             id=self.container_id, style='display:none',

src/pyj/book_list/theme.pyj

@@ -1,14 +1,29 @@
 # vim:fileencoding=utf-8
 # License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
 
+DARK = '#39322B'
+LIGHT = '#F6F3E9'
+HIGHLIGHT = 'red'
+
 def get_color(name):
     return {
-        'window-background': '#F6F3E9',
+        # General colors
-        'window-foreground': 'black',
+        'window-background': LIGHT,
-        'bar-background': '#39322B',
+        'window-foreground': DARK,
-        'bar-foreground': '#F6F3E9',
+
-        'bar-highlight': 'red',
+        # Top bar specific colors
+        'bar-background': DARK,
+        'bar-foreground': LIGHT,
         'heart': '#B92111',
+
+        # Item list colors
+        'list-hover-background': DARK,
+        'list-hover-foreground': LIGHT,
+
+        # Button colors
+        'button-start': DARK,
+        'button-end': '#49423B',
+        'button-text': LIGHT,
     }[name]
 
 def get_font_size(name):

src/pyj/book_list/top_bar.pyj

@@ -19,7 +19,8 @@ class TopBar:
         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'))
+        style += build_rule('#' + self.bar_id + ' a:active', transform='scale(0.6)')
+        style += build_rule('#' + self.bar_id + ' a:focus', outline='none')
         for bid in self.dummy_bar_id, self.bar_id:
             bar = E.div(
                 id=bid, class_='top-bar',

src/pyj/book_list/ui.pyj

@@ -7,8 +7,10 @@ from book_list.top_bar import TopBar
 from book_list.views import BooksView
 from book_list.item_list import ItemsView, create_item
 from dom import set_css
+from elementmaker import E
 from gettext import gettext as _
 from utils import debounce
+from widgets import get_widget_css
 
 class BarState:
 
@@ -71,7 +73,8 @@ create_panel = {
 class UI:
 
     def __init__(self, interface_data):
-        set_css(document.body, background_color=get_color('window-background'))
+        document.head.appendChild(E.style(get_widget_css()))
+        set_css(document.body, background_color=get_color('window-background'), color=get_color('window-foreground'))
         self.states, self.panels = [], []
         self.top_bar = TopBar()
         self.books_view = BooksView(interface_data)

src/pyj/book_list/views.pyj

@@ -4,7 +4,9 @@
 from dom import set_css, build_rule
 from elementmaker import E
 from gettext import gettext as _
+
 from book_list.globals import get_session_data
+from widgets import create_button
 
 THUMBNAIL_MAX_WIDTH = 300
 THUMBNAIL_MAX_HEIGHT = 400
@@ -30,6 +32,11 @@ class BooksView:
         )
         document.body.appendChild(div)
         self.set_view_mode(get_session_data().get('view_mode'))
+        more = div.lastChild
+        more.appendChild(create_button(
+            _('Show more books'), 'cloud-download'
+        ))
+        set_css(more, font_size='1.5rem', padding_top='1.5rem', margin_bottom='1.5rem', width='100%', text_align='center')
 
     def set_view_mode(self, mode='cover_grid'):
         if self.mode == mode:
@@ -69,6 +76,8 @@ class BooksView:
         c.insertBefore(E.div(), c.lastChild)
         self.init_grid()
 
+    # Cover grid {{{
+
     def init_cover_grid(self):
         div = self.grid
         set_css(div, display='flex', flex_wrap='wrap', justify_content='flex-start', align_items='flex-end', align_content='flex-start')
@@ -106,6 +115,8 @@ class BooksView:
                   style='max-width: 100%; max-height: 100%; display: block; cursor: pointer; width:auto; height:auto')
         )
 
+    # }}}
+
     def render_ids(self, book_ids=None):
         if book_ids is None:
             book_ids = self.search_result['book_ids']

src/pyj/widgets.pyj

@@ -0,0 +1,30 @@
+# vim:fileencoding=utf-8
+# License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
+
+from dom import build_rule
+from elementmaker import E
+
+from book_list.theme import get_color
+
+def create_button(text, icon=None, action=None, tooltip=None):
+    cls = ''
+    if icon:
+        cls = str.format('fa fa-{} fa-lg', icon)
+        text = '\xa0' + text
+    ans = E.button(E.i(class_=cls), text, class_='calibre-push-button', type='button', title=tooltip or '')
+    if action is not None:
+        ans.addEventListener('click', def(event): event.preventDefault(), action(event, ans);)
+    return ans
+
+create_button.style = build_rule('button.calibre-push-button',
+    border_radius='1em', background_clip='padding-box', background_color=get_color('button-start'),
+    background_image=str.format('linear-gradient(to bottom, {}, {})', get_color('button-start'), get_color('button-end')),
+    padding='1ex 1em', color=get_color('button-text'), cursor='pointer', font_size='inherit'
+)
+create_button.style += build_rule('button.calibre-push-button:hover', transform='scale(1.2)')
+create_button.style += build_rule('button.calibre-push-button:active', transform='scale(0.8)')
+create_button.style += build_rule('button.calibre-push-button:focus', outline='none')
+
+def get_widget_css():
+    ans = create_button.style
+    return ans