Add theme settings

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

@@ -1,3 +1,13 @@
+@define-color outgoing_message_accent_color white;
+
+label.link link {
+ color: #78aeed;
+}
+
+messagebubble.outgoing label.link link {
+ color: currentColor;
+}
+
 #new-login-icon {
  background-color: @dark_2;
 }
@@ -19,12 +29,8 @@ messagebubble.outgoing {
  background-color: #2c52ac;
 }
 
-messagebubble.document.outgoing .file > overlay > statusindicator {
- color: white;
-}
-
 .event-row {
- background-color: alpha(#404040, 0.8);
+ background-color: alpha(#404040, 0.8);style_context_remove_provider_for_display
 }
 
 .chat-list row .unread-count-muted {
@@ -64,3 +70,7 @@ messagebubble.document.outgoing .file > overlay > statusindicator {
  background: #303030;
 }
 /* End of values for cairo renderer */
+
+themepreview {
+ color: #303030;
+}

data/resources/style.css

@@ -1,3 +1,14 @@
+@define-color outgoing_message_accent_color #79c271;
+
+/* Gtk doesn't redraw links after their color changed, so it's better for it to be constant */
+label.link link {
+ color: @blue_4;
+}
+
+messagebubble.outgoing label.link link {
+ color: currentColor;
+}
+
 .bold {
  font-weight: bold;
 }
@@ -166,11 +177,15 @@ messagebubble:not(.outgoing):dir(rtl) {
  margin-left: 38px;
 }
 
-messagebubble.outgoing link,
 messagebubble.outgoing messagereply label.message {
  color: @window_fg_color;
 }
 
+messagebubble.outgoing messagereply label.caption-heading,
+messagebubble.outgoing messagereply separator {
+ color: @outgoing_message_accent_color;
+}
+
 messagebubble messageindicators {
  opacity: 0.7;
 }
@@ -208,7 +223,7 @@ messagebubble.document .file > overlay > statusindicator {
 
 messagebubble.document.outgoing .file > overlay > statusindicator {
  /* depends on bubble color */
- color: #79c271;
+ color: @outgoing_message_accent_color;
 }
 
 messagebubble.document .file:hover > overlay > statusindicator {
@@ -314,6 +329,10 @@ messagereply label.message {
  color: @window_fg_color;
 }
 
+messagebubble.outgoing messagereply label.message {
+ color: currentColor;
+}
+
 messagesticker {
  border-spacing: 6px;
 }
@@ -407,3 +426,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/content-chat-history.ui

@@ -3,6 +3,8 @@
  <template class="ContentChatHistory" parent="AdwBin">
  <child>
  <object class="AdwToolbarView">
+ <property name="top-bar-style">raised</property>
+ <property name="bottom-bar-style">raised</property>
  <child type="top">
  <object class="GtkOverlay">
  <child>
@@ -87,29 +89,26 @@
  </object>
  </child>
  <child>
- <object class="ContentBackground" id="background">
- <property name="vexpand">True</property>
+ <object class="GtkScrolledWindow" id="scrolled_window">
+ <property name="hscrollbar-policy">never</property>
  <property name="child">
- <object class="GtkScrolledWindow" id="scrolled_window">
- <property name="hscrollbar-policy">never</property>
+ <object class="AdwClampScrollable">
+ <property name="maximum-size">800</property>
+ <property name="tightening-threshold">600</property>
+ <property name="vscroll-policy">natural</property>
  <property name="child">
- <object class="AdwClampScrollable">
- <property name="maximum-size">800</property>
- <property name="tightening-threshold">600</property>
- <property name="vscroll-policy">natural</property>
- <property name="child">
- <object class="GtkListView" id="list_view">
- <property name="reversed">True</property>
- <style>
- <class name="chat-history"/>
- </style>
- <property name="factory">
- <object class="GtkBuilderListItemFactory">
- <property name="bytes"><![CDATA[
+ <object class="GtkListView" id="list_view">
+ <property name="reversed">True</property>
+ <style>
+ <class name="chat-history"/>
+ </style>
+ <property name="factory">
+ <object class="GtkBuilderListItemFactory">
+ <property name="bytes"><![CDATA[
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
- <template class="GtkListItem">
-  <property name="activatable">False</property>
+<template class="GtkListItem">
+ <property name="activatable">False</property>
  <property name="child">
  <object class="ContentChatHistoryRow">
  <binding name="item">
@@ -119,9 +118,7 @@
  </property>
  </template>
 </interface>
- ]]></property>
- </object>
- </property>
+ ]]></property>
  </object>
  </property>
  </object>

data/resources/ui/content.blp

@@ -7,34 +7,35 @@ template $Content : Adw.Bin {
 
  styles ["view"]
 
- Stack stack {
- Adw.ToolbarView unselected_chat_view {
- [top]
- Overlay {
+ $ContentBackground {
+ controls-accent: true;
+
+ child: Stack stack {
+ Adw.ToolbarView unselected_chat_view {
+ extend-content-to-top-edge: true;
+
+ [top]
  Adw.HeaderBar {
  show-start-title-buttons: false;
 
  [title]
  Adw.WindowTitle {}
  }
 
- [overlay]
- $ComponentsSnow snow {
- sensitive: false;
- }
+ content: Label {
+ styles ["event-row"]
+
+ halign: center;
+ valign: center;
+
+ label: _("Select a chat to start messaging.");
+ };
  }
 
- content: Adw.StatusPage {
- vexpand: true;
- icon-name: "user-available-symbolic";
- title: _("No Chat Selected");
- description: _("Select a chat to start messaging.");
- };
- }
-
- $ContentChatHistory chat_history {
- compact: bind template.compact;
- chat: bind template.chat;
- }
+ $ContentChatHistory chat_history {
+ compact: bind template.compact;
+ chat: bind template.chat;
+ }
+ };
  }
 }

data/resources/ui/preferences-window.blp

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