[gnome-calendar] app: event-widget CSS code for classes rewritten



commit 348be333292c2f629ba1bf0a5231a45c5ab0f9a9
Author: Erick Pérez Castellanos <erick red gmail com>
Date:   Sat Feb 7 22:13:29 2015 -0500

    app: event-widget CSS code for classes rewritten

 data/theme/gtk-styles.css |    2 +
 src/css-code.h            |  366 +++++++++++++++++++++++++++++----------------
 src/gcal-application.c    |   36 +-----
 3 files changed, 242 insertions(+), 162 deletions(-)
---
diff --git a/data/theme/gtk-styles.css b/data/theme/gtk-styles.css
index 43674a3..7571f83 100644
--- a/data/theme/gtk-styles.css
+++ b/data/theme/gtk-styles.css
@@ -1,3 +1,5 @@
+ define-color event_shadow_color alpha(black, 0.2);
+
 .views {
     /* background color of every view */
     background-color: @theme_base_color;
diff --git a/src/css-code.h b/src/css-code.h
index ebd0f74..b70c6b3 100644
--- a/src/css-code.h
+++ b/src/css-code.h
@@ -19,133 +19,245 @@
 #ifndef CSS_CODE_H
 #define CSS_CODE_H
 
-#define CSS_TEMPLATE "GcalEventWidget.color-%d {"\
-                     "  background-color: %s;"\
-                     "}"
-
-#define CSS_TEMPLATE_EDGE_BOTH "GcalEventWidget.color-%d.slanted:dir(ltr) {"\
-                               "  background-color: transparent;"\
-                               "  padding: 0 2em;"\
-                               "  border-radius: 0;"\
-                               "  background-image: linear-gradient(-80deg, %s,"\
-                               "                                    %s 40%%,"\
-                               "                                    alpha(%s, 0) 45%%,"\
-                               "                                    alpha(%s, 0) 60%%,"\
-                               "                                    %s 65%%,"\
-                               "                                    %s 75%%,"\
-                               "                                    alpha(%s, 0) 80%%),"\
-                               "                    linear-gradient(100deg, %s,"\
-                               "                                    %s 40%%,"\
-                               "                                    alpha(%s, 0) 45%%,"\
-                               "                                    alpha(%s, 0) 60%%,"\
-                               "                                    %s 65%%,"\
-                               "                                    %s 75%%,"\
-                               "                                    alpha(%s, 0) 80%%),"\
-                               "                    linear-gradient(to top, %s);"\
-                               "  background-size: 2em, 2em, 100%% 100%%;"\
-                               "  background-repeat: no-repeat;"\
-                               "  background-clip: border-box, border-box, content-box;"\
-                               "  background-position: top left, top right;"\
-                               "}"
-
-#define CSS_TEMPLATE_EDGE_BOTH_RTL "GcalEventWidget.color-%d.slanted:dir(rtl) {"\
-                                   "  background-color: transparent;"\
-                                   "  padding: 0 2em;"\
-                                   "  border-radius: 0;"\
-                                   "  background-image: linear-gradient(-100deg, %s,"\
-                                   "                                    %s 40%%,"\
-                                   "                                    alpha(%s, 0) 45%%,"\
-                                   "                                    alpha(%s, 0) 60%%,"\
-                                   "                                    %s 65%%,"\
-                                   "                                    %s 75%%,"\
-                                   "                                    alpha(%s, 0) 80%%),"\
-                                   "                    linear-gradient(80deg, %s,"\
-                                   "                                    %s 40%%,"\
-                                   "                                    alpha(%s, 0) 45%%,"\
-                                   "                                    alpha(%s, 0) 60%%,"\
-                                   "                                    %s 65%%,"\
-                                   "                                    %s 75%%,"\
-                                   "                                    alpha(%s, 0) 80%%),"\
-                                   "                    linear-gradient(to top, %s);"\
-                                   "  background-size: 2em, 2em, 100%% 100%%;"\
-                                   "  background-repeat: no-repeat;"\
-                                   "  background-clip: border-box, border-box, content-box;"\
-                                   "  background-position: top left, top right;"\
-                                   "}"
-
-#define CSS_TEMPLATE_EDGE "GcalEventWidget.color-%d.slanted-end:dir(ltr) {"\
-                          "  background-color: transparent;"\
-                          "  padding-right: 2em;"\
-                          "  border-top-right-radius: 0;"\
-                          "  border-bottom-right-radius: 0;"\
-                          "  background-image: linear-gradient(100deg, %s,"\
-                          "                                    %s 40%%,"\
-                          "                                    alpha(%s, 0) 45%%,"\
-                          "                                    alpha(%s, 0) 60%%,"\
-                          "                                    %s 65%%,"\
-                          "                                    %s 75%%,"\
-                          "                                    alpha(%s, 0) 80%%),"\
-                          "                    linear-gradient(to top, %s);"\
-                          "  background-size: 2em, 100%% 100%%;"\
-                          "  background-repeat: no-repeat;"\
-                          "  background-position: top right, -2em;"\
-                          "}"
-
-#define CSS_TEMPLATE_EDGE_START "GcalEventWidget.color-%d.slanted-start:dir(ltr) {"\
-                                "  background-color: transparent;"\
-                                "  padding-left: 2em;"\
-                                "  border-top-left-radius: 0;"\
-                                "  border-bottom-left-radius: 0;"\
-                                "  background-image: linear-gradient(-80deg, %s,"\
-                                "                                    %s 40%%,"\
-                                "                                    alpha(%s, 0) 45%%,"\
-                                "                                    alpha(%s, 0) 60%%,"\
-                                "                                    %s 65%%,"\
-                                "                                    %s 75%%,"\
-                                "                                    alpha(%s, 0) 80%%),"\
-                                "                    linear-gradient(to top, %s);"\
-                                "  background-size: 2em, 100%% 100%%;"\
-                                "  background-repeat: no-repeat;"\
-                                "  background-position: top left, 2em;"\
-                                "}"
-
-#define CSS_TEMPLATE_EDGE_RTL "GcalEventWidget.color-%d.slanted-end:dir(rtl) {"\
-                              "  background-color: transparent;"\
-                              "  padding-left: 2em;"\
-                              "  border-top-left-radius: 0;"\
-                              "  border-bottom-left-radius: 0;"\
-                              "  background-image: linear-gradient(-100deg, %s,"\
-                              "                                    %s 40%%,"\
-                              "                                    alpha(%s, 0) 45%%,"\
-                              "                                    alpha(%s, 0) 60%%,"\
-                              "                                    %s 65%%,"\
-                              "                                    %s 75%%,"\
-                              "                                    alpha(%s, 0) 80%%),"\
-                              "                    linear-gradient(to top, %s);"\
-                              "  background-size: 2em, 100%% 100%%;"\
-                              "  background-repeat: no-repeat;"\
-                              "  background-position: top left, 2em;"\
-                              "}"
-
-#define CSS_TEMPLATE_EDGE_START_RTL "GcalEventWidget.color-%d.slanted-start:dir(rtl) {"\
-                                    "  background-color: transparent;"\
-                                    "  padding-right: 2em;"\
-                                    "  border-top-right-radius: 0;"\
-                                    "  border-bottom-right-radius: 0;"\
-                                    "  background-image: linear-gradient(80deg, %s,"\
-                                    "                                    %s 40%%,"\
-                                    "                                    alpha(%s, 0) 45%%,"\
-                                    "                                    alpha(%s, 0) 60%%,"\
-                                    "                                    %s 65%%,"\
-                                    "                                    %s 75%%,"\
-                                    "                                    alpha(%s, 0) 80%%),"\
-                                    "                    linear-gradient(to top, %s);"\
-                                    "  background-size: 2em, 100%% 100%%;"\
-                                    "  background-repeat: no-repeat;"\
-                                    "  background-position: top right, -2em;"\
-                                    "}"
-
-
+#define CSS_TEMPLATE \
+".color-%1$d {"\
+"  background-color: %2$s"\
+"}"\
+".color-%1$d.slanted {"\
+"  background-color: transparent;"\
+"  background-image: linear-gradient(100deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(280deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(100deg, /* left edge shadow */"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px),"\
+"                    linear-gradient(280deg, /* right edge shadow*/"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px);"\
+"  border-bottom: 1px solid transparent; /* for the shadow displacement */"\
+"  background-size: 50%% 100%%, 50%% 100%%, 50%% 100%%, 50%% 100%%;"\
+"  background-position: left bottom, right bottom, left bottom, right bottom;"\
+"  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 */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(280deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px);"\
+"}"\
+".color-%1$d.slanted:dir(rtl) {"\
+"  background-image: linear-gradient(80deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(260deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(80deg, /* left edge shadow */"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px),"\
+"                    linear-gradient(260deg, /* right edge shadow*/"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px);"\
+"}"\
+".color-%1$d.slanted:dir(rtl):backdrop {"\
+"  background-image: linear-gradient(80deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(260deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px);"\
+"}"\
+".color-%1$d.slanted-start {"\
+"  background-color: transparent;"\
+"  background-image: linear-gradient(100deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(100deg, /* left edge shadow */"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px);"\
+"  border-bottom: 1px solid transparent; /* for the shadow displacement */"\
+"  background-position: left bottom, left bottom;"\
+"  background-size: 100%% 100%%, 100%% 100%%;"\
+"  background-origin: padding-box, border-box;"\
+"  background-clip: padding-box, border-box;"\
+"  border-radius: 0 5px 4px 0;"\
+"  padding-right: 4px;"\
+"  padding-left: 24px;"\
+"  padding-top: 3px;"\
+"  padding-bottom: 4px;"\
+"}"\
+".color-%1$d.slanted-start:backdrop {"\
+"  background-image: linear-gradient(100deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px);"\
+"}"\
+".color-%1$d.slanted-start:dir(rtl) {"\
+"  background-image: linear-gradient(260deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(260deg, /* right edge shadow */"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px);"\
+"  border-bottom: 1px solid transparent; /* for the shadow displacement */"\
+"  background-position: right bottom, right bottom;"\
+"  border-radius: 4px 0 0 5px;"\
+"  padding-right: 24px;"\
+"  padding-left: 4px;"\
+"}"\
+".color-%1$d.slanted-start:dir(rtl):backdrop {"\
+"  background-image: linear-gradient(260deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px);"\
+"}"\
+".color-%1$d.slanted-end {"\
+"  background-color: transparent;"\
+"  background-image: linear-gradient(280deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(280deg, /* right edge shadow */"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px);"\
+"  border-bottom: 1px solid transparent; /* for the shadow displacement */"\
+"  background-position: right bottom, right bottom;"\
+"  background-size: 100%% 100%%, 100%% 100%%;"\
+"  background-origin: padding-box, border-box;"\
+"  background-clip: padding-box, border-box;"\
+"  border-radius: 4px 0 0 5px;"\
+"  padding-right: 24px;"\
+"  padding-left: 4px;"\
+"  padding-top: 3px;"\
+"  padding-bottom: 4px;"\
+"}"\
+".color-%1$d.slanted-end:backdrop {"\
+"  background-image: linear-gradient(280deg, /* right edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px);"\
+"}"\
+".color-%1$d.slanted-end:dir(rtl) {"\
+"  background-image: linear-gradient(80deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px),"\
+"                    linear-gradient(80deg, /* left edge shadow */"\
+"                                    transparent          5px,"\
+"                                    @event_shadow_color  6px,"\
+"                                    @event_shadow_color  9px,"\
+"                                    transparent         10px,"\
+"                                    transparent         16px,"\
+"                                    @event_shadow_color       17px);"\
+"  background-position: left bottom, left bottom;"\
+"  border-radius: 0 4px 5px 0;"\
+"  padding-right: 4px;"\
+"  padding-left: 24px;"\
+"}"\
+".color-%1$d.slanted-end:dir(rtl):backdrop {"\
+"  background-image: linear-gradient(80deg, /* left edge */"\
+"                                    alpha(%2$s, 0)  5px,"\
+"                                    %2$s            6px,"\
+"                                    %2$s          9px,"\
+"                                    alpha(%2$s, 0) 10px,"\
+"                                    alpha(%2$s, 0) 16px,"\
+"                                    %2$s         17px);"\
+"}"
 
 #endif /* CSS_CODE_H */
 
diff --git a/src/gcal-application.c b/src/gcal-application.c
index 9a20fc7..d048002 100644
--- a/src/gcal-application.c
+++ b/src/gcal-application.c
@@ -137,8 +137,6 @@ process_sources (GcalApplication *application)
   GQuark color_id;
   const gchar* color_str;
 
-  gchar *bkg_color, *slanted_edge_both_ltr, *slanted_edge_both_rtl;
-  gchar *slanted_edge_start_ltr, *slanted_edge_start_rtl, *slanted_edge_end_ltr, *slanted_edge_end_rtl;
   gchar **new_css_snippets;
   gchar *new_css_data;
 
@@ -156,39 +154,7 @@ process_sources (GcalApplication *application)
       color_str = get_color_name_from_source (source);
       color_id = g_quark_from_string (color_str);
 
-      bkg_color = g_strdup_printf (CSS_TEMPLATE, color_id, color_str);
-      slanted_edge_both_ltr =
-          g_strdup_printf (CSS_TEMPLATE_EDGE_BOTH, color_id,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str, 
color_str,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str);
-      slanted_edge_both_rtl =
-          g_strdup_printf (CSS_TEMPLATE_EDGE_BOTH_RTL, color_id,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str, 
color_str,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str);
-      slanted_edge_end_ltr =
-          g_strdup_printf (CSS_TEMPLATE_EDGE, color_id,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str, 
color_str);
-      slanted_edge_start_ltr =
-          g_strdup_printf (CSS_TEMPLATE_EDGE_START, color_id,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str, 
color_str);
-      slanted_edge_end_rtl =
-          g_strdup_printf (CSS_TEMPLATE_EDGE_RTL, color_id,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str, 
color_str);
-      slanted_edge_start_rtl =
-          g_strdup_printf (CSS_TEMPLATE_EDGE_START_RTL, color_id,
-                           color_str, color_str, color_str, color_str, color_str, color_str, color_str, 
color_str);
-
-      new_css_snippets[i] = g_strconcat (bkg_color, slanted_edge_both_ltr, slanted_edge_both_rtl,
-                                         slanted_edge_end_ltr, slanted_edge_start_ltr,
-                                         slanted_edge_end_rtl, slanted_edge_start_rtl, NULL);
-
-      g_free (bkg_color);
-      g_free (slanted_edge_both_ltr);
-      g_free (slanted_edge_both_rtl);
-      g_free (slanted_edge_end_ltr);
-      g_free (slanted_edge_start_ltr);
-      g_free (slanted_edge_start_rtl);
-      g_free (slanted_edge_end_rtl);
+      new_css_snippets[i] = g_strdup_printf (CSS_TEMPLATE, color_id, color_str);
     }
 
   g_list_free (sources);


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]