code review

main.py

@@ -122,19 +122,19 @@ with example(ui.label):
     ui.label('some label')
 
 with example(ui.image):
+
     ui.image('http://placeimg.com/640/360/tech')
     base64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAACKgAwAEAAAAAQAAACMAAAAA/8IAEQgAIwAiAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAMCBAEFAAYHCAkKC//EAMMQAAEDAwIEAwQGBAcGBAgGcwECAAMRBBIhBTETIhAGQVEyFGFxIweBIJFCFaFSM7EkYjAWwXLRQ5I0ggjhU0AlYxc18JNzolBEsoPxJlQ2ZJR0wmDShKMYcOInRTdls1V1pJXDhfLTRnaA40dWZrQJChkaKCkqODk6SElKV1hZWmdoaWp3eHl6hoeIiYqQlpeYmZqgpaanqKmqsLW2t7i5usDExcbHyMnK0NTV1tfY2drg5OXm5+jp6vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAQIAAwQFBgcICQoL/8QAwxEAAgIBAwMDAgMFAgUCBASHAQACEQMQEiEEIDFBEwUwIjJRFEAGMyNhQhVxUjSBUCSRoUOxFgdiNVPw0SVgwUThcvEXgmM2cCZFVJInotIICQoYGRooKSo3ODk6RkdISUpVVldYWVpkZWZnaGlqc3R1dnd4eXqAg4SFhoeIiYqQk5SVlpeYmZqgo6SlpqeoqaqwsrO0tba3uLm6wMLDxMXGx8jJytDT1NXW19jZ2uDi4+Tl5ufo6ery8/T19vf4+fr/2wBDAAwMDAwMDBUMDBUeFRUVHikeHh4eKTQpKSkpKTQ+NDQ0NDQ0Pj4+Pj4+Pj5LS0tLS0tXV1dXV2JiYmJiYmJiYmL/2wBDAQ8QEBkXGSsXFytnRjlGZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2f/2gAMAwEAAhEDEQAAAeqBgCIareozvbaK3avBqa52teT6He3z0TqCUZa22r//2gAIAQEAAQUCaVVKTjGnLFqSqqlGuciX+87YgM8ScWhAx5KWUJUdJClKadMye6O//9oACAEDEQE/AUxI86A0ynfb/9oACAECEQE/ASaYZBLxpKNinFh2dv8A/9oACAEBAAY/AmUniHVXxfVx7ZIP9x0GlOJdfa+BeVentkSWR66jsI1HUfF+f4l1UykiqR/CypAorg6n/hvuH5nv/8QAMxABAAMAAgICAgIDAQEAAAILAREAITFBUWFxgZGhscHw0RDh8SAwQFBgcICQoLDA0OD/2gAIAQEAAT8hrchP08Nlp8V+7MHK/wCcEXw8q94vkT4K5DD0fpsJBFkwYvy/8cJBuuX7l82UhL9HmlzVKCOfi+3/ADe6Z2jgePxcMYN/xxYQtAu8UCj/ALXDvn/sBxRB/g3/AL//2gAMAwEAAhEDEQAAEE5gPHEUEAP/xAAzEQEBAQADAAECBQUBAQABAQkBABEhMRBBUWEgcfCRgaGx0cHh8TBAUGBwgJCgsMDQ4P/aAAgBAxEBPxAN4PZaNJuOW/g//9oACAECEQE/EAGt2fwmfzBp3X8P/9oACAEBAAE/ELGubg74j5M+RuAgxMrE4g5c4qAjQh1Oh9GL3/xggJDuHs5H2fY1rQIGDISTZ3KuGYzkk8dSkh4Ah8TJ8c0SsIco+yPRD76/486QSwOdnIpjvmvjAQ8pEx4ixlVcDldAdtawTzP5CSqs1wAPeJDMz0nwvHVlRSYTI1ic6b58RUC4kuSTXmFOJuxknJgsgDQMkjQgj/gCBHee6QjzflUA4/5//9k='
     ui.image(base64).style('width:30px')
 
 with example(ui.svg):
+
     svg_content = '''
-        <svg viewBox="0 0 200 200" width="100"  height="100" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="100" cy="100" fill="yellow" r="78" stroke="black" stroke-width="3"/>
-        <g class="eyes">
-            <circle cx="61" cy="82" r="12"/>
-            <circle cx="127" cy="82" r="12"/>
-        </g>
-        <path d="m136.81 116.53c.69 36.17-74.11 42-81.52-.73" style="fill:none; stroke: black; stroke-width: 5;"/>
+        <svg viewBox="0 0 200 200" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="100" cy="100" r="78" fill="yellow" stroke="black" stroke-width="3" />
+        <circle cx="61" cy="82" r="12" />
+        <circle cx="127" cy="82" r="12" />
+        <path d="m136.81 116.53c.69 36.17-74.11 42-81.52-.73" style="fill:none; stroke: black; stroke-width: 5;" />
         </svg>'''
     ui.svg(svg_content)
 
@@ -146,16 +146,17 @@ Use [Quasar classes](https://quasar.dev/vue-components/img) for positioning and
 To overlay an svg, make the `viewBox` exactly the size of the image and provide `100%` width/height to match the actual rendered size.
 '''
 with example(overlay):
+
     with ui.image('http://placeimg.com/640/360/nature'):
         ui.label('nice').classes('absolute-bottom text-subtitle2 text-center')
 
     with ui.image('https://cdn.pixabay.com/photo/2020/07/13/12/56/mute-swan-5400675__340.jpg'):
         svg_content = '''
             <svg viewBox="0 0 510 340" width="100%"  height="100%" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="200" cy="200" fill="none" r="100" stroke="red" stroke-width="10"/>
+            <circle cx="200" cy="200" r="100" fill="none" stroke="red" stroke-width="10" />
             </svg>
             '''
-        ui.svg(svg_content).style('background:transparent;')
+        ui.svg(svg_content).style('background:transparent')
 
 with example(ui.markdown):
 
@@ -259,19 +260,22 @@ with example(ui.joystick):
 lifecycle = '''### Lifecycle
 
 You can run a function or coroutine on startup as a parallel task by passing it to `ui.on_startup`.
-If NiceGui is shut down or restarted the tasks will be automatically canceled (for example when you make a code change).
-You can also execude cleanup code with `ui.on_shutdown`.
+If NiceGui is shut down or restarted, the tasks will be automatically canceled (for example when you make a code change).
+You can also execute cleanup code with `ui.on_shutdown`.
 '''
-with (example(lifecycle)):
+with example(lifecycle):
 
-    count_label = ui.label('count: 0')
-    count = 0
+    with ui.row() as row:
+        ui.label('count:')
+        count_label = ui.label('0')
+        count = 0
 
-    async def update_count():
+    async def counter():
         global count
         while True:
-            count_label.text = f'count: {count}'
+            count_label.text = str(count)
             count += 1
+            await row.view.update()
             await asyncio.sleep(1)
 
-    ui.on_startup(update_count())
+    ui.on_startup(counter())

nicegui/elements/group.py

@@ -5,6 +5,7 @@ class Group(Element):
     def __enter__(self):
 
         self.view_stack.append(self.view)
+        return self
 
     def __exit__(self, *_):
 

nicegui/elements/svg.py

@@ -14,7 +14,7 @@ class Svg(Element):
         :param content: the svg definition
         """
 
-        view = jp.Div()
+        view = jp.Div(style="padding:0")
         super().__init__(view)
         self.content = content