[sushi/wip/cosimoc/no-clutter: 14/50] media-bin: adapt to Sushi design



commit 770af689a0b24d48c86aa3f6a91fd6196043f3b4
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Sun Apr 2 12:59:08 2017 -0700

    media-bin: adapt to Sushi design
    
    Remove a lot of the custom theming, the big playback button and the
    value drawn over the scale. Instead, add labels before/after it, as it
    was in the former Sushi toolbar.

 src/libsushi/SushiMediaBin.ui    | 183 ++++++++++++++++++++-------------------
 src/libsushi/sushi-media-bin.c   |  22 ++---
 src/libsushi/sushi-media-bin.css | 142 ++----------------------------
 3 files changed, 113 insertions(+), 234 deletions(-)
---
diff --git a/src/libsushi/SushiMediaBin.ui b/src/libsushi/SushiMediaBin.ui
index 2933878..f8eaa67 100644
--- a/src/libsushi/SushiMediaBin.ui
+++ b/src/libsushi/SushiMediaBin.ui
@@ -10,7 +10,7 @@
   <object class="GtkImage" id="fullscreen_image">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="pixel_size">18</property>
+    <property name="icon_size">1</property>
     <property name="icon_name">view-fullscreen-symbolic</property>
   </object>
   <object class="GtkAdjustment" id="playback_adjustment">
@@ -22,7 +22,7 @@
   <object class="GtkImage" id="playback_image">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="pixel_size">18</property>
+    <property name="icon_size">1</property>
     <property name="icon_name">media-playback-start-symbolic</property>
   </object>
   <object class="GtkAdjustment" id="volume_adjustment">
@@ -113,7 +113,7 @@
                 <property name="can_focus">False</property>
                 <property name="events">GDK_POINTER_MOTION_MASK | GDK_LEAVE_NOTIFY_MASK | 
GDK_STRUCTURE_MASK</property>
                 <property name="valign">end</property>
-                <property name="transition_type">slide-up</property>
+                <property name="transition_type">crossfade</property>
                 <signal name="leave-notify-event" handler="on_revealer_leave_notify_event" swapped="no"/>
                 <signal name="motion-notify-event" handler="on_revealer_motion_notify_event" swapped="no"/>
                 <child>
@@ -121,113 +121,125 @@
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="valign">end</property>
-                    <property name="orientation">vertical</property>
+                    <property name="orientation">horizontal</property>
+                    <property name="margin-start">32</property>
+                    <property name="margin-end">32</property>
+                    <property name="margin-bottom">32</property>
+                    <child>
+                      <object class="GtkButton" id="playback_button">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">False</property>
+                        <property name="image">playback_image</property>
+                        <property name="relief">none</property>
+                        <signal name="clicked" handler="sushi_media_bin_toggle_playback" swapped="yes"/>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="progress_position_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="valign">center</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">1</property>
+                      </packing>
+                    </child>
                     <child>
                       <object class="GtkScale" id="progress_scale">
                         <property name="visible">True</property>
                         <property name="can_focus">True</property>
                         <property name="adjustment">playback_adjustment</property>
                         <property name="round_digits">2</property>
+                        <property name="draw_value">False</property>
                         <signal name="format-value" handler="on_progress_scale_format_value" swapped="no"/>
                       </object>
                       <packing>
-                        <property name="expand">False</property>
+                        <property name="expand">True</property>
                         <property name="fill">True</property>
-                        <property name="position">0</property>
+                        <property name="position">2</property>
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkLabel" id="progress_duration_label">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="spacing">2</property>
-                        <child>
-                          <object class="GtkButton" id="playback_button">
-                            <property name="visible">True</property>
-                            <property name="can_focus">True</property>
-                            <property name="receives_default">False</property>
-                            <property name="image">playback_image</property>
-                            <property name="relief">none</property>
-                            <signal name="clicked" handler="sushi_media_bin_toggle_playback" swapped="yes"/>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">0</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkButton" id="fullscreen_button">
-                            <property name="visible">True</property>
+                        <property name="valign">center</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">3</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="fullscreen_button">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">False</property>
+                        <property name="image">fullscreen_image</property>
+                        <property name="relief">none</property>
+                        <signal name="clicked" handler="sushi_media_bin_toggle_fullscreen" swapped="yes"/>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="pack_type">end</property>
+                        <property name="position">4</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkVolumeButton" id="volume_button">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="focus_on_click">False</property>
+                        <property name="receives_default">False</property>
+                        <property name="relief">none</property>
+                        <property name="orientation">vertical</property>
+                        <property name="value">1</property>
+                        <property name="size">menu</property>
+                        <property name="adjustment">volume_adjustment</property>
+                        <child internal-child="plus_button">
+                          <object class="GtkButton">
                             <property name="can_focus">True</property>
