New feature: Sidebar

Cargo.toml

@@ -35,6 +35,7 @@ spinner = []
 context_menu = []
 slide_bar = []
 drop_down = []
+sidebar = []
 
 default = [
     "badge",
@@ -54,6 +55,7 @@ default = [
     "spinner",
     "drop_down",
     "menu",
+    "sidebar",
 ]
 
 [dependencies]
@@ -94,6 +96,7 @@ members = [
     "examples/WidgetIDReturn",
     "examples/drop_down",
     "examples/menu",
+    "examples/sidebar",
 ]
 
 [workspace.dependencies.iced]

examples/menu/src/main.rs

@@ -477,10 +477,7 @@ fn labeled_button(
     label: &str,
     msg: Message,
 ) -> button::Button<Message, iced::Theme, iced::Renderer> {
-    base_button(
-        text(label).align_y(alignment::Vertical::Center),
-        msg,
-    )
+    base_button(text(label).align_y(alignment::Vertical::Center), msg)
 }
 
 fn debug_button(label: &str) -> button::Button<Message, iced::Theme, iced::Renderer> {

examples/sidebar/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "sidebar"
+version = "0.1.0"
+authors = ["Kaiden42 <[email protected]>", "Rizzen Yazston"]
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+iced_aw = { workspace = true, features = ["sidebar", "icons"] }
+iced = { workspace = true, features = [ "image"] }

examples/sidebar/fonts/LICENSE.txt

@@ -0,0 +1,12 @@
+Font license info
+
+
+## Font Awesome
+
+   Copyright (C) 2016 by Dave Gandy
+
+   Author:    Dave Gandy
+   License:   SIL ()
+   Homepage:  http://fortawesome.github.com/Font-Awesome/
+
+

examples/sidebar/fonts/config.json

@@ -0,0 +1,40 @@
+{
+  "name": "icons",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
+      "css": "user",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "d73eceadda1f594cec0536087539afbf",
+      "css": "heart",
+      "code": 59393,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "1ee2aeb352153a403df4b441a8bc9bda",
+      "css": "calc",
+      "code": 61932,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "98687378abd1faf8f6af97c254eb6cd6",
+      "css": "cog-alt",
+      "code": 59394,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
+      "code": 59395,
+      "src": "fontawesome"
+    }
+  ]
+}

examples/sidebar/src/counter.rs

@@ -0,0 +1,66 @@
+use iced::{
+    widget::{Button, Column, Container, Row, Text},
+    Alignment, Element,
+};
+use iced_aw::sidebar::TabLabel;
+
+use crate::{Icon, Message, Tab};
+
+#[derive(Debug, Clone)]
+pub enum CounterMessage {
+    Increase,
+    Decrease,
+}
+
+#[derive(Default)]
+pub struct CounterTab {
+    value: i32,
+}
+
+impl CounterTab {
+    pub fn new() -> Self {
+        CounterTab { value: 0 }
+    }
+
+    pub fn update(&mut self, message: CounterMessage) {
+        match message {
+            CounterMessage::Increase => self.value += 1,
+            CounterMessage::Decrease => self.value -= 1,
+        }
+    }
+}
+
+impl Tab for CounterTab {
+    type Message = Message;
+
+    fn title(&self) -> String {
+        String::from("Counter")
+    }
+
+    fn tab_label(&self) -> TabLabel {
+        //TabLabel::Text(self.title())
+        TabLabel::IconText(Icon::Calc.into(), self.title())
+    }
+
+    fn content(&self) -> Element<'_, Self::Message> {
+        let content: Element<'_, CounterMessage> = Container::new(
+            Column::new()
+                .align_x(Alignment::Center)
+                .max_width(600)
+                .padding(20)
+                .spacing(16)
+                .push(Text::new(format!("Count: {}", self.value)).size(32))
+                .push(
+                    Row::new()
+                        .spacing(10)
+                        .push(Button::new(Text::new("Decrease")).on_press(CounterMessage::Decrease))
+                        .push(
+                            Button::new(Text::new("Increase")).on_press(CounterMessage::Increase),
+                        ),
+                ),
+        )
+        .into();
+
+        content.map(Message::Counter)
+    }
+}

examples/sidebar/src/ferris.rs

