Projet

Général

Profil

0001-new-calendar-colors-proposition.patch

Thomas Jund, 01 décembre 2020 14:54

Télécharger (9,75 ko)

Voir les différences: 

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(-)
chrono/manager/static/css/style.scss
107 107 
	margin-top: 0;
108 108 
}
109 109 

  		




  
  110
  
    

  		




  
  111
  
    
table.agenda-table {

  		




  
  112
  
    
	border-spacing: 1vw 0;

  		




  
  113
  
    
	table-layout: fixed;

  		




  
  114
  
    
	background-color: hsla(0, 0%, 0%, 0.06);

  		




  
  115
  
    
	padding: 0.5em 0;

  		




  
  116
  
    
	padding-bottom: 2em;

  		




  
  117
  
    
}

  		




  
  118
  
    

  		




  110
  119
  
    
.agenda-table thead th {

  		




  111
  
  
    
	width: 14vw;

  		




  112
  120
  
    
	padding-bottom: 1ex;

  		




  113
  121
  
    
	font-weight: normal;

  		




  114
  122
  
    
}

  		




  ......




  126
  134
  
    
	box-sizing: border-box;

  		




  127
  135
  
    
	padding: 1.2ex 2ex;

  		




  128
  136
  
    
	vertical-align: top;

  		




  129
  
  
    
	width: 8ex;

  		




  130
  137
  
    
	font-weight: normal;

  		




  131
  138
  
    
	&.hour {

  		




  132
  
  
    
		width: 5%;

  		




  133
  139
  
    
		text-align: left;

  		




  134
  140
  
    
	}

  		




  135
  141
  
    
	a {

  		




  ......




  137
  143
  
    
		border: 0;

  		




  138
  144
  
    
	}

  		




  139
  145
  
    
	&.weekday {

  		




  140
  
  
    
		width: 12.5%;

  		




  141
  146
  
    
		padding-top: 3rem;

  		




  142
  147
  
    
		&.today {

  		




  143
  148
  
    
			font-weight: bold;

  		




  ......




  149
  154
  
    
	// don't add extra padding on top row

  		




  150
  155
  
    
	padding-top: 1ex;

  		




  151
  156
  
    
}

  		




  
  157
  
    
// hour cells width

  		




  
  158
  
    
.agenda-table thead tr:first-child td:first-child,

  		




  
  159
  
    
.agenda-table tbody tr:first-child th:not(.weekday) {

  		




  
  160
  
    
	width: 5em;

  		




  
  161
  
    
}

  		




  152
  162
  
    

  		




  153
  163
  
    
.agenda-table tbody tr.odd th.hour,

  		




  154
  164
  
    
.agenda-table tbody tr.odd td {

  		




  155
  
  
    
	background: #f0f0f0;

  		




  
  165
  
    
	background: hsla(0, 0%, 0%, 0.06);

  		




  156
  166
  
    
	@media print {

  		




  157
  167
  
    
		border-top: 1px solid #aaa;

  		




  158
  168
  
    
	}

  		




  159
  169
  
    
}

  		




  160
  170
  
    

  		




  161
  171
  
    
.agenda-table tbody tr.odd td.other-month {

  		




  162
  
  
    
	background: #f8f8f8;

  		




  
  172
  
    
	background: transparent;

  		




  163
  173
  
    
}

  		




  164
  174
  
    

  		




  165
  175
  
    

  		




  ......




  170
  180
  
    
	border: 0;

  		




  171
  181
  
    
}

  		




  172
  182
  
    

  		




  173
  
  
    
.agenda-table.month-view {

  		




  174
  
  
    
	border-spacing: 0;

  		




  175
  
  
    
}

  		




  176
  
  
    

  		




  177
  
  
    
.agenda-table.month-view tbody td {

  		




  178
  
  
    
	border: 5px solid white;

  		




  179
  
  
    
	border-width: 0 5px;

  		




  180
  
  
    
}

  		




  181
  
  
    

  		




  182
  183
  
    
