GNOME.org
 

[rhythmbox] restyle the playback controls

commit 5787b2bd883d74033056011a7368bb2385675f87
Author: Jonathan Matthew <jonathan d14n org>
Date:   Mon Jul 1 22:25:57 2013 +1000

    restyle the playback controls
    
    Use raised linked buttons with symbolic icons rather than the default
    flat buttons.  While we're here, use rtl icons for the buttons when
    appropriate (https://bugzilla.gnome.org/show_bug.cgi?id=702627) and
    position the volume control correctly in the rtl layout.

 data/ui/main-toolbar.ui |  203 +++++++++++++++++++++++++++++------------------
 shell/rb-shell.c        |   57 ++++++++++++-
 widgets/rb-entry-view.c |    2 +-
 widgets/rb-header.c     |    8 ++-
 4 files changed, 186 insertions(+), 84 deletions(-)
---
diff --git a/data/ui/main-toolbar.ui b/data/ui/main-toolbar.ui
index 5565884..aa1dd76 100644
--- a/data/ui/main-toolbar.ui
+++ b/data/ui/main-toolbar.ui
@@ -1,81 +1,103 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.0 -->
+  <object class="GtkImage" id="image1">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="pixel_size">24</property>
+    <property name="icon_name">media-playlist-shuffle-symbolic</property>
+  </object>
+  <object class="GtkImage" id="image2">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="pixel_size">24</property>
+    <property name="icon_name">media-playlist-repeat-symbolic</property>
+  </object>
+  <object class="GtkImage" id="image3">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="xpad">8</property>
+    <property name="ypad">9</property>
+    <property name="pixel_size">24</property>
+    <property name="icon_name">media-skip-forward-symbolic</property>
+  </object>
+  <object class="GtkImage" id="image4">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="xpad">12</property>
+    <property name="ypad">9</property>
+    <property name="pixel_size">24</property>
+    <property name="icon_name">media-playback-start-symbolic</property>
+  </object>
+  <object class="GtkImage" id="image5">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="xpad">8</property>
+    <property name="ypad">9</property>
+    <property name="pixel_size">24</property>
+    <property name="icon_name">media-skip-backward-symbolic</property>
+  </object>
   <object class="GtkToolbar" id="main-toolbar">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="toolbar_style">icons</property>
     <property name="icon_size">6</property>
     <child>
-      <object class="GtkToolButton" id="previous-button">
-        <property name="use_action_appearance">False</property>
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="tooltip_text" translatable="yes">Start playing the previous song</property>
-        <property name="use_action_appearance">False</property>
-        <property name="action_name">app.play-previous</property>
-        <property name="label" translatable="yes">Previous</property>
-        <property name="icon_name">media-skip-backward</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="homogeneous">True</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkToolButton" id="play-button">
-        <property name="use_action_appearance">False</property>
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="tooltip_text" translatable="yes">Pause playback</property>
-        <property name="use_action_appearance">False</property>
-        <property name="action_name">app.play</property>
-        <property name="label" translatable="yes">Play</property>
-        <property name="icon_name">media-playback-start</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="homogeneous">True</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkToolButton" id="next-button">
-        <property name="use_action_appearance">False</property>
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="tooltip_text" translatable="yes">Start playing the next song</property>
-        <property name="use_action_appearance">False</property>
-        <property name="action_name">app.play-next</property>
-        <property name="label" translatable="yes">Next</property>
-        <property name="icon_name">media-skip-forward</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="homogeneous">True</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSeparatorToolItem" id="separator1">
-        <property name="use_action_appearance">False</property>
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="use_action_appearance">False</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="homogeneous">True</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkToggleToolButton" id="repeat-button">
-        <property name="use_action_appearance">False</property>
+      <object class="GtkToolItem" id="playback">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="tooltip_text" translatable="yes">Play first song again after all songs are 
played</property>
-        <property name="use_action_appearance">False</property>
-        <property name="action_name">app.play-repeat</property>
-        <property name="label" translatable="yes">Repeat</property>
-        <property name="icon_name">media-playlist-repeat</property>
+        <property name="margin_right">6</property>
+        <child>
+          <object class="GtkBox" id="box3">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="margin_top">6</property>
+            <property name="margin_bottom">6</property>
+            <child>
+              <object class="GtkButton" id="previous-button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="action_name">app.play-previous</property>
+                <property name="image">image5</property>
+                <property name="always_show_image">True</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkButton" id="play-button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="action_name">app.play</property>
+                <property name="image">image4</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkButton" id="next-button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="action_name">app.play-next</property>
+                <property name="image">image3</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
+          </object>
+        </child>
       </object>
       <packing>
         <property name="expand">False</property>
@@ -83,15 +105,46 @@
       </packing>
     </child>
     <child>
-      <object class="GtkToggleToolButton" id="shuffle-button">
-        <property name="use_action_appearance">False</property>
+      <object class="GtkToolItem" id="playorder">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="tooltip_text" translatable="yes">Play songs in a random order</property>
-        <property name="use_action_appearance">False</property>
-        <property name="action_name">app.play-shuffle</property>
-        <property name="label" translatable="yes">Shuffle</property>
-        <property name="icon_name">media-playlist-shuffle</property>
+        <property name="margin_left">6</property>
+        <property name="margin_top">12</property>
+        <property name="margin_bottom">12</property>
+        <child>
+          <object class="GtkBox" id="box4">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <child>
+              <object class="GtkToggleButton" id="repeat-button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="action_name">app.play-repeat</property>
+                <property name="image">image2</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkToggleButton" id="shuffle-button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="action_name">app.play-shuffle</property>
+                <property name="image">image1</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+          </object>
+        </child>
       </object>
       <packing>
         <property name="expand">False</property>
@@ -100,10 +153,8 @@
     </child>
     <child>
       <object class="GtkSeparatorToolItem" id="separator2">
-        <property name="use_action_appearance">False</property>
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="use_action_appearance">False</property>
       </object>
       <packing>
         <property name="expand">False</property>
diff --git a/shell/rb-shell.c b/shell/rb-shell.c
index 0aed646..fbc54b8 100644
--- a/shell/rb-shell.c
+++ b/shell/rb-shell.c
@@ -67,7 +67,6 @@
 #else
 #error "no database specified. configure broken?"
 #endif
-#include "rb-stock-icons.h"
 #include "rb-display-page-tree.h"
 #include "rb-display-page-group.h"
 #include "rb-file-helpers.h"
@@ -694,6 +693,16 @@ construct_sources (RBShell *shell)
 }
 
 static void
