diff --git a/src/pyj/book_list/theme.pyj b/src/pyj/book_list/theme.pyj index e5bb5cc4f4..c916f95ff6 100644 --- a/src/pyj/book_list/theme.pyj +++ b/src/pyj/book_list/theme.pyj @@ -3,6 +3,7 @@ DARK = '#39322B' LIGHT = '#F6F3E9' +LIGHT2 = '#d6d3c8' HIGHLIGHT = 'red' def get_color(name): @@ -24,6 +25,11 @@ def get_color(name): 'button-start': DARK, 'button-end': '#49423B', 'button-text': LIGHT, + + # Dialog colors + 'dialog-background': LIGHT, + 'dialog-background2': LIGHT2, + 'dialog-foreground': DARK, }[name] def get_font_size(name): diff --git a/src/pyj/book_list/views.pyj b/src/pyj/book_list/views.pyj index 2127269db8..aec0040efe 100644 --- a/src/pyj/book_list/views.pyj +++ b/src/pyj/book_list/views.pyj @@ -22,7 +22,7 @@ class BooksView: self.is_fetching = False self.shown_book_ids = {} self.container_id = 'books-view-' + bv_counter - # We have to apply the transform ont he containing div not the img because of a bug in WebKit + # We have to apply the transform on the containing div not the img because of a bug in WebKit # that causes img aspect ratios to be messed up on window resize if the transform is specified # on the img itself style = build_rule('#' + self.container_id + ' .cover_grid > div:hover', transform='scale(1.2)') diff --git a/src/pyj/modals.pyj b/src/pyj/modals.pyj index 6143e1abb9..e14170479a 100644 --- a/src/pyj/modals.pyj +++ b/src/pyj/modals.pyj @@ -4,7 +4,7 @@ from elementmaker import E from dom import set_css, clear, build_rule from gettext import gettext as _ -from book_list.theme import get_color +from book_list.theme import get_color, get_font_size modal_container = None @@ -18,8 +18,8 @@ class ModalContainer: ), E.style(build_rule( '#modal-container > div > a:hover', - color=get_color('window-foreground') + ' !important', - background_color=get_color('window-background') + ' !important') + color=get_color('dialog-foreground') + ' !important', + background_color=get_color('dialog-background') + ' !important') ) ) document.body.appendChild(div) @@ -34,9 +34,10 @@ class ModalContainer: # Popup style set_css(div.firstChild, position='relative', display='inline-block', top='50vh', transform='translateY(-50%)', - min_width='200px', max_width='90vw', max_height='60vh', - border_radius='1em', padding='1em 2em', - background=get_color('window-background'), color=get_color('window-foreground') + min_width='25vw', max_width='75vw', max_height='60vh', + border_radius='1em', padding='1em 2em', margin_right='1em', margin_left='1em', + background=get_color('dialog-background'), color=get_color('dialog-foreground'), + background_image=str.format('linear-gradient(to bottom, {}, {})', get_color('dialog-background'), get_color('dialog-background2')) ) # Close button style @@ -87,6 +88,29 @@ class ModalContainer: else: self.update() +def create_simple_dialog(title, msg, details, icon_name, prefix): + details = details or '' + def create_func(parent): + parent.appendChild( + E.div( + style='max-width:60em; text-align: left', + E.h2( + E.i(class_='fa fa-lg fa-' + icon_name, style='color:red'), E.span('\xa0' + prefix + '\xa0', style='font-variant:small-caps'), title, + style='font-weight: bold; font-size: ' + get_font_size('title') + ), + E.div(msg, style='padding-top: 1em; margin-top: 1em; border-top: 1px solid currentColor') + ) + ) + show_modal(create_func) + +def error_dialog(title, msg, details=None): + create_simple_dialog(title, msg, details, 'bug', _('Error:')) + +def warning_dialog(title, msg, details=None): + create_simple_dialog(title, msg, details, 'warning', _('Warning:')) + +def test_error(): + error_dialog('Hello, world!', 'Some long text to test rendering/line breaking in error dialogs that contain lots of text like this test error dialog from hell in a handbasket with fruits and muppets making a scene.') def create_modal_container(): nonlocal modal_container