Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update sidebar temp #2959

Merged
merged 3 commits into from Apr 2, 2024
Merged

Update sidebar temp #2959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
151d595
Update sidebar temp
Mar 29, 2024
ac027b9
ruff
Mar 29, 2024
3d3e86c
Update darglint
picklelo Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
43 changes: 16 additions & 27 deletions reflex/.templates/apps/sidebar/code/components/sidebar.py
View file
Open in desktop
Expand Up @@ -18,27 +18,19 @@ def sidebar_header() -> rx.Component:
rx.image(src="/reflex_white.svg", height="2em"),
),
rx.spacer(),
# Link to Reflex GitHub repo.
rx.link(
rx.center(
rx.image(
src="/github.svg",
height="3em",
padding="0.5em",
),
box_shadow=styles.box_shadow,
bg="transparent",
border_radius=styles.border_radius,
_hover={
"bg": styles.accent_color,
},
rx.button(
rx.icon("github"),
color_scheme="gray",
variant="soft",
),
href="https://github.com/reflex-dev/reflex",
),
align="center",
width="100%",
border_bottom=styles.border,
padding="1em",
padding_x="1em",
padding_y="2em",
)


Expand All @@ -53,25 +45,24 @@ def sidebar_footer() -> rx.Component:
rx.link(
rx.text("Docs"),
href="https://reflex.dev/docs/getting-started/introduction/",
style=styles.link_style,
color_scheme="gray",
),
rx.link(
rx.text("Blog"),
href="https://reflex.dev/blog/",
style=styles.link_style,
color_scheme="gray",
),
width="100%",
border_top=styles.border,
padding="1em",
)


def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
def sidebar_item(text: str, url: str) -> rx.Component:
"""Sidebar item.

Args:
text: The text of the item.
icon: The icon of the item.
url: The URL of the item.

Returns:
Expand All @@ -84,29 +75,28 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:

return rx.link(
rx.hstack(
rx.image(
src=icon,
height="2.5em",
padding="0.5em",
),
rx.text(
text,
),
bg=rx.cond(
active,
styles.accent_color,
rx.color("accent", 2),
"transparent",
),
border=rx.cond(
active,
f"1px solid {rx.color('accent', 6)}",
f"1px solid {rx.color('gray', 6)}",
),
color=rx.cond(
active,
styles.accent_text_color,
styles.text_color,
),
align="center",
border_radius=styles.border_radius,
box_shadow=styles.box_shadow,
width="100%",
padding_x="1em",
padding="1em",
),
href=url,
width="100%",
Expand All @@ -129,7 +119,6 @@ def sidebar() -> rx.Component:
*[
sidebar_item(
text=page.get("title", page["route"].strip("/").capitalize()),
icon=page.get("image", "/github.svg"),
url=page["route"],
)
for page in get_decorated_pages()
Expand Down
2 changes: 1 addition & 1 deletion reflex/.templates/apps/sidebar/code/pages/index.py
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@
import reflex as rx


@template(route="/", title="Home", image="/github.svg")
@template(route="/", title="Home")
def index() -> rx.Component:
"""The home page.

Expand Down
17 changes: 16 additions & 1 deletion reflex/.templates/apps/sidebar/code/pages/settings.py
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@ def settings() -> rx.Component:
rx.color_mode.switch(),
),
rx.hstack(
rx.text("Theme color: "),
rx.text("Primary color: "),
rx.select(
[
"tomato",
Expand Down Expand Up @@ -53,6 +53,21 @@ def settings() -> rx.Component:
on_change=ThemeState.set_accent_color,
),
),
rx.hstack(
rx.text("Secondary color: "),
rx.select(
[
"gray",
"mauve",
"slate",
"sage",
"olive",
"sand",
],
value=ThemeState.gray_color,
on_change=ThemeState.set_gray_color,
),
),
rx.text(
"You can edit this page in ",
rx.code("{your_app}/pages/settings.py"),
Expand Down
4 changes: 1 addition & 3 deletions reflex/.templates/apps/sidebar/code/sidebar.py
View file
Open in desktop
@@ -1,7 +1,5 @@
"""Welcome to Reflex!."""

from code import styles

# Import all the pages.
from code.pages import *

Expand All @@ -13,4 +11,4 @@ class State(rx.State):


# Create the app.
app = rx.App(style=styles.base_style)
app = rx.App()
21 changes: 3 additions & 18 deletions reflex/.templates/apps/sidebar/code/styles.py
View file
Open in desktop
Expand Up @@ -3,8 +3,7 @@
import reflex as rx

border_radius = "0.375rem"
box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
border = f"1px solid {rx.color('accent', 12)}"
border = f"1px solid {rx.color('gray', 6)}"
text_color = rx.color("gray", 11)
accent_text_color = rx.color("accent", 10)
accent_color = rx.color("accent", 1)
Expand All @@ -17,7 +16,6 @@

template_content_style = {
"align_items": "flex-start",
"box_shadow": box_shadow,
"border_radius": border_radius,
"padding": "1em",
"margin_bottom": "2em",
Expand All @@ -31,30 +29,17 @@

overlapping_button_style = {
"background_color": "white",
"border": border,
"border_radius": border_radius,
}

base_style = {
rx.menu.trigger: {
**overlapping_button_style,
},
rx.menu.item: hover_accent_bg,
}

markdown_style = {
"code": lambda text: rx.code(text, color=accent_text_color, bg=accent_color),
"code": lambda text: rx.code(text, color_scheme="gray"),
"codeblock": lambda text, **props: rx.code_block(text, **props, margin_y="1em"),
"a": lambda text, **props: rx.link(
text,
**props,
font_weight="bold",
color=accent_text_color,
text_decoration="underline",
text_decoration_color=accent_text_color,
_hover={
"color": accent_color,
"text_decoration": "underline",
"text_decoration_color": accent_color,
},
),
}
23 changes: 11 additions & 12 deletions reflex/.templates/apps/sidebar/code/templates/template.py
View file
Open in desktop
Expand Up @@ -43,12 +43,10 @@ def menu_button() -> rx.Component:
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.button(
rx.icon("menu"),
variant="soft",
)
),
rx.menu.content(
*[
Expand All @@ -61,8 +59,8 @@ def menu_button() -> rx.Component:
),
),
position="fixed",
right="1.5em",
top="1.5em",
right="2em",
top="2em",
z_index="500",
)

Expand All @@ -72,11 +70,12 @@ class ThemeState(rx.State):

accent_color: str = "crimson"

gray_color: str = "gray"


def template(
route: str | None = None,
title: str | None = None,
image: str | None = None,
description: str | None = None,
meta: str | None = None,
script_tags: list[rx.Component] | None = None,
Expand All @@ -87,7 +86,6 @@ def template(
Args:
route: The route to reach the page.
title: The title of the page.
image: The favicon of the page.
description: The description of the page.
meta: Additionnal meta to add to the page.
on_load: The event handler(s) called when the page load.
Expand Down Expand Up @@ -121,14 +119,13 @@ def templated_page():
),
menu_button(),
align="start",
transition="left 0.5s, width 0.5s",
background=f"radial-gradient(circle at top right, {rx.color('accent', 2)}, {rx.color('mauve', 1)});",
position="relative",
)

@rx.page(
route=route,
title=title,
image=image,
description=description,
meta=all_meta,
script_tags=script_tags,
Expand All @@ -137,7 +134,9 @@ def templated_page():
def theme_wrap():
return rx.theme(
templated_page(),
has_background=True,
accent_color=ThemeState.accent_color,
gray_color=ThemeState.gray_color,
)

return theme_wrap
Expand Down