@for $i from 1 through 60 {

  		




  183
  184
  
    
	table.hourspan-#{$i} tbody td {

  		




  184
  185
  
    
		height: calc(#{$i} * 2.5em);

  		




  ......




  192
  193
  
    
	overflow: hidden;

  		




  193
  194
  
    
	&.opening-hours, &.exception-hours {

  		




  194
  195
  
    
		z-index: 1;

  		




  195
  
  
    
		background: #b1ea4d linear-gradient(135deg, #b1ea4d 0%, #459522 100%);

  		




  196
  
  
    
		opacity: 0.6;

  		




  
  196
  
    
		background:

  		




  
  197
  
    
			linear-gradient(

  		




  
  198
  
    
				135deg,

  		




  
  199
  
    
				hsl(100, 20%, 97%) 20%,

  		




  
  200
  
    
				hsla(100, 30%, 99%, 0.7) 40%,

  		




  
  201
  
    
				hsla(100, 40%, 94%, 0.7) 60%,

  		




  
  202
  
    
				hsl(100, 55%, 93%) 100%)

  		




  
  203
  
    
			fixed;

  		




  197
  204
  
    
		left: 0.5ex;

  		




  198
  205
  
    
		width: calc(100% - 1ex);

  		




  199
  206
  
    
	}

  		




  
  207
  
    
	&.opening-hours {

  		




  
  208
  
    
		border-left: 0.5em solid white;

  		




  
  209
  
    
	}

  		




  200
  210
  
    
	&.exception-hours {

  		




  201
  
  
    
		background: #fee linear-gradient(135deg, #fee 0%, #fdd 100%);

  		




  
  211
  
    
		background:

  		




  
  212
  
    
			repeating-linear-gradient(

  		




  
  213
  
    
				135deg,

  		




  
  214
  
    
				hsla(10, 10%, 75%, 0.7) 0,

  		




  
  215
  
    
				hsla(10, 10%, 80%, 0.55) 10px,

  		




  
  216
  
    
				transparent 11px,

  		




  
  217
  
    
				transparent 20px);

  		




  202
  218
  
    
		text-align: center;

  		




  203
  219
  
    
	}

  		




  204
  220
  
    
	&.booking {

  		




  205
  
  
    
		background: #eef linear-gradient(135deg, #eef 0%, #ddf 100%);

  		




  206
  
  
    
		box-shadow: 0 0 1px 0 #2d2dad;

  		




  207
  
  
    
		width: calc(100% - 2ex);

  		




  208
  
  
    
		border: 1px solid #aaa;

  		




  
  221
  
    
		left: 0.5ex;

  		




  
  222
  
    
		color: #5382CF;

  		




  
  223
  
    
		background:

  		




  
  224
  
    
			linear-gradient(

  		




  
  225
  
    
				110deg,

  		




  
  226
  
    
				hsla(0, 0%, 100%, 0.85) 0%,

  		




  
  227
  
    
				hsla(0, 0%, 100%, 0.65) 100%)

  		




  
  228
  
    
			currentColor

  		




  
  229
  
    
			fixed;

  		




  
  230
  
    
		width: calc(100% - 1ex);

  		




  
  231
  
    
		border-color: currentColor;

  		




  
  232
  
    
		border-left: .5em solid currentcolor;

  		




  
  233
  
    

  		




  209
  234
  
    
		z-index: 2;

  		




  210
  235
  
    
		&:hover {

  		




  211
  236
  
    
			z-index: 3;

  		




  212
  237
  
    
			height: auto !important;

  		




  213
  238
  
    
		}

  		




  
  239
  
    
		> * {

  		




  
  240
  
    
			color: hsla(0, 0%, 0%, 0.6);

  		




  
  241
  
    
		}

  		




  214
  242
  
    
		a {

  		




  215
  
  
    
			color: #003199;

  		




  216
  
  
    
			border-bottom-color: #003199;

  		




  
  243
  
    
			// color: currentColor;

  		




  
  244
  
    
			color: hsla(0, 0%, 0%, 0.7);

  		




  
  245
  
    
			border-bottom-color: inherit;

  		




  
  246
  
    

  		




  
  247
  
    
			&:hover {

  		




  
  248
  
    
				color: black;

  		




  
  249
  
    
			}

  		




  217
  250
  
    
		}

  		




  
  251
  
    

  		




  218
  252
  
    
	}

  		




  219
  253
  
    
}

  		




  220
  254
  
    

  		




  221
  255
  
    
.monthview tbody td div.booking {

  		




  222
  
  
    
	padding: 0;

  		




  223
  
  
    
	transition: width 100ms ease-in, left 100ms ease-in, color 200ms ease-in;

  		




  
  256
  
    
	box-shadow: 0 0 0 0 #888;

  		




  
  257
  
    
	transition:

  		




  
  258
  
    
		width 100ms ease-in,

  		




  
  259
  
    
		left 100ms ease-in,

  		




  
  260
  
    
		color 200ms ease-in,

  		




  
  261
  
    
		box-shadow 200ms ease-in;

  		




  224
  262
  
    
	text-indent: -9999px;

  		




  225
  263
  
    
	&:hover {

  		




  226
  264
  
    
		text-indent: 0;

  		




  227
  
  
    
		color: inherit;

  		




  228
  265
  
    
		left: 0% !important;

  		




  229
  
  
    
		width: 100% !important

  		




  
  266
  
    
		width: 100% !important;

  		




  
  267
  
    
		box-shadow: 0 0 1em 0 #888;

  		




  230
  268
  
    
	}

  		




  231
  269
  
    
	span.desk {

  		




  232
  270
  
    
		display: block;

  		




  ......




  316
  354
  
    
	text-align: center;

  		




  317
  355
  
    
}

  		




  318
  356
  
    

  		




  319
  
  
    
span.color-legend-label {

  		




  320
  
  
    
	padding: 0.2em;

  		




  321
  
  
    
	border-radius: 0.5em;

  		




  
  357
  
    
.booking-colors {

  		




  
  358
  
    
	margin-top: 1.5rem;

  		




  
  359
  
    
}

  		




  
  360
  
    
.booking-color-label {

  		




  
  361
  
    
	padding: .33em .66em;

  		




  
  362
  
    
	border-radius: 0.33em;

  		




  
  363
  
    
	color: hsla(0, 0%, 100%, 0.9) !important;

  		




  
  364
  
    
	font-weight: bold;

  		




  
  365
  
    
	font-size: .65em;

  		




  322
  366
  
    
}

  		












  

    
      chrono/manager/templates/chrono/booking_color_legend.html
    
  





  1
  1
  
    
{% load i18n %}

  		




  2
  2
  
    

  		




  3
  
  
    
<div>

  		




  
  3
  
    
<style>

  		




  
  4
  
    
	{% for color in agenda.booking_colors.all %}

  		




  
  5
  
    
	.agenda-table tbody td div.booking-{{ color.label|slugify }} {

  		




  
  6
  
    
		color: #{{ color.code }};

  		




  
  7
  
    
	}

  		




  
  8
  
    
	.booking-color-label-{{ color.label|slugify }} {

  		




  
  9
  
    
		background-color: #{{ color.code }};

  		




  
  10
  
    
	}

  		




  
  11
  
    
	{% endfor %}

  		




  
  12
  
    

  		




  
  13
  
    
/*	.agenda-table tbody td div.booking-athletisme {

  		




  
  14
  
    
		color: hsl(28, 100%, 45%);

  		




  
  15
  
    
	}

  		




  
  16
  
    

  		




  
  17
  
    
	.agenda-table tbody td div.booking-course-hippique {

  		




  
  18
  
    
		color: hsl(120, 56.9%, 40%);

  		




  
  19
  
    
	}

  		




  
  20
  
    

  		




  
  21
  
    
	.agenda-table tbody td div.booking-marathon-de-new-york {

  		




  
  22
  
    
		color: hsl(359.7, 69.2%, 49.6%);

  		




  
  23
  
    
	}

  		




  
  24
  
    

  		




  
  25
  
    
	.agenda-table tbody td div.booking-piscine {

  		




  
  26
  
    
		color: hsl(271.4, 39.4%, 57.3%);

  		




  
  27
  
    
	}

  		




  
  28
  
    

  		




  
  29
  
    
	.agenda-table tbody td div.booking-default {

  		




  
  30
  
    
		color: hsl(10.2, 30.2%, 42.2%);

  		




  
  31
  
    
	}

  		




  
  32
  
    

  		




  
  33
  
    
	.booking-color-label-athletisme {

  		




  
  34
  
    
		background-color: hsl(28, 100%, 45%);

  		




  
  35
  
    
	}

  		




  
  36
  
    

  		




  
  37
  
    
	.booking-color-label-course-hippique {

  		




  
  38
  
    
		background-color: hsl(120, 56.9%, 40%);

  		




  
  39
  
    
	}

  		




  
  40
  
    

  		




  
  41
  
    
	.booking-color-label-marathon-de-new-york {

  		




  
  42
  
    
		background-color: hsl(359.7, 69.2%, 49.6%);

  		




  
  43
  
    
	}

  		




  
  44
  
    

  		




  
  45
  
    
	.booking-color-label-piscine {

  		




  
  46
  
    
		background-color: hsl(271.4, 39.4%, 57.3%);

  		




  
  47
  
    
	}

  		




  
  48
  
    

  		




  
  49
  
    
	.booking-color-label-default {

  		




  
  50
  
    
		background-color: hsl(10.2, 30.2%, 42.2%);

  		




  
  51
  
    
	}*/

  		




  
  52
  
    

  		




  
  53
  
    

  		




  
  54
  
    
</style>

  		




  
  55
  
    

  		




  
  56
  
    
<div class="booking-colors">

  		




  4
  57
  
    
<strong>{% trans "Booking colors:" %}</strong>

  		




  5
  58
  
    
{% for color in agenda.booking_colors.all %}

  		




  6
  
  
    
<span class="color-legend-label" style="background: #{{ color.code }};">{{ color.label }}</span>

  		




  
  59
  
    
<span class="booking-color-label booking-color-label-{{ color.label|slugify }}">{{ color.label }}</span>

  		




  7
  60
  
    
{% endfor %}

  		




  8
  61
  
    
</div>

  		












  

    
      chrono/manager/templates/chrono/manager_agenda_day_view.html
    
  





  68
  68
  
    
        {% endif %}

  		




  69
  69
  
    

  		




  70
  70
  
    
        {% for booking in desk_info.bookings %}

  		




  71
  
  
    
          <div class="booking"

  		




  72
  
  
    
              style="height: {{ booking.css_height }}%; min-height: {{ booking.css_height }}%; top: {{ booking.css_top }}%;{% if booking.color.code %}background:#{{ booking.color.code }};{% endif %}"

  		




  
  71
  
    
          <div class="booking {% if booking.color.code %}booking-{{ booking.color.label|slugify }}{% endif %}"

  		




  
  72
  
    
              style="height: {{ booking.css_height }}%; min-height: {{ booking.css_height }}%; top: {{ booking.css_top }}%;"

  		




  73
  73
  
    
            ><span class="start-time">{{booking.event.start_datetime|date:"TIME_FORMAT"}}</span>

  		




  74
  74
  
    
            <a {% if booking.backoffice_url %}href="{{booking.backoffice_url}}"{% endif %}>{{ booking.meetings_display }}</a>

  		




  75
  75
  
    
            <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>

  		




  
  76
  
    
            {% if booking.color.code %}<span class="booking-color-label booking-color-label-{{ booking.color.label|slugify }}">{{ booking.color.label }}</span>{% endif %}

  		




  76
  77
  
    
          </div>

  		




  77
  78
  
    
        {% endfor %}

  		




  78
  79
  
    
      </td>

  		












  

    
      chrono/manager/templates/chrono/manager_meetings_agenda_month_view.html
    
  





  34
  34
  
    
      {% endfor %}

  		




  35
  35
  
    

  		




  36
  36
  
    
      {% for slot in day.infos.booked_slots %}

  		




  37
  
  
    
      <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 %}">

  		




  
  37
  
    
      <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" }}%;">

  		




  38
  38
  
    
        <span class="start-time">{{slot.booking.event.start_datetime|date:"TIME_FORMAT"}}</span>

  		




  39
  39
  
    
        <a {% if slot.booking.backoffice_url %}href="{{slot.booking.backoffice_url}}"{% endif %}>{{ slot.booking.meetings_display }}</a>

  		




  40
  40
  
    
          <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>

  		




  41
  41
  
    
        {% if not single_desk %}<span class="desk">{{ slot.desk }}</span>{% endif %}

  		




  
  42
  
    
        {% if slot.booking.color.code %}<span class="booking-color-label booking-color-label-{{ slot.booking.color.label|slugify }}">{{ slot.booking.color.label }}</span>{% endif %}

  		




  42
  43
  
    
        </div>

  		




  43
  44
  
    
      {% endfor %}

  		




  44
  45
  
    
      {% endif %}

  		




  45
  
  
    
-