Refs #3542 @2h; Various UI improvements (hopefully)

6 files changed, 94 insertions, 30 deletions

diff --git a/app/assets/stylesheets/base/_config.sass b/app/assets/stylesheets/base/_config.sass
index 2c226357f..0fff1dd9c 100644
--- a/app/assets/stylesheets/base/_config.sass
+++ b/app/assets/stylesheets/base/_config.sass
@@ -17,6 +17,7 @@ $blue: #007fbb
 $darkgrey: #4b4b4b
 $grey: #a4a4a4
 $lightgrey: lighten($grey, 25)
+$lightergrey: lighten($lightgrey,5)
 
 $green: #70b12b
 $red: #da2f36
diff --git a/app/assets/stylesheets/components/_referential_overview.sass b/app/assets/stylesheets/components/_referential_overview.sass
index 77f60a8e7..af1baf4ec 100644
--- a/app/assets/stylesheets/components/_referential_overview.sass
+++ b/app/assets/stylesheets/components/_referential_overview.sass
@@ -1,12 +1,26 @@
 .referential-overview
   $left-size: 100px
+  $line-height: 57px
   margin-top: 50px
+  overflow: hidden
   .time-travel, .filters
-    background-color: $lightgrey
+    background-color: $lightergrey
     padding: 10px
     float: right
     border-top-left-radius: 10px
     border-top-right-radius: 10px
+    border: 1px solid $lightgrey
+    border-bottom: none
+    position: relative
+    &:after
+      position: absolute
+      content: ""
+      left: 0
+      top: 100%
+      right: 0
+      height: 10px
+      box-shadow: 0 0 10px rgba(0,0,0,0.5)
+      z-index: 1
   .time-travel
     a.btn:first-child
       border-right: 1px solid $grey
@@ -18,9 +32,6 @@
     float: left
     max-width: 66%
     padding: 0
