PC-2017.3.2 <Dell@XPS_13_9343 Merge branch 'master'

This commit is contained in:
Zofia Zientek 2023-12-12 21:46:24 +01:00
commit 07b7d24d40
11 changed files with 125 additions and 69 deletions

BIN
assets/about-icon-dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 903 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 732 B

BIN
assets/home-icon-dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 598 B

BIN
assets/image-icon-dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 820 B

BIN
assets/logo-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -3,6 +3,7 @@
from blurme import styles from blurme import styles
from blurme.state import State from blurme.state import State
from reflex.page import get_decorated_pages from reflex.page import get_decorated_pages
from blurme.templates import template
import reflex as rx import reflex as rx
@ -25,7 +26,7 @@ def sidebar_header() -> rx.Component:
align = 'center', align = 'center',
) )
def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component: def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
"""Sidebar item. """Sidebar item.
Args: Args:
@ -39,6 +40,10 @@ def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component:
# Whether the item is active. # Whether the item is active.
active = State.router.page.path == url active = State.router.page.path == url
default_dark_icon = "/image-icon-dark.png"
#final_dark_icon = dark_icon if dark_icon else default_dark_icon
#active = (State.router.page.path == f"/{text.lower()}") | ( #active = (State.router.page.path == f"/{text.lower()}") | (
# (State.router.page.path == "/") & text == "Strona główna" # (State.router.page.path == "/") & text == "Strona główna"
#) #)
@ -82,7 +87,6 @@ def sidebar() -> rx.Component:
Returns: Returns:
The sidebar component. The sidebar component.
""" """
# Get all the decorated pages and add them to the sidebar.
from reflex.page import get_decorated_pages from reflex.page import get_decorated_pages
return rx.box( return rx.box(

View File

@ -3,14 +3,46 @@ from blurme.templates import template
import reflex as rx import reflex as rx
ICON_EMAIL = "assets/email-icon.png"
ICON_PHONE = "assets/phone-icon.png"
@template(route="/dashboard", title="Kontakt", image="/contact-icon.png") @template(route="/dashboard", title="Kontakt", image="/contact-icon.png")
# def dashboard() -> rx.Component:
# """The dashboard page.
#
# Returns:
# The UI for the dashboard page.
# """
# section_style = {"background-color": "#f5f5f5", "padding": "10px", "margin-bottom": "20px"}
# icon_style = {"width": "20px", "height": "20px", "margin-right": "10px"}
# heading_style = {"font-weight": "bold", "font-family": "Arial, sans-serif"}
#
# return rx.fragment(
# rx.heading("Kontakt", font_size="3em"),
# rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"),
# rx.text(
# "Jesteśmy dostępni dla Ciebie na różnych platformach. "
# "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub "
# "po prostu chcesz porozmawiać o naszej aplikacji."
# ),
# rx.image(src=ICON_EMAIL, alt="Email icon", style=icon_style),
# rx.heading("E-mail", level=2, style=heading_style),
# rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com", style=section_style),
# rx.image(src=ICON_PHONE, alt="Phone icon", style=icon_style),
# rx.heading("Telefon", level=2, style=heading_style),
# rx.text("Możesz także zadzwonić pod numer: +48 123 456 789", style=section_style),
# )
def dashboard() -> rx.Component: def dashboard() -> rx.Component:
"""The dashboard page. """The dashboard page.
Returns: Returns:
The UI for the dashboard page. The UI for the dashboard page.
""" """
container_style = {"background-color": "#f5f5f5", "padding": "10px", "margin-bottom": "20px", "display": "flex", "align-items": "center"}
icon_style = {"width": "20px", "height": "20px", "margin-right": "10px"}
heading_style = {"font-weight": "bold", "font-family": "Arial, sans-serif"}
return rx.fragment( return rx.fragment(
rx.heading("Kontakt", font_size="3em"), rx.heading("Kontakt", font_size="3em"),
rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"), rx.text("Witaj na stronie Kontaktowej w aplikacji BlurMe!"),
@ -19,10 +51,20 @@ def dashboard() -> rx.Component:
"Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub " "Skontaktuj się z nami, gdy tylko masz pytania, sugestie lub "
"po prostu chcesz porozmawiać o naszej aplikacji." "po prostu chcesz porozmawiać o naszej aplikacji."
), ),
rx.heading("E-mail:", level=3), rx.fragment(
rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com"), rx.fragment(
rx.heading("Telefon:", level=3), rx.image(src=ICON_EMAIL, alt="Email icon", style=icon_style),
rx.text("Możesz także zadzwonić pod numer: +48 123 456 789"), rx.heading("E-mail", level=3, style=heading_style),
rx.heading("Media Społecznościowe:", level=3), rx.text("Zapraszamy do napisania do nas na adres: contact@blurme.com"),
rx.text("Odwiedź nas na Facebooku, Twitterze i Instagramie @BlurMeApp") style=container_style
)
),
rx.fragment(
rx.fragment(
rx.image(src=ICON_PHONE, alt="Phone icon", style=icon_style),
rx.heading("Telefon", level=3, style=heading_style),
rx.text("Możesz także zadzwonić pod numer: +48 123 456 789"),
style=container_style
)
)
) )

View File

