Skip to content

Commit

Permalink
Settings redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@PolyMeilex
PolyMeilex committed Dec 26, 2023
1 parent d9d3584 commit 9f6f443
Show file tree
Hide file tree
Showing 7 changed files with 466 additions and 133 deletions.
160 changes: 102 additions & 58 deletions neothesia/src/scene/menu_scene/iced_menu/settings.rs
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
use std::path::PathBuf;

use iced_core::{alignment::Vertical, text::LineHeight, Alignment, Length};
use iced_core::{
alignment::{Horizontal, Vertical},
Alignment, Length, Padding,
};
use iced_runtime::Command;
use iced_widget::{button, column as col, image, pick_list, row, text, toggler};
use iced_widget::{column as col, container, pick_list, row, toggler};

use crate::{
iced_utils::iced_state::Element, output_manager::OutputDescriptor,
scene::menu_scene::neo_btn::neo_button, target::Target,
iced_utils::iced_state::Element,
output_manager::OutputDescriptor,
scene::menu_scene::{
icons,
layout::{BarLayout, Layout},
neo_btn::NeoBtn,
preferences_group,
},
target::Target,
};

use super::{center_x, centered_text, theme, top_padded, Data, InputDescriptor, Message, Step};
use super::{centered_text, theme, top_padded, Data, InputDescriptor, Message};

#[derive(Debug, Clone)]
pub enum SettingsMessage {
Expand Down Expand Up @@ -77,28 +87,40 @@ pub(super) fn view<'a>(data: &'a Data, target: &Target) -> Element<'a, Message>
let output_list = pick_list(outputs, selected_output, |v| {
SettingsMessage::SelectOutput(v).into()
})
.width(Length::Fill)
.style(theme::pick_list());

let output_title = text("Output:")
.vertical_alignment(Vertical::Center)
.height(Length::Fixed(30.0));
let mut group = preferences_group::PreferencesGroup::new()
.title("Output")
.push(
preferences_group::ActionRow::new()
.title("Output")
.suffix(output_list),
);

if is_synth {
let btn = button(centered_text("SoundFont"))
.width(Length::Fixed(50.0))
.on_press(SettingsMessage::OpenSoundFontPicker.into())
.style(theme::button());

row![
output_title.width(Length::Fixed(60.0)),
output_list.width(Length::FillPortion(3)),
btn.width(Length::FillPortion(1))
]
} else {
row![output_title, output_list]
let subtitle = target
.config
.soundfont_path
.as_ref()
.and_then(|path| path.file_name())
.map(|name| name.to_string_lossy().to_string());

let mut row = preferences_group::ActionRow::new()
.title("SourdFont")
.suffix(
iced_widget::button(centered_text("Select File"))
.style(theme::button())
.on_press(SettingsMessage::OpenSoundFontPicker.into()),
);

if let Some(subtitle) = subtitle {
row = row.subtitle(subtitle);
}

group = group.push(row);
}
.spacing(10)

group.build()
};

let input_list = {
Expand All @@ -108,50 +130,72 @@ pub(super) fn view<'a>(data: &'a Data, target: &Target) -> Element<'a, Message>
let input_list = pick_list(inputs, selected_input, |v| {
SettingsMessage::SelectInput(v).into()
})
.width(Length::Fill)
.style(theme::pick_list());

let input_title = text("Input:")
.vertical_alignment(Vertical::Center)
.height(Length::Fixed(30.0));

row![
input_title.width(Length::Fixed(60.0)),
input_list.width(Length::FillPortion(3)),
]
.spacing(10)
preferences_group::PreferencesGroup::new()
.title("Input")
.push(
preferences_group::ActionRow::new()
.title("Input")
.suffix(input_list),
)
.build()
};

let guidelines = {
let title = text("Guidelines:")
.vertical_alignment(Vertical::Center)
.height(Length::Fixed(30.0));

let toggler = toggler(
Some("Vertical".to_string()),
target.config.vertical_guidelines,
|v| SettingsMessage::VerticalGuidelines(v).into(),
)
.text_line_height(LineHeight::Absolute(30.0.into()));
let toggler = toggler(None, target.config.vertical_guidelines, |v| {
SettingsMessage::VerticalGuidelines(v).into()
})
.style(theme::toggler());

preferences_group::PreferencesGroup::new()
.title("Render")
.push(
preferences_group::ActionRow::new()
.title("Vertical Guidelines")
.subtitle("Display octave indicators")
.suffix(toggler),
)
.build()
};

row![title, toggler].spacing(10)
let column = col![output_list, input_list, guidelines]
.spacing(10)
.width(Length::Fill)
.align_items(Alignment::Center);

let left = {
let back = NeoBtn::new(
icons::left_arrow_icon()
.size(30.0)
.vertical_alignment(Vertical::Center)
.horizontal_alignment(Horizontal::Center),
)
.height(Length::Fixed(60.0))
.min_width(80.0)
.on_press(Message::GoToPage(super::Step::Main));

row![back]
.spacing(10)
.width(Length::Shrink)
.align_items(Alignment::Center)
};

let buttons = row![neo_button("Back")
.on_press(Message::GoToPage(Step::Main))
.width(Length::Fill),]
.width(Length::Shrink)
.height(Length::Fixed(50.0));

let column = col![
image(data.logo_handle.clone()),
col![output_list, input_list, guidelines].spacing(10),
buttons,
]
.spacing(40)
.align_items(Alignment::Center);

center_x(top_padded(column)).into()
let left = container(left)
.width(Length::Fill)
.align_x(Horizontal::Left)
.align_y(Vertical::Center)
.padding(Padding {
top: 0.0,
right: 10.0,
bottom: 10.0,
left: 10.0,
});

