Main menu bottom icons bar

neothesia/src/iced_utils/iced_manager.rs

@@ -1,3 +1,5 @@
+use iced_core::text::Renderer;
+
 pub struct IcedManager {
     pub renderer: iced_wgpu::Renderer<iced_style::Theme>,
     pub viewport: iced_wgpu::graphics::Viewport,
@@ -16,11 +18,14 @@ impl IcedManager {
 
         let settings = iced_wgpu::Settings::default();
 
-        let renderer = iced_wgpu::Renderer::new(
+        let mut renderer = iced_wgpu::Renderer::new(
             iced_wgpu::Backend::new(device, queue, settings, texture_format),
             iced_core::Font::default(),
             iced_core::Pixels(16.0),
         );
+        renderer.load_font(std::borrow::Cow::Borrowed(include_bytes!(
+            "./bootstrap-icons.ttf"
+        )));
 
         let viewport = iced_wgpu::graphics::Viewport::with_physical_size(
             iced_core::Size::new(physical_size.0, physical_size.1),

neothesia/src/scene/menu_scene/iced_menu/mod.rs

@@ -1,11 +1,11 @@
-use super::Renderer;
+use super::{icons, neo_btn::NeoBtn, Renderer};
 use iced_core::{
     alignment::{Horizontal, Vertical},
     image::Handle as ImageHandle,
     Alignment, Length, Padding,
 };
 use iced_runtime::Command;
-use iced_widget::{button, column as col, container, image, row, text, vertical_space};
+use iced_widget::{column as col, container, image, row, text, vertical_space};
 
 use crate::{
     iced_utils::iced_state::{Element, Program},
@@ -242,7 +242,7 @@ impl<'a> Step {
             neo_button("Exit")
                 .on_press(Message::GoToPage(Step::Exit))
                 .width(Length::Fill)
-                .height(Length::Fixed(80.0))
+                .height(Length::Fixed(80.0)),
         ]
         .width(Length::Fixed(450.0))
         .spacing(10);
@@ -254,17 +254,28 @@ impl<'a> Step {
         let mut content = top_padded(column);
 
         if target.song.is_some() {
-            let tracks = button(centered_text("Tracks"))
-                .on_press(Message::GoToPage(Step::TrackSelection))
-                .style(theme::button());
-
-            let play = neo_button("Play")
-                .height(Length::Fixed(60.0))
-                .min_width(80.0)
-                .on_press(Message::Play);
+            let tracks = NeoBtn::new(
+                icons::note_list_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(Step::TrackSelection));
+
+            let play = NeoBtn::new(
+                icons::play_icon()
+                    .size(30.0)
+                    .vertical_alignment(Vertical::Center)
+                    .horizontal_alignment(Horizontal::Center),
+            )
+            .height(Length::Fixed(60.0))
+            .min_width(80.0)
+            .on_press(Message::Play);
 
             let row = row![tracks, play]
-                .spacing(20)
+                .spacing(10)
                 .align_items(Alignment::Center);
 
             let container = container(row)

neothesia/src/scene/menu_scene/iced_menu/tracks.rs

@@ -1,10 +1,13 @@
-use iced_core::{Alignment, Length};
+use iced_core::{
+    alignment::{Horizontal, Vertical},
+    Alignment, Length, Padding,
+};
 use iced_runtime::Command;
-use iced_widget::{button, column as col, row, vertical_space};
+use iced_widget::{button, column as col, container, row, vertical_space};
 
 use crate::{
     iced_utils::iced_state::Element,
-    scene::menu_scene::{segment_button, track_card},
+    scene::menu_scene::{icons, neo_btn::NeoBtn, segment_button, track_card},
     song::PlayerConfig,
     target::Target,
 };
@@ -118,7 +121,70 @@ pub(super) fn view<'a>(_data: &'a Data, target: &Target) -> Element<'a, Message>
         }
     }
 
-    let controls = {
+    let column = super::super::wrap::Wrap::with_elements(tracks)
+        .spacing(14.0)
+        .line_spacing(14.0)
+        .padding(30.0)
+        .align_items(Alignment::Center);
+
+    let column = col![vertical_space(Length::Fixed(30.0)), column]
+        .align_items(Alignment::Center)
+        .width(Length::Fill);
+
+    let column = iced_widget::scrollable(column);
+
+    let mut content = {
+        let content = column.height(Length::Fill);
+
+        col![content]
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .align_items(Alignment::Center)
+    };
+
+    let right = {
+        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));
+
+        let play = NeoBtn::new(
+            icons::play_icon()
+                .size(30.0)
+                .vertical_alignment(Vertical::Center)
+                .horizontal_alignment(Horizontal::Center),
+        )
+        .height(Length::Fixed(60.0))
+        .min_width(80.0)
+        .on_press(Message::Play);
+
+        if target.song.is_some() {
+            row![back, play]
+        } else {
+            row![back]
+        }
+        .spacing(10)
+        .width(Length::Shrink)
+        .align_items(Alignment::Center)
+    };
+
+    let right = container(right)
+        .width(Length::Fill)
+        .align_x(Horizontal::Right)
+        .align_y(Vertical::Center)
+        .padding(Padding {
+            top: 0.0,
+            right: 10.0,
+            bottom: 10.0,
+            left: 0.0,
+        });
+
+    let center = {
         let listen = button(centered_text("Listen Only"))
             .on_press(TracksMessage::AllTracksPlayer(PlayerConfig::Auto).into())
             .style(theme::button());
@@ -127,18 +193,30 @@ pub(super) fn view<'a>(_data: &'a Data, target: &Target) -> Element<'a, Message>
             .on_press(TracksMessage::AllTracksPlayer(PlayerConfig::Human).into())
             .style(theme::button());
 
-        row![listen, play_along].spacing(14)
+        row![listen, play_along]
+            .width(Length::Shrink)
+            .align_items(Alignment::Center)
+            .spacing(14)
     };
 
