Dioxus!

- Added dioxus project. - Improvemed freya project.
edfloreshz · Feb 5, 2024 · e97d7e2 · e97d7e2
1 parent 9f35df2
commit e97d7e2
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 120 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -39,5 +39,5 @@ exclude = [".idea", ".github", ".vscode"]
 
 [workspace]
 resolver = "2"
-members = ["cli", "gui/freya", "gui/iced", "gui/egui"]
+members = ["cli", "gui/dioxus", "gui/freya", "gui/iced", "gui/egui"]
 exclude = ["gui/slint"]
diff --git a/gui/dioxus/Cargo.toml b/gui/dioxus/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "devmode-dioxus"
+version.workspace = true
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+homepage.workspace = true
+categories.workspace = true
+keywords.workspace = true
+exclude.workspace = true
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = "0.4.3"
+dioxus-desktop = "0.4.3"
diff --git a/gui/dioxus/src/main.rs b/gui/dioxus/src/main.rs
@@ -0,0 +1,65 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+#[derive(Debug, Default, PartialEq, Props)]
+struct Devmode {
+    page: Page,
+}
+
+#[derive(Debug, Default, PartialEq, Clone)]
+enum Page {
+    #[default]
+    Clone,
+    Open,
+    Workspaces,
+    Preferences,
+}
+
+fn main() {
+    dioxus_desktop::launch(App);
+}
+
+fn App(cx: Scope) -> Element {
+    let app = use_ref(cx, || Devmode::default());
+
+    render! {
+        div { width: "100%", height: "100%",
+            div { width: "100%", padding: "10 0 0 0",
+                button { onclick: move |_| app.with_mut(|app| app.page = Page::Clone), label { "Clone" } }
+                button { onclick: move |_| app.with_mut(|app| app.page = Page::Open), label { "Open" } }
+                button { onclick: move |_| app.with_mut(|app| app.page = Page::Workspaces), label { "Workspaces" } }
+                button { onclick: move |_| app.with_mut(|app| app.page = Page::Preferences), label { "Preferences" } }
+            }
+            div {
+                width: "100%",
+                height: "calc(100% - 65)",
+                padding: "15",
+                margin: "15",
+                // background: "rgb(132, 115, 108)",
+                // shadow: "0 0 10 1 rgb(0, 0, 0, 120)",
+                background: "rgb(255, 255, 255)",
+                Page { page: app.read().page.clone() }
+            }
+            div { width: "100%", height: "65", padding: "10",
+                button { label { "Clone" } }
+            }
+        }
+    }
+}
+
+fn Page(cx: Scope<Devmode>) -> Element {
+    match cx.props.page {
+        Page::Clone => render!(
+            div { width: "100%", label { "Remote repositories" } }
+        ),
+        Page::Open => render!(
+            div { label { "Local repositories" } }
+        ),
+        Page::Workspaces => render!(
+            div { label { "Workspaces" } }
+        ),
+        Page::Preferences => render!(
+            div { label { "Preferences" } }
+        ),
+    }
+}
diff --git a/gui/freya/Cargo.toml b/gui/freya/Cargo.toml
@@ -16,3 +16,4 @@ dioxus = { version = "0.4", features = [
     "macro",
     "hooks",
 ], default-features = false }
+dark-light = "1.0.0"
diff --git a/gui/freya/src/main.rs b/gui/freya/src/main.rs
@@ -1,51 +1,27 @@
+#![allow(non_snake_case)]
 #![cfg_attr(
     all(not(debug_assertions), target_os = "windows"),
     windows_subsystem = "windows"
 )]
-
 use freya::hotreload::FreyaCtx;
 use freya::prelude::*;
 
