Add legend to calendar for time_tables

4 files changed, 55 insertions, 23 deletions

diff --git a/app/assets/stylesheets/main/calendar.css.scss b/app/assets/stylesheets/main/calendar.css.scss
index 3d86dbfa1..9d597c544 100644
--- a/app/assets/stylesheets/main/calendar.css.scss
+++ b/app/assets/stylesheets/main/calendar.css.scss
@@ -10,12 +10,15 @@
     white: ffffff
 */
 
-/* TODO */
+$selected_period_color: #ffbd2b;
+$selected_date_color: #8fc861;
+$excluded_date_color: #ff8f85;
+$overlap_date_color: #c082f4;
 
 .year_choice{
     font-size: 16px;
     font-weight: bold;
-    margin: 20px 0 0 0;
+    margin: 10px 0 0 0;
     text-align: center;
     
     .year{ 
@@ -25,8 +28,7 @@
 
 }
 
-.calendar_helper{ 
-    
+.calendar_helper{     
     padding: auto; 
 }
 
@@ -72,7 +74,7 @@ th.monthName {
     background-color: #333333;
 }
 
-.day, .specialDay, .selected_period, .selected_date, .overlap_date {
+.day, .specialDay {
     border-bottom: 1px solid #111111;
     padding: 0.7em;
     border-right: 1px solid #111111;
@@ -81,13 +83,13 @@ th.monthName {
 
 .specialDay { background-color: #a8a8a8 !important; }
 
-.selected_period  { background-color: #ffbd2b !important; }
+.selected_period  { background-color: $selected_period_color !important; }
 
-.selected_date  { background-color: #8fc861 !important; }
+.selected_date  { background-color: $selected_date_color !important; }
 
-.excluded_date  { background-color: #ff8f85 !important; }
+.excluded_date  { background-color: $excluded_date_color !important; }
 
-.overlap_date { background-color: #c082f4 !important; }
+.overlap_date { background-color: $overlap_date_color !important; }
 
 .specialDay, .selected_period, .selected_date, .overlap_date, .excluded_date {
     a, a:visited, a:hover {
@@ -96,9 +98,9 @@ th.monthName {
                   }
 }
 
-.specialDay a:hover, selected_period a:hover, selected_date a:hover, excluded_date a:hover, overlap_date a:hover {
-  color: black;
-}
+.specialDay a:hover, selected_period a:hover, selected_date a:hover, excluded_date a:hover, overlap_date a:hover{
+                                                                                                color: black;
+                                                                                            }
 
 .weekendDay {
     background-color: #787888;
@@ -106,4 +108,6 @@ th.monthName {
 .today {
 	  background-color: white;
 	  color: black;
-}
\ No newline at end of file
+}
+
+
diff --git a/app/assets/stylesheets/main/time_tables.css.scss b/app/assets/stylesheets/main/time_tables.css.scss
index 12bedcda3..6e26b6eb4 100644
--- a/app/assets/stylesheets/main/time_tables.css.scss
+++ b/app/assets/stylesheets/main/time_tables.css.scss
@@ -13,6 +13,21 @@
 
     .summary{
         margin-top: 20px;
+
+        p label {
+            font-weight: bold;
+        }
+    }
+
+    .legend{
+        margin-top: 20px;
+
+        .title{ font-weight: bold; }            
+        
+        .excluded_date, .overlap_date, .selected_date, .selected_period{
+            margin-left: 20px;
+            margin-right: 5px;
+        }
     }
     
     .typeahead.dropdown-menu {
@@ -62,10 +77,6 @@
     .actions {
         float: right;
     }
-    
-    .summary p label {
-        font-weight: bold;
-    }
 }
 
 #workspace.time_tables.edit,#workspace.time_tables.new,#workspace.time_tables.create,#workspace.time_tables.update
diff --git a/app/views/time_tables/_show_time_table.html.erb b/app/views/time_tables/_show_time_table.html.erb
index d2366f64e..e0842d754 100644
--- a/app/views/time_tables/_show_time_table.html.erb
+++ b/app/views/time_tables/_show_time_table.html.erb
@@ -19,7 +19,14 @@
   </ul>
   <div id="my-tab-content" class="tab-content">
     <div class="tab-pane active" id="time_tables">
-      <div class="calendars content">
+      <div class="well legend">
+        <span class="title"><%= t(".legend") %></span>
+        <span class="label excluded_date">X</span><%= t(".excluded_date") %>
+        <span class="label overlap_date">X</span><%= t(".overlap_date") %>
+        <span class="label selected_date">X</span><%= t(".selected_date") %>
+        <span class="label selected_period">X</span><%= t(".selected_period") %>
+      </div>
+      <div id="calendars">
         <div class="year_choice">
           <span class="previous"> <%= link_to("<", referential_time_table_path(@referential, @time_table, :year => (@year - 1)) ) %> </span>
           <span class="year"> <%= "#{@year}" %> </span>
@@ -30,13 +37,13 @@
               (1..12).each do |month|
               cal << calendar(:year => @year, :month => month, :first_day_of_week => 1) do |d|
           if @time_table.excluded_date?(d)
-          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "excluded_date"}]
+          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "day excluded_date"}]
           elsif @time_table.include_in_overlap_dates?(d)
-          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "overlap_date"}]
+          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "day overlaped_date"}]
           elsif @time_table.include_in_dates?(d)
-          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "selected_date"}]
+          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "day selected_date"}]
           elsif @time_table.include_in_periods?(d)
-          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "selected_period"}]
+          [link_to(d.mday, edit_referential_time_table_path(@referential, @time_table) ), {:class => "day selected_period"}]
           end
           end
           end
diff --git a/config/locales/time_tables.yml b/config/locales/time_tables.yml
index d4e0c5102..0e15516f6 100644
--- a/config/locales/time_tables.yml
+++ b/config/locales/time_tables.yml
@@ -34,7 +34,12 @@ en:
       combine: "Apply"
     show_time_table:
       resume: "From %{start_date} to %{end_date}"
-      resume_empty: "Empty timetable"      
+      resume_empty: "Empty timetable"
+      legend: "Legend : "
+      excluded_date: "Excluded date"
+      overlap_date: "Overlap date" 
+      selected_date: "Selected date"
+      selected_period: "Selected period"
     index:
       title: "Timetables"
       comment: "Search by name"
@@ -121,6 +126,11 @@ fr:
     show_time_table:
       resume: "Validité comprise du %{start_date} au %{end_date}"
       resume_empty: "Calendrier vide"
+      legend: "Légende : "
+      excluded_date: "Date exclue"
+      overlap_date: "Date en doublon" 
+      selected_date: "Date sélectionnée"
+      selected_period: "Période sélectionnée"
     index:
       comment: "Recherche par nom"
       tag_search: "Tags : vacances,jour fériés"