From 623ab032db5b2c305b54bcec547576f99087daf0 Mon Sep 17 00:00:00 2001 From: euzu Date: Fri, 27 Jun 2025 21:40:56 +0200 Subject: [PATCH] web ui refactoring --- .../src/component/form-view/form-view.scss | 14 +++--- .../component/input-field/input-field.scss | 24 +++++------ frontend/src/component/login/login.scss | 16 +++---- .../schedule-editor/schedule-editor.scss | 1 - frontend/src/scss/_default.scss | 1 - frontend/src/scss/_preferences.scss | 13 ------ webui/scss/_component.scss | 5 +++ webui/scss/_default.scss | 5 --- webui/scss/_input.scss | 36 ++++++++++++++++ webui/scss/_login.scss | 34 +++++++-------- webui/scss/_panel.scss | 10 +++++ webui/scss/_theme.scss | 12 +++--- webui/scss/main.scss | 12 +----- webui/src/app/components/input.rs | 43 +++++++++++++++++++ webui/src/app/components/login.rs | 18 ++++---- webui/src/app/components/mod.rs | 1 + 16 files changed, 155 insertions(+), 90 deletions(-) create mode 100644 webui/scss/_component.scss create mode 100644 webui/scss/_input.scss create mode 100644 webui/scss/_panel.scss create mode 100644 webui/src/app/components/input.rs diff --git a/frontend/src/component/form-view/form-view.scss b/frontend/src/component/form-view/form-view.scss index 48df6e4b4..4e695e6d9 100644 --- a/frontend/src/component/form-view/form-view.scss +++ b/frontend/src/component/form-view/form-view.scss @@ -76,13 +76,13 @@ content: ':' } } - - input { - @include preferences.prefsInput(); - flex: 1 1 0; - min-width: 0; - width: 100%; - } + // + //input { + // @include preferences.prefsInput(); + // flex: 1 1 0; + // min-width: 0; + // width: 100%; + //} } } diff --git a/frontend/src/component/input-field/input-field.scss b/frontend/src/component/input-field/input-field.scss index 934f8e262..8900d7beb 100644 --- a/frontend/src/component/input-field/input-field.scss +++ b/frontend/src/component/input-field/input-field.scss @@ -39,18 +39,18 @@ font-size: 1.1rem !important; } - input { - color: var(--text-color); - border: none !important; - flex: 1 1 0; - height: 100%; - width: 100%; - min-width: 0; - font-size: 1.1rem !important; - outline: none !important; - padding: 0 4px 0 12px; - box-sizing: border-box; - } + //input { + // color: var(--text-color); + // border: none !important; + // flex: 1 1 0; + // height: 100%; + // width: 100%; + // min-width: 0; + // font-size: 1.1rem !important; + // outline: none !important; + // padding: 0 4px 0 12px; + // box-sizing: border-box; + //} button { @include common.iconButton(); diff --git a/frontend/src/component/login/login.scss b/frontend/src/component/login/login.scss index 7f81e27a0..a13d81621 100644 --- a/frontend/src/component/login/login.scss +++ b/frontend/src/component/login/login.scss @@ -54,14 +54,14 @@ padding: 8px; width: 300px; - input { - height: 2rem; - border: none; - border-radius: 6px; - font-size: 1.4rem; - background-color: var(--card-background-color); - padding: 4px 8px; - } + //input { + // height: 2rem; + // border: none; + // border-radius: 6px; + // font-size: 1.4rem; + // background-color: var(--card-background-color); + // padding: 4px 8px; + //} input[type="password"] { caret-color: var(--card-color); } diff --git a/frontend/src/component/schedule-editor/schedule-editor.scss b/frontend/src/component/schedule-editor/schedule-editor.scss index 27ed1d256..7ff04fcc3 100644 --- a/frontend/src/component/schedule-editor/schedule-editor.scss +++ b/frontend/src/component/schedule-editor/schedule-editor.scss @@ -20,7 +20,6 @@ $input-width: 150px; width: $input-width; min-width: $input-width; max-width: $input-width; - @include preferences.prefsInput(); } diff --git a/frontend/src/scss/_default.scss b/frontend/src/scss/_default.scss index 2975bbeb1..f0b2117d6 100644 --- a/frontend/src/scss/_default.scss +++ b/frontend/src/scss/_default.scss @@ -59,7 +59,6 @@ button { select, input { - background-color: transparent; color: var(--text-color); &:focus { background-color: var(--background-color) !important; diff --git a/frontend/src/scss/_preferences.scss b/frontend/src/scss/_preferences.scss index 5114593ae..15b5b8d2f 100644 --- a/frontend/src/scss/_preferences.scss +++ b/frontend/src/scss/_preferences.scss @@ -6,19 +6,6 @@ overflow: hidden; } -@mixin prefsInput { - color: var(--text-color); - background-color: transparent; - padding: 0.2rem 0.5rem; - flex: 1 1 auto; - border: 1px solid var(--border-color); - - &:focus, - &:hover { - outline: none; - } -} - @mixin prefsToolbar() { &__toolbar { display: flex; diff --git a/webui/scss/_component.scss b/webui/scss/_component.scss new file mode 100644 index 000000000..f95c008a5 --- /dev/null +++ b/webui/scss/_component.scss @@ -0,0 +1,5 @@ +@forward "input"; +@forward "app"; +@forward "panel"; +@forward "login"; +@forward "preferences"; \ No newline at end of file diff --git a/webui/scss/_default.scss b/webui/scss/_default.scss index 5568e8142..2e4536192 100644 --- a/webui/scss/_default.scss +++ b/webui/scss/_default.scss @@ -59,11 +59,6 @@ button { select, input { - background-color: transparent; - color: var(--text-color); - &:focus { - background-color: var(--background-color) !important; - } } select { diff --git a/webui/scss/_input.scss b/webui/scss/_input.scss new file mode 100644 index 000000000..b038ad594 --- /dev/null +++ b/webui/scss/_input.scss @@ -0,0 +1,36 @@ +.input { + display: flex; + flex-flow: column; + overflow: hidden; + gap: 6px; + .input-wrapper { + border: 1px solid var(--input-border-color); + border-radius: var(--border-radius); + background-color: var(--input-background-color); + padding: 6px; + &:focus-within { + border-color: var(--input-focus-border-color); + } + + input { + box-sizing: border-box; + width: 100%; + font-family: inherit; + border: none; + color: var(--text-color); + background-color: var(--input-background-color); + padding: 0.2rem 0.5rem; + flex: 1 1 auto; + caret-color: var(--text-color); + + &:focus, + &:hover { + outline: none; + } + } + } + label { + padding-left: 2px; + color: var(--text-color); + } +} \ No newline at end of file diff --git a/webui/scss/_login.scss b/webui/scss/_login.scss index 65980561f..18de939bd 100644 --- a/webui/scss/_login.scss +++ b/webui/scss/_login.scss @@ -4,17 +4,19 @@ display: flex; flex-flow: column; gap: 8px; - margin: 10% auto auto auto; - border: 1px solid var(--border-color); - border-top-left-radius: 6px; - border-top-right-radius: 6px; + margin: auto; overflow: hidden; position: relative; z-index: 1; + padding: 60px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--card-background-color); + width: 400px; &__header { display: flex; - flex-flow: row; + flex-flow: column; align-items: center; background-color: var(--card-background-color); padding: 0 8px; @@ -26,8 +28,8 @@ &-logo { overflow: hidden; img, svg { - height: 1.5rem; - width: 1.5rem; + height: 4rem; + width: 4rem; } } @@ -51,19 +53,13 @@ flex-flow: column; gap: 20px; padding: 8px; - width: 300px; - input { - height: 2rem; - border: none; - border-radius: 6px; - font-size: 1.4rem; - background-color: var(--card-background-color); - padding: 4px 8px; - } - input[type="password"] { - caret-color: var(--card-color); - } + &-action { + display: flex; + flex-flow: column; + gap: 20px; + padding-top: 20px; + } button { @include common.textButton(); diff --git a/webui/scss/_panel.scss b/webui/scss/_panel.scss new file mode 100644 index 000000000..20858e385 --- /dev/null +++ b/webui/scss/_panel.scss @@ -0,0 +1,10 @@ +.panel { + display: flex; + flex-flow: column; + gap: 8px; + overflow: hidden; + padding: 60px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--card-background-color); +} \ No newline at end of file diff --git a/webui/scss/_theme.scss b/webui/scss/_theme.scss index fcc544b10..f1a24b73a 100644 --- a/webui/scss/_theme.scss +++ b/webui/scss/_theme.scss @@ -2,14 +2,16 @@ --media-size-mobile: 600px; --text-color: #ffffff; --hint-color: #888888; + --input-background-color: #242427; --label-color: #73d6fe; - --background-color: #303946; //#121212; + --background-color: rgb(9, 9, 11);//#303946; //#121212; --app-header-color: #73d6fe; //#6495b1; --sidebar-toggle-color: #ffffff; --sidebar-toggle-hover-color: #47495d; --playlist-color: #aeb0b2; - --border-color: #47495d; - --border-light-color: #68686c; + --border-color: #222224; + --input-border-color: #454548; + --input-focus-border-color: #12499a; --hover-border-color: #aaaab0; --spinner-color: #ffffff66; --spinner-highlight-color: #5599f0; @@ -38,7 +40,7 @@ --warn-color: orange; --ok-color: #21e821; - --card-background-color: #202733; //#282828; + --card-background-color: #18181b; //#282828; --card-background-color-darker: #1c2026; --card-color: #ffffff; --card-border-color: #47495d; @@ -60,7 +62,7 @@ --menu-button-hover-color:#fffff; --menu-button-hover-background-color: #202733; - --text-button-border-radius: 4px; + --text-button-border-radius: var(--border-radius); --text-button-border-color: transparent; --text-button-background-color: var(--default-button-background-color); --text-button-color: #ffffff; diff --git a/webui/scss/main.scss b/webui/scss/main.scss index 7b1988904..e31f07fb5 100644 --- a/webui/scss/main.scss +++ b/webui/scss/main.scss @@ -1,9 +1,7 @@ @use "theme"; @use "default"; @use "common"; -@use "app"; -@use "login"; -@use "preferences"; +@use "component"; html { height: 100%; @@ -25,14 +23,6 @@ body { font-family: inherit; } - input { - height: 2rem; - border-radius: 6px; - } - - select { - border-color: var(--border-color); - } } #root { diff --git a/webui/src/app/components/input.rs b/webui/src/app/components/input.rs new file mode 100644 index 000000000..94aba7ce0 --- /dev/null +++ b/webui/src/app/components/input.rs @@ -0,0 +1,43 @@ +use web_sys::KeyboardEvent; +use yew::{function_component, html, Callback, Html, NodeRef, Properties}; + +#[derive(Properties, Clone, PartialEq, Debug)] +pub struct InputProps { + #[prop_or_default] + pub name: String, + #[prop_or_default] + pub label: Option, + #[prop_or("text".into())] + pub input_type: String, + #[prop_or_default] + pub input_ref: Option, + #[prop_or_default] + pub autocomplete: bool, + #[prop_or_default] + pub autofocus: bool, + #[prop_or_default] + pub onkeydown: Option>, +} + +#[function_component] +pub fn Input(props: &InputProps) -> Html { + html! { +
+ { if props.label.is_some() { + html! { + + } + } else { html!{} } + } +
+ +
+
+ } +} \ No newline at end of file diff --git a/webui/src/app/components/login.rs b/webui/src/app/components/login.rs index e90183b00..6a0b87de0 100644 --- a/webui/src/app/components/login.rs +++ b/webui/src/app/components/login.rs @@ -4,6 +4,8 @@ use crate::app::components::svg_icon::AppIcon; use crate::hooks::use_service_context; use yew::prelude::*; use yew_hooks::use_async; +use yew_i18n::use_translation; +use crate::app::components::input::Input; #[function_component] pub fn Login() -> Html { @@ -11,6 +13,7 @@ pub fn Login() -> Html { let username_ref = use_node_ref(); let password_ref = use_node_ref(); let auth_success = use_state(|| true); + let translation = use_translation(); let app_title = services.config.ui_config.app_title.as_ref().map_or("tuliprox", |v| v.as_str()); @@ -64,8 +67,6 @@ pub fn Login() -> Html { }; html! { - <> - //
- } -} \ No newline at end of file +} diff --git a/webui/src/app/components/mod.rs b/webui/src/app/components/mod.rs index 72dafb0ed..90d7f0453 100644 --- a/webui/src/app/components/mod.rs +++ b/webui/src/app/components/mod.rs @@ -4,6 +4,7 @@ mod authentication; mod home; mod login; mod preferences; +mod input; pub use self::svg_icon::*; pub use self::panel::*;