XOR64/xmpd
XOR64/xmpd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Ui imporovemnts

Browse Source
This commit is contained in:
Gvidas Juknevičius 2024-11-14 02:56:50 +02:00
parent 9bcfcb9209
commit a384f45796
Signed by: MCorange
GPG Key ID: 12B1346D720B7FBB
7 changed files with 152 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
assets/pause.svg
View File

@ -1,6 +1,56 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#FFFFFF" stroke-width="2"/>
<path d="M14 9L14 15" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 9L10 15" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="32"
height="32"
viewBox="0 0 32 32"
version="1.1"
id="svg1"
sodipodi:docname="pause2.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#ffffff"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="18.296388"
inkscape:cx="20.222571"
inkscape:cy="14.046488"
inkscape:window-width="1898"
inkscape:window-height="1037"
inkscape:window-x="10"
inkscape:window-y="10"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffffff;stroke-width:1.35128"
id="rect1"
width="9.1821404"
height="31.973524"
x="0.054655612"
y="0.1093111" />
<rect
style="fill:#ffffff;stroke-width:1.35128"
id="rect1-5"
width="9.1821404"
height="31.973524"
x="22.809692"
y="0.091137752" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 604 B

After

Width:  |  Height:  |  Size: 1.5 KiB

69
assets/play.svg
View File

@ -1,12 +1,59 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#FFFFFF" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60 60" xml:space="preserve">
<g>
<path d="M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30
c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15
C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z"/>
<path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30
S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>
</g>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="32"
height="32"
viewBox="0 0 32 32"
version="1.1"
id="svg1"
sodipodi:docname="play2.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#ffffff"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#FFFFFF"
inkscape:document-units="px"
inkscape:zoom="18.296388"
inkscape:cx="20.222571"
inkscape:cy="14.046488"
inkscape:window-width="1898"
inkscape:window-height="1037"
inkscape:window-x="10"
inkscape:window-y="10"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
sodipodi:type="star"
style="fill:#ffffff"
id="path1"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="1.004831"
sodipodi:cy="6.8019323"
sodipodi:r1="22.598255"
sodipodi:r2="11.299128"
sodipodi:arg1="1.0471976"
sodipodi:arg2="2.0943951"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 12.303958,26.372596 -4.6447328,16.587264 -21.593424,6.8019312 -4.6447329,-2.9833992 12.303959,-12.76873 l 0,19.5706623 z"
inkscape:transform-center-x="-5.3338952"
transform="matrix(-0.94412506,0,0,0.81752476,11.623548,10.454857)" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 827 B

After

Width:  |  Height:  |  Size: 1.8 KiB

1
assets/stop.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-320h320v-320H320v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

23
xmpd-gui/src/components/player.rs
View File

@ -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);

14
xmpd-gui/src/components/song_list.rs
View File

@ -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();
}

2
xmpd-gui/src/data.rs
View File

@ -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

9
xmpd-gui/src/main_window.rs
View File

@ -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(