#2660: TimeInputUnit.jsx

3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index e2e6ad4a5..2c204b414 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -6,8 +6,8 @@ function TimeInputUnit(
     {
         children,
         onClick,
-        precision,
-        selected,
+        precision = 1,
+        selected = -1,
         ...props
     },
 ) {
@@ -47,9 +47,4 @@ TimeInputUnit.propTypes = {
     selected: PropTypes.number,
 };
 
-TimeInputUnit.defaultProps = {
-    precision: 1,
-    selected: -1,
-};
-
 export default TimeInputUnit;

63678e216dfa3251a2862423d31df05ee88682d8
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index b032bcf0b..e2e6ad4a5 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { formatTimeUnit } from '../../../../utilities/layout';
 
 function TimeInputUnit(
     {
@@ -15,7 +16,7 @@ function TimeInputUnit(
     const distance = children - selected;
     const style = {};
 
-    if (Math.abs(distance) < precision) {
+    if (selected >= 0 && Math.abs(distance) < precision) {
         style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
         style.color = '#fff';
         if (distance < 0) {
@@ -34,7 +35,7 @@ function TimeInputUnit(
             role="presentation"
             {...props}
         >
-            {children}
+            {formatTimeUnit(children)}
         </li>
     );
 }

cf67f10dd45997597ea1f149b91fca9060852bfb
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index 817f8c8e9..b032bcf0b 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -17,6 +17,7 @@ function TimeInputUnit(
 
     if (Math.abs(distance) < precision) {
         style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
+        style.color = '#fff';
         if (distance < 0) {
             style.borderBottomLeftRadius = 0;
             style.borderBottomRightRadius = 0;

e0bf4e914b7336dfb5b64a5c077c117b1fbd5a9b
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
index a7aa3b42c..817f8c8e9 100644
--- a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -1,26 +1,37 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import style from './CalendarInput.module.scss';
 
 function TimeInputUnit(
     {
         children,
-        className,
         onClick,
+        precision,
         selected,
+        ...props
     },
 ) {
     const handleClick = () => onClick(children);
 
+    const distance = children - selected;
+    const style = {};
+
+    if (Math.abs(distance) < precision) {
+        style.backgroundColor = `rgba(59, 153, 252, ${(precision - Math.abs(distance)) / precision})`;
+        if (distance < 0) {
+            style.borderBottomLeftRadius = 0;
+            style.borderBottomRightRadius = 0;
+        } else if (distance > 0) {
+            style.borderTopLeftRadius = 0;
+            style.borderTopRightRadius = 0;
+        }
+    }
+
     return (
         <li
-            className={classNames(
-                className,
-                { [style.selected]: selected === children },
-            )}
+            style={style}
             onClick={handleClick}
             role="presentation"
+            {...props}
         >
             {children}
         </li>
@@ -30,12 +41,12 @@ function TimeInputUnit(
 TimeInputUnit.propTypes = {
     children: PropTypes.number.isRequired,
     onClick: PropTypes.func.isRequired,
-    className: PropTypes.string,
+    precision: PropTypes.number,
     selected: PropTypes.number,
 };
 
 TimeInputUnit.defaultProps = {

ee71165161055fa67c721ab00d5c58d6462c2366
diff --git a/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
new file mode 100644
index 000000000..a7aa3b42c
--- /dev/null
+++ b/projectforge-webapp/src/components/design/input/calendar/TimeInputUnit.jsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import style from './CalendarInput.module.scss';
+
+function TimeInputUnit(
+    {
+        children,
+        className,
+        onClick,
+        selected,
+    },
+) {
+    const handleClick = () => onClick(children);
+
+    return (
+        <li
+            className={classNames(
+                className,
+                { [style.selected]: selected === children },
+            )}
+            onClick={handleClick}
+            role="presentation"
+        >
+            {children}
+        </li>
+    );
+}
+
+TimeInputUnit.propTypes = {
+    children: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    selected: PropTypes.number,
+};
+
+TimeInputUnit.defaultProps = {
+    className: undefined,
+    selected: -1,
+};
+
+export default TimeInputUnit;