GNOME.org
 

[gnome-calendar] event-widget: Style overhaul

commit b68f7a00834ad6151731af427c88497c09d54162
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Mon Jun 20 14:56:55 2022 +0200

    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(-)
---
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 @@
       </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>
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 {
-    color: @light_1;
-    outline-color: rgba(0, 0, 0, 0.3);
+event.slanted,
+event.slanted-end,
+event.slanted-start:dir(rtl) {
+    padding-right: 16px;
+    border-radius: 2.5px 0 0 2.5px;
 }
 
-event.color-dark:backdrop {
-    color: @light_3;
+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-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 @@
 <gresources>
   <gresource prefix="/org/gnome/calendar">
     <file>style.css</file>
+    <file>style-dark.css</file>
   </gresource>
 </gresources>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]