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:
parent
3a02d03cb1
commit
85f07fcd89
@ -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)
|
||||||
|
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user