[gnome-music/playlists] first try to implement cirrcular button

[Eslam Mostafa <cseslam src gnome org>]

commit 9d796611e20632edc2499426d518ae732a565704
Author: Eslam Mostafa <me eslammostafa com>
Date:   Mon Jun 17 19:13:22 2013 +0200

    first try to implement cirrcular button

 data/PlaylistSongs.ui |  110 +++++++++++++++++++++++++++++++++++++++++++++----
 data/application.css  |    8 ++++
 2 files changed, 110 insertions(+), 8 deletions(-)
---
diff --git a/data/PlaylistSongs.ui b/data/PlaylistSongs.ui
index fea57ac..6c3e607 100644
--- a/data/PlaylistSongs.ui
+++ b/data/PlaylistSongs.ui
@@ -24,15 +24,73 @@
                 <property name="margin_top">18</property>
                 <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkLabel" id="playlist">
+                  <object class="GtkBox" id="box2">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="xalign">0</property>
-                    <property name="label">label</property>
-                    <property name="ellipsize">middle</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
+                    <child>
+                      <object class="GtkLabel" id="playlist">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="xalign">0</property>
+                        <property name="label">label</property>
+                        <property name="ellipsize">middle</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                        </attributes>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="spacer">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                      </object>
+                      <packing>
+                        <property name="expand">True</property>
+                        <property name="fill">True</property>
+                        <property name="position">1</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="playlistEditButton">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">True</property>
+                        <property name="focus_on_click">False</property>
+                        <style>
+                          <class name="circle-button"/>
+                        </style>
+                        <child>
+                          <object class="GtkImage" id="image1">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">applications-system-symbolic</property>
+                            <property name="use_fallback">True</property>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="label1">
+                        <property name="width_request">24</property>
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">3</property>
+                      </packing>
+                    </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
@@ -50,6 +108,9 @@
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
                         <property name="label" translatable="yes">00</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
                       </object>
                       <packing>
                         <property name="expand">False</property>
@@ -61,7 +122,10 @@
                       <object class="GtkLabel" id="songs">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="label" translatable="yes">Songs</property>
+                        <property name="label" translatable="yes">Songs,</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
                       </object>
                       <packing>
                         <property name="expand">False</property>
@@ -69,6 +133,36 @@
                         <property name="position">1</property>
                       </packing>
                     </child>
+                    <child>
+                      <object class="GtkLabel" id="songsSize">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="label" translatable="yes">size</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="songsDuration">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="label" translatable="yes">duration</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">3</property>
+                      </packing>
+                    </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
diff --git a/data/application.css b/data/application.css
index 352eb1a..c827b4f 100644
--- a/data/application.css
+++ b/data/application.css
@@ -135,3 +135,11 @@
     color: mix (@theme_fg_color, @theme_bg_color, 0.50);    
 }
 
+.circle-button {
+    border-radius: 15px;
+    border-width: 2px;
+}
+
+.circle-button image {
+    border-radius: 15px;
+}