fix(Base): move styles from Clamp classes to Breakpoints (GeopJr#1295)

yakushabb · Dec 24, 2024 · 3034578 · 3034578
1 parent ac32485
commit 3034578
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 27 deletions.
diff --git a/data/style.css b/data/style.css
@@ -533,16 +533,16 @@ video > overlay > revealer > controls, .audio-controls {
 	margin-bottom: 0px;
 }
 
-/* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card,
-.ttl-view .small.fake-content .toggle-group-17 {
+/* .ttl-view:not(.large-view) .content .card { */
+.ttl-view:not(.large-view) .fake-content .card,
+.ttl-view:not(.large-view) .fake-content .toggle-group-17 {
 	border-left: none;
 	border-right: none;
 	border-radius: 0px;
 }
 
-/* .ttl-view .small.content { */
-.ttl-view .small.fake-content {
+/* .ttl-view:not(.large-view) .content { */
+.ttl-view:not(.large-view) .fake-content {
 	padding: 0px;
 }
 
@@ -559,55 +559,48 @@ video > overlay > revealer > controls, .audio-controls {
 	background: none;
 }
 
-/* .ttl-view .large.content,
-.ttl-view .small.content { */
-.ttl-view .large.fake-content,
-.ttl-view .small.fake-content {
+/* .ttl-view .content { */
+.ttl-view .fake-content {
 	transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.ttl-view .large {
-	padding-left: 18px;
-	padding-right: 18px;
-}
-
-.ttl-view .large:first-child {
+.ttl-view.large-view .fake-content:first-child {
 	padding-top: 32px;
 }
 
-.ttl-view .large:last-child {
+.ttl-view.large-view .fake-content:last-child {
 	padding-bottom: 32px;
 }
 
-/* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card {
+/* .ttl-view:not(.large-view) .content .card { */
+.ttl-view:not(.large-view) .fake-content .card {
 	border-bottom: 1px var(--border-color) solid;
 }
 
-/* .ttl-view .small.content .card:first-child { */
-.ttl-view .small.fake-content .card:first-child {
+/* .ttl-view:not(.large-view) .content .card:first-child { */
+.ttl-view:not(.large-view) .fake-content .card:first-child {
 	border-top: 1px var(--border-color) solid;
 }
 
-/* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card {
+/* .ttl-view:not(.large-view) .content .card { */
+.ttl-view:not(.large-view) .fake-content .card {
 	box-shadow: none;
 }
 
-.ttl-view .small .preview_card.explore .preview_card_h {
+.ttl-view:not(.large-view) .preview_card.explore .preview_card_h {
 	border-radius: 0px;
 }
 
-.ttl-view .small .preview_card.explore {
+.ttl-view:not(.large-view) .preview_card.explore {
 	border-radius: 0px;
 }
 
 .ttl-view .preview_card.explore {
 	border-radius: 12px;
 }
 
-/* .ttl-view .small.content .card.card-spacing { */
-.ttl-view .small.fake-content .card.card-spacing {
+/* .ttl-view:not(.large-view) .content .card.card-spacing { */
+.ttl-view:not(.large-view) .fake-content .card.card-spacing {
 	margin: 0px;
 }
 
@@ -619,7 +612,7 @@ video > overlay > revealer > controls, .audio-controls {
 	padding: 3px 14px;
 }
 
-.ttl-view .large.fake-content {
+.ttl-view.large-view .fake-content {
 	padding-left: 0;
 	padding-right: 0;
 	margin-left: 18px;

diff --git a/data/ui/views/base.ui b/data/ui/views/base.ui
@@ -167,6 +167,7 @@
                             <property name="tightening_threshold">670</property>
                             <style>
                               <class name="ttl-view" />
+                              <class name="large-view" />
                             </style>
                           </object>
                         </property>

diff --git a/src/Views/Base.vala b/src/Views/Base.vala
@@ -16,6 +16,19 @@ public class Tuba.Views.Base : Adw.BreakpointBin {
 	public Gtk.Widget? last_widget { get; private set; default=null; }
 	public string empty_timeline_icon { get; set; default="tuba-background-app-ghost-symbolic"; }
 
+	bool _small = false;
+	public bool small {
+		get { return _small; }
+		set {
+			_small = value;
+			if (!value && !content_box.has_css_class ("large-view")) {
+				content_box.add_css_class ("large-view");
+			} else if (value && content_box.has_css_class ("large-view")) {
+				content_box.remove_css_class ("large-view");
+			}
+		}
+	}
+
 	private bool _show_back_button = true;
 	public bool show_back_button {
 		get {
@@ -116,6 +129,13 @@ public class Tuba.Views.Base : Adw.BreakpointBin {
 	}
 
 	construct {
+		var breakpoint = new Adw.Breakpoint (new Adw.BreakpointCondition.length (
+			Adw.BreakpointConditionLengthType.MAX_WIDTH,
+			670, Adw.LengthUnit.PX
+		));
+		breakpoint.add_setter (this, "small", true);
+		add_breakpoint (breakpoint);
+
 		build_actions ();
 		build_header ();
 

diff --git a/src/Views/TabbedBase.vala b/src/Views/TabbedBase.vala
@@ -87,6 +87,9 @@ public class Tuba.Views.TabbedBase : Views.Base {
 			Adw.BreakpointConditionLengthType.MAX_WIDTH,
 			550, Adw.LengthUnit.SP
 		);
+
+		if (this.current_breakpoint != null) remove_breakpoint (this.current_breakpoint);
+		this.small = true;
 		var breakpoint = new Adw.Breakpoint (condition);
 		breakpoint.add_setter (this, "title-stack-page-visible", true);
 		breakpoint.add_setter (switcher_bar, "reveal", true);