From 8f0dd0f7143bf70aa2ac5d3d043edcf30324955b Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Sat, 7 Nov 2015 14:08:06 +0530 Subject: [PATCH] A button widget --- src/pyj/book_list/item_list.pyj | 4 ++-- src/pyj/book_list/theme.pyj | 25 ++++++++++++++++++++----- src/pyj/book_list/top_bar.pyj | 3 ++- src/pyj/book_list/ui.pyj | 5 ++++- src/pyj/book_list/views.pyj | 11 +++++++++++ src/pyj/widgets.pyj | 30 ++++++++++++++++++++++++++++++ 6 files changed, 69 insertions(+), 9 deletions(-) create mode 100644 src/pyj/widgets.pyj diff --git a/src/pyj/book_list/item_list.pyj b/src/pyj/book_list/item_list.pyj index 3eb35283f6..67c0442747 100644 --- a/src/pyj/book_list/item_list.pyj +++ b/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:active', color=get_color('bar-highlight')) + 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') self.base_style = style div = E.div( id=self.container_id, style='display:none', diff --git a/src/pyj/book_list/theme.pyj b/src/pyj/book_list/theme.pyj index dcdd18f57c..e5bb5cc4f4 100644 --- a/src/pyj/book_list/theme.pyj +++ b/src/pyj/book_list/theme.pyj @@ -1,14 +1,29 @@ # vim:fileencoding=utf-8 # License: GPL v3 Copyright: 2015, Kovid Goyal +DARK = '#39322B' +LIGHT = '#F6F3E9' +HIGHLIGHT = 'red' + def get_color(name): return { - 'window-background': '#F6F3E9', - 'window-foreground': 'black', - 'bar-background': '#39322B', - 'bar-foreground': '#F6F3E9', - 'bar-highlight': 'red', + # General colors + 'window-background': LIGHT, + 'window-foreground': DARK, + + # 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): diff --git a/src/pyj/book_list/top_bar.pyj b/src/pyj/book_list/top_bar.pyj index 93fced4325..46a2c24ef4 100644 --- a/src/pyj/book_list/top_bar.pyj +++ b/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', diff --git a/src/pyj/book_list/ui.pyj b/src/pyj/book_list/ui.pyj index 4a4db343e7..50e73087b9 100644 --- a/src/pyj/book_list/ui.pyj +++ b/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) diff --git a/src/pyj/book_list/views.pyj b/src/pyj/book_list/views.pyj index 3dbeae6512..ffcbea21dc 100644 --- a/src/pyj/book_list/views.pyj +++ b/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'] diff --git a/src/pyj/widgets.pyj b/src/pyj/widgets.pyj new file mode 100644 index 0000000000..5bb292653a --- /dev/null +++ b/src/pyj/widgets.pyj @@ -0,0 +1,30 @@ +# vim:fileencoding=utf-8 +# License: GPL v3 Copyright: 2015, Kovid Goyal + +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