github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align datetime pickers

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-02-10 14:35:41 +00:00
parent 7afbd54234
commit 9cc7938c6d
3 changed files with 920 additions and 906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
ui/src/Components/SilenceModal/DateTimeSelect/HourMinute.js
View File

@@ -48,31 +48,33 @@ const HourMinute = observer(
const minute = dateValue.minute();
return (
<table className="text-center border-0 my-auto">
<tbody>
<tr>
<IconTd icon={faAngleUp} onClick={onHourInc} />
<td />
<IconTd icon={faAngleUp} onClick={onMinuteInc} />
</tr>
<tr>
<td>
<h2>{hour > 9 ? hour : `0${hour}`}</h2>
</td>
<td>
<h2 className="mx-2">:</h2>
</td>
<td>
<h2>{minute > 9 ? minute : `0${minute}`}</h2>
</td>
</tr>
<tr>
<IconTd icon={faAngleDown} onClick={onHourDec} />
<td />
<IconTd icon={faAngleDown} onClick={onMinuteDec} />
</tr>
</tbody>
</table>
<div className="d-flex justify-content-center align-items-center">
<table className="text-center border-0">
<tbody>
<tr>
<IconTd icon={faAngleUp} onClick={onHourInc} />
<td />
<IconTd icon={faAngleUp} onClick={onMinuteInc} />
</tr>
<tr>
<td>
<h2>{hour > 9 ? hour : `0${hour}`}</h2>
</td>
<td>
<h2 className="mx-2">:</h2>
</td>
<td>
<h2>{minute > 9 ? minute : `0${minute}`}</h2>
</td>
</tr>
<tr>
<IconTd icon={faAngleDown} onClick={onHourDec} />
<td />
<IconTd icon={faAngleDown} onClick={onMinuteDec} />
</tr>
</tbody>
</table>
</div>
);
}
}

1716
ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

58
ui/src/Components/SilenceModal/DateTimeSelect/index.js
View File

@@ -56,19 +56,21 @@ const TabNames = Object.freeze({
const TabContentStart = observer(({ silenceFormStore }) => {
return (
<div className="d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2 ">
<DatePicker
inline
todayButton={"Today"}
minDate={moment()
.second(0)
.toDate()}
selected={silenceFormStore.data.startsAt.toDate()}
onChange={val => {
silenceFormStore.data.startsAt = moment(val);
silenceFormStore.data.verifyStarEnd();
}}
/>
<div className="d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2">
<div className="d-flex justify-content-center align-items-center">
<DatePicker
inline
todayButton={"Today"}
minDate={moment()
.second(0)
.toDate()}
selected={silenceFormStore.data.startsAt.toDate()}
onChange={val => {
silenceFormStore.data.startsAt = moment(val);
silenceFormStore.data.verifyStarEnd();
}}
/>
</div>
<HourMinute
dateValue={silenceFormStore.data.startsAt}
onHourInc={() => silenceFormStore.data.incStart(60)}
@@ -82,20 +84,22 @@ const TabContentStart = observer(({ silenceFormStore }) => {
const TabContentEnd = observer(({ silenceFormStore }) => {
return (
<div className="d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2 ">
<DatePicker
inline
todayButton={"Today"}
minDate={moment()
.second(0)
.add(1, "minutes")
.toDate()}
selected={silenceFormStore.data.endsAt.toDate()}
onChange={val => {
silenceFormStore.data.endsAt = moment(val);
silenceFormStore.data.verifyStarEnd();
}}
/>
<div className="d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2">
<div className="d-flex justify-content-center align-items-center">
<DatePicker
inline
todayButton={"Today"}
minDate={moment()
.second(0)
.add(1, "minutes")
.toDate()}
selected={silenceFormStore.data.endsAt.toDate()}
onChange={val => {
silenceFormStore.data.endsAt = moment(val);
silenceFormStore.data.verifyStarEnd();
}}
/>
</div>
<HourMinute
dateValue={silenceFormStore.data.endsAt}
onHourInc={() => silenceFormStore.data.incEnd(60)}