+set_button_classes (GtkBuilder *builder, const char *name)
+{
+       GtkWidget *widget;
+
+       widget = GTK_WIDGET (gtk_builder_get_object (builder, name));
+       gtk_style_context_add_class (gtk_widget_get_style_context (widget), GTK_STYLE_CLASS_RAISED);
+       gtk_style_context_add_class (gtk_widget_get_style_context (widget), GTK_STYLE_CLASS_LINKED);
+}
+
+static void
 construct_load_ui (RBShell *shell)
 {
        GApplication *app = g_application_get_default ();
@@ -704,6 +713,15 @@ construct_load_ui (RBShell *shell)
        GtkWidget *menu_button;
        GtkWidget *image;
        GMenuModel *model;
+       gboolean rtl;
+       const char *raise_buttons[] = {
+               "previous-button",
+               "play-button",
+               "next-button",
+               "shuffle-button",
+               "repeat-button"
+       };
+       int i;
 
        rb_debug ("shell: loading ui");
        rb_profile_start ("loading ui");
@@ -713,6 +731,26 @@ construct_load_ui (RBShell *shell)
 
        shell->priv->play_button = GTK_WIDGET (gtk_builder_get_object (builder, "play-button"));
 
+       for (i = 0; i < G_N_ELEMENTS (raise_buttons); i++) {
+               set_button_classes (builder, raise_buttons[i]);
+       }
+
+       rtl = (gtk_widget_get_direction (shell->priv->play_button) == GTK_TEXT_DIR_RTL);
+       image = gtk_button_get_image (GTK_BUTTON (gtk_builder_get_object (builder, "next-button")));
+       gtk_image_set_from_icon_name (GTK_IMAGE (image),
+                                     rtl ? "media-skip-forward-rtl-symbolic" : "media-skip-forward-symbolic",
+                                     GTK_ICON_SIZE_LARGE_TOOLBAR);
+
+       image = gtk_button_get_image (GTK_BUTTON (gtk_builder_get_object (builder, "previous-button")));
+       gtk_image_set_from_icon_name (GTK_IMAGE (image),
+                                     rtl ? "media-skip-backward-rtl-symbolic" : 
"media-skip-backward-symbolic",
+                                     GTK_ICON_SIZE_LARGE_TOOLBAR);
+
+       image = gtk_button_get_image (GTK_BUTTON (gtk_builder_get_object (builder, "play-button")));
+       gtk_image_set_from_icon_name (GTK_IMAGE (image),
+                                     rtl ? "media-playback-start-rtl-symbolic" : 
"media-playback-start-symbolic",
+                                     GTK_ICON_SIZE_LARGE_TOOLBAR);
+
        /* this seems a bit unnecessary */
        gtk_actionable_set_action_target_value (GTK_ACTIONABLE (gtk_builder_get_object (builder, 
"shuffle-button")),
                                                g_variant_new_boolean (TRUE));
@@ -739,6 +777,8 @@ construct_load_ui (RBShell *shell)
        menu_button = gtk_menu_button_new ();
        model = rb_application_get_shared_menu (RB_APPLICATION (app), "app-menu");
        gtk_menu_button_set_menu_model (GTK_MENU_BUTTON (menu_button), model);
+       gtk_style_context_add_class (gtk_widget_get_style_context (menu_button), GTK_STYLE_CLASS_RAISED);
+       g_object_set (menu_button, "margin-top", 12, "margin-bottom", 12, NULL);
 
        g_object_get (gtk_settings_get_default (),
                      "gtk-shell-shows-app-menu", &shell_shows_app_menu,
@@ -2237,20 +2277,27 @@ rb_shell_playing_changed_cb (RBShellPlayer *player, gboolean playing, RBShell *s
 {
        const char *tooltip;
        const char *icon_name;
+       GtkWidget *image;
 
+       image = gtk_button_get_image (GTK_BUTTON (shell->priv->play_button));
        if (playing) {
                if (rb_source_can_pause (rb_shell_player_get_active_source (shell->priv->player_shell))) {
-                       icon_name = "media-playback-pause";
+                       icon_name = "media-playback-pause-symbolic";
                        tooltip = _("Pause playback");
                } else {
-                       icon_name = "media-playback-stop";
+                       icon_name = "media-playback-stop-symbolic";
                        tooltip = _("Stop playback");
                }
        } else {
-               icon_name = "media-playback-start";
+               if (gtk_widget_get_direction (image) == GTK_TEXT_DIR_RTL) {
+                       icon_name = "media-playback-start-rtl-symbolic";
+               } else {
+                       icon_name = "media-playback-start-symbolic";
+               }
                tooltip = _("Start playback");
        }
-       gtk_tool_button_set_icon_name (GTK_TOOL_BUTTON (shell->priv->play_button), icon_name);
+       gtk_image_set_from_icon_name (GTK_IMAGE (image), icon_name, GTK_ICON_SIZE_LARGE_TOOLBAR);
+
        gtk_widget_set_tooltip_text (GTK_WIDGET (shell->priv->play_button), tooltip);
 }
 
diff --git a/widgets/rb-entry-view.c b/widgets/rb-entry-view.c
index c88e71b..cfa5b9c 100644
--- a/widgets/rb-entry-view.c
+++ b/widgets/rb-entry-view.c
@@ -1853,7 +1853,7 @@ rb_entry_view_constructed (GObject *object)
                                                         view,
                                                         NULL);
 
-               image_widget = gtk_image_new_from_icon_name ("audio-volume-high", GTK_ICON_SIZE_MENU);
+               image_widget = gtk_image_new_from_icon_name ("audio-volume-high-symbolic", 
GTK_ICON_SIZE_MENU);
                gtk_tree_view_column_set_widget (column, image_widget);
                gtk_widget_show (image_widget);
 
diff --git a/widgets/rb-header.c b/widgets/rb-header.c
index 3cb43cd..85f91b1 100644
--- a/widgets/rb-header.c
+++ b/widgets/rb-header.c
@@ -559,7 +559,6 @@ rb_header_size_allocate (GtkWidget *widget, GtkAllocation *allocation)
                image_width = allocation->height;
                if (rtl) {
                        child_alloc.x = allocation->x + allocation->width - image_width;
-                       allocation->x -= image_width + spacing;
                } else {
                        child_alloc.x = allocation->x;
                        allocation->x += image_width + spacing;
@@ -575,7 +574,12 @@ rb_header_size_allocate (GtkWidget *widget, GtkAllocation *allocation)
 
        /* allocate space for the volume button at the end */
        gtk_widget_get_preferred_width (RB_HEADER (widget)->priv->volume_button, &volume_width, NULL);
-       child_alloc.x = (allocation->x + allocation->width) - volume_width;
+       if (rtl) {
+               child_alloc.x = allocation->x;
+               allocation->x += volume_width + spacing;
+       } else {
+               child_alloc.x = (allocation->x + allocation->width) - volume_width;
+       }
        child_alloc.y = allocation->y;
        child_alloc.width = volume_width;
        child_alloc.height = allocation->height;
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]