From 90461fb325d368d89fb498dd3dd8c8c5ae69b91b Mon Sep 17 00:00:00 2001
From: Nokse22 <lorenzo.ubaldi22@gmail.com>
Date: Tue, 2 Apr 2024 21:59:38 +0200
Subject: [PATCH] improved ui

---
 src/ui/pages_ui/page_template.ui        |  11 +-
 src/ui/pages_ui/tracks_list_template.ui | 320 +++++++++++++++---------
 src/ui/widgets/card_widget.ui           |   2 +-
 src/window.ui                           |   9 +-
 4 files changed, 210 insertions(+), 132 deletions(-)

diff --git a/src/ui/pages_ui/page_template.ui b/src/ui/pages_ui/page_template.ui
index 2920fff..a0f915d 100644
--- a/src/ui/pages_ui/page_template.ui
+++ b/src/ui/pages_ui/page_template.ui
@@ -4,14 +4,13 @@
   <!-- interface-name login.ui -->
   <requires lib="gtk" version="4.10"/>
   <requires lib="libadwaita" version="1.3"/>
-  <object class="GtkBox" id="_main">
-    <property name="orientation">vertical</property>
-    <child>
+  <object class="AdwToolbarView" id="_main">
+    <!-- <property name="orientation">vertical</property> -->
+    <child type="top">
       <object class="AdwHeaderBar">
-        <property name="css-classes">flat</property>
       </object>
     </child>
-    <child>
+    <property name="content">
       <object class="GtkBox" id="_content">
         <property name="vexpand">True</property>
         <child>
@@ -26,6 +25,6 @@
           </object>
         </child>
       </object>
-    </child>
+    </property>
   </object>
 </interface>
diff --git a/src/ui/pages_ui/tracks_list_template.ui b/src/ui/pages_ui/tracks_list_template.ui
index b31dd7a..707c479 100644
--- a/src/ui/pages_ui/tracks_list_template.ui
+++ b/src/ui/pages_ui/tracks_list_template.ui
@@ -4,134 +4,214 @@
   <!-- interface-name tracks_list_template.ui -->
   <requires lib="gtk" version="4.6"/>
   <requires lib="libadwaita" version="1.0"/>
