diff --git a/blurme/pages/settings.py b/blurme/pages/settings.py index 7703e77..2ce3986 100644 --- a/blurme/pages/settings.py +++ b/blurme/pages/settings.py @@ -10,20 +10,32 @@ color = "rgb(107,99,246)" @template(route="/settings", title="Zdjęcie", image = "/image-icon.png") 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.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"), rx.upload( - rx.vstack(rx.text("Drag and drop files here or click to select files"),), + rx.vstack(rx.text("Przeciągnij albo kliknij, aby wybrać pliki"),), border=f"1px dotted {color}", padding="5em",), rx.hstack(rx.foreach(rx.selected_files, rx.text)), - rx.button( "Upload", + rx.button( "Załaduj zdjęcie", on_click=lambda: State.handle_upload( rx.upload_files()),), - rx.button("Clear", - on_click=rx.clear_selected_files), + #rx.button("Clear", + # on_click=rx.clear_selected_files),), rx.foreach( - State.img, lambda img: rx.image(src=f'/{img}')), - padding="5em", + State.img, + lambda img: rx.vstack( + rx.image(src=f'/{img}', max_width = "800px"), + rx.hstack(rx.button("Usuń", + on_click=lambda img_name=img: State.delete_image(img_name), + width = "125px"), + rx.button("Anonimizuj", + width = "125px"), + rx.button("Pobierz", + width = "125px"), + padding="1em" + ), + padding="3em", ) + )) \ No newline at end of file diff --git a/blurme/state.py b/blurme/state.py index 359220d..ebd7f9e 100644 --- a/blurme/state.py +++ b/blurme/state.py @@ -4,26 +4,14 @@ 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): """The app state.""" # The images to show. img: list[str] = [] + # Dark mode status + #dark_mode: bool = False + async def handle_upload(self, files: list[rx.UploadFile]): """Handle the upload of file(s). Args: @@ -36,11 +24,30 @@ class State(rx.State): # 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]}") - + def delete_image(self, img_name: str): + if img_name in self.img: + self.img.remove(img_name) + self.img=self.img + #async def toggle_dark_mode(self): + # self.dark_mode = not self.dark_mode + # print(f"Dark Mode State: {self.dark_mode}") + +#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 \ No newline at end of file diff --git a/blurme/styles.py b/blurme/styles.py index c0bd4f4..8ea89b2 100644 --- a/blurme/styles.py +++ b/blurme/styles.py @@ -13,9 +13,6 @@ 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%)" -#linear-gradient(120deg, #d299c2 0%, #fef9d7 100%);" -#linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);" - hover_accent_color = {"_hover": {"color": accent_color}} hover_accent_bg = {"_hover": {"bg": accent_color}} content_width_vw = "90vw" @@ -43,16 +40,6 @@ overlapping_button_style = { "border_radius": border_radius, } -#base_style = { -# rx.MenuButton: { -# "width": "3em", -# "height": "3em", -# **overlapping_button_style, -# }, -# rx.MenuItem: hover_accent_bg, -#} - - markdown_style = { "code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD", margin="10px 0"), "a": lambda text, **props: rx.link(