display: Change appearance and size of monitor labels

Make these rounded everywhere, and have a lighter background and be
centered as per the latest mockups.

Closes: https://gitlab.gnome.org/GNOME/gnome-control-center/-/issues/1850
This commit is contained in:
Carlos Garnacho 2022-07-05 19:16:09 +02:00 committed by Georges Basile Stavracas Neto
parent 2f9ec8b0a8
commit e7e80efcbc
2 changed files with 21 additions and 13 deletions

View file

@ -587,7 +587,6 @@ cc_display_arrangement_draw (GtkDrawingArea *drawing_area,
if (num > 0)
{
PangoLayout *layout;
//PangoFontDescription *font = NULL;
g_autofree gchar *number_str = NULL;
PangoRectangle extents;
GdkRGBA color;
@ -600,12 +599,10 @@ cc_display_arrangement_draw (GtkDrawingArea *drawing_area,
gtk_style_context_get_padding (context, &padding);
gtk_style_context_get_margin (context, &margin);
cairo_translate (cr, margin.left, margin.top);
cairo_translate (cr, w / 2, h / 2);
number_str = g_strdup_printf ("%d", num);
//gtk_style_context_get (context, state, "font", &font, NULL);
layout = gtk_widget_create_pango_layout (GTK_WIDGET (self), number_str);
//pango_layout_set_font_description (layout, font);
pango_layout_get_extents (layout, NULL, &extents);
h = (extents.height - extents.y) / PANGO_SCALE;
@ -616,6 +613,14 @@ cc_display_arrangement_draw (GtkDrawingArea *drawing_area,
w += border.left + border.right + padding.left + padding.right;
h += border.top + border.bottom + padding.top + padding.bottom;
/* Enforce evenness */
if ((w % 2) != 0)
w++;
if ((h % 2) != 0)
h++;
cairo_translate (cr, - w / 2, - h / 2);
gtk_render_background (context, cr, 0, 0, w, h);
gtk_render_frame (context, cr, 0, 0, w, h);

View file

@ -1,9 +1,14 @@
display-arrangement {
font-weight: bold;
font-size: larger;
}
display-arrangement.monitor {
border: solid 1px @borders;
margin: 0px 0px 1px 1px;
background: @theme_bg_color;
padding: 0.4em;
border-radius: 5px;
}
display-arrangement.monitor.primary {
@ -11,13 +16,11 @@ display-arrangement.monitor.primary {
}
display-arrangement.monitor-label {
font-size: larger;
font-weight: bold;
border-radius: 0.3em;
padding-right: 0.2em;
padding-left: 0.2em;
color: #fff;
background: #000;
border-radius: 50%;
min-width: 1.5em;
min-height: 1.5em;
color: #000;
background: #ddd;
}
label.monitor-label {
@ -25,6 +28,6 @@ label.monitor-label {
font-weight: bold;
min-width: 1.5em;
min-height: 1.5em;
color: #fff;
background: #000;
color: #000;
background: #ddd;
}