From a384f45796497cbebdce6d58ddb62b922f2179aa Mon Sep 17 00:00:00 2001 From: MCorange Date: Thu, 14 Nov 2024 02:56:50 +0200 Subject: [PATCH] Ui imporovemnts --- assets/pause.svg | 62 +++++++++++++++++++++--- assets/play.svg | 71 +++++++++++++++++++++++----- assets/stop.svg | 1 + xmpd-gui/src/components/player.rs | 23 +++++++-- xmpd-gui/src/components/song_list.rs | 14 ++++-- xmpd-gui/src/data.rs | 2 +- xmpd-gui/src/main_window.rs | 9 ++-- 7 files changed, 152 insertions(+), 30 deletions(-) create mode 100644 assets/stop.svg diff --git a/assets/pause.svg b/assets/pause.svg index b1a5b94..a7c969b 100644 --- a/assets/pause.svg +++ b/assets/pause.svg @@ -1,6 +1,56 @@ - - - - - - + + + + + + + + + + + diff --git a/assets/play.svg b/assets/play.svg index efa4dcc..e658601 100644 --- a/assets/play.svg +++ b/assets/play.svg @@ -1,12 +1,59 @@ - - - - - - - - + + + + + + + + + + diff --git a/assets/stop.svg b/assets/stop.svg new file mode 100644 index 0000000..213f708 --- /dev/null +++ b/assets/stop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/xmpd-gui/src/components/player.rs b/xmpd-gui/src/components/player.rs index 176e527..a36005b 100644 --- a/xmpd-gui/src/components/player.rs +++ b/xmpd-gui/src/components/player.rs @@ -1,11 +1,12 @@ -use egui::{Stroke, Vec2}; +use egui::{Sense, Stroke, Vec2}; use super::{CompGetter, CompUi}; #[derive(Debug, Default)] pub struct Player { - slider_progress: usize + slider_progress: usize, + is_playing: bool, } component_register!(Player); @@ -29,23 +30,37 @@ impl CompUi for Player { }; ui.style_mut().visuals.widgets.inactive.fg_stroke = s; ui.style_mut().visuals.widgets.active.fg_stroke = s; + ui.style_mut().visuals.widgets.hovered.fg_stroke = s; ui.add(slider); ui.label("00:00"); } }); ui.horizontal(|ui| { ui.add_space((avail.x / 2.0) - 16.0 - 8.0 - ui.spacing().item_spacing.x); + let pp = if handle_error_ui!(Player::get()).is_playing { + crate::data::PAUSE_ICON + } else { + crate::data::PLAY_ICON + }; + + let prev = egui::Image::new(crate::data::PREV_ICON) .tint(crate::data::C_ACCENT) + .sense(Sense::click()) .max_size(Vec2::new(16.0, 16.0)); - let play = egui::Image::new(crate::data::PLAY_ICON) + let pp = egui::Image::new(pp) .tint(crate::data::C_ACCENT) + .sense(Sense::click()) .max_size(Vec2::new(16.0, 16.0)); let next = egui::Image::new(crate::data::NEXT_ICON) .tint(crate::data::C_ACCENT) + .sense(Sense::click()) .max_size(Vec2::new(16.0, 16.0)); if ui.add(prev).clicked() {} - if ui.add(play).clicked() {} + if ui.add(pp).clicked() { + let mut slf = handle_error_ui!(Player::get()); + slf.is_playing = !slf.is_playing; + } if ui.add(next).clicked() {} }); ui.add_space(3.0); diff --git a/xmpd-gui/src/components/song_list.rs b/xmpd-gui/src/components/song_list.rs index 642876f..a8f8bef 100644 --- a/xmpd-gui/src/components/song_list.rs +++ b/xmpd-gui/src/components/song_list.rs @@ -1,4 +1,4 @@ -use egui::{Color32, Vec2}; +use egui::{Color32, RichText, Vec2}; use xmpd_manifest::store::BaseStore; use super::CompUi; @@ -13,6 +13,7 @@ impl CompUi for SongList { fn draw(ui: &mut egui::Ui, state: &mut crate::GuiState) -> crate::Result<()> { egui::ScrollArea::vertical().id_source("song_list").show(ui, |ui| { ui.vertical(|ui| { + ui.add_space(3.0); let songs = state.manifest.store().get_songs(); for (sid, song) in songs.iter() { ui.horizontal(|ui| { @@ -21,9 +22,14 @@ impl CompUi for SongList { .tint(crate::data::C_ACCENT) .fit_to_exact_size(Vec2::new(32.0, 32.0)) ); - ui.label(song.author()); - ui.strong(" - "); - ui.label(song.name()); + ui.vertical(|ui| { + ui.label(song.name()); + ui.monospace( + RichText::new(song.author()) + .color(crate::data::C_TEXT_DIM) + .size(10.0) + ); + }); }); ui.separator(); } diff --git a/xmpd-gui/src/data.rs b/xmpd-gui/src/data.rs index 7e37165..dc80a46 100644 --- a/xmpd-gui/src/data.rs +++ b/xmpd-gui/src/data.rs @@ -14,5 +14,5 @@ pub const C_ACCENT: egui::Color32 = egui::Color32::from_rgb(5, 102, 146); // #05 pub const C_PRIM_BG: egui::Color32 = egui::Color32::from_rgb(31, 34, 40); // #1F2228 pub const C_SEC_BG: egui::Color32 = egui::Color32::from_rgb(47, 53, 61); // #2f353d pub const C_TEXT: egui::Color32 = egui::Color32::from_rgb(223, 223, 223); // #dfdfdf - +pub const C_TEXT_DIM: egui::Color32 = egui::Color32::from_rgb(175, 175, 175 ); // #afafaf diff --git a/xmpd-gui/src/main_window.rs b/xmpd-gui/src/main_window.rs index 013c8b5..28fc5f3 100644 --- a/xmpd-gui/src/main_window.rs +++ b/xmpd-gui/src/main_window.rs @@ -13,15 +13,18 @@ pub fn draw(ui: &mut egui::Ui, state: &mut GuiState) -> crate::Result<()> { handle_error_ui!(crate::components::top_nav::TopNav::draw(ui, state)); crate::utils::super_separator(ui, crate::data::C_ACCENT, avail.x, 2.0); let avail = ui.available_size(); + let main_height = avail.y * 0.91; ui.horizontal(|ui| { - ui.set_height(avail.y); + ui.set_height(main_height); ui.group(|ui| { - ui.set_height(avail.y); + ui.set_height(main_height); ui.set_width(avail.x * 0.25); handle_error_ui!(crate::components::left_nav::LeftNav::draw(ui, state)); }); - handle_error_ui!(crate::components::song_list::SongList::draw(ui, state)); + ui.group(|ui| { + handle_error_ui!(crate::components::song_list::SongList::draw(ui, state)); + }); }); egui::TopBottomPanel::new(egui::panel::TopBottomSide::Bottom, "player") .frame(