open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve edit close date UI

Browse Source
This commit is contained in:
James Grugett 2022-08-28 00:35:22 -05:00
parent 03e07037ea
commit 7c798a063c
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/components/contract/contract-details.tsx
View File

@ -191,7 +191,7 @@ export function ContractDetails(props: {
<Row>
<Button
size={'xs'}
className={'max-w-[200px] pr-1'}
className={'max-w-[200px] pr-2'}
color={'gray-white'}
onClick={() =>
groupToDisplay
@ -203,11 +203,10 @@ export function ContractDetails(props: {
</Button>
<Button
size={'xs'}
className={'!px-2'}
color={'gray-white'}
onClick={() => setOpen(!open)}
>
<PencilIcon className="inline h-5 w-5 shrink-0" />
<PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
</Button>
</Row>
)}
@ -277,14 +276,22 @@ function EditableCloseDate(props: {
const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
const [closeDate, setCloseDate] = useState(
closeTime && dayJsCloseTime.format('YYYY-MM-DDTHH:mm')
closeTime && dayJsCloseTime.format('YYYY-MM-DD')
)
const [closeHoursMinutes, setCloseHoursMinutes] = useState(
closeTime && dayJsCloseTime.format('HH:mm')
)
const newCloseTime = closeDate
? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
: undefined
const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year')
const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day')
const onSave = () => {
const newCloseTime = dayjs(closeDate).valueOf()
if (!newCloseTime) return
if (newCloseTime === closeTime) setIsEditingCloseTime(false)
else if (newCloseTime > Date.now()) {
const content = contract.description
@ -309,16 +316,24 @@ function EditableCloseDate(props: {
return (
<>
{isEditingCloseTime ? (
<div className="form-control mr-1 items-start">
<Row className="mr-1 items-start">
<input
type="datetime-local"
type="date"
className="input input-bordered"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value || '')}
onChange={(e) => setCloseDate(e.target.value)}
min={Date.now()}
value={closeDate}
/>
</div>
<input
type="time"
className="input input-bordered ml-2"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseHoursMinutes(e.target.value)}
min="00:00"
value={closeHoursMinutes}
/>
</Row>
) : (
<DateTimeTooltip
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
@ -342,7 +357,7 @@ function EditableCloseDate(props: {
color={'gray-white'}
onClick={() => setIsEditingCloseTime(true)}
>
<PencilIcon className="mr-0.5 inline h-4 w-4" /> Edit
<PencilIcon className="!container mr-0.5 mb-0.5 inline h-4 w-4" />
</Button>
))}
</>