Add text based buttons in a list

This commit is contained in:
Kovid Goyal 2016-05-26 19:37:15 +05:30
parent 4294db3e46
commit 94806c60db

View File

@ -42,15 +42,21 @@ class MainOverlay: # {{{
def show(self, container): def show(self, container):
self.container_id = container.getAttribute('id') self.container_id = container.getAttribute('id')
container.appendChild(set_css(E.div( # top section container.appendChild(set_css(E.div( # top section
onclick=def (evt):evt.stopPropagation();,
set_css(E.div( # top row set_css(E.div( # top row
onclick=def (evt):evt.stopPropagation();,
E.div(self.overlay.view.book.metadata.title, style='max-width: 90%; text-overflow: ellipsis; font-weight: bold'), E.div(self.overlay.view.book.metadata.title, style='max-width: 90%; text-overflow: ellipsis; font-weight: bold'),
E.div(self.date_formatter.format(Date()), data_time='1', style='max-width: 9%; text-overflow: ellipsis'), E.div(self.date_formatter.format(Date()), data_time='1', style='max-width: 9%; text-overflow: ellipsis'),
), display='flex', justify_content='space-between', align_items='baseline', font_size='smaller', padding='0.5ex 1rem', border_bottom='solid 1px currentColor'), ), display='flex', justify_content='space-between', align_items='baseline', font_size='smaller', padding='0.5ex 1rem', border_bottom='solid 1px currentColor'),
set_css(E.div(class_='button-row' # button row set_css(E.div(class_='button-row' # button row
), display='flex', align_items='center', flex_wrap='wrap', padding='0 0.5rem', border_bottom='solid 1px currentColor') ), display='flex', align_items='center', flex_wrap='wrap', padding='0 0.5rem', border_bottom='solid 1px currentColor'),
set_css(E.ul(class_='item-list', # list of items
E.li(_('Table of Contents')),
E.li(_('Bookmarks')),
E.li(_('Go to a specific location in the book')),
), list_style_type='none'),
), user_select='none', background_color=get_color('window-background'))) ), user_select='none', background_color=get_color('window-background')))
@ -59,7 +65,7 @@ class MainOverlay: # {{{
def add_button(icon, title, action, text_button=False): def add_button(icon, title, action, text_button=False):
if not icon: if not icon:
button_row.appendChild(set_css(E.div(), border_left='solid 1px currentColor', width='1px', align_self='stretch')) button_row.appendChild(set_css(E.span(), border_left='solid 1px currentColor', width='1px', align_self='stretch'))
return return
if text_button: if text_button:
icon = E.span(icon, style='font-size: 175%; font-weight: bold') icon = E.span(icon, style='font-size: 175%; font-weight: bold')
@ -85,9 +91,13 @@ class MainOverlay: # {{{
add_button() add_button()
sel = '#{} .button-row '.format(self.container_id) sel = '#{} .button-row '.format(self.container_id)
sel2 = '#{} .item-list'.format(self.container_id)
container.appendChild(E.style( container.appendChild(E.style(
build_rule(sel + '> div:hover', transform='scale(1.5)'), build_rule(sel + '> div:hover', transform='scale(1.5)'),
build_rule(sel + '> div:active', transform='scale(2)') build_rule(sel + '> div:active', transform='scale(2)'),
build_rule(sel2 + '> li', padding='1ex 1rem', border_bottom='solid 1px currentColor', cursor='pointer'),
build_rule(sel2 + '> li:hover', color=get_color('window-background'), background_color=get_color('window-foreground')),
build_rule(sel2 + '> li:active', transform='scaleY(2)'),
)) ))
def update_time(self): def update_time(self):