-                            <property name="receives_default">False</property>
-                            <property name="image">fullscreen_image</property>
+                            <property name="receives_default">True</property>
+                            <property name="halign">center</property>
+                            <property name="valign">center</property>
                             <property name="relief">none</property>
-                            <signal name="clicked" handler="sushi_media_bin_toggle_fullscreen" 
swapped="yes"/>
                           </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="pack_type">end</property>
-                            <property name="position">1</property>
-                          </packing>
                         </child>
-                        <child>
-                          <object class="GtkVolumeButton" id="volume_button">
-                            <property name="visible">True</property>
+                        <child internal-child="minus_button">
+                          <object class="GtkButton">
                             <property name="can_focus">True</property>
-                            <property name="focus_on_click">False</property>
-                            <property name="receives_default">False</property>
+                            <property name="receives_default">True</property>
+                            <property name="halign">center</property>
+                            <property name="valign">center</property>
                             <property name="relief">none</property>
-                            <property name="orientation">vertical</property>
-                            <property name="value">1</property>
-                            <property name="size">large-toolbar</property>
-                            <property name="adjustment">volume_adjustment</property>
-                            <property name="icons">audio-volume-muted-symbolic
-audio-volume-high-symbolic
-audio-volume-low-symbolic
-audio-volume-medium-symbolic</property>
-                            <property name="use_symbolic">False</property>
-                            <child internal-child="plus_button">
-                              <object class="GtkButton">
-                                <property name="can_focus">True</property>
-                                <property name="receives_default">True</property>
-                                <property name="halign">center</property>
-                                <property name="valign">center</property>
-                                <property name="relief">none</property>
-                              </object>
-                            </child>
-                            <child internal-child="minus_button">
-                              <object class="GtkButton">
-                                <property name="can_focus">True</property>
-                                <property name="receives_default">True</property>
-                                <property name="halign">center</property>
-                                <property name="valign">center</property>
-                                <property name="relief">none</property>
-                              </object>
-                            </child>
                           </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="pack_type">end</property>
-                            <property name="position">2</property>
-                          </packing>
                         </child>
-                        <child>
-                          <placeholder/>
-                        </child>
-                        <style>
-                          <class name="overlay-bar"/>
-                          <class name="bottom"/>
-                        </style>
                       </object>
                       <packing>
                         <property name="expand">False</property>
                         <property name="fill">True</property>
-                        <property name="position">1</property>
+                        <property name="pack_type">end</property>
+                        <property name="position">5</property>
                       </packing>
                     </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <style>
+                      <class name="osd"/>
+                      <class name="overlay-bar"/>
+                      <class name="bottom"/>
+                    </style>
                   </object>
                 </child>
               </object>
@@ -237,7 +249,7 @@ audio-volume-medium-symbolic</property>
             </child>
             <child type="overlay">
               <object class="GtkBox" id="play_box">
-                <property name="visible">True</property>
+                <property name="visible">False</property>
                 <property name="can_focus">False</property>
                 <property name="halign">center</property>
                 <property name="valign">center</property>
@@ -334,13 +346,8 @@ audio-volume-medium-symbolic</property>
                     <property name="relief">none</property>
                     <property name="orientation">vertical</property>
                     <property name="value">1</property>
-                    <property name="size">large-toolbar</property>
+                    <property name="size">menu</property>
                     <property name="adjustment">volume_adjustment</property>
-                    <property name="icons">audio-volume-muted-symbolic
-audio-volume-high-symbolic
-audio-volume-low-symbolic
-audio-volume-medium-symbolic</property>
-                    <property name="use_symbolic">False</property>
                     <child internal-child="plus_button">
                       <object class="GtkButton">
                         <property name="can_focus">True</property>
