feat(theme-settings): Add theme settings

Author: yuraiz

data/app.drey.PaperPlane.gschema.xml.in

@@ -31,5 +31,10 @@
       <summary>Color Scheme</summary>
       <description>The color scheme to be used in the app</description>
     </key>
+    <key name="theme-name" type="s">
+      <default>'🏠'</default>
+      <summary>Theme Name</summary>
+      <description>The chat theme name to be used in the app</description>
+    </key>
   </schema>
 </schemalist>

data/resources/style-dark.css

@@ -64,3 +64,7 @@ messagebubble.document.outgoing .file > overlay > statusindicator {
   background: #303030;
 }
 /* End of values for cairo renderer */
+
+themepreview {
+  color: #303030;
+}

data/resources/style.css

@@ -411,3 +411,41 @@ window.chat-info .main-page > list {
 .small-pill {
   border-radius: 18px;
 }
+
+themepreview {
+  color: white;
+}
+
+themepreview .card {
+  border-radius: 6px;
+}
+
+themepreview > label {
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1),
+    0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.theme-variants {
+  padding: 4px;
+}
+
+.theme-variants button {
+  margin: 4px;
+  background: none;
+  border-radius: 9px;
+  padding: 3px;
+  box-shadow: none;
+  outline: none;
+}
+
+.theme-variants button:checked {
+  box-shadow: 0 0 0 3px @accent_color;
+}
+
+.theme-variants button:focus:focus-visible {
+  box-shadow: 0 0 0 3px alpha(@accent_color, 0.3);
+}
+
+.theme-variants button:checked:focus:focus-visible {
+  box-shadow: 0 0 0 3px @accent_color, 0 0 0 6px alpha(@accent_color, 0.3);
+}

data/resources/ui/preferences-window.blp

@@ -3,6 +3,17 @@ using Adw 1;
 
 template $PreferencesWindow : Adw.PreferencesWindow {
   Adw.PreferencesPage {
+    Adw.PreferencesGroup {
+      title: _("Theme");
+
+      FlowBox theme_variants_box {
+        styles ["theme-variants", "card"]
+        overflow: hidden;
+
+        selection-mode: none;
+      }
+    }
+
     Adw.PreferencesGroup {
       title: _("Color Scheme");
 

src/session/content/background.rs renamed to src/components/background.rs

@@ -55,11 +55,16 @@ void mainImage(out vec4 fragColor,
 "#
 .as_bytes();
 
+static mut SHADER: Option<gsk::GLShader> = None;
+
 mod imp {
     use super::*;
 
     #[derive(Default)]
     pub(crate) struct Background {
+        pub(super) settings: OnceCell<gio::Settings>,
+        pub(super) settings_handler: RefCell<Option<glib::SignalHandlerId>>,
+
         pub(super) chat_theme: RefCell<Option<tdlib::types::ChatTheme>>,
 
         pub(super) background_texture: RefCell<Option<gdk::Texture>>,
@@ -92,6 +97,21 @@ mod imp {
 
             let obj = self.obj();
 
+            let settings = gio::Settings::new(crate::config::APP_ID);
+            let settings_handler = settings.connect_changed(
+                Some("theme-name"),
+                clone!(@weak obj => move |_, _| {
+                    let imp = obj.imp();
+
+                    if imp.chat_theme.borrow().is_none() {
+                        obj.refresh_theme(imp.dark.get());
+                    }
+                }),
+            );
+
+            self.settings.set(settings).unwrap();
+            self.settings_handler.replace(Some(settings_handler));
+
             let pattern = gdk::Texture::from_resource("/app/drey/paper-plane/images/pattern.svg");
 
             self.pattern.set(pattern).unwrap();
@@ -140,6 +160,12 @@ mod imp {
 
             self.animation.set(animation).unwrap();
         }
+
+        fn dispose(&self) {
+            if let Some(settings) = self.settings.get() {
+                settings.disconnect(self.settings_handler.take().unwrap());
+            }
+        }
     }
 
     impl WidgetImpl for Background {
@@ -432,6 +458,12 @@ impl Background {
     fn ensure_shader(&self) {
         let imp = self.imp();
         if imp.shader.borrow().is_none() {
+            unsafe {
+                if SHADER.is_some() {
+                    imp.shader.replace(SHADER.clone());
+                }
+            }
+
             let renderer = self.native().unwrap().renderer();
 
             let shader = gsk::GLShader::from_bytes(&GRADIENT_SHADER.into());
@@ -443,7 +475,11 @@ impl Background {
                     self.add_css_class("fallback");
                 }
                 Ok(_) => {
-                    imp.shader.replace(Some(shader));
+                    imp.shader.replace(Some(shader.clone()));
+
+                    unsafe {
+                        SHADER = Some(shader);
+                    }
                 }
             }
         };
@@ -458,11 +494,25 @@ impl Background {
             };
 
             self.set_theme(theme);
-
-            // For some reason tdlib tells that light theme is dark
-            self.imp().dark.set(dark);
         } else {
-            self.set_theme(&hard_coded_themes(dark));
+            let chat_theme = self
+                .ancestor(crate::Session::static_type())
+                .and_downcast::<crate::Session>()
+                .map(|s| s.default_chat_theme())
+                .unwrap_or(crate::utils::default_theme());
+
+            if dark {
+                self.set_theme(&chat_theme.dark_settings);
+            } else {
+                self.set_theme(&chat_theme.light_settings);
+            }
+        }
+
+        // For some reason tdlib tells that light theme is dark
+        self.imp().dark.set(dark);
+
+        if let Some(animation) = self.imp().animation.get() {
+            animation.notify("value");
         }
     }
 }
@@ -496,50 +546,3 @@ fn vec3_to_rgba(vec3: &graphene::Vec3) -> gdk::RGBA {
     let [red, green, blue] = vec3.to_float();
     gdk::RGBA::new(red, green, blue, 1.0)
 }
-
-fn hard_coded_themes(dark: bool) -> tdlib::types::ThemeSettings {
-    fn theme(
-        dark: bool,
-        bg_colors: Vec<i32>,
-        message_colors: Vec<i32>,
-    ) -> tdlib::types::ThemeSettings {
-        use tdlib::enums::BackgroundFill::*;
-        use tdlib::enums::BackgroundType::Fill;
-        use tdlib::types::*;
-
-        ThemeSettings {
-            background: Some(Background {
-                is_default: true,
-                is_dark: dark,
-                r#type: Fill(BackgroundTypeFill {
-                    fill: FreeformGradient(BackgroundFillFreeformGradient { colors: bg_colors }),
-                }),
-                id: 0,
-                name: String::new(),
-                document: None,
-            }),
-            accent_color: 0,
-            animate_outgoing_message_fill: false,
-            outgoing_message_accent_color: 0,
-            outgoing_message_fill: FreeformGradient(BackgroundFillFreeformGradient {
-                colors: message_colors,
-            }),
-        }
-    }
-
-    // tr tl bl br
-
-    if dark {
-        theme(
-            dark,
-            vec![0xd6932e, 0xbc40db, 0x4280d7, 0x614ed5],
-            vec![0x2d52ab, 0x4036a1, 0x9f388d, 0x9d3941],
-        )
-    } else {
-        theme(
-            dark,
-            vec![0x94dae9, 0x9aeddb, 0x94c3f6, 0xac96f7],
-            vec![0xddecff, 0xe0ddfd, 0xdbffff, 0xddffdf],
-        )
-    }
-}

src/components/mod.rs

@@ -1,9 +1,13 @@
 mod avatar;
+mod background;
 mod message_entry;
 mod snow;
 mod sticker;
+mod theme_preview;
 
 pub(crate) use self::avatar::Avatar;
+pub(crate) use self::background::Background;
 pub(crate) use self::message_entry::MessageEntry;
 pub(crate) use self::snow::Snow;
 pub(crate) use self::sticker::Sticker;
+pub(crate) use self::theme_preview::ThemePreview;