Refs #2720: updating toolbox for grouped actions on vj

5 files changed, 282 insertions, 18 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index 75b5d2ba0..65990a52d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -9,7 +9,7 @@ var Tools = require('../containers/Tools')
 
 const App = () => (
   <div>
-    <div className='clearfix' style={{ marginBottom: 10 }}>
+    <div>
       <Filters />
       <ToggleArrivals />
       <Navigate />
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
index e3db42075..a54485490 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
@@ -11,9 +11,8 @@ var actions = require('../actions')
 
 const Tools = ({vehicleJourneys, onCancelSelection}) => {
   return (
-    <div>
-      <h4>Sélectionner une ou plusieurs courses (en colonne)</h4>
-      <div className='list-inline clearfix'>
+    <div className='select_toolbox'>
+      <ul>
         <AddVehicleJourney />
         <DuplicateVehicleJourney />
         <ShiftVehicleJourney />
@@ -21,14 +20,13 @@ const Tools = ({vehicleJourneys, onCancelSelection}) => {
         <CalendarsEditVehicleJourney />
         <NotesEditVehicleJourney />
         <DeleteVehicleJourneys />
-      </div>
-      <div>
-      <span>{actions.getSelected(vehicleJourneys).length} course(s) sélectionnée(s)</span>
+      </ul>
+
+      <span className='info-msg'>{actions.getSelected(vehicleJourneys).length} course(s) sélectionnée(s)</span>
       <br/>
-      <button
-        onClick={onCancelSelection}
-      ><span className='fa fa-times'>Annuler la sélection</span></button>
-      </div>
+      <button onClick={onCancelSelection}>
+        <span className='fa fa-times'>Annuler la sélection</span>
+      </button>
     </div>
   )
 }
diff --git a/app/assets/stylesheets/base/_utilities.sass b/app/assets/stylesheets/base/_utilities.sass
index 4441b77db..65091e904 100644
--- a/app/assets/stylesheets/base/_utilities.sass
+++ b/app/assets/stylesheets/base/_utilities.sass
@@ -4,12 +4,45 @@
 
 .mt-xs
   margin-top: 10px
-
 .mt-sm
   margin-top: 15px
-
 .mt-md
   margin-top: 20px
-
 .mt-lg
   margin-top: 40px
+
+.mb-xs
+  margin-bottom: 10px
+.mb-sm
+  margin-bottom: 15px
+.mb-md
+  margin-bottom: 20px
+.mb-lg
+  margin-bottom: 40px
+
+.ml-xs
+  margin-left: 10px
+.ml-sm
+  margin-left: 15px
+.ml-md
+  margin-left: 20px
+.ml-lg
+  margin-left: 40px
+
+.mr-xs
+  margin-right: 10px
+.mr-sm
+  margin-right: 15px
+.mr-md
+  margin-right: 20px
+.mr-lg
+  margin-right: 40px
+
+@for $i from 5 through 100
+  .w#{$i}
+    width: $i * 1%
+
+// Empty zones
+=emptyzone($col1, $col2)
+  background-image: linear-gradient(-45deg, $col1 25%, $col2 25%, $col2 50%, $col1 50%, $col1 75%, $col2 75%, transparent)
+  background-size: 40px 40px
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index b57a15994..00551f7cb 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -3,6 +3,26 @@
 //-----------//
 
 .btn
+  font-weight: 700
+
+  .fa + span
+    padding-left: 0.5em
+  span + .fa
+    padding-left: 0.5em
+
+  &.btn-link
+    &, &:focus
+      outline: none
+
+  &.btn-default
+    background-color: #fff
+    border-color: rgba(#fff, 0.5)
+    color: $blue
+
+    &:hover, &:focus, &.focus, &:active, &.active,
+    .open > .btn-primary.dropdown-toggle
+      background-color: darken(#fff, 2.5%)
+
   &.btn-primary
     background-color: $darkblue
     border-color: darken($darkblue, 2.5%)
@@ -14,8 +34,28 @@
       border-color: darken($darkblue, 2.5%)
       color: #fff
 
+  &.btn-outline-primary
+    background-color: transparent
+    border-color: $darkblue
+    color: $darkblue
+
+    &:hover, &:focus, &.focus, &:active, &.active,
+    .open > .btn-primary.dropdown-toggle
+      background-color: $darkblue
+      color: #fff
+
+  &.btn-outline-danger
+    background-color: transparent
+    border-color: $red
+    color: $red
+
+    &:hover, &:focus, &.focus, &:active, &.active,
+    .open > .btn-primary.dropdown-toggle
+      background-color: $red
+      color: #fff
+
   + .btn
-    margin-left: 12px
+    margin-left: 15px
 
 // Table btn-groups
 table, .table
@@ -23,13 +63,16 @@ table, .table
     text-align: center
     padding: 0
 
+  tbody > tr > td.actions,
+  &.table-2entries .t2e-item > .th
+
     > .btn-group
       height: 100%
       width: 100%
       min-height: 28px
       min-width: 28px
       color: $blue
-      background-color: #fff
+      background-color: rgba($blue, 0)
       transition: 0.2s
       position: relative
       cursor: pointer
@@ -39,6 +82,16 @@ table, .table
         color: #fff
         transition: 0.2s
 
+      &.disabled
+        cursor: not-allowed
+
+        &, &:hover, &:focus
+          color: rgba($blue, 0.5)
+          background-color: rgba($blue, 0)
+
+          > .btn.disabled
+            opacity: 1
+
       &.open .dropdown-toggle
         box-shadow: none
 
@@ -81,3 +134,23 @@ table, .table
 
             .fa:first-child
               margin-right: 0.5em
+
+  &.table-2entries .t2e-item
+    > .th
+      position: relative
+
+      > .btn-group
+        width: auto
+        height: auto
+        position: absolute
+        right: 0
+        top: 0
+
+        .dropdown-menu
+          left: 0
+          right: auto
+
+    &:last-child
+      > .th > .btn-group .dropdown-menu
+        left: auto
+        right: 0
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index e97ee3d7a..495e27951 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -8,6 +8,7 @@
       font-size: $h2-size
       font-weight: 700
       border-bottom: 2px solid $darkgrey
+      vertical-align: middle
 
       > a
         position: relative
@@ -44,11 +45,170 @@
     + tbody
       > tr > td
         border-top: none
-        border-bottom: 1px solid $grey
-        padding: 4px 8px
+        border-bottom: 1px solid rgba($grey, 0.5)
+        padding: 6px 8px
         vertical-align: middle
 
         > a
+          display: block
+          margin: -6px -8px
+          padding: 6px 8px
           text-decoration: none
           font-weight: 700
           color: inherit
+
+        > .fa
+          &:first-child
+            margin-right: 3px
+
+      > tr:hover
+        cursor: default
+        > td
+          background-color: whitesmoke
+
+  &.has-filter, &.has-search
+    border-top: 2px solid $darkgrey
+    margin-top: 15px
+
+
+// select_toolbox
+.select_toolbox
+  padding: 10px
+  background-color: #fff
+  box-shadow: 0 0 3px $darkgrey
+  position: fixed
+  z-index: 999
+  right: 50px
+  bottom: 15px
+
+  > ul
+    display: block
+    margin: 0
+    padding: 0
+    text-align: center
+
+    > .st_action
+      display: inline-block
+      width: 35px
+      height: 35px
+      margin: 5px
+
+      > a
+        display: block
+        height: 35px
+        text-align: center
+        line-height: 35px
+        border-radius: 50%
+        background-color: $blue
+        color: #fff
+
+        &:hover
+          background-color: rgba($blue, 0.5)
+
+        &[title='Supprimer']
+          background-color: $red
+
+          &:hover
+            background-color: darken($red, 5%)
+
+  &.noselect
+    > ul > .st_action > a
+      &, &[title='Supprimer'], &:hover, &:focus
+        background-color: rgba($grey, 0.3)
+        cursor: not-allowed
+
+  > .info-msg
+    font-style: italic
+    font-size: 0.85em
+
+
+//-----------------------------//
+//  Tables (column by column)  //
+//-----------------------------//
+
+.table.table-2entries
+  display: table
+  table-layout: fixed
+  width: 100%
+
+  > *
+    display: table-cell
+    vertical-align: top
+
+  .th
+    padding: 6px 8px
+    border-bottom: 2px solid rgba($grey, 0.5)
+    border-top: 1px solid rgba($grey, 0.5)
+  .td
+    padding: 6px 8px
+    border-bottom: 1px solid rgba($grey, 0.5)
+    word-wrap: break-word
+    hyphens: auto
+
+    > div
+      position: relative
+      height: 100%
+
+      &.headlined:before
+        content: ''
+        display: block
+        border-bottom: 1px solid rgba($grey, 0.5)
+        margin: -6px -9px 6px -8px
+        padding: 6px 9px 6px 8px
+        border-right: 1px solid #fff
+        height: calc(1.4em + 12px)
+        overflow: hidden
+        text-overflow: ellipsis
+        white-space: nowrap
+
+  .t2e-head
+    border-right: 1px solid rgba($grey, 0.5)
+
+    .th
+      text-align: right
+      border-top-color: transparent
+
+    .td > .headlined
+      &:before
+        content: attr(data-headline)
+        text-transform: uppercase
+        color: rgba($grey, 0.75)
+
+  .t2e-item-list
+    +emptyzone(rgba($grey, 0.075), rgba($grey, 0.015))
+
+    > div
+      display: inline-block
+      vertical-align: top
+      overflow: auto
+      white-space: nowrap
+      border-right: 1px solid rgba($grey, 0.5)
+      max-width: 100%
+      padding-right: 1px
+
+    .t2e-item
+      display: inline-block
+      vertical-align: top
+      white-space: normal
+      border-left: 1px solid rgba($grey, 0.5)
+      background-color: #fff
+
+      &:first-child
+        border-left: none
+
+      .th
+        > *:first-child
+          padding-right: 30px
+
+      .td
+        > div
+          > .has_radio
+            top: 50%
+            margin-top: -10px
+
+          &.headlined > .has_radio
+            margin-top: calc((1.4em + 6px) * -1)
+
+      &.disabled
+        color: rgba($darkgrey, 0.5)
+        background-color: rgba(#fff, 0.5)