Commit f9816a73 authored by Guido Gunther's avatar Guido Gunther
Browse files

media-player: Improve button layour and styling

Use larger play/pause button, move ff and rev a bit closer
to the center.

Closer to designs in https://gitlab.gnome.org/World/Phosh/phosh/-/issues/543

Signed-off-by: Guido Gunther's avatarGuido Günther <guido.gunther@puri.sm>
parent 6c9001db
......@@ -68,6 +68,7 @@ typedef struct _PhoshMediaPlayer {
GtkWidget *btn_prev;
GtkWidget *btn_details;
GtkWidget *img_art;
GtkWidget *img_play;
GtkWidget *lbl_title;
GtkWidget *lbl_artist;
......@@ -339,8 +340,8 @@ on_playback_status_changed (PhoshMediaPlayer *self,
}
if (self->status != current) {
GtkWidget *image = gtk_image_new_from_icon_name (icon, GTK_ICON_SIZE_SMALL_TOOLBAR);
gtk_button_set_image (GTK_BUTTON (self->btn_play), image);
gtk_image_set_from_icon_name (GTK_IMAGE (self->img_play), icon, -1);
gtk_widget_set_valign (self->img_play, GTK_ALIGN_START);
}
}
......@@ -465,6 +466,7 @@ phosh_media_player_class_init (PhoshMediaPlayerClass *klass)
gtk_widget_class_bind_template_child (widget_class, PhoshMediaPlayer, btn_prev);
gtk_widget_class_bind_template_child (widget_class, PhoshMediaPlayer, btn_details);
gtk_widget_class_bind_template_child (widget_class, PhoshMediaPlayer, img_art);
gtk_widget_class_bind_template_child (widget_class, PhoshMediaPlayer, img_play);
gtk_widget_class_bind_template_child (widget_class, PhoshMediaPlayer, lbl_artist);
gtk_widget_class_bind_template_child (widget_class, PhoshMediaPlayer, lbl_title);
gtk_widget_class_bind_template_callback (widget_class, btn_play_clicked_cb);
......
......@@ -472,26 +472,36 @@ phosh-notification-banner {
phosh-media-player {
background: @phosh_notification_bg_color;
border-radius: 6px;
border: 0;
box-shadow: 0 0;
box-shadow: none;
}
phosh-media-player > box > button {
phosh-media-player button {
background: @phosh_notification_bg_color;
border-radius: 0;
box-shadow: none;
border: 0;
outline-style: none;
}
phosh-media-player > box button:first-child {
phosh-media-player button:hover,
phosh-media-player button:active {
background-color: rgba(255, 255, 255, 0.3);
}
phosh-media-player > box > button:first-child {
border-radius: 0 0 0 6px;
}
phosh-media-player > box button:last-child {
phosh-media-player > box > button:last-child {
border-radius: 0 0 6px 0;
}
phosh-media-player .media-player-details {
border-radius: 6px 6px 0 0;
}
/* The details button should not look inactive even when disabled */
phosh-media-player box *:disabled {
phosh-media-player .media-player-details *:disabled {
color: @theme_fg_color;
-gtk-icon-effect: none;
}
......
......@@ -20,7 +20,9 @@
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">end</property>
<property name="icon_name">media-skip-backward-symbolic</property>
<property name="margin-right">12</property>
</object>
</child>
</object>
......@@ -34,6 +36,7 @@
<object class="GtkImage" id="img_play">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">32</property>
<property name="icon_name">media-playback-start-symbolic</property>
</object>
</child>
......@@ -48,7 +51,9 @@
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="icon_name">media-skip-forward-symbolic</property>
<property name="margin-left">12</property>
</object>
</child>
</object>
......@@ -129,6 +134,9 @@
</child>
</object>
</child>
<style>
<class name="media-player-details"/>
</style>
</object>
<packing>
<property name="left_attach">0</property>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment