Sticky tweaks: only show in prod mode (#4789)

* Sticky tweaks: only show in prod mode

Only display the sticky badge in prod mode.

Display the mini-badge for mobile and tablet; full badge only displayed at
desktop width.

* Remove localhost checking
This commit is contained in:
Masen Furer 2025-02-10 12:22:37 -08:00 committed by GitHub
parent 3a02d03cb1
commit 85f07fcd89
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 29 deletions

View File

@ -1040,7 +1040,7 @@ class App(MiddlewareMixin, LifespanMixin):
self._validate_var_dependencies() self._validate_var_dependencies()
self._setup_overlay_component() self._setup_overlay_component()
self._setup_error_boundary() self._setup_error_boundary()
if config.show_built_with_reflex: if is_prod_mode() and config.show_built_with_reflex:
self._setup_sticky_badge() self._setup_sticky_badge()
progress.advance(task) progress.advance(task)

View File

@ -2,14 +2,12 @@
from reflex.components.component import ComponentNamespace from reflex.components.component import ComponentNamespace
from reflex.components.core.colors import color from reflex.components.core.colors import color
from reflex.components.core.cond import color_mode_cond, cond from reflex.components.core.cond import color_mode_cond
from reflex.components.core.responsive import tablet_and_desktop from reflex.components.core.responsive import desktop_only
from reflex.components.el.elements.inline import A from reflex.components.el.elements.inline import A
from reflex.components.el.elements.media import Path, Rect, Svg from reflex.components.el.elements.media import Path, Rect, Svg
from reflex.components.radix.themes.typography.text import Text from reflex.components.radix.themes.typography.text import Text
from reflex.experimental.client_state import ClientStateVar
from reflex.style import Style from reflex.style import Style
from reflex.vars.base import Var, VarData
class StickyLogo(Svg): class StickyLogo(Svg):
@ -87,7 +85,7 @@ class StickyBadge(A):
""" """
return super().create( return super().create(
StickyLogo.create(), StickyLogo.create(),
tablet_and_desktop(StickyLabel.create()), desktop_only(StickyLabel.create()),
href="https://reflex.dev", href="https://reflex.dev",
target="_blank", target="_blank",
width="auto", width="auto",
@ -102,34 +100,12 @@ class StickyBadge(A):
Returns: Returns:
The style of the component. The style of the component.
""" """
is_localhost_cs = ClientStateVar.create(
"is_localhost",
default=True,
global_ref=False,
)
localhost_hostnames = Var.create(["localhost", "127.0.0.1", "[::1]"])
is_localhost_expr = localhost_hostnames.contains(
Var("window.location.hostname", _var_type=str).guess_type(),
)
check_is_localhost = Var(
f"useEffect(({is_localhost_cs}) => {is_localhost_cs.set}({is_localhost_expr}), [])",
_var_data=VarData(
imports={"react": "useEffect"},
),
)
is_localhost = is_localhost_cs.value._replace(
merge_var_data=VarData.merge(
check_is_localhost._get_all_var_data(),
VarData(hooks={str(check_is_localhost): None}),
),
)
return Style( return Style(
{ {
"position": "fixed", "position": "fixed",
"bottom": "1rem", "bottom": "1rem",
"right": "1rem", "right": "1rem",
# Do not show the badge on localhost. "display": "flex",
"display": cond(is_localhost, "none", "flex"),
"flex-direction": "row", "flex-direction": "row",
"gap": "0.375rem", "gap": "0.375rem",
"align-items": "center", "align-items": "center",