(js) Improved input parsing of time picker

Fixes #3659

NEWS

@@ -15,10 +15,11 @@ Enhancements
  - [web] we now "cc" delegates during invitation updates (#3195)
  - [web] new SOGoHelpURL preference to set a custom URL for SOGo help (#2768)
  - [web] now able to copy/move events and also duplicate them (#3196)
- - [web] improve preferences validation and check for unsaved changes
+ - [web] improved preferences validation and now check for unsaved changes
  - [web] display events and tasks priorities in list and day/week views (#3162)
  - [web] style events depending on the user participation state
  - [web] style transparent events (show time as free) (#3192)
+ - [web] improved input parsing of time picker (#3659)
 
 Bug fixes
  - [core] properly escape wide characters (#3616)

UI/WebServerResources/js/Common/sgTimepicker.directive.js

@@ -374,8 +374,7 @@
         '  <md-icon class="sg-timepicker-icon">access_time</md-icon>',
         '</md-button>',
         '<div class="md-default-theme sg-timepicker-input-container" ',
-        '     ng-class="{\'sg-timepicker-focused\': ctrl.isFocused,',
-        '                \'md-bdr\': ctrl.isFocused}">',
+        '     ng-class="{\'sg-timepicker-focused\': ctrl.isFocused}">',
         '  <input class="sg-timepicker-input" aria-haspopup="true" ',
         '         ng-focus="ctrl.setFocused(true)" ng-blur="ctrl.setFocused(false)">',
         '  <md-button type="button" md-no-ink ',
@@ -720,6 +719,12 @@
       this.inputContainer.classList.remove(INVALID_CLASS);
     }
     else if (arr.length < 2) {
+      arr = /(\d{1,2})(\d{2})/i.exec(inputString);
+      if (arr)
+        arr.splice(0, 1); // only keep text captured by parenthesis
+    }
+
+    if (!arr || arr.length < 2) {
       this.inputContainer.classList.toggle(INVALID_CLASS, inputString);
     }
     else {
@@ -731,6 +736,7 @@
         newVal.setMinutes(m);
         this.ngModelCtrl.$setViewValue(newVal);
         this.time = newVal;
+        this.inputElement.value = this.dateLocale.formatTime(newVal);
         this.inputContainer.classList.remove(INVALID_CLASS);
       }
       else {

UI/WebServerResources/scss/components/timepicker/timepicker.scss

@@ -115,13 +115,17 @@ sg-timepicker {
 .sg-timepicker-input-container {
   @extend .md-datepicker-input-container;
 
+  // From datePicker-theme.scss
+  border-bottom-color: $colorGrey300; // {{background-300}}
+
   &.sg-timepicker-focused {
+    border-bottom-color: sg-color($sogoBlue, 500); // {{primary-500}}
     border-bottom-width: 2px;
   }
 
-  // From datePicker-theme.scss
-  // TODO: should use background-300
-  border-bottom-color: rgb(224,224,224);
+  &.sg-timepicker-invalid {
+    border-bottom-color: $colorRedA700; // {{warn-A700}}
+  }
 }