Make the selection handles a bit nicer

imgsrc/srv/selection-handle.svg

@@ -1,7 +1,6 @@
-<svg width="64" height="96" viewBox="0 0 16.933333 25.4" version="1.1">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="96" viewBox="0 0 16.933333 25.4" version="1.1">
   <path
-     style="fill-opacity:1;stroke-width:0.48521861;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="stroke-width:1.2;"
-     d="M 0.24260931,23.981882 3.1289727,19.087752 5.0532146,13.214802 15.636548,8.32069 V 0.49006772 H 0.24260931 Z"
+     d="M 16.536458,0.396875 C 11.51054,0.56731735 5.4339008,1.2495971 2.22533,5.6177515 0.23433964,9.109249 4.3344224,12.191448 7.304374,13.107072 c 2.891776,1.028822 6.353465,1.716958 9.232084,1.424708 0,-4.711635 0,-9.4232699 0,-14.134905 z m -0.0036,14.500924 c 0,3.500733 0,7.001467 0,10.502201 0,-3.500734 0,-7.001468 0,-10.502201 z" />
-     id="selection-handle-path"
-     />
 </svg>

src/pyj/read_book/create_annotation.pyj

@@ -8,7 +8,7 @@ from uuid import short_uuid
 
 from book_list.globals import get_session_data
 from book_list.theme import cached_color_to_rgba, get_color
-from dom import add_extra_css, clear, ensure_id, svgicon, unique_id
+from dom import clear, ensure_id, svgicon, unique_id
 from modals import error_dialog
 from read_book.shortcuts import shortcut_for_key_event
 
@@ -17,15 +17,6 @@ WAITING_FOR_DRAG = 2
 DRAGGING_LEFT = 3
 DRAGGING_RIGHT = 4
 
-
-add_extra_css(def():
-    ans = ''
-    ans += '.selection-handle { fill: #3cef3d; stroke: black }'
-    ans += '.selection-handle:active { fill: #FCE883; }'
-    return ans
-)
-
-
 dark_fg = '#111'
 light_fg = '#eee'
 highlight_colors = {
@@ -43,10 +34,11 @@ highlight_colors = {
 default_highlight_color = '#fce2ae'
 
 
-def selection_handle(invert):
+def selection_handle(invert, style):
     ans = svgicon('selection-handle')
     use = ans.querySelector('use')
-    use.classList.add('selection-handle')
+    use.style.stroke = style['color']
+    use.style.fill = style['background-color']
     s = ans.style
     if invert:
         s.transform = 'scaleX(-1)'
@@ -130,11 +122,18 @@ class CreateAnnotation:
         button(bb, 'chevron-down', _('Scroll down'), self.scroll_down)
         button(bb, 'pencil', _('Add a note'), self.add_text)
 
-        lh = selection_handle(True)
+        sd = get_session_data()
+        style = sd.get('highlight_style') or {
+            'background-color': default_highlight_color,
+            'color': highlight_colors[default_highlight_color]
+        }
+        self.current_highlight_style = style
+
+        lh = selection_handle(False, style)
         self.left_handle_id = ensure_id(lh, 'handle')
         lh.addEventListener('mousedown', self.mousedown_on_handle, {'passive': False})
         container.appendChild(lh)
-        rh = selection_handle(False)
+        rh = selection_handle(True, style)
         self.right_handle_id = ensure_id(rh, 'handle')
         rh.addEventListener('mousedown', self.mousedown_on_handle, {'passive': False})
         container.appendChild(rh)
@@ -144,13 +143,6 @@ class CreateAnnotation:
         container.addEventListener('mousemove', self.mousemove_on_container, {'passive': False})
         container.addEventListener('keydown', self.on_keydown, {'passive': False})
 
-        sd = get_session_data()
-        style = sd.get('highlight_style') or {
-            'background-color': default_highlight_color,
-            'color': highlight_colors[default_highlight_color]
-        }
-        self.current_highlight_style = style
-
     def scroll_up(self):
         self.send_message('scroll', backwards=True)
 
@@ -222,6 +214,15 @@ class CreateAnnotation:
         self.send_message('set-highlight-style', style=self.current_highlight_style)
         sd = get_session_data()
         sd.set('highlight_style', self.current_highlight_style)
+        self.update_handle_colors()
+
+    def update_handle_colors(self):
+        fill = self.current_highlight_style['background-color']
+        stroke = self.current_highlight_style['color']
+        for handle in (self.left_handle, self.right_handle):
+            use = handle.querySelector('use')
+            use.style.stroke = stroke
+            use.style.fill = fill
 
     def show_middle(self):
         self.save_handle_state()