-      <object class="GtkBox" id="_main">
-        <property name="orientation">vertical</property>
-        <property name="vexpand">True</property>
-        <child>
-          <object class="AdwClamp">
-            <property name="maximum-size">1000</property>
-            <property name="tightening-threshold">700</property>
-            <property name="valign">start</property>
-            <property name="vexpand-set">true</property>
-            <child>
-              <object class="AdwBreakpointBin">
-                <property name="width-request">10</property>
-                <property name="height-request">10</property>
-                <child>
-                  <object class="AdwBreakpoint">
-                    <condition>max-width: 400px</condition>
-                    <setter object="_image" property="pixel-size">60</setter>
-                  </object>
-                </child>
-                <property name="child">
-              <object class="GtkBox">
-                <property name="valign">start</property>
-                <child>
-                  <object class="GtkImage" id="_image">
-                    <property name="icon-name">emblem-music-symbolic</property>
-                    <property name="css-classes">small-image</property>
-                    <property name="overflow">hidden</property>
-                    <property name="margin-bottom">12</property>
-                    <property name="margin-end">12</property>
-                    <property name="margin-start">12</property>
-                    <property name="margin-top">12</property>
-                    <property name="pixel-size">100</property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkBox">
-                    <property name="hexpand">True</property>
-                    <property name="margin-top">12</property>
-                    <property name="orientation">vertical</property>
-                    <child>
-                      <object class="GtkLabel" id="_title_label">
-                        <property name="css-classes">title-2</property>
-                        <property name="ellipsize">end</property>
-                        <property name="vexpand">True</property>
-                        <property name="xalign">0.0</property>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="_first_subtitle_label">
-                        <property name="css-classes">dim-label</property>
-                        <property name="ellipsize">end</property>
-                        <property name="vexpand">True</property>
-                        <property name="xalign">0.0</property>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="_second_subtitle_label">
-                        <property name="css-classes">dim-label</property>
-                        <property name="ellipsize">end</property>
-                        <property name="vexpand">True</property>
-                        <property name="xalign">0.0</property>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="_artist_button">
-                        <property name="visible">false</property>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkBox">
-                    <property name="halign">end</property>
-                    <property name="margin-end">12</property>
-                    <property name="spacing">6</property>
-                    <property name="valign">center</property>
-                    <child>
-                      <object class="GtkButton" id="_add_to_my_collection_button">
-                        <property name="icon-name">heart-outline-thick-symbolic</property>
-                        <property name="css-classes">flat</property>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="_shuffle_button">
-                        <property name="icon-name">media-playlist-shuffle-symbolic</property>
-                        <property name="css-classes">flat</property>
+    <object class="AdwBreakpointBin" id="_main">
+      <property name="width-request">10</property>
+      <property name="height-request">300</property>
+      <child>
+        <object class="AdwBreakpoint">
+          <condition>max-width: 400px</condition>
+          <!-- <setter object="_image" property="pixel-size">60</setter> -->
+          <setter object="_vertical_layout_box" property="visible">true</setter>
+          <setter object="_horizontal_layout_box" property="visible">false</setter>
+        </object>
+      </child>
+      <property name="child">
+        <object class="GtkScrolledWindow">
+          <property name="vexpand">True</property>
+          <property name="hexpand">True</property>
+          <child>
+            <object class="GtkBox">
+              <property name="orientation">vertical</property>
+              <child>
+                <object class="AdwClamp">
+                  <property name="maximum-size">1000</property>
+                  <property name="tightening-threshold">700</property>
+                  <property name="valign">start</property>
+                  <property name="vexpand-set">true</property>
+                  <child>
+                    <object class="GtkBox">
+                      <property name="orientation">vertical</property>
+
+                      <child>
+                        <object class="GtkBox" id="_horizontal_layout_box">
+                        <property name="valign">start</property>
+                        <child>
+                          <object class="GtkImage" id="_image">
+                            <property name="icon-name">emblem-music-symbolic</property>
+                            <property name="css-classes">small-image</property>
+                            <property name="overflow">hidden</property>
+                            <property name="margin-bottom">12</property>
+                            <property name="margin-end">12</property>
+                            <property name="margin-start">12</property>
+                            <property name="margin-top">12</property>
+                            <property name="pixel-size">100</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="hexpand">True</property>
+                            <property name="margin-top">12</property>
+                            <property name="orientation">vertical</property>
+                            <child>
+                              <object class="GtkLabel" id="_title_label">
+                                <property name="css-classes">title-2</property>
+                                <property name="ellipsize">end</property>
+                                <property name="vexpand">True</property>
+                                <property name="xalign">0.0</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkLabel" id="_first_subtitle_label">
+                                <property name="css-classes">dim-label</property>
+                                <property name="ellipsize">end</property>
+                                <property name="vexpand">True</property>
+                                <property name="xalign">0.0</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkLabel" id="_second_subtitle_label">
+                                <property name="css-classes">dim-label</property>
+                                <property name="ellipsize">end</property>
+                                <property name="vexpand">True</property>
+                                <property name="xalign">0.0</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="_artist_button">
+                                <property name="visible">false</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox">
+                            <property name="halign">end</property>
+                            <property name="margin-end">12</property>
+                            <property name="spacing">6</property>
+                            <property name="valign">center</property>
+                            <child>
+                              <object class="GtkButton" id="_add_to_my_collection_button">
+                                <property name="icon-name">heart-outline-thick-symbolic</property>
+                                <property name="css-classes">flat</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="_shuffle_button">
+                                <property name="icon-name">media-playlist-shuffle-symbolic</property>
+                                <property name="css-classes">flat</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkButton" id="_play_button">
+                                <property name="css-classes">suggested-action</property>
+                                <property name="icon-name">media-playback-start-symbolic</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
                       </object>
                     </child>
-                    <child>
-                      <object class="GtkButton" id="_play_button">
-                        <property name="css-classes">suggested-action</property>
-                        <property name="icon-name">media-playback-start-symbolic</property>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-              </object>
-                </property>
+
+                      <child>
+                        <object class="GtkBox" id="_vertical_layout_box">
+                          <property name="height-request">200</property>
+                          <property name="orientation">vertical</property>
+                          <property name="spacing">12</property>
+                          <property name="visible">false</property>
+                          <property name="margin-top">12</property>
+                          <property name="margin-bottom">12</property>
+                          <property name="margin-start">12</property>
+                          <property name="margin-end">12</property>
+                          <child>
+                            <object class="GtkImage">
+                              <property name="css-classes">small-image</property>
+                              <property name="halign">center</property>
+                              <property name="icon-name">emblem-music-symbolic</property>
+                              <property name="pixel-size">160</property>
+                              <property name="overflow">hidden</property>
+                              <property name="file" bind-source="_image" bind-property="file"/>
+                            </object>
+                          </child>
+                          <child>
+                            <object class="GtkLabel" id="_title_label2">
+                              <property name="css-classes">title-1</property>
+                              <property name="valign">start</property>
+                              <property name="label" bind-source="_title_label" bind-property="label"/>
+                            </object>
+                          </child>
+                          <child>
+                            <object class="GtkLabel" id="_first_subtitle_label2">
+                              <property name="css-classes">dim-label</property>
+                              <property name="valign">start</property>
+                              <property name="wrap">true</property>
+                              <property name="justify">center</property>
+                              <property name="label" bind-source="_first_subtitle_label" bind-property="label"/>
+                            </object>
+                          </child>
+                          <child>
+                            <object class="GtkBox">
+                              <property name="halign">center</property>
+                              <property name="spacing">12</property>
+                              <property name="valign">center</property>
+                              <child>
+                                <object class="GtkButton">
+                                  <property name="css-classes">pill
+suggested-action</property>
+                                  <property name="icon-name">media-playback-start-symbolic</property>
+                                </object>
+                              </child>
+                              <child>
+                                <object class="GtkButton">
+                                  <property name="css-classes">pill</property>
+                                  <property name="icon-name">media-playlist-shuffle-symbolic</property>
+                                </object>
+                              </child>
+                              <child>
+                                <object class="GtkButton">
+                                  <property name="css-classes">circular
+flat</property>
+                                  <property name="icon-name">list-add-symbolic</property>
+                                  <property name="valign">center</property>
+                                </object>
+                              </child>
+                            </object>
+                          </child>
+                        </object>
+                      </child>
+
+
+                </object>
+              </child>
+            </object>
+            </child>
+            <child>
+              <object class="GtkSeparator">
+                <property name="valign">start</property>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkSeparator">
-            <property name="valign">start</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkScrolledWindow">
-            <property name="vexpand">True</property>
             <child>
