Refs #2720: updating toolbox for grouped actions on vj

8 files changed, 352 insertions, 360 deletions

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 a54485490..7db04de37 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
@@ -24,9 +24,7 @@ const Tools = ({vehicleJourneys, onCancelSelection}) => {
 
       <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>
+      <button className='btn btn-link' onClick={onCancelSelection}>Annuler la sélection</button>
     </div>
   )
 }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
index 3359ca44d..42f03f7c8 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CalendarsEditVehicleJourney.js
@@ -21,83 +21,82 @@ class CalendarsEditVehicleJourney extends Component {
     }
     if(this.props.status.fetchSuccess == true) {
       return (
-        <div  className='pull-left'>
-          <button
-            disabled= {(actions.getSelected(this.props.vehicleJourneys).length > 0 && this.props.filters.policy['vehicle_journeys.edit']) ? false : true}
-            type='button'
-            className='btn btn-primary btn-sm'
+        <li className='st_action'>
+          <a
+            href='#'
+            className={(actions.getSelected(this.props.vehicleJourneys).length > 0 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#CalendarsEditVehicleJourneyModal'
             onClick={() => this.props.onOpenCalendarsEditModal(actions.getSelected(this.props.vehicleJourneys))}
-            >
+          >
             <span className='fa fa-calendar'></span>
-            </button>
+          </a>
 
-            <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='CalendarsEditVehicleJourneyModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Calendriers associés</h4>
-                  </div>
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='CalendarsEditVehicleJourneyModal'>
+            <div className='modal-dialog'>
+              <div className='modal-content'>
+                <div className='modal-header clearfix'>
+                  <h4>Calendriers associés</h4>
+                </div>
 
-                  {(this.props.modal.type == 'calendars_edit') && (
-                    <form>
-                      <div className='modal-body'>
-                        <ul>
-                        {this.props.modal.modalProps.timetables.map((tt, i) =>
-                            <li
-                              key= {i}
+                {(this.props.modal.type == 'calendars_edit') && (
+                  <form>
+                    <div className='modal-body'>
+                      <ul>
+                      {this.props.modal.modalProps.timetables.map((tt, i) =>
+                          <li
+                            key= {i}
+                          >
+                            {tt.comment}
+                            <button
+                            type='button'
+                            onClick={() => this.props.onDeleteCalendarModal(tt)}
                             >
-                              {tt.comment}
-                              <button
+                              <span className='fa fa-times'></span>
+                            </button>
+                          </li>
+                      )}
+                      </ul>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>Ajouter un calendrier</label>
+                            <TimetableSelect2 onSelect2Timetable={this.props.onSelect2Timetable} />
+                            <button
+                              onClick={this.props.onAddSelectedTimetable}
                               type='button'
-                              onClick={() => this.props.onDeleteCalendarModal(tt)}
-                              >
-                                <span className='fa fa-times'></span>
-                              </button>
-                            </li>
-                        )}
-                        </ul>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>Ajouter un calendrier</label>
-                              <TimetableSelect2 onSelect2Timetable={this.props.onSelect2Timetable} />
-                              <button
-                                onClick={this.props.onAddSelectedTimetable}
-                                type='button'
-                              ><span className='fa fa-times'>Ajouter</span>
-                              </button>
-                            </div>
+                            ><span className='fa fa-times'>Ajouter</span>
+                            </button>
                           </div>
                         </div>
                       </div>
+                    </div>
 
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
+                    <div className='modal-footer'>
+                      <button
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                        type='button'
+                        onClick={this.props.onModalClose}
+                        >
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-danger'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
+                        >
+                        Valider
+                      </button>
+                    </div>
+                  </form>
+                )}
 
-                </div>
               </div>
             </div>
           </div>
-        )
+        </li>
+      )
     } else {
       return false
     }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
index e5d3d3b65..5abeb9ee5 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
@@ -23,70 +23,69 @@ class CreateModal extends Component {
     }
     if(this.props.status.fetchSuccess == true) {
       return (
-        <div className='pull-left'>
-          <button
-            disabled= {(this.props.filters.policy['vehicle_journeys.create']) ? false : true}
-            type='button'
-            className='btn btn-primary btn-sm'
+        <li className='st_action'>
+          <a
+            href='#'
+            className={((this.props.filters.policy['vehicle_journeys.create']) ? 'disabled ' : '')}
             data-toggle='modal'
             data-target='#NewVehicleJourneyModal'
             onClick={this.props.onOpenCreateModal}
-            >
+          >
             <span className='fa fa-plus'></span>
-          </button>
+          </a>
 
-            <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewVehicleJourneyModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Ajouter une mission</h4>
-                  </div>
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewVehicleJourneyModal'>
+            <div className='modal-dialog'>
+              <div className='modal-content'>
+                <div className='modal-header clearfix'>
+                  <h4>Ajouter une mission</h4>
+                </div>
 
-                  {(this.props.modal.type == 'create') && (
-                    <form>
-                      <div className='modal-body'>
-                        <div className='form-group'>
-                          <label className='control-label is-required'>Nom de la course</label>
-                          <input
-                            type='text'
-                            ref='published_journey_name'
-                            className='form-control'
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                            required
-                            />
-                        </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>ID de la mission</label>
-                              <MissionSelect2 onSelect2JourneyPattern={this.props.onSelect2JourneyPattern} />
-                            </div>
+                {(this.props.modal.type == 'create') && (
+                  <form>
+                    <div className='modal-body'>
+                      <div className='form-group'>
+                        <label className='control-label is-required'>Nom de la course</label>
+                        <input
+                          type='text'
+                          ref='published_journey_name'
+                          className='form-control'
+                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                          required
+                          />
+                      </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>ID de la mission</label>
+                            <MissionSelect2 onSelect2JourneyPattern={this.props.onSelect2JourneyPattern} />
                           </div>
                         </div>
                       </div>
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
-                </div>
+                    </div>
+                    <div className='modal-footer'>
+                      <button
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                        type='button'
+                        onClick={this.props.onModalClose}
+                        >
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-danger'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
+                        >
+                        Valider
+                      </button>
+                    </div>
+                  </form>
+                )}
               </div>
             </div>
           </div>
+        </li>
         )
     } else {
       return false
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
index 97bb82d38..87dc9cb2f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
@@ -4,16 +4,16 @@ var actions = require('../../actions')
 
 const DeleteVehicleJourneys = ({onDeleteVehicleJourneys, vehicleJourneys, filters}) => {
   return (
-    <div  className='pull-left'>
-      <button
-        disabled= {(actions.getSelected(vehicleJourneys).length > 0 && filters.policy['vehicle_journeys.destroy']) ? false : true}
-        type='button'
-        className='btn btn-primary btn-sm'
+    <li className='st_action'>
+      <a
+        href='#'
+        className={(actions.getSelected(vehicleJourneys).length > 0 && filters.policy['vehicle_journeys.destroy']) ? '' : 'disabled'}
         onClick={onDeleteVehicleJourneys}
-        >
+        title='Supprimer'
+      >
         <span className='fa fa-trash'></span>
-        </button>
-    </div>
+      </a>
+    </li>
   )
 }
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
index 2bfbdbfa2..b4ec90393 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
@@ -22,88 +22,87 @@ class DuplicateVehicleJourney extends Component {
     }
     if(this.props.status.fetchSuccess == true) {
       return (
-        <div  className='pull-left'>
-          <button
-            disabled= {(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? false : true}
-            type='button'
-            className='btn btn-primary btn-sm'
+        <li  className='st_action'>
+          <a
+            href='#'
+            className={((actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled')}
             data-toggle='modal'
             data-target='#DuplicateVehicleJourneyModal'
             onClick={this.props.onOpenDuplicateModal}
-            >
+          >
             <span className='fa fa-files-o'></span>
-            </button>
+          </a>
 
-            <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='DuplicateVehicleJourneyModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Mettre à jour une course</h4>
-                  </div>
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='DuplicateVehicleJourneyModal'>
+            <div className='modal-dialog'>
+              <div className='modal-content'>
+                <div className='modal-header clearfix'>
+                  <h4>Mettre à jour une course</h4>
+                </div>
 
-                  {(this.props.modal.type == 'duplicate') && (
-                    <form>
-                      <div className='modal-body'>
-                        <div className='form-group'>
-                          <span>Dupliquer les horaires de la course suivante : {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</span>
-                        </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>Nombre de courses à créer et dupliquer</label>
-                              <input
-                                type='number'
-                                ref='duplicate_number'
-                                min='1'
-                                max='20'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
-                            </div>
+                {(this.props.modal.type == 'duplicate') && (
+                  <form>
+                    <div className='modal-body'>
+                      <div className='form-group'>
+                        <span>Dupliquer les horaires de la course suivante : {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</span>
+                      </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>Nombre de courses à créer et dupliquer</label>
+                            <input
+                              type='number'
+                              ref='duplicate_number'
+                              min='1'
+                              max='20'
+                              className='form-control'
+                              onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                              required
+                              />
                           </div>
                         </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>Avec un décalage de</label>
-                              <input
-                                type='number'
-                                ref='additional_time'
-                                min='0'
-                                max='59'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
-                            </div>
+                      </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>Avec un décalage de</label>
+                            <input
+                              type='number'
+                              ref='additional_time'
+                              min='0'
+                              max='59'
+                              className='form-control'
+                              onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                              required
+                              />
                           </div>
                         </div>
                       </div>
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
-                </div>
+                    </div>
+                    <div className='modal-footer'>
+                      <button
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                        type='button'
+                        onClick={this.props.onModalClose}
+                        >
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-danger'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
+                        >
+                        Valider
+                      </button>
+                    </div>
+                  </form>
+                )}
               </div>
             </div>
           </div>
-        )
+        </li>
+      )
     } else {
       return false
     }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
index 5e48b41fb..e3c87982e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -22,89 +22,88 @@ class EditVehicleJourney extends Component {
     }
     if(this.props.status.fetchSuccess == true) {
       return (
-        <div  className='pull-left'>
-          <button
-            disabled= {(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? false : true}
-            type='button'
-            className='btn btn-primary btn-sm'
+        <li className='st_action'>
+          <a
+            href='#'
+            className={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#EditVehicleJourneyModal'
             onClick={() => this.props.onOpenEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
-            >
+          >
             <span className='fa fa-pencil'></span>
-            </button>
+          </a>
 
-            <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='EditVehicleJourneyModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Informations</h4>
-                  </div>
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='EditVehicleJourneyModal'>
+            <div className='modal-dialog'>
+              <div className='modal-content'>
+                <div className='modal-header clearfix'>
+                  <h4>Informations</h4>
+                </div>
 
-                  {(this.props.modal.type == 'edit') && (
-                    <form>
-                      <div className='modal-body'>
-                        <div className='form-group'>
-                          <label className='control-label is-required'>Intitulé de la course</label>
-                          <input
-                            type='text'
-                            ref='published_journey_name'
-                            className='form-control'
-                            defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_name}
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                            required
-                            />
-                        </div>
+                {(this.props.modal.type == 'edit') && (
+                  <form>
+                    <div className='modal-body'>
+                      <div className='form-group'>
+                        <label className='control-label is-required'>Intitulé de la course</label>
+                        <input
+                          type='text'
+                          ref='published_journey_name'
+                          className='form-control'
+                          defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_name}
+                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                          required
+                          />
+                      </div>
 
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <p>Mission <span> {this.props.modal.modalProps.vehicleJourney.journey_pattern.objectid} - {this.props.modal.modalProps.vehicleJourney.journey_pattern.name}</span></p>
-                          </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <p>Mission <span> {this.props.modal.modalProps.vehicleJourney.journey_pattern.objectid} - {this.props.modal.modalProps.vehicleJourney.journey_pattern.name}</span></p>
                         </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                          <label className='control-label is-required'>Numéro de train</label>
-                          <input
-                            type='text'
-                            ref='published_journey_identifier'
-                            className='form-control'
-                            defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_identifier}
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                            required
-                            />
-                          </div>
+                      </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <label className='control-label is-required'>Numéro de train</label>
+                        <input
+                          type='text'
+                          ref='published_journey_identifier'
+                          className='form-control'
+                          defaultValue={this.props.modal.modalProps.vehicleJourney.published_journey_identifier}
+                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                          required
+                          />
                         </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <p>Transporteur <span> {this.props.modal.modalProps.vehicleJourney.company_id}</span></p>
-                          </div>
+                      </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <p>Transporteur <span> {this.props.modal.modalProps.vehicleJourney.company_id}</span></p>
                         </div>
                       </div>
+                    </div>
 
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
+                    <div className='modal-footer'>
+                      <button
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                        type='button'
+                        onClick={this.props.onModalClose}
+                        >
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-danger'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
+                        >
+                        Valider
+                      </button>
+                    </div>
+                  </form>
+                )}
 
-                </div>
               </div>
             </div>
           </div>
+        </li>
         )
     } else {
       return false
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index b0addfa71..d965f6990 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -43,64 +43,63 @@ class NotesEditVehicleJourney extends Component {
     }
     if(this.props.status.fetchSuccess == true) {
       return (
-        <div  className='pull-left'>
-          <button
-            disabled= {(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? false : true}
-            type='button'
-            className='btn btn-primary btn-sm'
+        <li className='st_action'>
+          <a
+            href='#'
+            className={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#NotesEditVehicleJourneyModal'
             onClick={() => this.props.onOpenNotesEditModal(actions.getSelected(this.props.vehicleJourneys)[0])}
-            >
+          >
             <span className='fa fa-flag-o'></span>
-            </button>
+          </a>
 
-            <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='NotesEditVehicleJourneyModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Notes</h4>
-                  </div>
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'duplicate') ? 'in' : '') } id='NotesEditVehicleJourneyModal'>
+            <div className='modal-dialog'>
+              <div className='modal-content'>
+                <div className='modal-header clearfix'>
+                  <h4>Notes</h4>
+                </div>
 
-                  {(this.props.modal.type == 'notes_edit') && (
-                    <form>
-                      <div className='modal-body'>
-                        {window.line_footnotes.map((lf, i) =>
-                          <div
-                            key = {i}
-                          >
-                            <span>Titre: {lf.label} </span>
-                            <span>Contenu: {lf.code}</span>
-                            {this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}
-                          </div>
-                        )}
-                      </div>
+                {(this.props.modal.type == 'notes_edit') && (
+                  <form>
+                    <div className='modal-body'>
+                      {window.line_footnotes.map((lf, i) =>
+                        <div
+                          key = {i}
+                        >
+                          <span>Titre: {lf.label} </span>
+                          <span>Contenu: {lf.code}</span>
+                          {this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}
+                        </div>
+                      )}
+                    </div>
 
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
+                    <div className='modal-footer'>
+                      <button
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                        type='button'
+                        onClick={this.props.onModalClose}
+                        >
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-danger'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
+                        >
+                        Valider
+                      </button>
+                    </div>
+                  </form>
+                )}
 
-                </div>
               </div>
             </div>
           </div>
-        )
+        </li>
+      )
     } else {
       return false
     }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
index 80657f1c2..ce61ddd89 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
@@ -22,72 +22,71 @@ class ShiftVehicleJourney extends Component {
     }
     if(this.props.status.fetchSuccess == true) {
       return (
-        <div  className='pull-left'>
-          <button
-            disabled= {(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? false : true}
-            type='button'
-            className='btn btn-primary btn-sm'
+        <li className='st_action'>
+          <a
+            href='#'
+            className={(actions.getSelected(this.props.vehicleJourneys).length == 1 && this.props.filters.policy['vehicle_journeys.edit']) ? '' : 'disabled'}
             data-toggle='modal'
             data-target='#ShiftVehicleJourneyModal'
             onClick={this.props.onOpenShiftModal}
-            >
+          >
             <span className='fa fa-refresh'></span>
-            </button>
+          </a>
 
-            <div className={ 'modal fade ' + ((this.props.modal.type == 'shift') ? 'in' : '') } id='ShiftVehicleJourneyModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Mettre à jour une course</h4>
-                  </div>
+          <div className={ 'modal fade ' + ((this.props.modal.type == 'shift') ? 'in' : '') } id='ShiftVehicleJourneyModal'>
+            <div className='modal-dialog'>
+              <div className='modal-content'>
+                <div className='modal-header clearfix'>
+                  <h4>Mettre à jour une course</h4>
+                </div>
 
-                  {(this.props.modal.type == 'shift') && (
-                    <form>
-                      <div className='modal-body'>
-                        <div className='form-group'>
-                          <span>Mettre à jour les horaires de la course {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</span>
-                        </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>Avec un décalage de</label>
-                              <input
-                                type='number'
-                                ref='additional_time'
-                                min='0'
-                                max='59'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
-                            </div>
+                {(this.props.modal.type == 'shift') && (
+                  <form>
+                    <div className='modal-body'>
+                      <div className='form-group'>
+                        <span>Mettre à jour les horaires de la course {actions.getSelected(this.props.vehicleJourneys)[0].objectid}</span>
+                      </div>
+                      <div className='row'>
+                        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>Avec un décalage de</label>
+                            <input
+                              type='number'
+                              ref='additional_time'
+                              min='0'
+                              max='59'
+                              className='form-control'
+                              onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                              required
+                              />
                           </div>
                         </div>
                       </div>
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
-                </div>
+                    </div>
+                    <div className='modal-footer'>
+                      <button
+                        className='btn btn-default'
+                        data-dismiss='modal'
+                        type='button'
+                        onClick={this.props.onModalClose}
+                        >
+                        Annuler
+                      </button>
+                      <button
+                        className='btn btn-danger'
+                        type='button'
+                        onClick={this.handleSubmit.bind(this)}
+                        >
+                        Valider
+                      </button>
+                    </div>
+                  </form>
+                )}
               </div>
             </div>
           </div>
-        )
+        </li>
+      )
     } else {
       return false
     }