Refs #3092 #2909: adding color attribute, adding colorSelector component

7 files changed, 60 insertions, 7 deletions

diff --git a/app/assets/javascripts/forms.coffee b/app/assets/javascripts/forms.coffee
index 9d884edcd..679f92a54 100644
--- a/app/assets/javascripts/forms.coffee
+++ b/app/assets/javascripts/forms.coffee
@@ -30,9 +30,21 @@ isEdge = !isIE && !!window.StyleMedia
   if isIE || isEdge
     $('.formSubmitr').off()
 
+@colorSelector = ->
+  $('.form-group .dropdown.color_selector').each ->
+    selectedStatus = $(this).children('.dropdown-toggle').children('.fa-circle')
+
+    $(this).on 'click', "input[type='radio']", (e) ->
+      selectedValue = e.currentTarget.value
+      if selectedValue == ''
+        $(selectedStatus).css('color', 'transparent')
+      else
+        $(selectedStatus).css('color', selectedValue)
+
 $(document).on 'ready page:load', togglableFilter
 $(document).on 'ready page:load', submitMover
 $(document).on 'ready page:load', switchInput
+$(document).on 'ready page:load', colorSelector
 
 if isIE || isEdge
   $(document).on 'click', '.formSubmitr', (e)->
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index f128512f5..07758d56c 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -5,7 +5,7 @@
 .btn
   font-weight: 700
 
-  .fa + span
+  .fa + span:not(.caret)
     padding-left: 0.5em
   span + .fa
     padding-left: 0.5em
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index f2c76c9c1..6d841d5d4 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -95,6 +95,39 @@ input
         + [class*='col-sm-']
           float: right
 
+// Colors dropdown
+.dropdown.color_selector
+  .btn.btn-default
+    &, &:hover, &:focus
+      border: 1px solid #cccccc
+      background-color: #fff
+      font-weight: normal
+      color: $darkgrey
+
+  .dropdown-menu
+    position: absolute
+    margin: 2px 0 0 0
+    min-width: 56px
+
+    > .radio
+      position: relative
+      padding: 3px 20px
+      // cursor: pointer
+
+      &:hover, &:focus
+        background-color: #f5f5f5
+
+      > label
+        padding: 0
+
+        input.color_selector, input[type='radio']
+          position: absolute
+          cursor: pointer
+          z-index: 1
+          width: 100%
+          margin: 0
+          opacity: 0
+
 // Search bar
 .search_bar
   position: relative
diff --git a/app/controllers/time_tables_controller.rb b/app/controllers/time_tables_controller.rb
index c5aa7280a..2e03485f2 100644
--- a/app/controllers/time_tables_controller.rb
+++ b/app/controllers/time_tables_controller.rb
@@ -140,7 +140,7 @@ class TimeTablesController < ChouetteController
       :object_version,
       :creator_id,
       :calendar_id,
-      :version, :comment,
+      :version, :comment, :color,
       :int_day_types,
       :monday,
       :tuesday,
diff --git a/app/models/chouette/time_table.rb b/app/models/chouette/time_table.rb
index f018382fe..cc866c4dc 100644
--- a/app/models/chouette/time_table.rb
+++ b/app/models/chouette/time_table.rb
@@ -466,4 +466,3 @@ class Chouette::TimeTable < Chouette::TridentActiveRecord
     tt
   end
 end
-
diff --git a/app/views/time_tables/_form.html.slim b/app/views/time_tables/_form.html.slim
index fdb735d12..91fb6e09c 100644
--- a/app/views/time_tables/_form.html.slim
+++ b/app/views/time_tables/_form.html.slim
@@ -3,10 +3,19 @@
   .row
     .col-lg-12
       = form.input :comment, :input_html => { :title => t("formtastic.titles#{format_restriction_for_locales(@referential)}.time_table.comment")}
-      = form.input :tag_list, as: :tags
+      
+      .form-group
+        = form.label @time_table.human_attribute_name(:color), required: false, class: 'control-label col-sm-4'
+      
+        .col-sm-8
+          .dropdown.color_selector
+            button.btn.btn-default.dropdown-toggle type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
+              span.fa.fa-circle.mr-xs style="color:#{@time_table.color.nil? ? 'transparent' : @time_table.color}"
+              span.caret
 
-      / = form.input :version
-      / = form.input :objectid, :required => !@time_table.new_record?, :input_html => { :title => t("formtastic.titles#{format_restriction_for_locales(@referential)}.time_table.objectid")}
+            = form.input :color, as: :radio_buttons, label: false, collection: ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"], input_html: {class: 'color_selector'}, label_method: lambda{|c| ("<span class='fa fa-circle' style='color:" + (c.empty? ? 'transparent' : c) + "'></span>").html_safe}, wrapper_html: { class: 'dropdown-menu', 'aria-labelledby': "dropdownMenu1"}, include_blank: true
+
+      = form.input :tag_list, as: :tags
 
       .form-group
         label.control-label.col-sm-4
diff --git a/app/views/time_tables/show.html.slim b/app/views/time_tables/show.html.slim
index 0cfb49e80..d0a145f36 100644
--- a/app/views/time_tables/show.html.slim
+++ b/app/views/time_tables/show.html.slim
@@ -33,7 +33,7 @@
             'Etiquettes' => @time_table.tag_list,
             'Modèle de calendrier' => (@time_table.calendar ? link_to(@time_table.calendar.name, @time_table.calendar) : '-'),
             "Journées d'application pour les périodes ci-dessous" => %w(monday tuesday wednesday thursday friday saturday sunday).collect{ |d| content_tag(:span, t("calendars.days.#{d}"), class: "label label-default #{@time_table.send(d) ? '' : 'disabled'}") }.join.html_safe,
-            'Couleur associée' => '-' }
+            'Couleur associée' => content_tag(:span, '', class: 'fa fa-circle', style: "color:#{@time_table.try(:color)}") }
 
     .row
       .col-lg-12.mb-sm