Products/FastWave2.0
2
0
Fork 0
Code Issues 8 Pull requests Actions Packages Projects Releases 1 Wiki Activity

HTML colors updated

Browse source
This commit is contained in:
Martin Kavík 2024-09-14 18:51:03 +02:00
parent acc1bf8ca3
commit bd57939ef3
6 changed files with 43 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
backend/style.css
View file

@ -1,3 +1,4 @@
html {
background-color: DarkSlateBlue;
}
/* background-color: DarkSlateBlue; */
background-color: oklch(41.43% 0.125 262.26);
}

12
frontend/src/controls_panel.rs
View file

@ -1,4 +1,4 @@
use crate::{Filename, Layout};
use crate::{Filename, Layout, theme::*};
use std::cell::Cell;
use std::mem;
use std::ops::Not;
@ -238,9 +238,9 @@ impl ControlsPanel {
let background_color = map_ref! {
let is_selected = is_selected,
let is_hovered = button_hovered_signal => match (*is_selected, *is_hovered) {
(true, _) => color!("BlueViolet"),
(false, true) => color!("MediumSlateBlue"),
(false, false) => color!("SlateBlue"),
(true, _) => COLOR_BLUE_VIOLET,
(false, true) => COLOR_MEDIUM_SLATE_BLUE,
(false, false) => COLOR_SLATE_BLUE,
}
};
let task_collapse_on_parent_collapse = {
@ -332,7 +332,7 @@ impl ControlsPanel {
.map_true(|| 10),
))
.s(Height::fill())
.s(Font::new().color_signal(hovered_signal.map_true(|| color!("LightBlue"))))
.s(Font::new().color_signal(hovered_signal.map_true(|| COLOR_LIGHT_BLUE)))
.label(
El::new()
.s(Transform::with_signal_self(layout_and_expanded.map(
@ -488,7 +488,7 @@ impl ControlsPanel {
Button::new()
.s(Padding::new().x(15).y(5))
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(RoundedCorners::all(15))
.on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))

18
frontend/src/header_panel.rs
View file

@ -1,4 +1,4 @@
use crate::{platform, script_bridge, Filename, Layout};
use crate::{platform, script_bridge, Filename, Layout, theme::*};
use std::sync::Arc;
use zoon::*;
@ -45,7 +45,7 @@ impl HeaderPanel {
Button::new()
.s(Padding::new().x(20).y(10))
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(Align::new().left())
.s(RoundedCorners::all(15))
@ -86,7 +86,7 @@ impl HeaderPanel {
.s(Padding::new().x(20).y(10))
.s(Background::new().color_signal(
hovered_signal
.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(Align::new().left())
.s(RoundedCorners::all(15))
@ -154,7 +154,7 @@ impl HeaderPanel {
Button::new()
.s(Padding::new().x(20).y(10))
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(RoundedCorners::all(15))
.label_signal(layout.signal().map(|layout| match layout {
@ -206,7 +206,7 @@ impl HeaderPanel {
let (script, script_signal) = Mutable::new_and_signal_cloned(String::new());
// @TODO perhaps replace with an element with syntax highlighter like https://github.com/WebCoder49/code-input later
TextArea::new()
.s(Background::new().color(color!("SlateBlue")))
.s(Background::new().color(COLOR_SLATE_BLUE))
.s(Padding::new().x(10).y(8))
.s(RoundedCorners::all(15))
.s(Height::default().min(50))
@ -214,11 +214,11 @@ impl HeaderPanel {
.s(Font::new()
.tracking(1)
.weight(FontWeight::Medium)
.color(color!("White"))
.color(COLOR_WHITE)
.family([FontFamily::new("Courier New"), FontFamily::Monospace]))
.s(Shadows::new([Shadow::new()
.inner()
.color(color!("DarkSlateBlue"))
.color(COLOR_DARK_SLATE_BLUE)
.blur(4)]))
// @TODO `spellcheck` and `resize` to MZ API? (together with autocomplete and others?)
.update_raw_el(|raw_el| {
@ -227,7 +227,7 @@ impl HeaderPanel {
.style("resize", "vertical")
})
.placeholder(
Placeholder::new("FW.say_hello()").s(Font::new().color(color!("LightBlue"))),
Placeholder::new("FW.say_hello()").s(Font::new().color(COLOR_LIGHT_BLUE)),
)
.label_hidden("command editor panel")
.text_signal(script_signal)
@ -272,7 +272,7 @@ impl HeaderPanel {
.s(Font::new()
.tracking(1)
.weight(FontWeight::Medium)
.color(color!("White"))
.color(COLOR_WHITE)
.family([FontFamily::new("Courier New"), FontFamily::Monospace]))
.s(Scrollbars::both())
.s(Height::default().max(100))

4
frontend/src/main.rs
View file

@ -13,7 +13,7 @@ use waveform_panel::{PixiController, WaveformPanel};
mod header_panel;
use header_panel::HeaderPanel;
mod theme;
pub mod theme;
use theme::*;
#[derive(Clone, Copy, Default)]
@ -53,7 +53,7 @@ fn root() -> impl Element {
Column::new()
.s(Height::fill())
.s(Scrollbars::y_and_clip_x())
.s(Font::new().color(color!("Lavender")))
.s(Font::new().color(COLOR_LAVENDER))
.item(HeaderPanel::new(
hierarchy.clone(),
layout.clone(),

31
frontend/src/theme.rs
View file

@ -2,23 +2,26 @@ use zoon::*;
// https://oklch.com/
// const COLOR_BLUE_VIOLET: Rgba = color!("BlueViolet"); // oklch(53.38% 0.25 301.37)
const COLOR_BLUE_VIOLET: Oklch = color!("oklch(53.38% 0.25 262.59)");
// pub const COLOR_BLUE_VIOLET: Rgba = color!("BlueViolet"); // oklch(53.38% 0.25 301.37)
pub const COLOR_BLUE_VIOLET: Oklch = color!("oklch(53.38% 0.25 262.59)");
// const COLOR_MEDIUM_SLATE_BLUE: Rgba = color!("MediumSlateBlue"); // oklch(60.45% 0.194 285.5)
const COLOR_MEDIUM_SLATE_BLUE: Oklch = color!("oklch(60.45% 0.194 262.26)");
// pub const COLOR_MEDIUM_SLATE_BLUE: Rgba = color!("MediumSlateBlue"); // oklch(60.45% 0.194 285.5)
pub const COLOR_MEDIUM_SLATE_BLUE: Oklch = color!("oklch(60.45% 0.194 262.26)");
// const COLOR_SLATE_BLUE: Rgba = color!("SlateBlue"); // oklch(54.36% 0.171 285.54)
const COLOR_SLATE_BLUE: Oklch = color!("oklch(54.36% 0.171 262.26)");
// pub const COLOR_SLATE_BLUE_WITH_ALPHA: Rgba = color!("SlateBlue", 0.8); // oklch(54.36% 0.171 285.54)
pub const COLOR_SLATE_BLUE_WITH_ALPHA: Oklch = color!("oklch(54.36% 0.171 262.26)", 0.8);
// const COLOR_LIGHT_BLUE: Rgba = color!("LightBlue"); // oklch(85.62% 0.049 219.65)
const COLOR_LIGHT_BLUE: Oklch = color!("oklch(85.62% 0.049 262.26)");
// pub const COLOR_SLATE_BLUE: Rgba = color!("SlateBlue"); // oklch(54.36% 0.171 285.54)
pub const COLOR_SLATE_BLUE: Oklch = color!("oklch(54.36% 0.171 262.26)");
// const COLOR_WHITE: Rgba = color!("White"); // oklch(100% 3.5594404384177905e-8 106.37411429114086)
const COLOR_WHITE: Oklch = color!("oklch(100% 3.5594404384177905e-8 105.88)");
// pub const COLOR_LIGHT_BLUE: Rgba = color!("LightBlue"); // oklch(85.62% 0.049 219.65)
pub const COLOR_LIGHT_BLUE: Oklch = color!("oklch(85.62% 0.049 262.26)");
// const COLOR_DARK_SLATE_BLUE: Rgba = color!("DarkSlateBlue"); // oklch(41.43% 0.125 286.04)
const COLOR_DARK_SLATE_BLUE: Oklch = color!("oklch(41.43% 0.125 262.26)");
// pub const COLOR_WHITE: Rgba = color!("White"); // oklch(100% 3.5594404384177905e-8 106.37411429114086)
pub const COLOR_WHITE: Oklch = color!("oklch(100% 3.5594404384177905e-8 105.88)");
// const COLOR_LAVENDER: Rgba = color!("Lavender"); // oklch(93.09% 0.027 285.86)
const COLOR_LAVENDER: Oklch = color!("oklch(93.09% 0.027 262.26)");
// pub const COLOR_DARK_SLATE_BLUE: Rgba = color!("DarkSlateBlue"); // oklch(41.43% 0.125 286.04)
pub const COLOR_DARK_SLATE_BLUE: Oklch = color!("oklch(41.43% 0.125 262.26)");
// pub const COLOR_LAVENDER: Rgba = color!("Lavender"); // oklch(93.09% 0.027 285.86)
pub const COLOR_LAVENDER: Oklch = color!("oklch(93.09% 0.027 262.26)");

12
frontend/src/waveform_panel.rs
View file

@ -1,4 +1,4 @@
use crate::{platform, script_bridge, Filename};
use crate::{platform, script_bridge, Filename, theme::*};
use std::sync::Arc;
use wellen::GetItem;
use zoon::*;
@ -87,7 +87,7 @@ impl WaveformPanel {
Button::new()
.s(Padding::new().x(20).y(10))
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(Align::new().left())
.s(RoundedCorners::all(15))
@ -123,7 +123,7 @@ impl WaveformPanel {
.s(Padding::new().x(20).y(10))
.s(Background::new().color_signal(
hovered_signal
.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(Align::new().left())
.s(RoundedCorners::all(15))
@ -178,7 +178,7 @@ impl WaveformPanel {
Button::new()
.s(Padding::new().x(20).y(10))
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
))
.s(RoundedCorners::all(15))
.label("Save")
@ -349,7 +349,7 @@ impl WaveformPanel {
.s(Height::exact(ROW_HEIGHT))
.s(Width::growable())
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)),
hovered_signal.map_bool(|| COLOR_SLATE_BLUE, || COLOR_SLATE_BLUE_WITH_ALPHA),
))
.s(RoundedCorners::new().left(15).right(5))
.label(
@ -384,7 +384,7 @@ impl WaveformPanel {
.s(Height::exact(ROW_HEIGHT))
.s(Width::exact(70))
.s(Background::new().color_signal(
hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)),
hovered_signal.map_bool(|| COLOR_SLATE_BLUE, || COLOR_SLATE_BLUE_WITH_ALPHA),
))
.s(RoundedCorners::new().left(5))
.label(