Federated_Computer/federated-calendar
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

event-widget: Style overhaul

Browse Source 
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.
This commit is contained in:
Adrien Plazas
2022-06-22 12:49:38 +00:00
committed by Georges Basile Stavracas Neto
parent 40ce81f81a
commit b68f7a0083
6 changed files with 55 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/css-code.h
+4 -21
View File
@@ -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 */
src/gui/gcal-event-widget.c
-4
View File
@@ -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);
src/gui/gcal-event-widget.ui
+17 -11
View File
@@ -20,10 +20,25 @@
</object>
</child>
<child>
<object class="GtkBox">
<property name="hexpand">False</property>
<child>
<object class="AdwBin" id="edge">
<style>
<class name="edge" />
</style>
</object>
</child>
<!-- Overflow Bin -->
<child>
<object class="GcalOverflowBin">
<property name="hexpand">True</property>
<property name="request-mode">width-for-height</property>
<style>
<class name="content" />
</style>
<!-- Main Stack -->
<child>
@@ -72,17 +87,6 @@
<child>
<object class="GtkBox" id="horizontal_box">
<property name="spacing">4</property>
<child>
<object class="GtkBox" id="color_box">
<property name="halign">center</property>
<property name="valign">center</property>
<property name="width-request">16</property>
<property name="height-request">16</property>
<style>
<class name="icon-box" />
</style>
</object>
</child>
<child>
<object class="GtkLabel" id="summary_label">
<property name="hexpand">True</property>
@@ -104,5 +108,7 @@
</child>
</object>
</child>
</object>
</child>
</template>
</interface>
src/theme/style-dark.css
+8
View File
@@ -0,0 +1,8 @@
/*
* Event widget
*/
event.timed {
color: @light_1;
outline-color: rgba(0, 0, 0, 0.3);
}
src/theme/style.css
+25 -24
View File
@@ -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,
src/theme/theme.gresource.xml
+1
View File
@@ -2,5 +2,6 @@
<gresources>
<gresource prefix="/org/gnome/calendar">
<file>style.css</file>
<file>style-dark.css</file>
</gresource>
</gresources>