@@ -0,0 +1,79 @@
+use iced::{
+    widget::{Column, Container, Image, Slider, Text},
+    Alignment, Element, Length,
+};
+use iced_aw::sidebar::TabLabel;
+
+use crate::{Icon, Message, Tab};
+
+#[derive(Debug, Clone)]
+pub enum FerrisMessage {
+    ImageWidthChanged(f32),
+}
+
+#[derive(Default)]
+pub struct FerrisTab {
+    ferris_width: f32,
+}
+
+impl FerrisTab {
+    pub fn new() -> Self {
+        FerrisTab {
+            ferris_width: 100.0,
+        }
+    }
+
+    pub fn update(&mut self, message: FerrisMessage) {
+        match message {
+            FerrisMessage::ImageWidthChanged(value) => self.ferris_width = value,
+        }
+    }
+}
+
+impl Tab for FerrisTab {
+    type Message = Message;
+
+    fn title(&self) -> String {
+        String::from("Ferris")
+    }
+
+    fn tab_label(&self) -> TabLabel {
+        TabLabel::IconText(Icon::Heart.into(), self.title())
+    }
+
+    fn content(&self) -> Element<'_, Self::Message> {
+        let content: Element<'_, FerrisMessage> = Container::new(
+            Column::new()
+                .align_x(Alignment::Center)
+                .max_width(600)
+                .padding(20)
+                .spacing(16)
+                .push(Text::new(if self.ferris_width == 500.0 {
+                    "Hugs!!!"
+                } else {
+                    "Pull me closer!"
+                }))
+                .push(ferris(self.ferris_width))
+                .push(Slider::new(
+                    100.0..=500.0,
+                    self.ferris_width,
+                    FerrisMessage::ImageWidthChanged,
+                )),
+        )
+        .align_x(iced::alignment::Horizontal::Center)
+        .into();
+
+        content.map(Message::Ferris)
+    }
+}
+
+fn ferris<'a>(width: f32) -> Container<'a, FerrisMessage> {
+    Container::new(if cfg!(target_arch = "wasm32") {
+        Image::new("images/ferris.png")
+    } else {
+        Image::new(format!("{}/images/ferris.png", env!("CARGO_MANIFEST_DIR")))
+            .width(Length::Fixed(width))
+    })
+    .width(Length::Fill)
+    .center_x(Length::Fill)
+}

examples/sidebar/src/login.rs

@@ -0,0 +1,98 @@
+use iced::{
+    alignment::{Horizontal, Vertical},
+    widget::{Button, Column, Container, Row, Text, TextInput},
+    Alignment, Element, Length,
+};
+use iced_aw::sidebar::TabLabel;
+
+use crate::{Icon, Message, Tab};
+
+#[derive(Debug, Clone)]
+pub enum LoginMessage {
+    UsernameChanged(String),
+    PasswordChanged(String),
+    ClearPressed,
+    LoginPressed,
+}
+
+#[derive(Default)]
+pub struct LoginTab {
+    username: String,
+    password: String,
+}
+
+impl LoginTab {
+    pub fn new() -> Self {
+        LoginTab {
+            username: String::new(),
+            password: String::new(),
+        }
+    }
+
+    pub fn update(&mut self, message: LoginMessage) {
+        match message {
+            LoginMessage::UsernameChanged(value) => self.username = value,
+            LoginMessage::PasswordChanged(value) => self.password = value,
+            LoginMessage::ClearPressed => {
+                self.username = String::new();
+                self.password = String::new();
+            }
+            LoginMessage::LoginPressed => {}
+        }
+    }
+}
+
+impl Tab for LoginTab {
+    type Message = Message;
+
+    fn title(&self) -> String {
+        String::from("Login")
+    }
+
+    fn tab_label(&self) -> TabLabel {
+        //TabLabel::Text(self.title())
+        TabLabel::IconText(Icon::User.into(), self.title())
+    }
+
+    fn content(&self) -> Element<'_, Self::Message> {
+        let content: Element<'_, LoginMessage> = Container::new(
+            Column::new()
+                .align_x(Alignment::Center)
+                .max_width(600)
+                .padding(20)
+                .spacing(16)
+                .push(
+                    TextInput::new("Username", &self.username)
+                        .on_input(LoginMessage::UsernameChanged)
+                        .padding(10)
+                        .size(32),
+                )
+                .push(
+                    TextInput::new("Password", &self.password)
+                        .on_input(LoginMessage::PasswordChanged)
+                        .padding(10)
+                        .size(32)
+                        .secure(true),
+                )
+                .push(
+                    Row::new()
+                        .spacing(10)
+                        .push(
+                            Button::new(Text::new("Clear").align_x(Horizontal::Center))
+                                .width(Length::Fill)
+                                .on_press(LoginMessage::ClearPressed),
+                        )
+                        .push(
+                            Button::new(Text::new("Login").align_x(Horizontal::Center))
+                                .width(Length::Fill)
+                                .on_press(LoginMessage::LoginPressed),
+                        ),
+                ),
+        )
+        .align_x(Horizontal::Center)
+        .align_y(Vertical::Center)
+        .into();
+
+        content.map(Message::Login)
+    }
+}