more song style tweaks

xou816 · Mar 4, 2021 · b891440 · b891440
1 parent 0c7cb03
commit b891440
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 31 deletions.
diff --git a/src/app/components/playlist/song.css b/src/app/components/playlist/song.css
@@ -1,21 +1,24 @@
 .song .song__index {
-  font-size: 11px;
+  font-size: 12px;
+  margin: 4px 12px;
+  padding: 0;
 }
 
 .song label.song__title {
   font-size: 16px;
 }
 
-.song--playing label.song__title {
+.song--playing label.song__title, .song--playing label.song__index {
   font-weight: bold;
+  color: @theme_selected_bg_color;
 }
 
-.song--playing label.song__title, .song--playing label.song__artist, .song--playing label.song__index {
+.song--playing label.song__artist {
   color: @theme_selected_bg_color;
 }
 
 .song label.song__artist {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .song label.song__duration {

diff --git a/src/app/components/playlist/song.ui b/src/app/components/playlist/song.ui
@@ -16,7 +16,6 @@
       <object class="GtkLabel" id="song_index">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="margin-start">8</property>
         <property name="label" translatable="yes">1</property>
         <style>
           <class name="song__index"/>
@@ -29,16 +28,47 @@
       </packing>
     </child>
     <child>
-      <object class="GtkLabel" id="song_title">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="label" translatable="yes">Title</property>
-        <property name="ellipsize">middle</property>
-        <property name="max-width-chars">50</property>
-        <property name="xalign">0</property>
-        <style>
-          <class name="song__title"/>
-        </style>
+        <property name="orientation">vertical</property>
+        <property name="homogeneous">True</property>
+        <child>
+          <object class="GtkLabel" id="song_title">
+            <property name="visible">True</property>
+            <property name="can-focus">False</property>
+            <property name="label" translatable="yes">Title</property>
+            <property name="ellipsize">middle</property>
+            <property name="max-width-chars">50</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="song__title"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="song_artist">
+            <property name="visible">True</property>
+            <property name="can-focus">False</property>
+            <property name="label" translatable="yes">Artist</property>
+            <property name="ellipsize">middle</property>
+            <property name="max-width-chars">35</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="song__artist"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
       </object>
       <packing>
         <property name="expand">False</property>
@@ -71,24 +101,6 @@
         <property name="position">2</property>
       </packing>
     </child>
-    <child>
-      <object class="GtkLabel" id="song_artist">
-        <property name="visible">True</property>
-        <property name="can-focus">False</property>
-        <property name="label" translatable="yes">Artist</property>
-        <property name="ellipsize">middle</property>
-        <property name="max-width-chars">35</property>
-        <property name="xalign">0</property>
-        <style>
-          <class name="song__artist"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">3</property>
-      </packing>
-    </child>
     <child>
       <object class="GtkLabel" id="song_length">
         <property name="visible">True</property>