laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update templates radix sidebar (#2705)

Browse Source
This commit is contained in:
Thomas Brandého 2024-02-28 23:52:24 +01:00 committed by GitHub
parent 2d56441a28
commit 3bcd0672e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 157 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
reflex/.templates/apps/sidebar/README.md
View File

@ -41,7 +41,7 @@ See the [Project Structure docs](https://reflex.dev/docs/getting-started/project
In this template, the pages in your app are defined in `{your_app}/pages/`.
Each page is a function that returns a Reflex component.
For example, to edit this page you can modify `{your_app}/pages/index.py`.
See the [pages docs](https://reflex.dev/docs/components/pages/) for more information on pages.
See the [pages docs](https://reflex.dev/docs/pages/routes/) for more information on pages.
In this template, instead of using `rx.add_page` or the `@rx.page` decorator,
we use the `@template` decorator from `{your_app}/templates/template.py`.

0
reflex/.templates/apps/sidebar/assets/icon.svg → reflex/.templates/apps/sidebar/assets/reflex_black.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

8
reflex/.templates/apps/sidebar/assets/reflex_white.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="56" height="12" viewBox="0 0 56 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z" fill="white"/>
<path d="M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z" fill="white"/>
<path d="M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z" fill="white"/>
<path d="M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z" fill="white"/>
<path d="M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z" fill="white"/>
<path d="M47.04 4.8799V0.399902H49.28V4.8799H47.04ZM53.76 4.8799V0.399902H56V4.8799H53.76ZM49.28 7.1199V4.8799H53.76V7.1199H49.28ZM47.04 11.5999V7.1199H49.28V11.5999H47.04ZM53.76 11.5999V7.1199H56V11.5999H53.76Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 908 B

48
reflex/.templates/apps/sidebar/code/components/sidebar.py
View File

@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component:
Returns:
The sidebar header component.
"""
return rx.chakra.hstack(
return rx.hstack(
# The logo.
rx.chakra.image(
src="/icon.svg",
height="2em",
rx.color_mode_cond(
rx.image(src="/reflex_black.svg", height="2em"),
rx.image(src="/reflex_white.svg", height="2em"),
),
rx.chakra.spacer(),
rx.spacer(),
# Link to Reflex GitHub repo.
rx.chakra.link(
rx.chakra.center(
rx.chakra.image(
rx.link(
rx.center(
rx.image(
src="/github.svg",
height="3em",
padding="0.5em",
@ -35,6 +35,7 @@ def sidebar_header() -> rx.Component:
),
href="https://github.com/reflex-dev/reflex",
),
align="center",
width="100%",
border_bottom=styles.border,
padding="1em",
@ -47,15 +48,17 @@ def sidebar_footer() -> rx.Component:
Returns:
The sidebar footer component.
"""
return rx.chakra.hstack(
rx.chakra.spacer(),
rx.chakra.link(
rx.chakra.text("Docs"),
return rx.hstack(
rx.spacer(),
rx.link(
rx.text("Docs"),
href="https://reflex.dev/docs/getting-started/introduction/",
style=styles.link_style,
),
rx.chakra.link(
rx.chakra.text("Blog"),
rx.link(
rx.text("Blog"),
href="https://reflex.dev/blog/",
style=styles.link_style,
),
width="100%",
border_top=styles.border,
@ -79,14 +82,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
(rx.State.router.page.path == "/") & text == "Home"
)
return rx.chakra.link(
rx.chakra.hstack(
rx.chakra.image(
return rx.link(
rx.hstack(
rx.image(
src=icon,
height="2.5em",
padding="0.5em",
),
rx.chakra.text(
rx.text(
text,
),
bg=rx.cond(
@ -99,6 +102,7 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
styles.accent_text_color,
styles.text_color,
),
align="center",
border_radius=styles.border_radius,
box_shadow=styles.box_shadow,
width="100%",
@ -118,10 +122,10 @@ def sidebar() -> rx.Component:
# Get all the decorated pages and add them to the sidebar.
from reflex.page import get_decorated_pages
return rx.chakra.box(
rx.chakra.vstack(
return rx.box(
rx.vstack(
sidebar_header(),
rx.chakra.vstack(
rx.vstack(
*[
sidebar_item(
text=page.get("title", page["route"].strip("/").capitalize()),
@ -135,7 +139,7 @@ def sidebar() -> rx.Component:
align_items="flex-start",
padding="1em",
),
rx.chakra.spacer(),
rx.spacer(),
sidebar_footer(),
height="100dvh",
),

11
reflex/.templates/apps/sidebar/code/pages/dashboard.py
View File

@ -1,4 +1,5 @@
"""The dashboard page."""
from code.templates import template
import reflex as rx
@ -11,11 +12,11 @@ def dashboard() -> rx.Component:
Returns:
The UI for the dashboard page.
"""
return rx.chakra.vstack(
rx.chakra.heading("Dashboard", font_size="3em"),
rx.chakra.text("Welcome to Reflex!"),
rx.chakra.text(
return rx.vstack(
rx.heading("Dashboard", size="8"),
rx.text("Welcome to Reflex!"),
rx.text(
"You can edit this page in ",
rx.chakra.code("{your_app}/pages/dashboard.py"),
rx.code("{your_app}/pages/dashboard.py"),
),
)

51
reflex/.templates/apps/sidebar/code/pages/settings.py
View File

@ -1,6 +1,6 @@
"""The settings page."""
from code.templates import template
from code.templates import ThemeState, template
import reflex as rx
@ -12,11 +12,50 @@ def settings() -> rx.Component:
Returns:
The UI for the settings page.
"""
return rx.chakra.vstack(
rx.chakra.heading("Settings", font_size="3em"),
rx.chakra.text("Welcome to Reflex!"),
rx.chakra.text(
return rx.vstack(
rx.heading("Settings", size="8"),
rx.hstack(
rx.text("Dark mode: "),
rx.color_mode.switch(),
),
rx.hstack(
rx.text("Theme color: "),
rx.select(
[
"tomato",
"red",
"ruby",
"crimson",
"pink",
"plum",
"purple",
"violet",
"iris",
"indigo",
"blue",
"cyan",
"teal",
"jade",
"green",
"grass",
"brown",
"orange",
"sky",
"mint",
"lime",
"yellow",
"amber",
"gold",
"bronze",
"gray",
],
value=ThemeState.accent_color,
on_change=ThemeState.set_accent_color,
),
),
rx.text(
"You can edit this page in ",
rx.chakra.code("{your_app}/pages/settings.py"),
rx.code("{your_app}/pages/settings.py"),
size="1",
),
)

32
reflex/.templates/apps/sidebar/code/styles.py
View File

@ -4,12 +4,12 @@ import reflex as rx
border_radius = "0.375rem"
box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
border = "1px solid #F4F3F6"
text_color = "black"
accent_text_color = "#1A1060"
accent_color = "#F5EFFE"
hover_accent_color = {"_hover": {"color": accent_color}}
hover_accent_bg = {"_hover": {"bg": accent_color}}
border = f"1px solid {rx.color('accent', 12)}"
text_color = rx.color("gray", 11)
accent_text_color = rx.color("accent", 10)
accent_color = rx.color("accent", 1)
hover_accent_color = {"_hover": {"color": accent_text_color}}
hover_accent_bg = {"_hover": {"background_color": accent_color}}
content_width_vw = "90vw"
sidebar_width = "20em"
@ -24,7 +24,7 @@ template_content_style = {
}
link_style = {
"color": text_color,
"color": accent_text_color,
"text_decoration": "none",
**hover_accent_color,
}
@ -36,27 +36,25 @@ overlapping_button_style = {
}
base_style = {
rx.chakra.MenuButton: {
"width": "3em",
"height": "3em",
rx.menu.trigger: {
**overlapping_button_style,
},
rx.chakra.MenuItem: hover_accent_bg,
rx.menu.item: hover_accent_bg,
}
markdown_style = {
"code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"),
"a": lambda text, **props: rx.chakra.link(
"code": lambda text: rx.code(text, color=accent_text_color, bg=accent_color),
"a": lambda text, **props: rx.link(
text,
**props,
font_weight="bold",
color="#03030B",
color=accent_text_color,
text_decoration="underline",
text_decoration_color="#AD9BF8",
text_decoration_color=accent_text_color,
_hover={
"color": "#AD9BF8",
"color": accent_color,
"text_decoration": "underline",
"text_decoration_color": "#03030B",
"text_decoration_color": accent_color,
},
),
}

2
reflex/.templates/apps/sidebar/code/templates/__init__.py
View File

@ -1 +1 @@
from .template import template
from .template import ThemeState, template

96
reflex/.templates/apps/sidebar/code/templates/template.py
View File

@ -17,6 +17,21 @@ default_meta = [
]
def menu_item_link(text, href):
return rx.menu.item(
rx.link(
text,
href=href,
width="100%",
color="inherit",
),
_hover={
"color": styles.accent_color,
"background_color": styles.accent_text_color,
},
)
def menu_button() -> rx.Component:
"""The menu button on the top right of the page.
@ -25,37 +40,24 @@ def menu_button() -> rx.Component:
"""
from reflex.page import get_decorated_pages
return rx.chakra.box(
rx.chakra.menu(
rx.chakra.menu_button(
rx.chakra.icon(
tag="hamburger",
size="4em",
color=styles.text_color,
return rx.box(
rx.menu.root(
rx.menu.trigger(
rx.icon(
"menu",
size=36,
color=styles.accent_text_color,
),
background_color=styles.accent_color,
),
rx.chakra.menu_list(
rx.menu.content(
*[
rx.chakra.menu_item(
rx.chakra.link(
page["title"],
href=page["route"],
width="100%",
)
)
menu_item_link(page["title"], page["route"])
for page in get_decorated_pages()
],
rx.chakra.menu_divider(),
rx.chakra.menu_item(
rx.chakra.link(
"About", href="https://github.com/reflex-dev", width="100%"
)
),
rx.chakra.menu_item(
rx.chakra.link(
"Contact", href="mailto:founders@=reflex.dev", width="100%"
)
),
rx.menu.separator(),
menu_item_link("About", "https://github.com/reflex-dev"),
menu_item_link("Contact", "mailto:founders@=reflex.dev"),
),
),
position="fixed",
@ -65,6 +67,12 @@ def menu_button() -> rx.Component:
)
class ThemeState(rx.State):
"""The state for the theme of the app."""
accent_color: str = "crimson"
def template(
route: str | None = None,
title: str | None = None,
@ -101,6 +109,22 @@ def template(
# Get the meta tags for the page.
all_meta = [*default_meta, *(meta or [])]
def templated_page():
return rx.hstack(
sidebar(),
rx.box(
rx.box(
page_content(),
**styles.template_content_style,
),
**styles.template_page_style,
),
menu_button(),
align="start",
transition="left 0.5s, width 0.5s",
position="relative",
)
@rx.page(
route=route,
title=title,
@ -110,22 +134,12 @@ def template(
script_tags=script_tags,
on_load=on_load,
)
def templated_page():
return rx.chakra.hstack(
sidebar(),
rx.chakra.box(
rx.chakra.box(
page_content(),
**styles.template_content_style,
),
**styles.template_page_style,
),
menu_button(),
align_items="flex-start",
transition="left 0.5s, width 0.5s",
position="relative",
def theme_wrap():
return rx.theme(
templated_page(),
accent_color=ThemeState.accent_color,
)
return templated_page
return theme_wrap
return decorator