applications/gnome-control-center
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

printers: Tweak the printer supply level bar

Browse source 
Make the supply level bar size, margin, border, background, and
saturation match the mockups at
https://wiki.gnome.org/Design/SystemSettings/Printers#Guidelines

Even though we would obtain primary colors by querying the printer
supply info, it is more eye-candy to desaturate (tone down) the
colors in the UI.

https://bugzilla.gnome.org/show_bug.cgi?id=779075
This commit is contained in:
Felipe Borges 2017-02-22 14:43:34 +01:00
parent 1de145a10b
commit 2c7fc8653d
2 changed files with 32 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

34
panels/printers/pp-printer-entry.c
View file

@ -29,7 +29,7 @@
#include "pp-jobs-dialog.h" #include "pp-jobs-dialog.h"
#include "pp-utils.h" #include "pp-utils.h"
#define SUPPLY_BAR_HEIGHT 12 #define SUPPLY_BAR_HEIGHT 8
struct _PpPrinterEntry struct _PpPrinterEntry
{ {
@ -164,6 +164,27 @@ typedef struct
gchar *marker_types; gchar *marker_types;
} InkLevelData; } InkLevelData;
/* To tone down the colors in the supply level bar
* we shade them by darkening the hue.
*
* Obs.: we don't know whether the color is already
* shaded.
*
*/
static void
tone_down_color (GdkRGBA *color,
gdouble hue_ratio,
gdouble saturation_ratio,
gdouble value_ratio)
{
gdouble h, s, v;
gtk_rgb_to_hsv (color->red, color->green, color->blue,
&h, &s, &v);
gtk_hsv_to_rgb (h * hue_ratio, s * saturation_ratio, v * value_ratio,
&color->red, &color->green, &color->blue);
}
static gboolean static gboolean
supply_levels_draw_cb (GtkWidget *widget, supply_levels_draw_cb (GtkWidget *widget,
cairo_t *cr, cairo_t *cr,
@ -233,13 +254,20 @@ supply_levels_draw_cb (GtkWidget *widget,
value = ((MarkerItem*) tmp_list->data)->level; value = ((MarkerItem*) tmp_list->data)->level;
gdk_rgba_parse (&color, ((MarkerItem*) tmp_list->data)->color); gdk_rgba_parse (&color, ((MarkerItem*) tmp_list->data)->color);
tone_down_color (&color, 1.0, 0.6, 0.9);
if (value > 0) if (value > 0)
{ {
display_value = value / 100.0 * (width - 3.0); display_value = value / 100.0 * (width - 3.0);
gdk_cairo_set_source_rgba (cr, &color); gdk_cairo_set_source_rgba (cr, &color);
cairo_rectangle (cr, 3.5, 3.5, display_value, SUPPLY_BAR_HEIGHT - 3.0); cairo_rectangle (cr, 2.0, 2.0, display_value, SUPPLY_BAR_HEIGHT);
cairo_fill (cr); cairo_fill (cr);
tone_down_color (&color, 1.0, 1.0, 0.85);
gdk_cairo_set_source_rgba (cr, &color);
cairo_set_line_width (cr, 1.0);
cairo_rectangle (cr, 1.5, 1.5, display_value, SUPPLY_BAR_HEIGHT + 1);
cairo_stroke (cr);
} }
if (tooltip_text) if (tooltip_text)
@ -256,7 +284,7 @@ supply_levels_draw_cb (GtkWidget *widget,
((MarkerItem*) tmp_list->data)->name); ((MarkerItem*) tmp_list->data)->name);
} }
gtk_render_frame (context, cr, 1, 1, width - 1, SUPPLY_BAR_HEIGHT + 3); gtk_render_frame (context, cr, 1, 1, width - 1, SUPPLY_BAR_HEIGHT);
for (tmp_list = markers; tmp_list; tmp_list = tmp_list->next) for (tmp_list = markers; tmp_list; tmp_list = tmp_list->next)
{ {

4
panels/printers/printer-entry.ui
View file

@ -249,9 +249,7 @@
<property name="halign">start</property> <property name="halign">start</property>
<property name="height_request">18</property> <property name="height_request">18</property>
<property name="width_request">300</property> <property name="width_request">300</property>
<style> <property name="border_width">2</property>
<class name="background"/>
</style>
<child> <child>
<object class="GtkDrawingArea" id="supply_drawing_area"> <object class="GtkDrawingArea" id="supply_drawing_area">