From b68f7a00834ad6151731af427c88497c09d54162 Mon Sep 17 00:00:00 2001 From: Adrien Plazas Date: Mon, 20 Jun 2022 14:56:55 +0200 Subject: [PATCH] event-widget: Style overhaul This reworks the style of the event widgets to make them match the latest designs. This also supports the light and dark theme preferences and fixes some spacing inconsistencies and errors. - The orientation of events only affects how their content is laid out, not their style. - Events are fully colored accordingly to their calendar's color. - Timed events have a semi-transparent background and a kind of opaque knob on their left. - Timed events have their text colored according to the theme. - Lasting events are fully opaque, with no knob. - Lasting events have their text colored according to their calendar's color. This purposefully leaves the indentation broken to help reviewing the changes. --- src/gui/css-code.h | 25 +++--------------- src/gui/gcal-event-widget.c | 4 --- src/gui/gcal-event-widget.ui | 28 ++++++++++++-------- src/theme/style-dark.css | 8 ++++++ src/theme/style.css | 49 ++++++++++++++++++----------------- src/theme/theme.gresource.xml | 1 + 6 files changed, 55 insertions(+), 60 deletions(-) create mode 100644 src/theme/style-dark.css diff --git a/src/gui/css-code.h b/src/gui/css-code.h index 09e2545e..a00161ee 100644 --- a/src/gui/css-code.h +++ b/src/gui/css-code.h @@ -23,14 +23,11 @@ ".color-%1$d {"\ " background-color: %2$s;"\ "}"\ -".color-%1$d.horizontal.timed {"\ -" background-color: transparent;"\ +".color-%1$d.timed {"\ +" background-color: alpha(%2$s, 0.17);"\ "}"\ -".color-%1$d.horizontal.timed box.icon-box{"\ +".color-%1$d.timed widget.edge{"\ " background-color: %2$s;"\ -" border-radius: 2px;"\ -" min-height: 16px;"\ -" min-width: 16px;"\ "}"\ ".color-%1$d.slanted {"\ " background-color: transparent;"\ @@ -68,11 +65,6 @@ " background-repeat: no-repeat;"\ " background-origin: padding-box, padding-box, border-box, border-box;"\ " background-clip: padding-box, padding-box, border-box, border-box;"\ -" padding-left: 24px;"\ -" padding-right: 24px;"\ -" padding-top: 3px;"\ -" padding-bottom: 4px;"\ -" border-radius: 0;"\ "}"\ ".color-%1$d.slanted:backdrop {"\ " background-image: linear-gradient(100deg, /* left edge */"\ @@ -157,7 +149,6 @@ " background-size: 100%% 100%%, 100%% 100%%;"\ " background-origin: padding-box, border-box;"\ " background-clip: padding-box, border-box;"\ -" border-radius: 0 2px 2px 0;"\ "}"\ ".color-%1$d.slanted-start:backdrop {"\ " background-image: linear-gradient(100deg, /* left edge */"\ @@ -185,7 +176,6 @@ " @event_shadow_color 17px);"\ " border-bottom: 1px solid transparent; /* for the shadow displacement */"\ " background-position: right bottom, right bottom;"\ -" border-radius: 2px 0 0 2px;"\ "}"\ ".color-%1$d.slanted-start:dir(rtl):backdrop {"\ " background-image: linear-gradient(260deg, /* right edge */"\ @@ -217,7 +207,6 @@ " background-size: 100%% 100%%, 100%% 100%%;"\ " background-origin: padding-box, border-box;"\ " background-clip: padding-box, border-box;"\ -" border-radius: 2px 0 0 2px;"\ "}"\ ".color-%1$d.slanted-end:backdrop {"\ " background-image: linear-gradient(280deg, /* right edge */"\ @@ -244,7 +233,6 @@ " transparent 16px,"\ " @event_shadow_color 17px);"\ " background-position: left bottom, left bottom;"\ -" border-radius: 0 2px 2px 0;"\ "}"\ ".color-%1$d.slanted-end:dir(rtl):backdrop {"\ " background-image: linear-gradient(80deg, /* left edge */"\ @@ -254,12 +242,7 @@ " alpha(%2$s, 0) 10px,"\ " alpha(%2$s, 0) 16px,"\ " %2$s 17px);"\ -"}"\ -".color-%1$d.slanted > stack { margin: 0 16px 0 16px; }"\ -".color-%1$d.slanted-start > stack { margin-left: 16px; }"\ -".color-%1$d.slanted-start:dir(rtl) > stack { margin-right: 16px; }"\ -".color-%1$d.slanted-end > stack { margin-right: 16px; }"\ -".color-%1$d.slanted-end:dir(rtl) > stack { margin-left: 16px; }" +"}" #endif /* CSS_CODE_H */ diff --git a/src/gui/gcal-event-widget.c b/src/gui/gcal-event-widget.c index 9b4ac8e4..447f4bab 100644 --- a/src/gui/gcal-event-widget.c +++ b/src/gui/gcal-event-widget.c @@ -51,7 +51,6 @@ struct _GcalEventWidget GDateTime *dt_end; /* widgets */ - GtkWidget *color_box; GtkWidget *horizontal_box; GtkWidget *timestamp_label; GtkWidget *squeezer; @@ -170,8 +169,6 @@ gcal_event_widget_update_style (GcalEventWidget *self) */ timed = !gcal_event_get_all_day (self->event) && !gcal_event_is_multiday (self->event); - gtk_widget_set_visible (self->color_box, timed && self->orientation == GTK_ORIENTATION_HORIZONTAL); - if (timed) gtk_widget_add_css_class (GTK_WIDGET (self), "timed"); } @@ -760,7 +757,6 @@ gcal_event_widget_class_init (GcalEventWidgetClass *klass) gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/calendar/ui/gui/gcal-event-widget.ui"); - gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, color_box); gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, drag_source); gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, horizontal_box); gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, timestamp_label); diff --git a/src/gui/gcal-event-widget.ui b/src/gui/gcal-event-widget.ui index 2a260d42..5dd9ce51 100644 --- a/src/gui/gcal-event-widget.ui +++ b/src/gui/gcal-event-widget.ui @@ -20,10 +20,25 @@ + + + False + + + + + + + True width-for-height + @@ -72,17 +87,6 @@ 4 - - - center - center - 16 - 16 - - - True @@ -104,5 +108,7 @@ + + diff --git a/src/theme/style-dark.css b/src/theme/style-dark.css new file mode 100644 index 00000000..2690aa01 --- /dev/null +++ b/src/theme/style-dark.css @@ -0,0 +1,8 @@ +/* + * Event widget + */ + +event.timed { + color: @light_1; + outline-color: rgba(0, 0, 0, 0.3); +} diff --git a/src/theme/style.css b/src/theme/style.css index 19ae6a2b..f53956b8 100644 --- a/src/theme/style.css +++ b/src/theme/style.css @@ -1,5 +1,3 @@ -@define-color event_shadow_color alpha(black, 0.2); - /* Header labels */ label.primary-label { font-size: 16pt; @@ -69,47 +67,50 @@ popover.events button { */ event { - border-radius: 2px; - margin: 0 1px 1px 2px; + margin: 1px; font-size: 0.9rem; } -event squeezer { - margin: 1px 4px 1px 6px; +event widget.content { + margin: 4px; } -event.horizontal.timed squeezer { - margin: 1px 2px 1px 0px; +event.timed, +event:not(.slanted):not(.slanted-start):not(.slanted-end) { + border-radius: 2.5px; } -event.vertical.timed { - padding: 3px 6px; +event.timed widget.edge { + border-radius: 2.5px; + min-width: 5px; } -event.color-dark.horizontal.timed, -event.color-light.horizontal.timed { - margin-bottom: 0; - border-radius: 0; - color: inherit; +event.slanted, +event.slanted-start, +event.slanted-end:dir(rtl) { + padding-left: 16px; + border-radius: 0 2.5px 2.5px 0; } -event.color-dark { +event.slanted, +event.slanted-end, +event.slanted-start:dir(rtl) { + padding-right: 16px; + border-radius: 2.5px 0 0 2.5px; +} + +event:not(.timed).color-dark { + /* Keep in symc with the dark style's event.timed colors */ color: @light_1; outline-color: rgba(0, 0, 0, 0.3); } -event.color-dark:backdrop { - color: @light_3; -} - -event.color-light { +event.timed, +event:not(.timed).color-light { color: alpha(@dark_5, 0.8); outline-color: rgba(255, 255, 255, 0.5); } -event.color-light:backdrop { - color: @dark_3; -} /* Event Popover */ popover.event-popover, diff --git a/src/theme/theme.gresource.xml b/src/theme/theme.gresource.xml index b1dd91ca..ac5a0c64 100644 --- a/src/theme/theme.gresource.xml +++ b/src/theme/theme.gresource.xml @@ -2,5 +2,6 @@ style.css + style-dark.css