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._setup_overlay_component()
self._setup_error_boundary()
if config.show_built_with_reflex:
if is_prod_mode() and config.show_built_with_reflex:
self._setup_sticky_badge()
progress.advance(task)

View File

@ -2,14 +2,12 @@
from reflex.components.component import ComponentNamespace
from reflex.components.core.colors import color
from reflex.components.core.cond import color_mode_cond, cond
from reflex.components.core.responsive import tablet_and_desktop
from reflex.components.core.cond import color_mode_cond
from reflex.components.core.responsive import desktop_only
from reflex.components.el.elements.inline import A
from reflex.components.el.elements.media import Path, Rect, Svg
from reflex.components.radix.themes.typography.text import Text
from reflex.experimental.client_state import ClientStateVar
from reflex.style import Style
from reflex.vars.base import Var, VarData
class StickyLogo(Svg):
@ -87,7 +85,7 @@ class StickyBadge(A):
"""
return super().create(
StickyLogo.create(),
tablet_and_desktop(StickyLabel.create()),
desktop_only(StickyLabel.create()),
href="https://reflex.dev",
target="_blank",
width="auto",
@ -102,34 +100,12 @@ class StickyBadge(A):
Returns:
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(
{
"position": "fixed",
"bottom": "1rem",
"right": "1rem",
# Do not show the badge on localhost.
"display": cond(is_localhost, "none", "flex"),
"display": "flex",
"flex-direction": "row",
"gap": "0.375rem",
"align-items": "center",