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

Get the editor panel properly positioned

Browse Source
This commit is contained in:
Kovid Goyal 2020-08-03 17:38:08 +05:30
parent 8fa67e7bfd
commit 1d04aa3d44
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/pyj/read_book/highlights.pyj
View File

@ -10,7 +10,10 @@ from book_list.theme import get_color
from dom import unique_id
from widgets import create_button
ICON_SIZE = '3ex'
ICON_SIZE_VAL = 3
ICON_SIZE_UNIT = 'ex'
ICON_SIZE = f'{ICON_SIZE_VAL}{ICON_SIZE_UNIT}'
builtin_colors_light = {
'yellow': '#ffeb6b',
'green': '#c0ed72',
@ -56,8 +59,9 @@ class HighlightStyle:
self.key = f'type:{style.type} kind:{style.kind} which: {style.which} bg: {style["background-color"]}'
def make_swatch(self, container, is_dark):
s = container.style
s.width = s.height = s.minimumWidth = s.minimumHeight = ICON_SIZE
style = container.style
style.width = style.height = style.minimumWidth = style.minimumHeight = ICON_SIZE
s = self.style
bg = None
if s.type is 'builtin':
if s.kind is 'color':
@ -65,8 +69,9 @@ class HighlightStyle:
if bg is None and s['background-color']:
bg = s['background-color']
if bg:
s.backgroundColor = bg
s.borderRadius = '4px'
style.backgroundColor = bg
br = ICON_SIZE_VAL / 4
style.borderRadius = f'{br}{ICON_SIZE_UNIT}'
def highlight_shade(self, is_dark):
s = self.style
@ -117,7 +122,7 @@ class EditNotesAndColors: # {{{
self.is_dark_theme = is_dark_theme
def separator():
return E.hr(style='max-width: 80em; width: 80vw; border-top: solid 1px; margin: auto; margin-top: 2ex; margin-bottom: 2ex')
return E.hr(style='width: 100%; border-top: solid 1px; margin: auto; margin-top: 2ex; margin-bottom: 2ex')
def finish():
close_editor(True)
@ -133,13 +138,13 @@ class EditNotesAndColors: # {{{
finish()
c = E.div(
style=f'background: {get_color("window-background")}; margin: auto; padding: 1rem',
style=f'background: {get_color("window-background")}; margin: auto; text-align: center; padding: 2rem;',
onclick=def(ev): ev.stopPropagation();,
id=unique_id(),
E.h3(_('Add notes for this highlight')),
E.textarea(
current_notes or '',
rows='10', spellcheck='true', style='resize: none; width: 80vw; max-width: 80em; margin: 1ex',
rows='10', spellcheck='true', style='resize: none; width: 90%; margin: 1ex',
onkeydown=handle_keypress,
),
E.div(
@ -152,10 +157,10 @@ class EditNotesAndColors: # {{{
E.h3(_('Choose the color for this highlight'), style='margin-bottom: 2ex'),
E.div(
class_='color-block',
style=f'display: flex; flex-wrap: wrap; max-width: calc({ICON_SIZE} * 8); margin: auto',
style=f'display: flex; flex-wrap: wrap; max-width: calc({ICON_SIZE} * 10); margin: auto',
),
E.div(
style='max-width: 80em; width: 80vw; margin: auto; margin-top: 2ex; display: flex; justify-content: space-between; align-items: center',
style='width: 100%; margin: auto; margin-top: 2ex; display: flex; justify-content: space-between; align-items: center',
E.div(
E.label(_('New color:'), ' ', E.input(type='color', onchange=self.add_custom_color))
),
@ -167,7 +172,7 @@ class EditNotesAndColors: # {{{
separator(),
E.div(
style='max-width: 80em; width: 80vw; margin: auto; display: flex; justify-content: space-between',
style='width: 100%; margin: auto; display: flex; justify-content: space-between',
create_button(_('Cancel'), 'close', abort, _('Abort') + ' [Esc]'),
create_button(_('Finish'), 'check', finish, _('Finish editing highlight') + ' [Ctrl+Enter]', True),
)
@ -175,6 +180,8 @@ class EditNotesAndColors: # {{{
)
self.container_id = c.id
container.appendChild(c)
container.style.maxWidth = '50rem'
container.style.width = '90%'
self.seen_colors = {}
custom_highlight_styles = get_session_data().get('custom_highlight_styles')
for raw in custom_highlight_styles:

9
src/pyj/read_book/selection_bar.pyj
View File

@ -234,8 +234,13 @@ class SelectionBar:
style='position: absolute; border: solid 1px currentColor; border-radius: 5px;'
'left: 0; top: 0; display: flex; flex-direction: column;'
))
container.appendChild(E.div(id=self.editor_id))
container.lastChild.addEventListener('click', self.editor_container_clicked, {'passive': False})
editor_div = E.div(id=self.editor_id, style='pointer-events: auto')
container.appendChild(E.div(
editor_div,
style='width: 100%; height: 100%; position: absolute; display: flex;'
'align-items: center; justify-content: center; pointer-events: none'))
editor_div.addEventListener('click', self.editor_container_clicked, {'passive': False})
# bar and handles markup {{{