a basis for the editor with understanding how inputs work

src/main.rs

@@ -6,18 +6,19 @@ use cosmic::app::{Core, Settings, Task};
 use cosmic::iced::clipboard::dnd::DndAction;
 use cosmic::iced::keyboard::{Key, Modifiers};
 use cosmic::iced::window::{Mode, Position};
-use cosmic::iced::{self, event, window, Length, Padding, Point};
+use cosmic::iced::{
+    self, event, window, Color, Length, Padding, Point,
+};
 use cosmic::iced_futures::Subscription;
-use cosmic::iced_widget::{column, row};
+use cosmic::iced_widget::{column, row, toggler, Toggler};
-use cosmic::prelude::ElementExt;
 use cosmic::prelude::*;
 use cosmic::widget::dnd_destination::DragId;
 use cosmic::widget::nav_bar::nav_bar_style;
 use cosmic::widget::segmented_button::Entity;
+use cosmic::widget::text;
 use cosmic::widget::tooltip::Position as TPosition;
 use cosmic::widget::{
-    button, nav_bar, text, toggler, tooltip, DndDestination,
+    button, horizontal_space, nav_bar, tooltip, Space,
-    DndSource, Id, Space,
 };
 use cosmic::widget::{icon, slider};
 use cosmic::{executor, Application, ApplicationExt, Element};
@@ -123,6 +124,8 @@ enum Message {
     EditorToggle(bool),
 }
 
+const HEADER_SPACE: u16 = 20;
+
 impl cosmic::Application for App {
     type Executor = executor::Default;
     type Flags = Cli;
@@ -298,17 +301,20 @@ impl cosmic::Application for App {
         vec![]
     }
     fn header_end(&self) -> Vec<Element<Self::Message>> {
-        let editor_toggle = toggler(self.editor_mode.is_some())
+        let editor_toggle = Toggler::new(self.editor_mode.is_some())
             .label("Editor")
-            .on_toggle(|t| Message::EditorToggle(t));
+            .spacing(10)
+            .on_toggle(Message::EditorToggle);
         let presenter_window = self.windows.get(1);
         let text = if self.presentation_open {
             text::body("Close Presentation")
         } else {
             text::body("Open Presentation")
         };
+
         vec![
             editor_toggle.into(),
+            horizontal_space().width(HEADER_SPACE).into(),
             tooltip(
                 button::custom(
                     row!(
@@ -342,6 +348,7 @@ impl cosmic::Application for App {
                 TPosition::Bottom,
             )
             .into(),
+            horizontal_space().width(HEADER_SPACE).into(),
         ]
     }
 
@@ -455,7 +462,10 @@ impl cosmic::Application for App {
                 }
             }
             Message::SongEditor(message) => {
-                todo!()
+                self.song_editor.update(message).map(|m| {
+                    debug!(?m);
+                    cosmic::app::Message::App(Message::None)
+                })
             }
             Message::Present(message) => {
                 // debug!(?message);

src/ui/song_editor.rs

@@ -1,16 +1,20 @@
 use cosmic::{
-    iced::Font,
+    iced_widget::{column, row},
-    iced_widget::row,
+    widget::{dropdown, text, text_input},
-    widget::{dropdown, Container},
     Element, Task,
 };
+use tracing::debug;
 
 use crate::core::songs::Song;
 
 #[derive(Debug, Clone)]
 pub struct SongEditor {
     song: Option<Song>,
-    fonts: Vec<Font>,
+    title: String,
+    fonts: Vec<String>,
+    font_sizes: Vec<String>,
+    font: String,
+    font_size: usize,
 }
 
 #[derive(Debug, Clone)]
@@ -18,30 +22,79 @@ pub enum Message {
     ChangeSong(Song),
     UpdateSong(Song),
     ChangeFont(usize),
+    ChangeFontSize(usize),
+    ChangeTitle(String),
 }
 
 impl SongEditor {
     pub fn new() -> Self {
         let fonts = vec![
-            Font::with_name("Quicksand"),
+            String::from("Quicksand"),
-            Font::with_name("Noto Sans"),
+            String::from("Noto Sans"),
         ];
-        Self { song: None, fonts }
+        let font_sizes = vec![
+            "10".to_string(),
+            "12".to_string(),
+            "16".to_string(),
+            "18".to_string(),
+            "20".to_string(),
+        ];
+        Self {
+            song: None,
+            fonts,
+            title: String::from("Death was Arrested"),
+            font: String::from("Quicksand"),
+            font_size: 16,
+            font_sizes,
+        }
     }
-    pub fn update(&self, message: Message) -> Task<Message> {
+    pub fn update(&mut self, message: Message) -> Task<Message> {
         match message {
             Message::ChangeSong(song) => todo!(),
             Message::UpdateSong(song) => todo!(),
-            Message::ChangeFont(font) => todo!(),
+            Message::ChangeFont(font) => {
+                if let Some(font) = self.fonts.get(font) {
+                    debug!(font);
+                    self.font = font.to_owned();
+                }
+                Task::none()
+            }
+            Message::ChangeFontSize(size) => {
+                if let Some(size) = self.font_sizes.get(size) {
+                    if let Ok(size) = size.parse() {
+                        debug!(font_size = size);
+                        self.font_size = size;
+                    }
+                }
+                Task::none()
+            }
+            Message::ChangeTitle(title) => {
+                self.title = title;
+                Task::none()
+            }
         }
     }
 
     pub fn view(&self) -> Element<Message> {
+        let selected_font =
+            self.fonts.iter().position(|f| *f == self.font);
+        let selected_font_size = self
+            .font_sizes
+            .iter()
+            .position(|s| *s == self.font_size.to_string());
         let font_selector =
-            dropdown(&["Quicksand", "Noto Sans"], None, |font| {
+            dropdown(&self.fonts, selected_font, Message::ChangeFont)
-                Message::ChangeFont(font)
+                .width(200);
-            });
+        let font_size = dropdown(
-        let toolbar = row![font_selector];
+            &self.font_sizes,
-        toolbar.into()
+            selected_font_size,
+            Message::ChangeFontSize,
+        );
+        let title = text(&self.title);
+        let title_input = text_input("song", &self.title)
+            .on_input(Message::ChangeTitle);
+        let toolbar = row![font_selector, font_size];
+        let column = column![toolbar, title, title_input];
+        column.into()
     }
 }