fix ripple effect

frontend/code/rippleEffect.ts

@@ -55,7 +55,7 @@ export class RippleEffect {
         );
         rippleContainer.style.setProperty(
             '--rio-ripple-duration',
-            `${this.rippleDuration}`
+            `${this.rippleDuration}s`
         );
         this.element.appendChild(rippleContainer);
 

frontend/css/style.scss

@@ -2969,13 +2969,10 @@ html.picking-component * {
     pointer-events: none;
 
     position: absolute;
-    z-index: -1;
     width: 100%;
     height: 100%;
 
     overflow: hidden;
-
-    @include single-container();
 }
 
 .rio-ripple-effect {
@@ -2985,6 +2982,8 @@ html.picking-component * {
     //     var(--rio-ripple-color) 40%,
     //     transparent 70%
     // );
+    position: absolute;
+
     background: var(--rio-ripple-color);
 
     border-radius: 50%;

rio/components/__init__.py

@@ -1,6 +1,6 @@
 from .auto_form import *
 from .banner import *
-from .button import *
+from .buttons import *
 from .calendar import *
 from .card import *
 from .checkbox import *

rio/components/app_root.py

@@ -51,6 +51,7 @@ class AppTopBar(component.Component):
                         font_size=1.8,
                         fill=thm.primary_palette.foreground,
                     ),
+                    selectable=False,
                 ),
                 rio.Spacer(),
                 rio.Row(*icons, spacing=2),
@@ -78,11 +79,13 @@ class Sidebar(component.Component):
                         self.session.app.name,
                         style="heading2",
                         justify="left",
+                        selectable=False,
                     ),
                     rio.Text(
                         "TODO: Subtext",
                         style="dim",
                         justify="left",
+                        selectable=False,
                     ),
                     align_y=0,
                 ),

rio/components/auto_form.py

@@ -140,7 +140,7 @@ class AutoForm(component.Component):
 
             # Add a label
             grid.add(
-                rio.Text(text=field_nicename, align_x=0),
+                rio.Text(text=field_nicename, selectable=False, align_x=0),
                 ii,
                 0,
             )

rio/components/buttons.py

@@ -165,6 +165,7 @@ class Button(Component):
                             if self.style == "major"
                             else "text"
                         ),
+                        selectable=False,
                     )
                 )
 

rio/components/labeled_column.py

@@ -103,7 +103,7 @@ class LabeledColumn(Component):
     def build(self) -> Component:
         rows = [
             [
-                rio.Text(label, justify="right"),
+                rio.Text(label, justify="right", selectable=False),
                 child,
             ]
             for label, child in self.content.items()

rio/components/list_items.py

@@ -200,6 +200,7 @@ class SimpleListItem(Component):
             rio.Text(
                 self.text,
                 justify="left",
+                selectable=False,
             )
         ]
 
@@ -210,6 +211,7 @@ class SimpleListItem(Component):
                     wrap=True,
                     style="dim",
                     justify="left",
+                    selectable=False,
                 )
             )
 

rio/components/page_view.py

@@ -31,6 +31,7 @@ def default_fallback_build(sess: rio.Session) -> rio.Component:
                     font_size=3,
                     fill=thm.warning_palette.background,
                 ),
+                selectable=False,
             ),
             spacing=2,
             align_x=0.5,

rio/components/revealer.py

@@ -72,7 +72,10 @@ class Revealer(FundamentalComponent):
     A simple `Revealer` that displays "Hello" when opened:
 
     ```python
-    rio.Revealer(header="Click to reveal", content=rio.Text("Hello"))
+    rio.Revealer(
+        header="Click to reveal",
+        content=rio.Text("Hello"),
+    )
     ```
 
     A `Revealer` is a component that hides content, in this case a TextInput,

rio/debug/dev_tools/component_details.py

@@ -107,6 +107,7 @@ class ComponentDetails(rio.Component):
                         rio.Text(
                             "Read the Docs",
                             style=rio.TextStyle(fill=link_color),
+                            selectable=False,
                         ),
                         spacing=0.5,
                         margin_top=1,