update ui.color_picker, improve code sharing

api_docs_and_examples.py

@@ -201,7 +201,7 @@ def create_full() -> None:
         ui.color_input(label='Color', value='#000000',
                        on_change=lambda e: color_label.style(f'color:{e.value}'))
 
-    # @example(ui.color_picker)
+    @example(ui.color_picker, skip=False)
     def color_picker_example():
         picker = ui.color_picker(on_pick=lambda e: button.style(f'background-color:{e.color}!important'))
         button = ui.button(on_click=picker.open).props('icon=colorize')

nicegui/elements/color_input.py

@@ -4,6 +4,7 @@ from nicegui import ui
 
 from ..element import Element
 from ..events import ValueChangeEventArguments, handle_event
+from .color_picker import ColorPicker
 from .mixins.value_element import ValueElement
 
 
@@ -22,18 +23,7 @@ class ColorInput(ValueElement):
         self._props['label'] = label
         self._props['placeholder'] = placeholder
 
-        with self, ui.menu() as self.popup:
-            def handle_change(msg: Dict) -> None:
-                arguments = ValueChangeEventArguments(sender=self, client=self.client, value=msg['args'])
-                handle_event(on_change, arguments)
-            self.color_element = Element('q-color').on('change', handle_change)
-
         with self.add_slot('append'):
-            self.button = ui.button(on_click=self.popup.open) \
+            self.picker = ColorPicker(on_pick=lambda e: self.set_value(e.color))
+            self.button = ui.button(on_click=self.picker.open) \
                 .props('icon=colorize flat round', remove='color').classes('cursor-pointer')
-
-    def open(self) -> None:
-        self.popup.open()
-
-    def close(self) -> None:
-        self.popup.close()

nicegui/elements/color_picker.py

@@ -0,0 +1,21 @@
+from typing import Callable, Dict
+
+from nicegui.events import ColorPickEventArguments, handle_event
+
+from ..element import Element
+from .menu import Menu
+
+
+class ColorPicker(Menu):
+
+    def __init__(self, *, on_pick: Callable, value: bool = False) -> None:
+        """Color Picker
+
+        :param on_pick: callback to execute when a color is picked
+        :param value: whether the menu is already opened (default: `False`)
+        """
+        super().__init__(value=value)
+        with self:
+            def handle_change(msg: Dict):
+                handle_event(on_pick, ColorPickEventArguments(sender=self, client=self.client, color=msg['args']))
+            Element('q-color').on('change', handle_change)

nicegui/elements/old/color_picker.py

@@ -1,40 +0,0 @@
-from typing import Callable, Dict
-
-import justpy as jp
-from nicegui.events import ColorPickEventArguments, handle_event
-
-from ..task_logger import create_task
-from .element import Element
-
-
-class ColorPicker(Element):
-
-    def __init__(self, *, on_pick: Callable, value: bool = False):
-        """Color Picker
-
-        :param on_pick: callback to execute when a color is picked
-        :param value: whether the menu is already opened (default: `False`)
-        """
-        view = jp.parse_html('''
-            <q-popup-proxy transition-show="scale" transition-hide="scale" name="popup" no-parent-event>
-                <q-color name="color_input"/>
-            </q-popup-proxy>''')
-
-        def handle_pick(sender, msg: Dict):
-            return handle_event(on_pick, ColorPickEventArguments(sender=self, socket=msg.websocket, color=msg.value))
-        view.name_dict['color_input'].on('change', handle_pick)
-        view.name_dict['color_input'].disable_input_event = True
-        view.name_dict['popup'].value = value
-        view.name_dict['popup'].on('input', lambda *_: self.update() or False)
-        view.name_dict['popup'].on('show', lambda *_: self.update() or False)
-        view.name_dict['popup'].on('hide', lambda *_: self.update() or False)
-
-        super().__init__(view)
-
-    def open(self):
-        self.view.name_dict['popup'].value = True
-        self.update()
-
-    def close(self):
-        self.view.name_dict['popup'].value = False
-        self.update()

nicegui/ui.py

@@ -5,6 +5,7 @@ from .elements.card import CardActions as card_actions
 from .elements.card import CardSection as card_section
 from .elements.checkbox import Checkbox as checkbox
 from .elements.color_input import ColorInput as color_input
+from .elements.color_picker import ColorPicker as color_picker
 from .elements.colors import Colors as colors
 from .elements.column import Column as column
 from .elements.dialog import Dialog as dialog