diff --git a/src/libsushi/sushi-media-bin.c b/src/libsushi/sushi-media-bin.c
index 4bce95d..ac37cf8 100644
--- a/src/libsushi/sushi-media-bin.c
+++ b/src/libsushi/sushi-media-bin.c
@@ -97,6 +97,8 @@ typedef struct
   GtkLabel *title_label;
   GtkLabel *info_column_label[INFO_N_COLUMNS];
   GtkLabel *duration_label;
+  GtkLabel *progress_duration_label;
+  GtkLabel *progress_position_label;
 
   /* Thanks to GSK all the blitting will be done in GL */
   GtkRevealer *top_revealer;
@@ -843,10 +845,6 @@ sushi_media_bin_init_volume_button (SushiMediaBin    *self,
     }
 
   gtk_style_context_add_class (gtk_widget_get_style_context (popup), "sushi-media-bin");
-
-  /* Hide volume popup buttons */
-  gtk_widget_hide (gtk_scale_button_get_plus_button (button));
-  gtk_widget_hide (gtk_scale_button_get_minus_button (button));
 }
 
 static void
@@ -1061,8 +1059,8 @@ sushi_media_bin_get_preferred_width (GtkWidget *self,
     }
   else
     {
-      *minimum_width = 320;
-      *natural_width = priv->video_width ? priv->video_width : 640;
+      *minimum_width = priv->video_width ? 320 : 0;
+      *natural_width = priv->video_width ? priv->video_width : 0;
     }
 }
 
@@ -1080,8 +1078,8 @@ sushi_media_bin_get_preferred_height (GtkWidget *self,
     }
   else
     {
-      *minimum_height = 240;
-      *natural_height = priv->video_height ? priv->video_height : 480;
+      *minimum_height = priv->video_height ? 240 : 0;
+      *natural_height = priv->video_height ? priv->video_height : 0;
     }
 }
 
@@ -1201,6 +1199,8 @@ sushi_media_bin_class_init (SushiMediaBinClass *klass)
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, title_label);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, info_box);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, duration_label);
+  gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, progress_duration_label);
+  gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, progress_position_label);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, top_revealer);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, bottom_revealer);
 
@@ -1437,6 +1437,7 @@ sushi_media_bin_update_duration (SushiMediaBin *self)
 
   duration = GST_TIME_AS_SECONDS (duration);
   gtk_label_set_label (priv->duration_label, format_time (duration));
+  gtk_label_set_label (priv->progress_duration_label, format_time (duration));
   gtk_adjustment_set_upper (priv->playback_adjustment, duration);
 }
 
@@ -1455,6 +1456,7 @@ sushi_media_bin_update_position (SushiMediaBin *self)
   gtk_adjustment_set_value (priv->playback_adjustment, position);
   priv->ignore_adjustment_changes = FALSE;
 
+  gtk_label_set_label (priv->progress_position_label, format_time (position));
   gtk_label_set_label (priv->audio_position_label, format_time (position));
 }
 
@@ -1582,7 +1584,7 @@ sushi_media_bin_handle_msg_state_changed (SushiMediaBin *self, GstMessage *msg)
   if (old_state == GST_STATE_READY && new_state == GST_STATE_PAUSED)
     {
       gtk_image_set_from_icon_name (priv->playback_image, SMB_ICON_NAME_PLAY, SMB_ICON_SIZE);
-      widget_set_visible (priv->play_box, TRUE);
+      widget_set_visible (priv->play_box, FALSE);
       sushi_media_bin_update_duration (self);
     }
   else if (new_state == GST_STATE_PLAYING)
@@ -1594,7 +1596,7 @@ sushi_media_bin_handle_msg_state_changed (SushiMediaBin *self, GstMessage *msg)
   else
     {
       gtk_image_set_from_icon_name (priv->playback_image, SMB_ICON_NAME_PLAY, SMB_ICON_SIZE);
-      widget_set_visible (priv->play_box, TRUE);
+      widget_set_visible (priv->play_box, FALSE);
       priv->position = 0;
       sushi_media_bin_set_tick_enabled (self, FALSE);
     }