-const LIGHT_CUSTOM: Theme = Theme {
-    button: ButtonTheme {
-        background: cow_borrowed!("rgb(230, 219, 204)"),
-        hover_background: cow_borrowed!("rgb(132, 115, 108)"),
-        border_fill: cow_borrowed!("rgb(230, 219, 204)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("black"),
-        },
-        ..LIGHT_THEME.button
-    },
-    body: BodyTheme {
-        background: cow_borrowed!("rgb(240, 234, 226)"),
-        ..LIGHT_THEME.body
-    },
-    ..LIGHT_THEME
-};
-
-const DARK_CUSTOM: Theme = Theme {
-    button: ButtonTheme {
-        background: cow_borrowed!("rgb(132, 115, 108)"),
-        hover_background: cow_borrowed!("rgb(56, 49, 46)"),
-        border_fill: cow_borrowed!("rgb(56, 49, 46)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        ..DARK_THEME.button
-    },
-    body: BodyTheme {
-        background: cow_borrowed!("rgb(47, 42, 39)"),
-        ..DARK_THEME.body
-    },
-    ..DARK_THEME
-};
-
-#[derive(Debug, Default, PartialEq, Props)]
+#[derive(Debug, PartialEq, Props)]
 struct Devmode {
     page: Page,
+    is_light: bool,
 }
 
-#[derive(Debug, Default, PartialEq, Clone)]
+impl Default for Devmode {
+    fn default() -> Self {
+        Self {
+            page: Default::default(),
+            is_light: dark_light::detect() == dark_light::Mode::Light,
+        }
+    }
+}
+
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
 enum Page {
     #[default]
     Clone,
@@ -68,105 +44,102 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     let app = use_ref(cx, || Devmode::default());
+    let theme = match dark_light::detect() {
+        dark_light::Mode::Dark => DARK_THEME,
+        dark_light::Mode::Light | dark_light::Mode::Default => LIGHT_THEME,
+    };
 
     render!(
-        ThemeProvider {
-            theme: LIGHT_CUSTOM,
+        ThemeProvider { theme: theme,
             Body {
-                rect {
-                    width: "100%",
-                    height: "100%",
+                rect { width: "100%", height: "100%",
                     rect {
                         width: "100%",
                         padding: "10 0 0 0",
                         direction: "horizontal",
                         cross_align: "center",
                         main_align: "center",
-                        Button {
-                            onclick: move |_| app.with_mut(|app| app.page = Page::Clone),
-                            label {
-                                "Clone"
-                            }
-                        }
-                        Button {
-                            onclick: move |_| app.with_mut(|app| app.page = Page::Open),
-                            label {
-                                "Open"
-                            }
-                        }
-                        Button {
-                            onclick: move |_| app.with_mut(|app| app.page = Page::Workspaces),
-                            label {
-                                "Workspaces"
-                            }
-                        }
-                        Button {
-                            onclick: move |_| app.with_mut(|app| app.page = Page::Preferences),
-                            label {
-                                "Preferences"
-                            }
-                        }
-                    }
-                    rect {
-                        width: "100%",
-                        cross_align: "center",
-                        rect {
-                            width: "100%",
-                            height: "calc(100% - 65)",
-                            padding: "15",
-                            margin: "15",
-                            corner_radius: "10",
-                            corner_smoothing: "75%",
-                            // background: "rgb(132, 115, 108)",
-                            // shadow: "0 0 10 1 rgb(0, 0, 0, 120)",
-                            background: "rgb(255, 255, 255)",
-                            shadow: "0 0 10 1 rgb(100, 100, 100, 120)",
-                            Page {
-                                page: app.read().page.clone()
-                            }
-                        }
-                        rect {
-                            width: "100%",
-                            height: "65",
-                            padding: "10",
-                            cross_align: "center",
-                            main_align: "center",
-                            Button {
-                                label {
-                                    "Clone"
-                                }
-                            }
-                        }
+                        Button { onclick: move |_| app.with_mut(|app| app.page = Page::Clone), label { "Clone" } }
+                        Button { onclick: move |_| app.with_mut(|app| app.page = Page::Open), label { "Open" } }
+                        Button { onclick: move |_| app.with_mut(|app| app.page = Page::Workspaces), label { "Workspaces" } }
+                        Button { onclick: move |_| app.with_mut(|app| app.page = Page::Preferences), label { "Preferences" } }
                     }
+                    Page { page: app.read().page, is_light: app.read().is_light }
+                    Footer { page: app.read().page, is_light: app.read().is_light }
                 }
             }
         }
     )
 }
 
 fn Page(cx: Scope<Devmode>) -> Element {
-    let value = use_state(cx, String::new);
-    match cx.props.page {
-        Page::Clone => render!(rect {
-            width: "100%",
-            label {
-                "Remote repositories"
-            }
-        }),
-        Page::Open => render!(rect {
-            label {
-                "Local repositories"
-            }
-        }),
-        Page::Workspaces => render!(rect {
-            label {
-                "Workspaces"
+    let background = if cx.props.is_light {
+        "rgb(240, 240, 240)"
+    } else {
+        "rgb(32, 32, 32)"
+    };
+    let shadow = if cx.props.is_light {
+        "0 0 10 1 rgb(100, 100, 100, 120)"
+    } else {
+        "0 0 10 1 rgb(0, 0, 0, 120)"
+    };
+    let page = match cx.props.page {
+        Page::Clone => render!(
+            rect { label { "Remote repositories" } }
+        ),
+        Page::Open => render!(
+            rect { label { "Local repositories" } }
+        ),
+        Page::Workspaces => render!(
+            rect { label { "Workspaces" } }
+        ),
+        Page::Preferences => render!(
+            rect { label { "Preferences" } }
+        ),
+    };
+    render! {
+        rect { width: "100%", cross_align: "center",
+            rect {
+                width: "100%",
+                height: "calc(100% - 65)",
+                padding: "15",
+                margin: "15",
+                corner_radius: "10",
+                corner_smoothing: "75%",
+                background: background,
+                shadow: shadow,
+                page
             }
-        }),
-        Page::Preferences => render!(rect {
-            label {
-                "Preferences"
+        }
+    }
+}
+
+fn Footer(cx: Scope<Devmode>) -> Element {
+    render! {
+        rect {
+            width: "100%",
+            height: "65",
+            padding: "10",
+            cross_align: "center",
+            main_align: "center",
+            direction: "horizontal",
+            match cx.props.page {
+                Page::Clone => render!(
+                    Button { label { "Clone" } }
+                ),
+                Page::Open => render!(
+                    Button { label { "Open" } },
+                    Button { label { "Add to workspace" } }
+                ),
+                Page::Workspaces => render!(
+                    Button { label { "Add" } },
+                    Button { label { "Edit" } },
+                    Button { label { "Remove" } }
+                ),
+                Page::Preferences => render! {
+                    Button { label { "Save" } }
+                }
             }
-        }),
+        }
     }
 }
diff --git a/gui/iced/src/app.rs b/gui/iced/src/app.rs
@@ -24,7 +24,7 @@ pub enum Message {
 }
 
 #[derive(Debug, Default, PartialEq, EnumIter, Display, Clone)]
-enum Page {
+pub enum Page {
     #[default]
     Clone,
     Open,