-    let column = super::super::wrap::Wrap::with_elements(tracks)
-        .spacing(14.0)
-        .line_spacing(14.0)
-        .padding(50.0)
-        .align_items(Alignment::Center);
+    let center = container(center)
+        .width(Length::Fill)
+        .align_x(Horizontal::Center)
+        .align_y(Vertical::Center)
+        .padding(Padding {
+            top: 0.0,
+            right: 10.0,
+            bottom: 10.0,
+            left: 0.0,
+        });
 
-    let column = col![vertical_space(Length::Fixed(30.0)), controls, column]
-        .align_items(Alignment::Center)
-        .width(Length::Fill);
+    let left = row![].width(Length::Fill);
+    let center = row![center].width(Length::Fill);
+    let right = row![right].width(Length::Fill);
+
+    let main = row![left, center, right].align_items(Alignment::Center);
+
+    content = content.push(main);
 
-    iced_widget::scrollable(column).into()
+    content.into()
 }

neothesia/src/scene/menu_scene/icons.rs

@@ -0,0 +1,15 @@
+use super::Renderer;
+
+static ICONS: iced_core::Font = iced_core::Font::with_name("bootstrap-icons");
+
+pub fn play_icon<'a>() -> iced_widget::Text<'a, Renderer> {
+    iced_widget::text('\u{f49d}').font(ICONS)
+}
+
+pub fn note_list_icon<'a>() -> iced_widget::Text<'a, Renderer> {
+    iced_widget::text('\u{f451}').font(ICONS)
+}
+
+pub fn left_arrow_icon<'a>() -> iced_widget::Text<'a, Renderer> {
+    iced_widget::text('\u{f12f}').font(ICONS)
+}

neothesia/src/scene/menu_scene/mod.rs

@@ -1,5 +1,6 @@
 mod iced_menu;
 
+mod icons;
 mod neo_btn;
 mod segment_button;
 mod track_card;