euzu/tuliprox
1
0
Fork 0
mirror of https://github.com/euzu/tuliprox.git synced 2026-10-27 09:12:35 +01:00
Code Issues Packages Projects Releases 5 Wiki Activity

web ui refactoring

Browse Source
This commit is contained in:
euzu
2025-06-27 21:40:56 +02:00
parent c3c4c4a1d0
commit 623ab032db
16 changed files with 155 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/component/form-view/form-view.scss
+7 -7
View File
@@ -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%;
//}
}
}
frontend/src/component/input-field/input-field.scss
+12 -12
View File
@@ -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();
frontend/src/component/login/login.scss
+8 -8
View File
@@ -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);
}
frontend/src/component/schedule-editor/schedule-editor.scss
-1
View File
@@ -20,7 +20,6 @@ $input-width: 150px;
width: $input-width;
min-width: $input-width;
max-width: $input-width;
@include preferences.prefsInput();
}
frontend/src/scss/_default.scss
-1
View File
@@ -59,7 +59,6 @@ button {
select,
input {
background-color: transparent;
color: var(--text-color);
&:focus {
background-color: var(--background-color) !important;
frontend/src/scss/_preferences.scss
-13
View File
@@ -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;
webui/scss/_component.scss
+5
View File
@@ -0,0 +1,5 @@
@forward "input";
@forward "app";
@forward "panel";
@forward "login";
@forward "preferences";
webui/scss/_default.scss
-5
View File
@@ -59,11 +59,6 @@ button {
select,
input {
background-color: transparent;
color: var(--text-color);
&:focus {
background-color: var(--background-color) !important;
}
}
select {
webui/scss/_input.scss
+36
View File
@@ -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);
}
}
webui/scss/_login.scss
+15 -19
View File
@@ -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();
webui/scss/_panel.scss
+10
View File
@@ -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);
}
webui/scss/_theme.scss
+7 -5
View File
@@ -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;
webui/scss/main.scss
+1 -11
View File
@@ -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 {
webui/src/app/components/input.rs
+43
View File
@@ -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<String>,
#[prop_or("text".into())]
pub input_type: String,
#[prop_or_default]
pub input_ref: Option<NodeRef>,
#[prop_or_default]
pub autocomplete: bool,
#[prop_or_default]
pub autofocus: bool,
#[prop_or_default]
pub onkeydown: Option<Callback<KeyboardEvent>>,
}
#[function_component]
pub fn Input(props: &InputProps) -> Html {
html! {
<div class="input">
{ if props.label.is_some() {
html! {
<label>{props.label.clone().unwrap_or_default()}</label>
}
} else { html!{} }
}
<div class="input-wrapper">
<input ref={props.input_ref.clone().unwrap_or_default()}
type={props.input_type.clone()}
name={props.name.clone()}
autocomplete={if props.autocomplete { "on".to_string() } else { "off".to_string() }}
autofocus={props.autofocus}
onkeydown={props.onkeydown.clone().unwrap_or_default()}
/>
</div>
</div>
}
}
webui/src/app/components/login.rs
+10 -8
View File
@@ -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! {
<>
// <div class={"login-view__logo"}><AppIcon name="Logo" width={"100%"} height={"100%"}/></div>
<div class="login-view">
<div class={"login-view__header"}>
<div class={"login-view__header-logo"}>{app_logo.as_ref().clone()}</div>
@@ -73,13 +74,14 @@ pub fn Login() -> Html {
</div>
<form>
<div class="login-view__form">
<input ref={username_ref} type="text" name="username" placeholder="username" autocomplete="on" autofocus={true}/>
<input ref={password_ref} type="password" name="password" placeholder="password" onkeydown={handle_key_down} autocomplete="on"/>
<button type="button" class="btn" onclick={handle_login}>{"Login"}</button>
<span class={if *auth_success { "hidden" } else { "error-text" }}>{ "Failed to login" }</span>
<Input label={translation.t("LABEL.USERNAME")} input_ref={username_ref} input_type="text" name="username" autocomplete={true} autofocus={true}/>
<Input label={translation.t("LABEL.PASSWORD")} input_ref={password_ref} input_type="password" name="password" autocomplete={true} onkeydown={handle_key_down}/>
<div class="login-view__form-action">
<button type="button" class="btn" onclick={handle_login}>{"Login"}</button>
<span class={if *auth_success { "hidden" } else { "error-text" }}>{ "Failed to login" }</span>
</div>
</div>
</form>
</div>
</>
}
}
}
webui/src/app/components/mod.rs
+1
View File
@@ -4,6 +4,7 @@ mod authentication;
mod home;
mod login;
mod preferences;
mod input;
pub use self::svg_icon::*;
pub use self::panel::*;