@ -1,14 +1,29 @@
"""The settings page.""" """The settings page."""
import asyncio
from blurme.templates import template from blurme.templates import template
from blurme.state import State
import reflex as rx import reflex as rx
color = "rgb(107,99,246)"
@template(route="/settings", title="Zdjęcie", image = "/image-icon.png") @template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
def settings() -> rx.Component: def settings() -> rx.Component:
return rx.vstack( return rx.vstack(
rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"), rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"), rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
rx.upload(rx.text("Drag and drop files here or click to select files"),border="1px dotted rgb(107,99,246)", padding="5em")) rx.upload(
rx.vstack(rx.text("Drag and drop files here or click to select files"),),
border=f"1px dotted {color}",
padding="5em",),
rx.hstack(rx.foreach(rx.selected_files, rx.text)),
rx.button( "Upload",
on_click=lambda: State.handle_upload(
rx.upload_files()),),
rx.button("Clear",
on_click=rx.clear_selected_files),
rx.foreach(
State.img, lambda img: rx.image(src=f'/{img}')),
padding="5em",
)

View File

@ -1,12 +1,46 @@
"""Base state for the app.""" """Base state for the app."""
import reflex as rx import reflex as rx
from blurme import styles
import asyncio
#class State(rx.State):
# def __init__(self):
# super().__init__()
# self.dark_mode_state: bool = False
# def __str__(self):
# self.dark_mode_state
# def toggle_dark_mode(self) -> None:
# self.dark_mode_state = not self.dark_mode_state
# text_color = styles.text_color_light if self.dark_mode_state == True else styles.text_color_dark
# styles.text_color = text_color
# print(f"Dark Mode State: {self.dark_mode_state}")
# print(f"Current Text Color: {text_color}")
# pass
class State(rx.State): class State(rx.State):
"""Base state for the app. """The app state."""
# The images to show.
img: list[str] = []
async def handle_upload(self, files: list[rx.UploadFile]):
"""Handle the upload of file(s).
Args:
files: The uploaded files.
"""
for file in files:
upload_data = await file.read()
outfile = rx.get_asset_path(file.filename)
# Save the file.
with open(outfile, "wb") as file_object:
file_object.write(upload_data)
# Update the img var.
self.img.append(file.filename)
self.img = self.img
print(f"Current Text Color: {self.img[0]}")
The base state is used to store general vars used throughout the app.
"""
pass

View File

@ -1,11 +1,15 @@
"""Styles for the app.""" """Styles for the app."""
import reflex as rx import reflex as rx
from blurme.state import State
border_radius = "0.375rem" border_radius = "0.375rem"
box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)" box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
border = "1px solid #F4F3F6" border = "1px solid #F4F3F6"
text_color = "black" text_color = "black"
#dark_mode_state = State.toggle_dark_mode()
#text_color = "white" if dark_mode_state == True else "purple"
text_color_light = "black"
text_color_dark = "white" text_color_dark = "white"
accent_text_color = "black" accent_text_color = "black"
accent_color = "linear-gradient(linear-gradient(43deg, rgba(201,238,248,1) 18%, rgba(253,210,227,0.7792366946778712) 86%)" accent_color = "linear-gradient(linear-gradient(43deg, rgba(201,238,248,1) 18%, rgba(253,210,227,0.7792366946778712) 86%)"

View File

@ -5,6 +5,7 @@ from __future__ import annotations
from blurme import styles from blurme import styles
from blurme.components.sidebar import sidebar from blurme.components.sidebar import sidebar
from typing import Callable from typing import Callable
from blurme.state import State
import reflex as rx import reflex as rx
@ -16,71 +17,27 @@ default_meta = [
}, },
] ]
#def menu_button() -> rx.Component:
# """The menu button on the top right of the page.
#
# Returns:
# The menu button component.
# """
# from reflex.page import get_decorated_pages
# return rx.box(
# rx.menu(
# rx.menu_button(
# rx.icon(
# tag="hamburger",
# size="4em",
# color=styles.text_color,
# ),
# ),
# rx.menu_list(
# *[
# rx.menu_item(
# rx.link(
# page["title"],
# href=page["route"],
# width="100%",
# )
# )
# for page in get_decorated_pages()
# ],
# rx.menu_divider(),
# rx.menu_item(
# rx.link("About", href="/about", width="100%")
# ),
# rx.menu_item(
# rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%")
# ),
# ),
# ),
# position="fixed",
# right="1.5em",
# top="1.5em",
# z_index="500",
# )
def dark_mode() -> rx.Component: def dark_mode() -> rx.Component:
return rx.box( return rx.box(
rx.button( rx.button(
rx.icon( rx.icon(
tag="moon", tag="moon",
size="4em", size="4em",
color=styles.text_color, color=styles.text_color,
), ),
on_click=rx.toggle_color_mode, on_click= rx.toggle_color_mode
#State.toggle_dark_mode()
), ),
position="fixed", position="fixed",
right="1.5em", right="1.5em",
top="1.5em", top="1.5em",
z_index="500", z_index="500",)
)
def template( def template(
route: str | None = None, route: str | None = None,
title: str | None = None, title: str | None = None,
image: str | None = None, image: str | None = None,
image_dark: str | None = None,
description: str | None = None, description: str | None = None,
meta: str | None = None, meta: str | None = None,
script_tags: list[rx.Component] | None = None, script_tags: list[rx.Component] | None = None,
@ -92,9 +49,10 @@ def template(
route: The route to reach the page. route: The route to reach the page.
title: The title of the page. title: The title of the page.
image: The favicon of the page. image: The favicon of the page.
image_dark: The dark mode favicon of the page.
description: The description of the page. description: The description of the page.
meta: Additionnal meta to add to the page. meta: Additional meta to add to the page.
on_load: The event handler(s) called when the page load. on_load: The event handler(s) called when the page loads.
script_tags: Scripts to attach to the page. script_tags: Scripts to attach to the page.
Returns: Returns:
@ -132,7 +90,6 @@ def template(
), ),
**styles.template_page_style, **styles.template_page_style,
), ),
#menu_button(),
dark_mode(), dark_mode(),
align_items="flex-start", align_items="flex-start",
transition="left 0.5s, width 0.5s", transition="left 0.5s, width 0.5s",