feat(Status): move thread lines to snapshotting (#1315)

GeopJr · Jan 31, 2025 · 62b8dc0 · 62b8dc0
1 parent ec5c0d9
commit 62b8dc0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 61 deletions.
diff --git a/data/style.css b/data/style.css
@@ -61,11 +61,6 @@ headerbar.flat.no-title .title {
 	margin: 0px;
 }
 
-.ttl-thread-line {
-	background: var(--window-fg-color);
-	opacity: .1;
-}
-
 .ttl-code {
 	padding: 12px;
 	background: rgba(150, 150, 150, .1);
@@ -352,15 +347,6 @@ headerbar.flat.no-title .title {
 	font-weight: initial;
 }
 
-.ttl-thread-line.top {
-	margin-top: -18px;
-	margin-bottom: -3px;
-}
-
-.ttl-thread-line.bottom {
-	margin-bottom: -20px;
-}
-
 .attachment-overlay-icon {
 	border-radius: 100%;
 	min-height: 64px;

diff --git a/data/ui/widgets/status.ui b/data/ui/widgets/status.ui
@@ -36,18 +36,6 @@
                         <property name="icon_size">1</property>
                       </object>
                     </child>
-                    <child>
-                      <object class="GtkImage" id="thread_line_top">
-                        <property name="visible">0</property>
-                        <property name="width_request">4</property>
-                        <property name="halign">center</property>
-                        <property name="pixel-size">4</property>
-                        <style>
-                          <class name="ttl-thread-line" />
-                          <class name="top" />
-                        </style>
-                      </object>
-                    </child>
                     <child>
                       <object class="GtkOverlay" id="avatar_overlay">
                         <property name="margin_top">3</property>
@@ -63,19 +51,6 @@
                         </child>
                       </object>
                     </child>
-                    <child>
-                      <object class="GtkImage" id="thread_line_bottom">
-                        <property name="visible">0</property>
-                        <property name="width_request">4</property>
-                        <property name="vexpand">1</property>
-                        <property name="halign">center</property>
-                        <property name="pixel-size">4</property>
-                        <style>
-                          <class name="ttl-thread-line" />
-                          <class name="bottom" />
-                        </style>
-                      </object>
-                    </child>
                   </object>
                 </child>
                 <child>

diff --git a/src/Widgets/Status.vala b/src/Widgets/Status.vala
@@ -104,8 +104,6 @@
 	[GtkChild] protected unowned Gtk.Image header_icon;
 	[GtkChild] protected unowned Widgets.RichLabel header_label;
 	[GtkChild] protected unowned Gtk.Button header_button;
-	[GtkChild] public unowned Gtk.Image thread_line_top;
-	[GtkChild] public unowned Gtk.Image thread_line_bottom;
 
 	[GtkChild] public unowned Widgets.Avatar avatar;
 	[GtkChild] public unowned Gtk.Overlay avatar_overlay;
@@ -1288,27 +1286,66 @@
 		}
 	}
 
+	const float THREAD_WIDTH = 4f;
+
+	public override void snapshot (Gtk.Snapshot snapshot) {
+		if (!expanded && enable_thread_lines && status.formal.tuba_thread_role != NONE && filter_stack.visible_child_name == "status") {
+			float y;
+			float height;
+
+			// Get the avatar's position
+			Graphene.Point avatar_point;
+			avatar.compute_point (
+				this,
+				Graphene.Point () { x = 0.0f, y=0.0f },
+				out avatar_point
+			);
+
+			// NOTE: we need the thread line to be > status height as
+			//		 it looks better if it reaches the status' bounds
+			//       so the sizes below are either always bigger or
+			//		 start at a negative point
+			switch (status.formal.tuba_thread_role) {
+				// Thread starter line needs to start from the
+				// center of the avatar and end at the end of
+				// the status
+				case START:
+					y = avatar_point.y + avatar.get_height () / 2f;
+					height = (float) this.get_height ();
+					break;
+				// Thread in-between line needs to start from the
+				// top and end at the end of the status
+				case MIDDLE:
+					y = -4f;
+					height = this.get_height () * 1.2f;
+					break;
+				// Thread end line needs to start from the
+				// status top and end at the center of the
+				// avatar
+				case END:
+					y = -4f;
+					height = (avatar_point.y + avatar.get_height () / 2f) + 4f;
+					break;
+				default:
+					assert_not_reached ();
+			}
+
+			var line_rect = Graphene.Rect () {
+				// we need the center of the avatar for the x point minus half the thread line width
+				origin = Graphene.Point () { x = avatar_point.x + avatar.get_width () / 2f - THREAD_WIDTH / 2f, y = y },
+				size = Graphene.Size () { width = THREAD_WIDTH, height = height }
+			};
+
+			snapshot.push_opacity (0.1);
+			snapshot.append_color (this.get_color (), line_rect);
+			snapshot.pop ();
+		}
+
+		base.snapshot (snapshot);
+	}
+
 	// Threads
 	public void install_thread_line () {
-		if (expanded || !enable_thread_lines) return;
-
-		switch (status.formal.tuba_thread_role) {
-			case NONE:
-				thread_line_top.visible = false;
-				thread_line_bottom.visible = false;
-				break;
-			case START:
-				thread_line_top.visible = false;
-				thread_line_bottom.visible = true;
-				break;
-			case MIDDLE:
-				thread_line_top.visible = true;
-				thread_line_bottom.visible = true;
-				break;
-			case END:
-				thread_line_top.visible = true;
-				thread_line_bottom.visible = false;
-				break;
-		}
+		this.queue_draw ();
 	}
 }