create custom tab and implemented it

this will provide more customization flexibility as the iced_aw variant
is quite limited.

Author: MaarifaMaarifa

assets/icons/binoculars-fill.svg

@@ -8,6 +8,15 @@ pub fn get_static_cow_from_asset(static_asset: &'static [u8]) -> Cow<'static, [u
 }
 
 pub mod icons {
+
+    pub static BINOCULARS_FILL: &[u8; 639] =
+        include_bytes!("../../assets/icons/binoculars-fill.svg");
+    pub static CARD_CHECKLIST: &[u8; 730] = include_bytes!("../../assets/icons/card-checklist.svg");
+    pub static FILM: &[u8; 384] = include_bytes!("../../assets/icons/film.svg");
+    pub static GRAPH_UP_ARROW: &[u8; 402] = include_bytes!("../../assets/icons/graph-up-arrow.svg");
+    pub static GEAR_WIDE_CONNECTED: &[u8; 1312] =
+        include_bytes!("../../assets/icons/gear-wide-connected.svg");
+
     pub static ARROW_BAR_UP: &[u8; 376] = include_bytes!("../../assets/icons/arrow-bar-up.svg");
     pub static ARROW_BAR_DOWN: &[u8; 375] = include_bytes!("../../assets/icons/arrow-bar-down.svg");
     pub static ARROW_LEFT: &[u8; 311] = include_bytes!("../../assets/icons/arrow-left.svg");

assets/icons/card-checklist.svg

@@ -15,7 +15,6 @@ use view::watchlist_view::{Message as WatchlistMessage, WatchlistTab};
 
 use iced::widget::{container, text, Column};
 use iced::{Application, Command, Element, Length};
-use iced_aw::{TabBarStyles, TabLabel, Tabs};
 
 use super::core::settings_config;
 
@@ -55,7 +54,7 @@ impl Into<usize> for TabId {
 
 #[derive(Debug, Clone)]
 pub enum Message {
-    TabSelected(TabId),
+    TabSelected(usize),
     Discover(DiscoverMessage),
     Watchlist(WatchlistMessage),
     MyShows(MyShowsMessage),
@@ -127,6 +126,7 @@ impl Application for TroxideGui {
         match message {
             Message::TabSelected(tab_id) => {
                 self.series_view_active = false;
+                let tab_id: TabId = tab_id.into();
                 self.active_tab = tab_id.clone();
 
                 if let TabId::MyShows = tab_id {
@@ -168,29 +168,27 @@ impl Application for TroxideGui {
     }
 
     fn view(&self) -> iced::Element<'_, Message, iced::Renderer<Self::Theme>> {
-        let mut tabs: Vec<(TabId, TabLabel, Element<'_, Message, iced::Renderer>)> = vec![
+        let mut tabs: Vec<(
+            troxide_widget::tabs::TabLabel,
+            Element<'_, Message, iced::Renderer>,
+        )> = vec![
             (
-                TabId::Discover,
                 self.discover_tab.tab_label(),
                 self.discover_tab.view().map(Message::Discover),
             ),
             (
-                TabId::Watchlist,
                 self.watchlist_tab.tab_label(),
                 self.watchlist_tab.view().map(Message::Watchlist),
             ),
             (
-                TabId::MyShows,
                 self.my_shows_tab.tab_label(),
                 self.my_shows_tab.view().map(Message::MyShows),
             ),
             (
-                TabId::Statistics,
                 self.statistics_tab.tab_label(),
                 self.statistics_tab.view().map(Message::Statistics),
             ),
             (
-                TabId::Settings,
                 self.settings_tab.tab_label(),
                 self.settings_tab.view().map(Message::Settings),
             ),
@@ -200,8 +198,10 @@ impl Application for TroxideGui {
 
         // Hijacking the current tab view when series view is active
         if self.series_view_active {
-            let (_, _, current_view): &mut (TabId, TabLabel, Element<'_, Message, iced::Renderer>) =
-                &mut tabs[active_tab_index];
+            let (_, current_view): &mut (
+                troxide_widget::tabs::TabLabel,
+                Element<'_, Message, iced::Renderer>,
+            ) = &mut tabs[active_tab_index];
             *current_view = self
                 .series_view
                 .as_ref()
@@ -210,15 +210,9 @@ impl Application for TroxideGui {
                 .map(Message::Series);
         }
 
-        let tab_bar_theme = match self.settings_tab.get_config_settings().theme {
-            settings_config::Theme::Light => TabBarStyles::Default,
-            settings_config::Theme::Dark => TabBarStyles::Dark,
-        };
-
-        Tabs::with_tabs(tabs, Message::TabSelected)
-            .set_active_tab(&self.active_tab)
-            .tab_bar_style(tab_bar_theme)
-            .into()
+        troxide_widget::tabs::Tabs::with_tabs(tabs, Message::TabSelected)
+            .set_active_tab(active_tab_index)
+            .view()
     }
 }
 
@@ -281,7 +275,7 @@ trait Tab {
 
     fn title(&self) -> String;
 
-    fn tab_label(&self) -> TabLabel;
+    fn tab_label(&self) -> troxide_widget::tabs::TabLabel;
 
     fn view(&self) -> Element<'_, Self::Message> {
         let column = Column::new()

assets/icons/film.svg

@@ -22,6 +22,16 @@ pub fn release_time_container_theme() -> Container {
     )
 }
 
+/// A custom theme for container respecting Light and Dark TroxideTheme designed for the tabs
+pub fn first_class_container_tab_theme() -> Container {
+    Container::Custom(Box::new(ContainerTabThemeFirst) as Box<dyn StyleSheet<Style = iced::Theme>>)
+}
+
+/// A custom theme for container respecting Light and Dark TroxideTheme designed for the tabs
+pub fn second_class_container_tab_theme() -> Container {
+    Container::Custom(Box::new(ContainerTabThemeSecond) as Box<dyn StyleSheet<Style = iced::Theme>>)
+}
+
 pub struct ContainerThemeFirst;
 
 impl StyleSheet for ContainerThemeFirst {
@@ -80,6 +90,64 @@ impl StyleSheet for ContainerThemeSecond {
     }
 }
 
+pub struct ContainerTabThemeFirst;
+
+impl StyleSheet for ContainerTabThemeFirst {
+    type Style = iced::Theme;
+
+    fn appearance(&self, style: &Self::Style) -> Appearance {
+        let mut appearance = Appearance {
+            // border_width: 1.0,
+            // border_radius: 10.0,
+            ..Appearance::default()
+        };
+
+        match style {
+            iced::Theme::Custom(custom) => {
+                if **custom == TroxideTheme::get_theme(&TroxideTheme::Light) {
+                    appearance.background = Some(Background::Color(color!(0xcccccc)));
+                    appearance.border_color = color!(0xbbbbbb);
+                    appearance
+                } else {
+                    appearance.background = Some(Background::Color(color!(0x1c1c1c)));
+                    appearance.border_color = Color::BLACK;
+                    appearance
+                }
+            }
+            _ => unreachable!("built-in iced themes are not in use"),
+        }
+    }
+}
+
+pub struct ContainerTabThemeSecond;
+
+impl StyleSheet for ContainerTabThemeSecond {
+    type Style = iced::Theme;
+
+    fn appearance(&self, style: &Self::Style) -> Appearance {
+        let mut appearance = Appearance {
+            // border_width: 1.0,
+            // border_radius: 10.0,
+            ..Appearance::default()
+        };
+
+        match style {
+            iced::Theme::Custom(custom) => {
+                if **custom == TroxideTheme::get_theme(&TroxideTheme::Light) {
+                    appearance.background = Some(Background::Color(color!(0xbbbbbb)));
+                    appearance.border_color = color!(0xbbbbbb);
+                    appearance
+                } else {
+                    appearance.background = Some(Background::Color(color!(0x282828)));
+                    appearance.border_color = Color::BLACK;
+                    appearance
+                }
+            }
+            _ => unreachable!("built-in iced themes are not in use"),
+        }
+    }
+}
+
 pub struct ContainerThemeReleaseTime;
 
 impl StyleSheet for ContainerThemeReleaseTime {

assets/icons/gear-wide-connected.svg

@@ -294,3 +294,97 @@ pub mod series_poster {
         }
     }
 }
+
+pub mod tabs {
+    use iced::widget::{column, container, horizontal_space, mouse_area, row, svg, text, Row};
+    use iced::{Element, Length, Renderer};
+
+    use crate::gui::assets::get_static_cow_from_asset;
+    use crate::gui::styles;
+
+    pub struct TabLabel {
+        pub text: String,
+        pub icon: &'static [u8],
+    }
+
+    impl TabLabel {
+        pub fn new(text: String, icon: &'static [u8]) -> Self {
+            Self { text, icon }
+        }
+    }
+
+    pub struct Tabs<'a, Message> {
+        active_tab: usize,
+        on_select: Box<dyn Fn(usize) -> Message>,
+        tabs: Vec<(TabLabel, Element<'a, Message, Renderer>)>,
+    }
+
+    impl<'a, Message> Tabs<'a, Message>
+    where
+        Message: Clone + 'a,
+    {
+        pub fn with_tabs<F>(
+            tabs: Vec<(TabLabel, Element<'a, Message, Renderer>)>,
+            on_select: F,
+        ) -> Self
+        where
+            F: 'static + Fn(usize) -> Message,
+        {
+            Self {
+                active_tab: usize::default(),
+                on_select: Box::new(on_select),
+                tabs,
+            }
+        }
+
+        pub fn set_active_tab(mut self, tab_id: usize) -> Self {
+            self.active_tab = tab_id;
+            self
+        }
+
+        fn tab_view(&self) -> iced::Element<'a, Message, Renderer> {
+            let tab_views = self
+                .tabs
+                .iter()
+                .enumerate()
+                .map(|(index, (tab_label, _))| {
+                    let svg_handle =
+                        svg::Handle::from_memory(get_static_cow_from_asset(tab_label.icon));
+                    let icon = svg(svg_handle)
+                        .width(Length::Shrink)
+                        .style(styles::svg_styles::colored_svg_theme());
+                    let text_label = text(&tab_label.text);
+                    let mut tab = container(
+                        mouse_area(row![icon, text_label].spacing(5))
+                            .on_press((self.on_select)(index)),
+                    )
+                    .padding(5);
+
+                    // Highlighting the tab if is active
+                    if index == self.active_tab {
+                        tab =
+                            tab.style(styles::container_styles::second_class_container_tab_theme())
+                    };
+                    tab.into()
+                })
+                .collect();
+
+            let tab_views = Row::with_children(tab_views).spacing(10);
+
+            container(row![
+                horizontal_space(Length::Fill),
+                tab_views,
+                horizontal_space(Length::Fill)
+            ])
+            .style(styles::container_styles::first_class_container_tab_theme())
+            .into()
+        }
+
+        pub fn view(mut self) -> Element<'a, Message, Renderer> {
+            let tab_view = self.tab_view();
+            let active_tab = self.active_tab;
+            let main_view = self.tabs.swap_remove(active_tab).1;
+            column![tab_view, main_view].into()
+        }
+    }
+}

assets/icons/graph-up-arrow.svg

@@ -2,8 +2,9 @@ use crate::core::api::episodes_information::Episode;
 use crate::core::api::series_information::SeriesMainInformation;
 use crate::core::api::tv_schedule::{get_episodes_with_country, get_episodes_with_date};
 use crate::core::api::updates::show_updates::*;
+use crate::gui::assets::icons::BINOCULARS_FILL;
 use crate::gui::troxide_widget::series_poster::{Message as SeriesPosterMessage, SeriesPoster};
-use crate::gui::{Message as GuiMessage, Tab};
+use crate::gui::{troxide_widget, Message as GuiMessage, Tab};
 use searching::Message as SearchMessage;
 
 use iced::widget::{column, container, scrollable, text, vertical_space};
@@ -205,8 +206,8 @@ impl Tab for DiscoverTab {
         "Discover".to_owned()
     }
 
-    fn tab_label(&self) -> iced_aw::TabLabel {
-        iced_aw::TabLabel::Text(self.title())
+    fn tab_label(&self) -> troxide_widget::tabs::TabLabel {
+        troxide_widget::tabs::TabLabel::new(self.title(), BINOCULARS_FILL)
     }
 
     fn content(&self) -> Element<'_, Self::Message> {

src/gui/assets.rs

@@ -4,8 +4,9 @@ use crate::core::api::episodes_information::Episode;
 use crate::core::caching;
 use crate::core::caching::episode_list::EpisodeReleaseTime;
 use crate::core::{api::series_information::SeriesMainInformation, database};
+use crate::gui::assets::icons::FILM;
 use crate::gui::troxide_widget::series_poster::{Message as SeriesPosterMessage, SeriesPoster};
-use crate::gui::troxide_widget::{GREEN_THEME, RED_THEME};
+use crate::gui::troxide_widget::{self, GREEN_THEME, RED_THEME};
 use crate::gui::{Message as GuiMessage, Tab};
 use iced::widget::{container, scrollable, Column};
 use iced_aw::{Spinner, Wrap};
@@ -377,8 +378,8 @@ impl Tab for MyShowsTab {
         "My Shows".to_owned()
     }
 
-    fn tab_label(&self) -> iced_aw::TabLabel {
-        iced_aw::TabLabel::Text(self.title())
+    fn tab_label(&self) -> troxide_widget::tabs::TabLabel {
+        troxide_widget::tabs::TabLabel::new(self.title(), FILM)
     }
 
     fn content(&self) -> Element<'_, Self::Message> {

src/gui/mod.rs

@@ -2,7 +2,8 @@ use iced::widget::{button, column, horizontal_space, pick_list, row, text, verti
 use iced::{Element, Length, Renderer};
 
 use crate::core::settings_config::{save_config, Config, Theme, ALL_THEMES};
-use crate::gui::{Message as GuiMessage, Tab};
+use crate::gui::assets::icons::GEAR_WIDE_CONNECTED;
+use crate::gui::{troxide_widget, Message as GuiMessage, Tab};
 
 #[derive(Debug, Clone)]
 pub enum Message {
@@ -87,8 +88,8 @@ impl Tab for SettingsTab {
         "Settings".to_owned()
     }
 
-    fn tab_label(&self) -> iced_aw::TabLabel {
-        iced_aw::TabLabel::Text(self.title())
+    fn tab_label(&self) -> troxide_widget::tabs::TabLabel {
+        troxide_widget::tabs::TabLabel::new(self.title(), GEAR_WIDE_CONNECTED)
     }
 
     fn content(&self) -> Element<'_, Self::Message> {