-              <object class="AdwClamp">
-                <property name="vexpand">True</property>
-                <property name="maximum-size">1000</property>
-                <property name="tightening-threshold">700</property>
-                <child>
-                  <object class="GtkListBox" id="_list_box">
-                    <property name="valign">start</property>
-                    <property name="margin-top">12</property>
-                    <property name="margin-start">12</property>
-                    <property name="margin-end">12</property>
-                    <property name="margin-bottom">12</property>
-                    <property name="css-classes">boxed-list</property>
+              <!-- <object class="GtkScrolledWindow"> -->
+              <!--   <property name="vexpand">True</property> -->
+              <!--   <child> -->
+                  <object class="AdwClamp">
+                    <property name="vexpand">True</property>
+                    <property name="maximum-size">1000</property>
+                    <property name="tightening-threshold">700</property>
+                    <child>
+                      <object class="GtkListBox" id="_list_box">
+                        <property name="valign">start</property>
+                        <property name="margin-top">12</property>
+                        <property name="margin-start">12</property>
+                        <property name="margin-end">12</property>
+                        <property name="margin-bottom">12</property>
+                        <property name="css-classes">boxed-list</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
             </child>
           </object>
-        </child>
-  </object>
+        </property>
+      </object>
 </interface>
diff --git a/src/ui/widgets/card_widget.ui b/src/ui/widgets/card_widget.ui
index c53d68d..380a142 100644
--- a/src/ui/widgets/card_widget.ui
+++ b/src/ui/widgets/card_widget.ui
@@ -24,7 +24,7 @@
               <object class="GtkImage" id="image">
                 <property name="halign">center</property>
                 <property name="icon-name">emblem-music-symbolic</property>
-                <property name="pixel-size">180</property>
+                <property name="pixel-size">155</property>
                 <property name="valign">center</property>
                 <property name="css-classes">card-image</property>
               </object>
diff --git a/src/window.ui b/src/window.ui
index 3a87633..9913b83 100644
--- a/src/window.ui
+++ b/src/window.ui
@@ -39,7 +39,7 @@
     </child>
     <property name="content">
       <object class="GtkStack" id="main_view_stack">
-          <property name="visible-child-name">normal_view</property>
+          <!-- <property name="visible-child-name">normal_view</property> -->
           <property name="transition-type">slide-up-down</property>
           <child>
             <object class="GtkStackPage">
@@ -643,7 +643,7 @@ flat</property>
                 <property name="spacing">12</property>
                 <child>
                   <object class="AdwViewStack" id="mobile_stack">
-                    <property name="visible-child-name">song_page</property>
+                    <!-- <property name="visible-child-name">song_page</property> -->
                     <child>
                       <object class="AdwViewStackPage">
                         <property name="child">
@@ -658,6 +658,8 @@ flat</property>
                               <object class="AdwClamp">
                                 <property name="margin-end">12</property>
                                 <property name="margin-start">12</property>
+                                <property name="margin-top">12</property>
+                                <property name="margin-bottom">12</property>
                                 <property name="maximum-size">600</property>
                                 <property name="tightening-threshold">400</property>
                                 <property name="unit">px</property>
@@ -807,13 +809,10 @@ circular</property>
                                   </object>
                                 </child>
                               </object>
-
                                 </child>
                               </object>
-
                             </child>
                           </object>
-
                         </property>
                         <property name="icon-name">emblem-music-symbolic</property>
                         <property name="name">song_page</property>