From a9fb004b302031c5eab75d54629024bb75ef6dd4 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Tue, 1 Dec 2020 14:51:55 +0100
Subject: [PATCH] new calendar colors proposition

---
 chrono/manager/static/css/style.scss          | 106 +++++++++++++-----
 .../chrono/booking_color_legend.html          |  57 +++++++++-
 .../chrono/manager_agenda_day_view.html       |   5 +-
 .../manager_meetings_agenda_month_view.html   |   3 +-
 4 files changed, 135 insertions(+), 36 deletions(-)

diff --git a/chrono/manager/static/css/style.scss b/chrono/manager/static/css/style.scss
index 58327a7..13c0b14 100644
--- a/chrono/manager/static/css/style.scss
+++ b/chrono/manager/static/css/style.scss
@@ -107,8 +107,16 @@ a.timeperiod-exception-all {
 	margin-top: 0;
 }
 
+
+table.agenda-table {
+	border-spacing: 1vw 0;
+	table-layout: fixed;
+	background-color: hsla(0, 0%, 0%, 0.06);
+	padding: 0.5em 0;
+	padding-bottom: 2em;
+}
+
 .agenda-table thead th {
-	width: 14vw;
 	padding-bottom: 1ex;
 	font-weight: normal;
 }
@@ -126,10 +134,8 @@ a.timeperiod-exception-all {
 	box-sizing: border-box;
 	padding: 1.2ex 2ex;
 	vertical-align: top;
-	width: 8ex;
 	font-weight: normal;
 	&.hour {
-		width: 5%;
 		text-align: left;
 	}
 	a {
@@ -137,7 +143,6 @@ a.timeperiod-exception-all {
 		border: 0;
 	}
 	&.weekday {
-		width: 12.5%;
 		padding-top: 3rem;
 		&.today {
 			font-weight: bold;
@@ -149,17 +154,22 @@ a.timeperiod-exception-all {
 	// don't add extra padding on top row
 	padding-top: 1ex;
 }
+// hour cells width
+.agenda-table thead tr:first-child td:first-child,
+.agenda-table tbody tr:first-child th:not(.weekday) {
+	width: 5em;
+}
 
 .agenda-table tbody tr.odd th.hour,
 .agenda-table tbody tr.odd td {
-	background: #f0f0f0;
+	background: hsla(0, 0%, 0%, 0.06);
 	@media print {
 		border-top: 1px solid #aaa;
 	}
 }
 
 .agenda-table tbody tr.odd td.other-month {
-	background: #f8f8f8;
+	background: transparent;
 }
 
 
@@ -170,15 +180,6 @@ a.timeperiod-exception-all {
 	border: 0;
 }
 
-.agenda-table.month-view {
-	border-spacing: 0;
-}
-
-.agenda-table.month-view tbody td {
-	border: 5px solid white;
-	border-width: 0 5px;
-}
-
 @for $i from 1 through 60 {
 	table.hourspan-#{$i} tbody td {
 		height: calc(#{$i} * 2.5em);
@@ -192,41 +193,78 @@ a.timeperiod-exception-all {
 	overflow: hidden;
 	&.opening-hours, &.exception-hours {
 		z-index: 1;
-		background: #b1ea4d linear-gradient(135deg, #b1ea4d 0%, #459522 100%);
-		opacity: 0.6;
+		background:
+			linear-gradient(
+				135deg,
+				hsl(100, 20%, 97%) 20%,
+				hsla(100, 30%, 99%, 0.7) 40%,
+				hsla(100, 40%, 94%, 0.7) 60%,
+				hsl(100, 55%, 93%) 100%)
+			fixed;
 		left: 0.5ex;
 		width: calc(100% - 1ex);
 	}
+	&.opening-hours {
+		border-left: 0.5em solid white;
+	}
 	&.exception-hours {
-		background: #fee linear-gradient(135deg, #fee 0%, #fdd 100%);
+		background:
+			repeating-linear-gradient(
+				135deg,
+				hsla(10, 10%, 75%, 0.7) 0,
+				hsla(10, 10%, 80%, 0.55) 10px,
+				transparent 11px,
+				transparent 20px);
 		text-align: center;
 	}
 	&.booking {
-		background: #eef linear-gradient(135deg, #eef 0%, #ddf 100%);
-		box-shadow: 0 0 1px 0 #2d2dad;
-		width: calc(100% - 2ex);
-		border: 1px solid #aaa;
+		left: 0.5ex;
+		color: #5382CF;
+		background:
+			linear-gradient(
+				110deg,
+				hsla(0, 0%, 100%, 0.85) 0%,
+				hsla(0, 0%, 100%, 0.65) 100%)
+			currentColor
+			fixed;
+		width: calc(100% - 1ex);
+		border-color: currentColor;
+		border-left: .5em solid currentcolor;
+
 		z-index: 2;
 		&:hover {
 			z-index: 3;
 			height: auto !important;
 		}
+		> * {
+			color: hsla(0, 0%, 0%, 0.6);
+		}
 		a {
-			color: #003199;
-			border-bottom-color: #003199;
+			// color: currentColor;
+			color: hsla(0, 0%, 0%, 0.7);
+			border-bottom-color: inherit;
+
+			&:hover {
+				color: black;
+			}
 		}
+
 	}
 }
 
 .monthview tbody td div.booking {
-	padding: 0;
-	transition: width 100ms ease-in, left 100ms ease-in, color 200ms ease-in;
+	box-shadow: 0 0 0 0 #888;
+	transition:
+		width 100ms ease-in,
+		left 100ms ease-in,
+		color 200ms ease-in,
+		box-shadow 200ms ease-in;
 	text-indent: -9999px;
 	&:hover {
 		text-indent: 0;
-		color: inherit;
 		left: 0% !important;
-		width: 100% !important
+		width: 100% !important;
+		box-shadow: 0 0 1em 0 #888;
 	}
 	span.desk {
 		display: block;
@@ -316,7 +354,13 @@ p.email-subject {
 	text-align: center;
 }
 
-span.color-legend-label {
-	padding: 0.2em;
-	border-radius: 0.5em;
+.booking-colors {
+	margin-top: 1.5rem;
+}
+.booking-color-label {
+	padding: .33em .66em;
+	border-radius: 0.33em;
+	color: hsla(0, 0%, 100%, 0.9) !important;
+	font-weight: bold;
+	font-size: .65em;
 }
diff --git a/chrono/manager/templates/chrono/booking_color_legend.html b/chrono/manager/templates/chrono/booking_color_legend.html
index c09df95..24699a8 100644
--- a/chrono/manager/templates/chrono/booking_color_legend.html
+++ b/chrono/manager/templates/chrono/booking_color_legend.html
@@ -1,8 +1,61 @@
 {% load i18n %}
 
-<div>
+<style>
+	{% for color in agenda.booking_colors.all %}
+	.agenda-table tbody td div.booking-{{ color.label|slugify }} {
+		color: #{{ color.code }};
+	}
+	.booking-color-label-{{ color.label|slugify }} {
+		background-color: #{{ color.code }};
+	}
+	{% endfor %}
+
+/*	.agenda-table tbody td div.booking-athletisme {
+		color: hsl(28, 100%, 45%);
+	}
+
+	.agenda-table tbody td div.booking-course-hippique {
+		color: hsl(120, 56.9%, 40%);
+	}
+
+	.agenda-table tbody td div.booking-marathon-de-new-york {
+		color: hsl(359.7, 69.2%, 49.6%);
+	}
+
+	.agenda-table tbody td div.booking-piscine {
+		color: hsl(271.4, 39.4%, 57.3%);
+	}
+
+	.agenda-table tbody td div.booking-default {
+		color: hsl(10.2, 30.2%, 42.2%);
+	}
+
+	.booking-color-label-athletisme {
+		background-color: hsl(28, 100%, 45%);
+	}
+
+	.booking-color-label-course-hippique {
+		background-color: hsl(120, 56.9%, 40%);
+	}
+
+	.booking-color-label-marathon-de-new-york {
+		background-color: hsl(359.7, 69.2%, 49.6%);
+	}
+
+	.booking-color-label-piscine {
+		background-color: hsl(271.4, 39.4%, 57.3%);
+	}
+
+	.booking-color-label-default {
+		background-color: hsl(10.2, 30.2%, 42.2%);
+	}*/
+
+
+</style>
+
+<div class="booking-colors">
 <strong>{% trans "Booking colors:" %}</strong>
 {% for color in agenda.booking_colors.all %}
-<span class="color-legend-label" style="background: #{{ color.code }};">{{ color.label }}</span>
+<span class="booking-color-label booking-color-label-{{ color.label|slugify }}">{{ color.label }}</span>
 {% endfor %}
 </div>
diff --git a/chrono/manager/templates/chrono/manager_agenda_day_view.html b/chrono/manager/templates/chrono/manager_agenda_day_view.html
index 86f6ae5..9e58f9f 100644
--- a/chrono/manager/templates/chrono/manager_agenda_day_view.html
+++ b/chrono/manager/templates/chrono/manager_agenda_day_view.html
@@ -68,11 +68,12 @@
         {% endif %}
 
         {% for booking in desk_info.bookings %}
-          <div class="booking"
-              style="height: {{ booking.css_height }}%; min-height: {{ booking.css_height }}%; top: {{ booking.css_top }}%;{% if booking.color.code %}background:#{{ booking.color.code }};{% endif %}"
+          <div class="booking {% if booking.color.code %}booking-{{ booking.color.label|slugify }}{% endif %}"
+              style="height: {{ booking.css_height }}%; min-height: {{ booking.css_height }}%; top: {{ booking.css_top }}%;"
             ><span class="start-time">{{booking.event.start_datetime|date:"TIME_FORMAT"}}</span>
             <a {% if booking.backoffice_url %}href="{{booking.backoffice_url}}"{% endif %}>{{ booking.meetings_display }}</a>
             <a rel="popup" class="cancel" href="{% url 'chrono-manager-booking-cancel' pk=booking.event.agenda_id booking_pk=booking.pk %}?next={{ request.path }}">{% trans "Cancel" %}</a>
+            {% if booking.color.code %}<span class="booking-color-label booking-color-label-{{ booking.color.label|slugify }}">{{ booking.color.label }}</span>{% endif %}
           </div>
         {% endfor %}
       </td>
diff --git a/chrono/manager/templates/chrono/manager_meetings_agenda_month_view.html b/chrono/manager/templates/chrono/manager_meetings_agenda_month_view.html
index 05e8b3e..a433ed3 100644
--- a/chrono/manager/templates/chrono/manager_meetings_agenda_month_view.html
+++ b/chrono/manager/templates/chrono/manager_meetings_agenda_month_view.html
@@ -34,11 +34,12 @@
       {% endfor %}
 
       {% for slot in day.infos.booked_slots %}
-      <div class="booking" style="left:{{ slot.css_left|stringformat:".1f" }}%;height:{{ slot.css_height|stringformat:".1f" }}%;min-height:{{ slot.css_height|stringformat:".1f" }}%;top:{{ slot.css_top|stringformat:".1f" }}%;width:{{ slot.css_width|stringformat:".1f" }}%;{% if slot.booking.color.code %}background:#{{ slot.booking.color.code }};{% endif %}">
+      <div class="booking {% if slot.booking.color.code %}booking-{{ slot.booking.color.label|slugify }}{% endif %}" style="left:{{ slot.css_left|stringformat:".1f" }}%;height:{{ slot.css_height|stringformat:".1f" }}%;min-height:{{ slot.css_height|stringformat:".1f" }}%;top:{{ slot.css_top|stringformat:".1f" }}%;width:{{ slot.css_width|stringformat:".1f" }}%;">
         <span class="start-time">{{slot.booking.event.start_datetime|date:"TIME_FORMAT"}}</span>
         <a {% if slot.booking.backoffice_url %}href="{{slot.booking.backoffice_url}}"{% endif %}>{{ slot.booking.meetings_display }}</a>
           <a rel="popup" class="cancel" href="{% url 'chrono-manager-booking-cancel' pk=slot.booking.event.agenda_id booking_pk=slot.booking.id %}?next={{ request.path }}">{% trans "Cancel" %}</a>
         {% if not single_desk %}<span class="desk">{{ slot.desk }}</span>{% endif %}
+        {% if slot.booking.color.code %}<span class="booking-color-label booking-color-label-{{ slot.booking.color.label|slugify }}">{{ slot.booking.color.label }}</span>{% endif %}
         </div>
       {% endfor %}
       {% endif %}
-- 
2.20.1