diff --git a/src/libsushi/sushi-media-bin.css b/src/libsushi/sushi-media-bin.css
index 6cd6450..fb09bb6 100644
--- a/src/libsushi/sushi-media-bin.css
+++ b/src/libsushi/sushi-media-bin.css
@@ -23,40 +23,12 @@
  *
  */
 
-@define-color transparent-light rgba (1,1,1,.1);
-@define-color transparent-dark  rgba (.11,.11,.11,.8);
-@define-color highlight-color   #ff6835;
 @define-color audio-bg-color    #4c4c4c;
 
-/* hiden/shown  */
-sushi-media-bin *.hide {
-  transition: opacity .32s;
-  opacity: 0;
-}
-
-sushi-media-bin *.show {
-  transition: opacity .32s;
-  opacity: 1;
-}
-
 sushi-media-bin {
   background: black;
 }
 
-sushi-media-bin label,
-sushi-media-bin scale value {
-  color: white;
-}
-
-sushi-media-bin label:backdrop,
-sushi-media-bin scale value:backdrop {
-  color: darker(white);
-}
-
-sushi-media-bin box.overlay-bar {
-  background: @transparent-dark;
-}
-
 sushi-media-bin box.overlay-bar.top {
   padding: 12px;
 }
@@ -65,116 +37,14 @@ sushi-media-bin label.title {
   font: 18px Sans;
 }
 
-sushi-media-bin box.bottom button {
-  border: 0px;
-  border-radius: 0px;
-  box-shadow: none;
-  outline: 0px;
-  background: none;
-  padding: 8px;
-}
-
-sushi-media-bin box.bottom button:hover {
-  box-shadow: none;
-  background: rgba (0,0,0,.6);
-}
-
-/* Main play button */
-sushi-media-bin overlay > box {
-  font-size: 18px;
-  border: 0px;
-  border-radius: 2em;
-  padding: .7em 1em;
-  box-shadow: none;
-  background: @transparent-dark;
-}
-
-sushi-media-bin overlay > box > label {
-  padding-left: .64em;
-}
-
-/* Style media playback scale */
-sushi-media-bin scale {
-  margin-top: .5em;
-  padding: 3px 0px;
-  background-image: linear-gradient(to top, @transparent-dark 3px, transparent 3px);
-}
-
-sushi-media-bin scale trough {
-  border: 0;
-  border-radius: 0px;
-  padding: 1px;
-  background: @transparent-light;
-}
-
-sushi-media-bin scale slider {
-  min-height: 12px;
-  min-width: 12px;
-  margin: -4px;
-  border: 0px;
-  border-radius: 6px;
-  box-shadow: none;
-  background: none;
-}
-
-sushi-media-bin scale highlight {
-  border: 0px;
-  padding: 0px;
-  border-radius: 0px 4px 4px 0px;
-  background: @highlight-color;
-}
-
-sushi-media-bin scale value {
-  padding: 2px 0px;
-  border-radius: 1em;
-  background: @transparent-dark;
-}
-
-sushi-media-bin scale:hover slider {
-  background: white;
-}
-
-/* Volume popover */
-popover.sushi-media-bin {
-  border: 0px;
-  border-radius: 0px;
-  box-shadow: none;
-  background: none;
-}
-
-popover.sushi-media-bin scale {
-  border-radius: 18px;
-  padding: 6px;
-  background: @transparent-dark;
-}
-
-popover.sushi-media-bin scale trough {
-  outline: 0px;
-  border: 0px;
-  border-radius: 3px;
-  padding: 1px;
-  background: @transparent-light;
-}
-
-popover.sushi-media-bin scale highlight {
-  border: 0px;
-  padding: 0px;
-  border-radius: 4px;
-  background: @highlight-color;
-}
-
-popover.sushi-media-bin scale slider {
-  min-height: 12px;
-  min-width: 12px;
-  margin: -3px;
-  border: 0px;
-  border-radius: 6px;
-  box-shadow: none;
-  background: none;
+/* Controls */
+sushi-media-bin box.overlay-bar.bottom {
+    padding: 13px;
+    border-radius: 5px;
 }
 
-popover.sushi-media-bin scale:hover slider {
-  background: white;
+sushi-media-bin box.overlay-bar.bottom label {
+    margin: 0px 6px;
 }
 
 /* Audio nodes */


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]