add and adapt bootstrap-timepicker for times and timeframes

times: 0-12 am/pm or 0-24 hours with minutes
- $('input').timepicker({ showMeridian: true })
- showMeridian activates am/pm

timeframe: 00:00 - 99:99 hour:minutes
- $('input').timepicker({ maxHours: 99 })

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -1317,13 +1317,18 @@ class slaRef extends App.ControllerContent
     checkbox.closest('tr').toggleClass('is-active', checkbox.prop('checked'))
 
   createNew: =>
-    new App.ControllerModal
+    @newItemModal = new App.ControllerModal
       head: 'New Service Level Agreement (SLA)'
       content: App.view('layout_ref/sla_modal')()
       button: 'Create SLA'
       shown: true
       cancel: true
       container: @el
+      onComplete: =>
+        @$('.js-responseTime').timepicker
+          maxHours: 99
+        @$('.js-time').timepicker
+          showMeridian: true # show am/pm
 
 App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
 

app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco

@@ -204,48 +204,48 @@
     <tr>
       <td data-column="monday" class="form-group day-time is-active">
         <label for="monday_start_time">from</label>
-        <input type="time" id="monday_start_time" value="07:00" step="600">
+        <input type="text" id="monday_start_time" value="07:00" class="time time--12 js-time">
       <td data-column="tuesday" class="form-group day-time is-active">
         <label for="tuesday_start_time">from</label>
-        <input type="time" id="tuesday_start_time" value="07:00" step="600">
+        <input type="text" id="tuesday_start_time" value="07:00" class="time time--12 js-time">
       <td data-column="wednesday" class="form-group day-time is-active">
         <label for="wednesday_start_time">from</label>
-        <input type="time" id="wednesday_start_time" value="07:00" step="600">
+        <input type="text" id="wednesday_start_time" value="07:00" class="time time--12 js-time">
       <td data-column="thursday" class="form-group day-time is-active">
         <label for="thursday_start_time">from</label>
-        <input type="time" id="thursday_start_time" value="07:00" step="600">
+        <input type="text" id="thursday_start_time" value="07:00" class="time time--12 js-time">
       <td data-column="friday" class="form-group day-time is-active">
         <label for="friday_start_time">from</label>
-        <input type="time" id="friday_start_time" value="07:00" step="600">
+        <input type="text" id="friday_start_time" value="07:00" class="time time--12 js-time">
       <td data-column="saturday" class="form-group day-time">
         <label for="saturday_start_time">from</label>
-        <input type="time" id="saturday_start_time" value="09:00" step="600">
+        <input type="text" id="saturday_start_time" value="07:00" class="time time--12 js-time">
       <td data-column="sunday" class="form-group day-time">
         <label for="sunday_start_time">from</label>
-        <input type="time" id="sunday_start_time" step="600">
+        <input type="text" id="sunday_start_time" value="07:00" class="time time--12 js-time">
     </tr>
     <tr>
       <td data-column="monday" class="form-group day-time is-active">
         <label for="monday_end_time">till</label>
-        <input type="time" id="monday_end_time" value="18:00" step="600">
+        <input type="text" id="monday_end_time" value="18:00" class="time time--12 js-time">
       <td data-column="tuesday" class="form-group day-time is-active">
         <label for="tuesday_end_time">till</label>
-        <input type="time" id="tuesday_end_time" value="18:00" step="600">
+        <input type="text" id="tuesday_end_time" value="18:00" class="time time--12 js-time">
       <td data-column="wednesday" class="form-group day-time is-active">
         <label for="wednesday_end_time">till</label>
-        <input type="time" id="wednesday_end_time" value="18:00" step="600">
+        <input type="text" id="wednesday_end_time" value="18:00" class="time time--12 js-time">
       <td data-column="thursday" class="form-group day-time is-active">
         <label for="thursday_end_time">till</label>
-        <input type="time" id="thursday_end_time" value="18:00" step="600">
+        <input type="text" id="thursday_end_time" value="18:00" class="time time--12 js-time">
       <td data-column="friday" class="form-group day-time is-active">
         <label for="friday_end_time">till</label>
-        <input type="time" id="friday_end_time" value="13:00" step="600">
+        <input type="text" id="friday_end_time" value="13:00" class="time time--12 js-time">
       <td data-column="saturday" class="form-group day-time">
         <label for="saturday_end_time">till</label>
-        <input type="time" id="saturday_end_time" value="16:00" step="600">
+        <input type="text" id="saturday_end_time" value="18:00" class="time time--12 js-time">
       <td data-column="sunday" class="form-group day-time">
         <label for="sunday_end_time">till</label>
-        <input type="time" id="sunday_end_time" step="600">
+        <input type="text" id="sunday_end_time" value="18:00" class="time time--12 js-time">
     </tr>
   </tbody>
 </table>
@@ -261,25 +261,25 @@
   </thead>
   <tbody>
     <tr class="is-active">
-      <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time"> 
+      <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time">
       <td>
         <label class="inline-label" for="first_response_time">First Response Time</label>
         <p class="subtle">Timeframe for the first response.</p>
-      <td><input type="time" step="600" max="259200">
+      <td><input type="text" value="02:00" class="timeframe js-responseTime">
     </tr>
     <tr class="is-active">
       <td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="update_time">
       <td>
         <label class="inline-label" for="update_time">Update Time</label>
         <p class="subtle">Timeframe for every following response.</p>
-      <td><input type="time" step="600" max="259200">
+      <td><input type="text" value="04:00" class="timeframe js-responseTime">
     </tr>
     <tr>
       <td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
       <td>
         <label class="inline-label" for="solution_time">Solution Time</label>
         <p class="subtle">Timeframe for solving the problem.</p>
-      <td><input type="time" step="600" max="259200">
+      <td><input type="text" value="16:00" class="timeframe js-responseTime">
     </tr>
   </tbody>
 </table>

app/assets/javascripts/application.js

@@ -34,6 +34,7 @@
 //= require ./app/lib/bootstrap/transition.js
 //= require ./app/lib/bootstrap/button.js
 //= require ./app/lib/bootstrap/collapse.js
+//= require ./app/lib/bootstrap/bootstrap-timepicker.js
 
 //= require ./app/lib/rangy/rangy-core.js
 //= require ./app/lib/rangy/rangy-classapplier.js

app/assets/stylesheets/zammad.css.scss

@@ -882,6 +882,18 @@ input[type=time] {
   padding-right: 6px;
 }
 
+input.timeframe,
+input.time {
+  width: 4.5ch;
+  box-sizing: content-box;
+  padding: 0 6px;
+  line-height: 42px;
+}
+
+input.time.time--12 {
+  width: 7.5ch;
+}
+
   .form-control:focus,
   .form-control.focus,
   .tokenfield.focus {
@@ -5427,16 +5439,7 @@ output {
 }
 
 .form-group.day-time {
-  padding: 10px 10px 0;
+  padding: 5px;
-
-  input {
-    width: auto;
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
-    margin: 0 -10px;
-    border-bottom: 0;
-  }
 }
 
 .settings-list {