Cutlery/calibre
1
0
Fork 0
mirror of https://github.com/kovidgoyal/calibre.git synced 2025-07-09 03:04:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

Finish modal dialog implementation

Browse Source
This commit is contained in:
Kovid Goyal 2015-11-11 12:53:23 +05:30
parent aeffb81692
commit e88b27c5fc
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pyj/book_list/theme.pyj
View File

@ -4,7 +4,6 @@
DARK = '#39322B' DARK = '#39322B'
LIGHT = '#F6F3E9' LIGHT = '#F6F3E9'
LIGHT2 = '#d6d3c8' LIGHT2 = '#d6d3c8'
HIGHLIGHT = 'red'
def get_color(name): def get_color(name):
return { return {

41
src/pyj/modals.pyj
View File

@ -16,10 +16,15 @@ class ModalContainer:
E.div(), # content area E.div(), # content area
E.a(E.i(class_='fa fa-close', style='vertical-align:bottom;'), title=_('Close')) E.a(E.i(class_='fa fa-close', style='vertical-align:bottom;'), title=_('Close'))
), ),
E.style(build_rule( E.style(
'#modal-container > div > a:hover', build_rule(
color=get_color('dialog-foreground') + ' !important', '#modal-container > div > a:hover',
background_color=get_color('dialog-background') + ' !important') color=get_color('dialog-foreground') + ' !important',
background_color=get_color('dialog-background') + ' !important'
) +
build_rule(
'#modal-container a.dialog-simple-link:hover', color='red !important'
)
) )
) )
document.body.appendChild(div) document.body.appendChild(div)
@ -34,7 +39,7 @@ class ModalContainer:
# Popup style # Popup style
set_css(div.firstChild, set_css(div.firstChild,
position='relative', display='inline-block', top='50vh', transform='translateY(-50%)', position='relative', display='inline-block', top='50vh', transform='translateY(-50%)',
min_width='25vw', max_width='75vw', max_height='60vh', min_width='25vw', max_width='75vw',
border_radius='1em', padding='1em 2em', margin_right='1em', margin_left='1em', border_radius='1em', padding='1em 2em', margin_right='1em', margin_left='1em',
background=get_color('dialog-background'), color=get_color('dialog-foreground'), 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')) background_image=str.format('linear-gradient(to bottom, {}, {})', get_color('dialog-background'), get_color('dialog-background2'))
@ -50,7 +55,7 @@ class ModalContainer:
div.firstChild.lastChild.addEventListener('click', def(event): event.preventDefault(), self.close_modal(event);) div.firstChild.lastChild.addEventListener('click', def(event): event.preventDefault(), self.close_modal(event);)
# Content container style # Content container style
set_css(div.firstChild.firstChild, user_select='text') set_css(div.firstChild.firstChild, user_select='text', max_height='60vh', overflow='auto')
self.modals = v'[]' self.modals = v'[]'
self.current_modal = None self.current_modal = None
@ -91,6 +96,11 @@ class ModalContainer:
def create_simple_dialog(title, msg, details, icon_name, prefix): def create_simple_dialog(title, msg, details, icon_name, prefix):
details = details or '' details = details or ''
def create_func(parent): def create_func(parent):
show_details = E.a(class_='dialog-simple-link', style='cursor:pointer; color: blue; padding-top:1em; display:inline-block; margin-left: auto', _('Show details'))
show_details.addEventListener('click', def():
show_details.style.display = 'none'
show_details.nextSibling.style.display = 'block'
)
parent.appendChild( parent.appendChild(
E.div( E.div(
style='max-width:60em; text-align: left', style='max-width:60em; text-align: left',
@ -98,7 +108,13 @@ def create_simple_dialog(title, msg, details, icon_name, prefix):
E.i(class_='fa fa-lg fa-' + icon_name, style='color:red'), E.span('\xa0' + prefix + '\xa0', style='font-variant:small-caps'), title, 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') 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') E.div(msg, style='padding-top: 1em; margin-top: 1em; border-top: 1px solid currentColor'),
E.div(style='display: ' + ('block' if details else 'none'),
show_details,
E.div(details,
style='display:none; white-space:pre-wrap; font-size: smaller; margin-top: 1em; border-top: solid 1px currentColor; padding-top: 1em'
)
)
) )
) )
show_modal(create_func) show_modal(create_func)
@ -109,13 +125,20 @@ def error_dialog(title, msg, details=None):
def warning_dialog(title, msg, details=None): def warning_dialog(title, msg, details=None):
create_simple_dialog(title, msg, details, 'warning', _('Warning:')) create_simple_dialog(title, msg, details, 'warning', _('Warning:'))
def test_error(): # 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.') # 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.',
# ['a word ' for i in range(10000)].join(' ')
# )
def create_modal_container(): def create_modal_container():
nonlocal modal_container nonlocal modal_container
if modal_container is None: if modal_container is None:
modal_container = ModalContainer() modal_container = ModalContainer()
# window.setTimeout(def():
# document.getElementById('books-view-1').addEventListener('click', test_error)
# , 10)
return modal_container return modal_container
def show_modal(create_func, on_close=None): def show_modal(create_func, on_close=None):