-    background: transparentize(#cbac3e, 0.8)
-    border: 1px solid $grey
-    border-bottom: none
     form
       background: transparent
       display: flex
@@ -30,7 +41,7 @@
         border-color: $grey
         width: auto
         flex: 1 1
-        padding: 11px
+        padding: 12px 11px 11px
         .input-group-btn
           right: 10px
         &.togglable
@@ -40,16 +51,19 @@
             top: 7px
 
   .overview-table
+    position: relative
+    z-index: 2
     border: 1px solid $grey
     clear: both
     display: flex
+    background: white
     .head
       height: $left-size
     .line
-      height: 80px
+      height: $line-height
     .left
       flex: 0 0
-      background: $lightgrey
+      background: $lightergrey
       min-width: $left-size
       overflow: hidden
       border-right: 1px solid white
@@ -79,7 +93,7 @@
           width: 0
           content: ""
       .line
-        padding: 15px 10px 10px
+        padding: 5px 10px
         border-bottom: 1px solid $grey
         font-size: 0.8em
         &:last-child
@@ -112,13 +126,11 @@
 
         .company, .mode
           font-size: 0.9em
-          margin-top: 5px
           white-space: nowrap
           text-overflow: ellipsis
           overflow: hidden
-
+          margin-top: -2px
         .mode
-          margin-top: 0
           text-transform: uppercase
           color: $grey
           font-weight: bold
@@ -132,7 +144,7 @@
         position: relative
         &:after, &:before
           opacity: 0
-          transition: opacity 0.5s
+          // transition: opacity 0.5s
           content: ""
           position: absolute
           left: -1000px
@@ -148,8 +160,8 @@
           height: 100%
           transition: margin 0.5s
           .week-span
-            left: 5px
-            top: 10px
+            left: 15px
+            top: 15px
             right: 30px
             white-space: nowrap
             overflow: hidden
@@ -157,8 +169,8 @@
             position: absolute
 
           .week-number
-            background-color: lightgrey
-            color: white
+            background-color: $lightgrey
+            color: $grey
             position: absolute
             top: 0
             right: 0
@@ -205,7 +217,7 @@
             &:first-child
               border: none
             &.weekend
-              background: $lightgrey
+              background: $lightergrey
             &.today, &:hover
               color: $blue
               background-color: transparentize($blue, 0.7)
@@ -227,14 +239,40 @@
         border-bottom: 1px solid $grey
         position: relative
         overflow: hidden
+
         &:last-child
           border-bottom: none
 
       .period
         height: 100%
         top: 0
-        background: rgb(219, 249, 196)
+        background: #aedd8a
         position: absolute
+        box-shadow: 0 0 10px rgba(0,0,0,0.5)
+        z-index: 2
+        .title
+          position: absolute
+          left: 12px
+          top: 50%
+          margin-top: -6px
+          transform: translateY(-50%)
+          background-color: transparentize(white, 0.5)
+          padding: 5px
+          font-size: 0.7em
+          border-radius: 5px
+          transition: margin-left 0.5s
+          max-width: calc(100% - 24px)
+          margin-right: 12px
+        &:after
+          content: ""
+          position: absolute
+          bottom: 1px
+          left: 0
+          right: 0
+          height: 10px
+          background: white
+          opacity: 0.25
+          z-index: 3
         &:before
           content: ""
           border-right: 1px dashed $grey
@@ -242,13 +280,19 @@
           bottom: -100%
           position: absolute
           right: -1px
-          z-index: 3
+          z-index: 4
+        &:hover
+          &:after
+            opacity: 0.5
+          .title
+            background-color: transparentize(white, 0.2)
         &.empty
+          z-index: 1
           background: rgb(244, 67, 67)
-          background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#e49393 10px,#e49393 20px)
+          background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 12px,#e49393 12px,#e49393 25px)
           &.accepted
             background: #f19039
-            background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#f19039 10px,#f19039 20px)
+            background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 12px,#f19039 12px,#f19039 25px)
 
   &.sticky
     .time-travel
diff --git a/app/javascript/referential_overview/index.coffee b/app/javascript/referential_overview/index.coffee
index c9a266dea..31a689273 100644
--- a/app/javascript/referential_overview/index.coffee
+++ b/app/javascript/referential_overview/index.coffee
@@ -40,11 +40,12 @@ class window.ReferentialOverview
     @currentOffset = 0
     $(document).scroll (e)=>
       @documentScroll(e)
+    @documentScroll pageY: $(document).scrollTop()
 
   showDay: (date)->
     day = @container.find(".day.#{date}")
     offset = day.offset().left
-    parentOffset = @container.find(".right .inner").offset().left
+    parentOffset = @currentOffset
     @scrollTo parentOffset - offset
 
   currentOffset: ->
@@ -72,7 +73,21 @@ class window.ReferentialOverview
     @container.find(".right .inner .lines").css "margin-left": "#{@currentOffset}px"
     @container.find(".head .week:first-child").css "margin-left", "#{@currentOffset}px"
     @timeTravel.scrolledTo 1 - (@minOffset() - @currentOffset) / @minOffset()
-
+    setTimeout =>
+      @movePeriodTitles()
+    , 600
+
+  movePeriodTitles: ->
+    @_right_offset ||= @container.find('.right').offset().left
+    @container.find(".shifted").removeClass("shifted").css "margin-left", 0
+    @container.find(".right .line").each (i, l) =>
+      $(l).find(".period").each (i, _p) =>
+        p = $(_p)
+        offset = parseInt(p.css("left")) + @currentOffset
+        if offset < 0 && - offset < p.width()
+          offset = Math.min(-offset, p.width() - 100)
+          p.find(".title").addClass("shifted").css "margin-left", offset + "px"
+          return
 
   documentScroll: (e)->
     if @sticky
diff --git a/app/views/merges/show.html.slim b/app/views/merges/show.html.slim
index 47e5aa029..a94552c0d 100644
--- a/app/views/merges/show.html.slim
+++ b/app/views/merges/show.html.slim
@@ -12,3 +12,6 @@
             @merge.class.human_attribute_name(:created_at) => @merge.created_at ? l(@merge.created_at) : '-',
             @merge.class.human_attribute_name(:started_at) => @merge.started_at ? l(@merge.started_at) : '-',
             @merge.class.human_attribute_name(:ended_at) => @merge.ended_at ? l(@merge.ended_at) : '-' }
