Merge branch 'master' of https://git.wmi.amu.edu.pl/s352038/BlurMe

blurme/components/sidebar.py

@@ -3,6 +3,7 @@
 from blurme import styles
 from blurme.state import State
 from reflex.page import get_decorated_pages
+from blurme.templates import template
 
 
 import reflex as rx
@@ -25,7 +26,7 @@ def sidebar_header() -> rx.Component:
         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.
 
     Args:
@@ -39,6 +40,10 @@ def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component:
     # Whether the item is active.
     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()}") | (
     #    (State.router.page.path == "/") & text == "Strona główna"
     #)
@@ -82,7 +87,6 @@ def sidebar() -> rx.Component:
     Returns:
         The sidebar component.
     """
-    # Get all the decorated pages and add them to the sidebar.
     from reflex.page import get_decorated_pages
 
     return rx.box(

blurme/pages/settings.py

@@ -1,14 +1,29 @@
 """The settings page."""
-
+import asyncio
 from blurme.templates import template
+from blurme.state import State
 
 import reflex as rx
 
+
+color = "rgb(107,99,246)"
+
 @template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
 def settings() -> rx.Component:
    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.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",
+    )

blurme/state.py

@@ -1,12 +1,46 @@
 """Base state for the app."""
 
 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):
-    """Base state for the app.
+   """The app state."""
 
-    The base state is used to store general vars used throughout the app.
+   # 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]}")  
+   
+
 
-    pass

blurme/styles.py

@@ -1,11 +1,15 @@
 """Styles for the app."""
 
 import reflex as rx
+from blurme.state import State
 
 border_radius = "0.375rem"
 box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
 border = "1px solid #F4F3F6"
 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"
 accent_text_color = "black"
 accent_color = "linear-gradient(linear-gradient(43deg, rgba(201,238,248,1) 18%, rgba(253,210,227,0.7792366946778712) 86%)"

blurme/templates/template.py

@@ -5,6 +5,7 @@ from __future__ import annotations
 from blurme import styles
 from blurme.components.sidebar import sidebar
 from typing import Callable
+from blurme.state import State
 
 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:
     return rx.box(
-        
             rx.button(
                 rx.icon(
                     tag="moon", 
                     size="4em",
                     color=styles.text_color,
                 ),
-                on_click=rx.toggle_color_mode, 
+                on_click= rx.toggle_color_mode
+                #State.toggle_dark_mode()
             ),
-        
         position="fixed",
         right="1.5em",
         top="1.5em",
-        z_index="500",
-    )
+        z_index="500",)
 
 def template(
     route: str | None = None,
     title: str | None = None,
     image: str | None = None,
+    image_dark: str | None = None,
     description: str | None = None,
     meta: str | None = None,
     script_tags: list[rx.Component] | None = None,
@@ -92,9 +49,10 @@ def template(
         route: The route to reach the page.
         title: The title of the page.
         image: The favicon of the page.
+        image_dark: The dark mode 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.
+        meta: Additional meta to add to the page.
+        on_load: The event handler(s) called when the page loads.
         script_tags: Scripts to attach to the page.
 
     Returns:
@@ -132,7 +90,6 @@ def template(
                     ),
                     **styles.template_page_style,
                 ),
-                #menu_button(),
                 dark_mode(),
                 align_items="flex-start",
                 transition="left 0.5s, width 0.5s",