[gnome-control-center/wip/carlosg/display-papercuts: 8/11] display: Change appearance and size of monitor labels

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit e7e80efcbc57eb3265b28b1d622b47632c810742
Author: Carlos Garnacho <carlosg gnome org>
Date:   Tue Jul 5 19:16:09 2022 +0200

    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

 panels/display/cc-display-arrangement.c | 13 +++++++++----
 panels/display/display-arrangement.css  | 21 ++++++++++++---------
 2 files changed, 21 insertions(+), 13 deletions(-)
---
diff --git a/panels/display/cc-display-arrangement.c b/panels/display/cc-display-arrangement.c
index 75c5f3df3..7d7f1e4ec 100644
--- a/panels/display/cc-display-arrangement.c
+++ b/panels/display/cc-display-arrangement.c
@@ -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);
 
diff --git a/panels/display/display-arrangement.css b/panels/display/display-arrangement.css
index 6b2bdcf25..a3bc80b31 100644
--- a/panels/display/display-arrangement.css
+++ b/panels/display/display-arrangement.css
@@ -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;
 }