+
+    - if resource.output.current
+      = referential_overview resource.output.current
diff --git a/app/views/referentials/_overview.html.slim b/app/views/referentials/_overview.html.slim
index e9a799764..20bfd6c15 100644
--- a/app/views/referentials/_overview.html.slim
+++ b/app/views/referentials/_overview.html.slim
@@ -9,18 +9,18 @@
               span.fa.fa-search
         .form-group.togglable
           = f.label Chouette::Line.human_attribute_name(:company_id), required: false, class: 'control-label'
-          = f.input :company_id_eq_any, collection: overview.referential.companies.order(name: :asc), as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + l.name + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'}
+          = f.input :company_id_eq_any, collection: overview.referential_lines.map(&:company).uniq.sort_by(&:name), as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + l.name + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'}
 
         .form-group.togglable
           = f.label Chouette::Line.human_attribute_name(:transport_mode), required: false, class: 'control-label'
-          = f.input :transport_mode_eq_any, collection: StifTransportModeEnumerations.sorted_transport_modes, as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + t("enumerize.transport_mode.#{l}") + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'}
+          = f.input :transport_mode_eq_any, collection: overview.referential_lines.map(&:transport_mode).uniq.sort, as: :check_boxes, label: false, label_method: lambda{|l| ("<span>" + t("enumerize.transport_mode.#{l}") + "</span>").html_safe}, required: false, wrapper_html: { class: 'checkbox_list'}
 
       .actions
         = link_to 'Effacer', @workbench, class: 'btn btn-link'
         = f.submit 'Filtrer', class: 'btn btn-default'
 
   .time-travel.btn-group
-    = link_to I18n.t("referentials.overview.head.prev_page"), '#', class: "prev-page btn btn-default"
+    = link_to I18n.t("referentials.overview.head.prev_page"), '#', class: "prev-page btn btn-default disabled"
     = link_to I18n.t("referentials.overview.head.today"), '#', class: "today btn btn-default #{overview.includes_today? ? '' : 'disabled'}"
     = link_to I18n.t("referentials.overview.head.next_page"), '#', class: "next-page btn btn-default"
   .overview-table
@@ -34,7 +34,7 @@
             a.number style="background-color: #{line.color.present? ? "##{line.color}" : 'whitesmoke'}" title=line.name
               = line.number
             .company= line.company&.name
-            .mode= line.transport_mode
+            .mode= t("enumerize.transport_mode.#{line.transport_mode}")
     .right
       .inner
         .head
@@ -52,7 +52,8 @@
             - overview.lines.each do |line|
               .line style=line.html_style class=line.html_class
                 - line.periods.each do |period|
-                  .period style=period.html_style class=period.html_class title=period.title
+                  .period style=period.html_style class=period.html_class
+                    .title=period.title
           - else
             = replacement_msg t('referential_lines.search_no_results')
 
diff --git a/config/locales/referentials.fr.yml b/config/locales/referentials.fr.yml
index 3485413f1..53183a4c2 100644
--- a/config/locales/referentials.fr.yml
+++ b/config/locales/referentials.fr.yml
@@ -53,8 +53,8 @@ fr:
         dates: Dates
         lines: Lignes
         today: Aujourd'hui
-        prev_page: Page précédente
-        next_page: Page suivante
+        prev_page: ←
+        next_page: →
 
   activerecord:
     models: