Minimal custom themes implementation

src/chart/manage_chart_data.rs

@@ -84,7 +84,7 @@ mod tests {
     use std::collections::VecDeque;
 
     use crate::chart::manage_chart_data::{get_max, get_min, update_charts_data};
-    use crate::{ChartType, RunTimeData, TrafficChart};
+    use crate::{ChartType, Language, RunTimeData, StyleType, TrafficChart};
 
     #[test]
     fn test_chart_data_updates() {
@@ -162,12 +162,9 @@ mod tests {
             max_received_bytes: 21000,
             min_sent_packets: -1000,
             max_received_packets: 21000,
-            color_mix: 0.0,
-            color_incoming: Default::default(),
-            color_outgoing: Default::default(),
-            color_font: Default::default(),
+            language: Language::default(),
             chart_type: ChartType::Packets,
-            language: Default::default(),
+            style: StyleType::default(),
         };
         let mut runtime_data = RunTimeData {
             all_bytes: 0,

src/chart/types/traffic_chart.rs

@@ -5,10 +5,9 @@ use std::collections::VecDeque;
 use iced::alignment::{Horizontal, Vertical};
 use iced::widget::{Column, Container};
 use iced::Element;
-use plotters::style::RGBColor;
 use plotters_iced::{Chart, ChartBuilder, ChartWidget, DrawingBackend};
 
-use crate::gui::styles::style_constants::{get_color_mix_chart, CHARTS_LINE_BORDER};
+use crate::gui::styles::style_constants::{get_alpha_chart_badge, CHARTS_LINE_BORDER};
 use crate::gui::styles::types::palette::to_rgb_color;
 use crate::gui::types::message::Message;
 use crate::translations::translations::{incoming_translation, outgoing_translation};
@@ -35,12 +34,12 @@ pub struct TrafficChart {
     pub min_sent_packets: i64,
     /// Minimum number of received packets per time interval (computed on last 30 intervals)
     pub max_received_packets: i64,
-    pub color_mix: f64,
-    pub color_incoming: RGBColor,
-    pub color_outgoing: RGBColor,
-    pub color_font: RGBColor,
-    pub chart_type: ChartType,
+    /// Language used for the chart legend
     pub language: Language,
+    /// Packets or bytes
+    pub chart_type: ChartType,
+    /// Style of the chart
+    pub style: StyleType,
 }
 
 impl TrafficChart {
@@ -55,12 +54,9 @@ impl TrafficChart {
             max_received_bytes: 0,
             min_sent_packets: 0,
             max_received_packets: 0,
-            color_mix: get_color_mix_chart(style),
-            color_incoming: to_rgb_color(get_colors(style).secondary),
-            color_outgoing: to_rgb_color(get_colors(style).outgoing),
-            color_font: to_rgb_color(get_colors(style).text_body),
-            chart_type: ChartType::Bytes,
             language,
+            chart_type: ChartType::Bytes,
+            style,
         }
     }
 
@@ -79,11 +75,8 @@ impl TrafficChart {
         self.language = language;
     }
 
-    pub fn change_colors(&mut self, style: StyleType) {
-        self.color_font = to_rgb_color(get_colors(style).text_body);
-        self.color_incoming = to_rgb_color(get_colors(style).secondary);
-        self.color_outgoing = to_rgb_color(get_colors(style).outgoing);
-        self.color_mix = get_color_mix_chart(style);
+    pub fn change_style(&mut self, style: StyleType) {
+        self.style = style;
     }
 }
 
@@ -97,9 +90,10 @@ impl Chart<Message> for TrafficChart {
     ) {
         use plotters::prelude::*;
 
-        let font_weight = match self.color_font {
-            RGBColor(255, 255, 255) => FontStyle::Normal, // if white non-bold
-            _ => FontStyle::Bold,
+        let font_weight = if self.style.is_nightly() {
+            FontStyle::Normal
+        } else {
+            FontStyle::Bold
         };
 
         if self.ticks == 0 {
@@ -108,8 +102,11 @@ impl Chart<Message> for TrafficChart {
         let tot_seconds = self.ticks - 1;
         let first_time_displayed = if self.ticks > 30 { self.ticks - 30 } else { 0 };
 
-        let color_incoming = self.color_incoming;
-        let color_outgoing = self.color_outgoing;
+        let colors = get_colors(self.style);
+        let color_incoming = to_rgb_color(colors.secondary);
+        let color_outgoing = to_rgb_color(colors.outgoing);
+        let color_font = to_rgb_color(colors.text_body);
+        let color_mix = get_alpha_chart_badge(self.style);
 
         chart_builder
             .margin_right(30)
@@ -133,7 +130,7 @@ impl Chart<Message> for TrafficChart {
                         ("Sarasa Mono SC", 12)
                             .into_font()
                             .style(font_weight)
-                            .color(&self.color_font),
+                            .color(&color_font),
                     )
                     .y_labels(7)
                     .y_label_formatter(&|bytes| {
@@ -146,7 +143,7 @@ impl Chart<Message> for TrafficChart {
                         AreaSeries::new(
                             self.received_bytes.iter().copied(),
                             0,
-                            color_incoming.mix(self.color_mix),
+                            color_incoming.mix(color_mix.into()),
                         )
                         .border_style(
                             ShapeStyle::from(&color_incoming).stroke_width(CHARTS_LINE_BORDER),
@@ -162,7 +159,7 @@ impl Chart<Message> for TrafficChart {
                         AreaSeries::new(
                             self.sent_bytes.iter().copied(),
                             0,
-                            color_outgoing.mix(self.color_mix),
+                            color_outgoing.mix(color_mix.into()),
                         )
                         .border_style(
                             ShapeStyle::from(&color_outgoing).stroke_width(CHARTS_LINE_BORDER),
@@ -182,7 +179,7 @@ impl Chart<Message> for TrafficChart {
                         ("Sarasa Mono SC", 13.5)
                             .into_font()
                             .style(font_weight)
-                            .color(&self.color_font),
+                            .color(&color_font),
                     )
                     .draw()
                     .expect("Error drawing graph");
@@ -203,7 +200,7 @@ impl Chart<Message> for TrafficChart {
                         ("Sarasa Mono SC", 12)
                             .into_font()
                             .style(font_weight)
-                            .color(&self.color_font),
+                            .color(&color_font),
                     )
                     .y_labels(7)
                     .y_label_formatter(&|packets| packets.abs().to_string())
@@ -214,7 +211,7 @@ impl Chart<Message> for TrafficChart {
                         AreaSeries::new(
                             self.received_packets.iter().copied(),
                             0,
-                            color_incoming.mix(self.color_mix),
+                            color_incoming.mix(color_mix.into()),
                         )
                         .border_style(
                             ShapeStyle::from(&color_incoming).stroke_width(CHARTS_LINE_BORDER),
@@ -230,7 +227,7 @@ impl Chart<Message> for TrafficChart {
                         AreaSeries::new(
                             self.sent_packets.iter().copied(),
                             0,
-                            color_outgoing.mix(self.color_mix),
+                            color_outgoing.mix(color_mix.into()),
                         )
                         .border_style(
                             ShapeStyle::from(&color_outgoing).stroke_width(CHARTS_LINE_BORDER),
@@ -250,7 +247,7 @@ impl Chart<Message> for TrafficChart {
                         ("Sarasa Mono SC", 13.5)
                             .into_font()
                             .style(font_weight)
-                            .color(&self.color_font),
+                            .color(&color_font),
                     )
                     .draw()
                     .expect("Error drawing graph");

src/configs/types/config_settings.rs

@@ -9,8 +9,9 @@ use crate::{Language, StyleType};
 
 #[derive(Serialize, Deserialize, Default)]
 pub struct ConfigSettings {
-    pub style: StyleType,
     pub color_gradient: GradientType,
     pub language: Language,
     pub notifications: Notifications,
+    // StyleType should be last in order to deserialize as a table properly
+    pub style: StyleType,
 }

src/gui/pages/settings_style_page.rs

@@ -1,17 +1,20 @@
 use iced::alignment::{Horizontal, Vertical};
+use iced::widget::scrollable::Direction;
 use iced::widget::{button, horizontal_space, vertical_space, Rule};
-use iced::widget::{Button, Column, Container, Row, Text};
+use iced::widget::{Button, Column, Container, Row, Scrollable, Space, Text};
 use iced::Length::Fixed;
-use iced::{Alignment, Length};
+use iced::{Alignment, Element, Length};
 
 use crate::gui::components::tab::get_settings_tabs;
 use crate::gui::pages::settings_notifications_page::settings_header;
 use crate::gui::pages::types::settings_page::SettingsPage;
 use crate::gui::styles::button::{ButtonStyleTuple, ButtonType};
 use crate::gui::styles::container::{ContainerStyleTuple, ContainerType};
 use crate::gui::styles::rule::{RuleStyleTuple, RuleType};
+use crate::gui::styles::scrollbar::{ScrollbarStyleTuple, ScrollbarType};
 use crate::gui::styles::style_constants::{get_font, BORDER_WIDTH, FONT_SIZE_SUBTITLE, ICONS};
 use crate::gui::styles::text::{TextStyleTuple, TextType};
+use crate::gui::styles::types::custom_palette::ExtraStyles;
 use crate::gui::styles::types::gradient_type::GradientType;
 use crate::gui::types::message::Message;
 use crate::translations::translations::{
@@ -24,7 +27,7 @@ use crate::{Language, Sniffer, StyleType};
 
 pub fn settings_style_page(sniffer: &Sniffer) -> Container<Message> {
     let font = get_font(sniffer.style);
-    let content = Column::new()
+    let mut content = Column::new()
         .align_items(Alignment::Center)
         .width(Length::Fill)
         .push(settings_header(
@@ -55,13 +58,17 @@ pub fn settings_style_page(sniffer: &Sniffer) -> Container<Message> {
                 .font(font)
                 .size(FONT_SIZE_SUBTITLE),
         )
-        .push(vertical_space(Length::Fixed(10.0)))
+        .push(vertical_space(Length::Fixed(15.0)))
         .push(gradients_row(
             sniffer.style,
             sniffer.color_gradient,
             sniffer.language,
         ))
-        .push(vertical_space(Length::Fixed(10.0)))
+        .push(vertical_space(Length::Fixed(15.0)));
+
+    let mut styles_col = Column::new()
+        .align_items(Alignment::Center)
+        .width(Length::Fill)
         .push(
             Row::new()
                 .push(get_palette_container(
@@ -94,7 +101,17 @@ pub fn settings_style_page(sniffer: &Sniffer) -> Container<Message> {
                     mon_amour_translation(sniffer.language).to_string(),
                     MonAmour,
                 )),
-        );
+        )
+        .push(vertical_space(Length::Fixed(10.0)));
+    for children in get_extra_palettes(ExtraStyles::all_styles(), sniffer.style) {
+        styles_col = styles_col.push(children);
+    }
+
+    let styles_scroll = Scrollable::new(styles_col)
+        .direction(Direction::Vertical(ScrollbarType::properties()))
+        .style(ScrollbarStyleTuple(sniffer.style, ScrollbarType::Standard));
+
+    content = content.push(styles_scroll);
 
     Container::new(content)
         .height(Length::Fixed(400.0))
@@ -177,16 +194,22 @@ fn get_palette_container(
     on_press: StyleType,
 ) -> Button<'static, Message> {
     let font = get_font(style);
-    let content = Column::new()
+
+    let is_custom = matches!(on_press, StyleType::Custom(_));
+
+    let mut content = Column::new()
         .width(Length::Fill)
         .align_items(Alignment::Center)
         .spacing(5)
         .push(Text::new(name).font(font))
-        .push(get_palette(on_press))
-        .push(Text::new(description).font(font));
+        .push(get_palette(on_press, is_custom));
+
+    if !is_custom {
+        content = content.push(Text::new(description).font(font));
+    }
 
     Button::new(content)
-        .height(Length::Fixed(110.0))
+        .height(Length::Fixed(if is_custom { 75.0 } else { 110.0 }))
         .width(Length::Fixed(380.0))
         .padding(5)
         .style(
@@ -203,36 +226,79 @@ fn get_palette_container(
         .on_press(Message::Style(on_press))
 }
 
-fn get_palette(style: StyleType) -> Container<'static, Message> {
+fn get_palette(style: StyleType, is_custom: bool) -> Container<'static, Message> {
+    let height = if is_custom { 25.0 } else { 40.0 };
+
     Container::new(
         Row::new()
             .padding(0)
             .push(Row::new().padding(0).width(Length::Fixed(120.0)).push(
-                Rule::horizontal(40).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
+                Rule::horizontal(height).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
                     RuleStyleTuple(style, RuleType::PalettePrimary),
                 )),
             ))
             .push(Row::new().padding(0).width(Length::Fixed(80.0)).push(
-                Rule::horizontal(40).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
+                Rule::horizontal(height).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
                     RuleStyleTuple(style, RuleType::PaletteSecondary),
                 )),
             ))
             .push(Row::new().padding(0).width(Length::Fixed(60.0)).push(
-                Rule::horizontal(40).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
+                Rule::horizontal(height).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
                     RuleStyleTuple(style, RuleType::PaletteOutgoing),
                 )),
             ))
             .push(Row::new().padding(0).width(Length::Fixed(40.0)).push(
-                Rule::horizontal(40).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
+                Rule::horizontal(height).style(<RuleStyleTuple as Into<iced::theme::Rule>>::into(
                     RuleStyleTuple(style, RuleType::PaletteButtons),
                 )),
             )),
     )
     .align_x(Horizontal::Center)
     .align_y(Vertical::Center)
     .width(300.0 + 2.0 * BORDER_WIDTH)
-    .height(40.0 + 1.7 * BORDER_WIDTH)
+    .height(height + 1.7 * BORDER_WIDTH)
     .style(<ContainerStyleTuple as Into<iced::theme::Container>>::into(
         ContainerStyleTuple(style, ContainerType::Palette),
     ))
 }
+
+// Buttons for each extra style arranged in rows of two
+fn get_extra_palettes(
+    styles: &[ExtraStyles],
+    current_style: StyleType,
+) -> Vec<Element<'static, Message>> {
+    // Map each extra style into a palette container
+    let mut styles = styles.iter().map(|&style| {
+        let name = style.to_string();
+        let description = String::new();
+        let style = StyleType::Custom(style);
+        get_palette_container(current_style, name, description, style)
+    });
+
+    // The best way to do this would be with itertools, but that would introduce another dependency.
+    let mut children = Vec::with_capacity(styles.len());
+
+    // This handles the case where there aren't an even number of styles.
+    // [Iterator::zip] drops remainders. Itertools' `zip_longest` and the unstable array chunks API
+    // are both better solutions.
+    while let (Some(first), second) = (styles.next(), styles.next()) {
+        // Add both styles and the vertical space if there are two styles.
+        if let Some(second) = second {
+            children.extend([
+                Row::new()
+                    .push(first)
+                    .push(horizontal_space(Length::Fixed(15.0)))
+                    .push(second)
+                    .into(),
+                <Space as Into<Element<Message>>>::into(vertical_space(Length::Fixed(10.0))),
+            ]);
+        } else {
+            children.extend([
+                Row::new().push(first).into(),
+                <Space as Into<Element<Message>>>::into(vertical_space(Length::Fixed(10.0))),
+            ]);
+        }
+    }
+
+    children
+}