Layout::new()
.body(top_padded(column))
.bottom(BarLayout::new().left(left))
.into()
}

fn open_sound_font_picker(
Expand Down
107 changes: 78 additions & 29 deletions neothesia/src/scene/menu_scene/iced_menu/theme.rs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
use std::rc::Rc;

use iced_core::BorderRadius;
use iced_graphics::core::Color;
use iced_style::{button, pick_list};

Expand All @@ -21,28 +22,25 @@ impl iced_style::pick_list::StyleSheet for PickListStyle {
fn active(&self, _style: &Self::Style) -> pick_list::Appearance {
pick_list::Appearance {
text_color: Color::WHITE,
background: iced_core::Background::Color(Color::BLACK),
background: iced_core::Background::Color(Color::from_rgba8(74, 68, 88, 1.0)),
placeholder_color: Color::WHITE,
border_radius: iced_core::BorderRadius::from(2.0),
border_width: 1.0,
border_radius: iced_core::BorderRadius::from(5.0),
border_width: 0.0,
border_color: SURFACE,
handle_color: Color::WHITE,
}
}

fn hovered(&self, _style: &Self::Style) -> pick_list::Appearance {
let accent = Color::from_rgba8(160, 81, 255, 1.0);
pick_list::Appearance {
text_color: Color::WHITE,
background: iced_core::Background::Color(Color::BLACK),
// background: iced_graphics::Background::Color(Color::from_rgb8(42, 42, 42)),
placeholder_color: Color::WHITE,
border_radius: iced_core::BorderRadius::from(2.0),
border_width: 1.0,
// border_color: Color::from_rgb8(42, 42, 42),
border_color: accent,
handle_color: Color::WHITE,
fn hovered(&self, style: &Self::Style) -> pick_list::Appearance {
let mut active = self.active(style);

if let iced_core::Background::Color(ref mut color) = active.background {
color.r = (color.r + 0.05).min(1.0);
color.g = (color.g + 0.05).min(1.0);
color.b = (color.b + 0.05).min(1.0);
}

active
}
}

Expand All @@ -55,9 +53,9 @@ impl iced_style::menu::StyleSheet for MenuStyle {
let accent = Color::from_rgba8(160, 81, 255, 1.0);
iced_style::menu::Appearance {
text_color: Color::WHITE,
background: iced_core::Background::Color(Color::BLACK),
border_width: 1.0,
border_radius: iced_core::BorderRadius::from(0.0),
background: iced_core::Background::from(iced_core::Color::from_rgba8(27, 25, 32, 1.0)),
border_width: 0.0,
border_radius: iced_core::BorderRadius::from(5.0),
border_color: SURFACE,
selected_text_color: Color::WHITE,
selected_background: iced_core::Background::Color(accent),
Expand All @@ -77,22 +75,25 @@ impl iced_style::button::StyleSheet for ButtonStyle {
fn active(&self, _style: &Self::Style) -> button::Appearance {
button::Appearance {
text_color: Color::WHITE,
border_color: SURFACE,
border_width: 1.0,
background: Some(iced_core::Background::Color(Color::BLACK)),
border_width: 0.0,
border_radius: BorderRadius::from(5.0),
background: Some(iced_core::Background::Color(Color::from_rgba8(
74, 68, 88, 1.0,
))),
..Default::default()
}
}

fn hovered(&self, _style: &Self::Style) -> button::Appearance {
let accent = Color::from_rgba8(160, 81, 255, 1.0);
button::Appearance {
text_color: Color::WHITE,
border_color: accent,
border_width: 1.0,
background: Some(iced_core::Background::Color(Color::BLACK)),
..Default::default()
fn hovered(&self, style: &Self::Style) -> button::Appearance {
let mut active = self.active(style);

if let Some(iced_core::Background::Color(ref mut color)) = active.background {
color.r = (color.r + 0.05).min(1.0);
color.g = (color.g + 0.05).min(1.0);
color.b = (color.b + 0.05).min(1.0);
}

active
}
}

Expand Down Expand Up @@ -129,3 +130,51 @@ impl iced_style::checkbox::StyleSheet for CheckboxStyle {
}
}
}

pub fn toggler() -> iced_style::theme::Toggler {
iced_style::theme::Toggler::Custom(Box::new(TogglerStyle))
}

struct TogglerStyle;

impl iced_style::toggler::StyleSheet for TogglerStyle {
type Style = iced_style::Theme;

fn active(&self, _style: &Self::Style, is_active: bool) -> iced_style::toggler::Appearance {
let default = <iced_style::Theme as iced_style::toggler::StyleSheet>::active(
&iced_style::Theme::Dark,
&iced_style::theme::Toggler::Default,
is_active,
);

if is_active {
iced_style::toggler::Appearance {
background: Color::from_rgba8(160, 81, 255, 1.0),
..default
}
} else {
default
}
}

fn hovered(&self, _style: &Self::Style, is_active: bool) -> iced_style::toggler::Appearance {
if is_active {
let default = <iced_style::Theme as iced_style::toggler::StyleSheet>::active(
&iced_style::Theme::Dark,
&iced_style::theme::Toggler::Default,
is_active,
);

iced_style::toggler::Appearance {
background: Color::from_rgba8(180, 101, 255, 1.0),
..default
}
} else {
<iced_style::Theme as iced_style::toggler::StyleSheet>::hovered(
&iced_style::Theme::Dark,
&iced_style::theme::Toggler::Default,
is_active,
)
}
}
}
Loading

0 comments on commit 9f6f443

Please sign in to comment.