Skip to content

Commit

Permalink
UTC, Grid, and fix button height
Browse files Browse the repository at this point in the history
  • Loading branch information
@dakota002
dakota002 committed May 9, 2024
1 parent 9efdcfa commit bb37175
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 159 deletions.
336 changes: 177 additions & 159 deletions app/routes/circulars.edit.$circularId/CircularEditForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
Button,
ButtonGroup,
DatePicker,
Grid,
Icon,
InputGroup,
InputPrefix,
Expand Down Expand Up @@ -44,6 +45,8 @@ import CollapsableInfo from '~/components/CollapsableInfo'
import Spinner from '~/components/Spinner'
import { useFeature, useModStatus } from '~/root'

import styles from './CircularsEditForm.module.css'

function SyntaxExample({
label,
children,
Expand Down Expand Up @@ -186,191 +189,206 @@ export function CircularEditForm({
const userIsModerator = useModStatus()

useEffect(() => {
setDateString(`${date} ${time}`)
setDateString(`${date} ${time} UTC`)
}, [date, time])

return (
<AstroDataContext.Provider value={{ rel: 'noopener', target: '_blank' }}>
<h1>{headerText} GCN Circular</h1>
<Form method="POST" action={`/circulars${formSearchString}`}>
<input type="hidden" name="intent" value={intent} />
{circularId !== undefined && (
<>
<input type="hidden" name="circularId" value={circularId} />
<InputGroup className="maxw-full">
<InputPrefix className="wide-input-prefix">From</InputPrefix>
<Grid>
<Grid row>
{circularId !== undefined && (
<>
<input type="hidden" name="circularId" value={circularId} />
<InputGroup className="maxw-full">
<InputPrefix className="wide-input-prefix">From</InputPrefix>
<TextInput
autoFocus
className="maxw-full"
name="submitter"
id="submitter"
type="text"
defaultValue={submitter}
onChange={(event) =>
setUpdatedSubmitter(event.target.value)
}
required
disabled={!userIsModerator}
/>
</InputGroup>
</>
)}
</Grid>
<Grid row>
<InputGroup className="border-0 maxw-full">
<InputPrefix className="wide-input-prefix">
{circularId === undefined ? 'From' : 'Editor'}
</InputPrefix>
<span className="padding-1">{formattedContributor} </span>
<Link
to="/user"
title="Adjust how your name and affiliation appear in new GCN Circulars"
>
<Button unstyled type="button">
<Icon.Edit role="presentation" /> Edit
</Button>
</Link>
</InputGroup>
</Grid>
<Grid row>
<input
type="hidden"
name="createdOn"
id="createdOn"
value={dateNumber}
/>
<InputGroup className="border-0">
<InputPrefix className="wide-input-prefix">Date</InputPrefix>
<DatePicker
defaultValue={date}
className={classnames(styles.DatePicker, 'border-1px ')}
onChange={(value) => {
setDate(value ?? '')
}}
name="submissionDatePicker"
id="submissionDatePicker"
/>
</InputGroup>
<InputGroup className="tablet:grid-col-auto">
<InputPrefix className="wide-input-prefix">Time</InputPrefix>
<TimePicker
id="submissionTimePicker"
name="submissionTimePicker"
defaultValue={time}
className="margin-top-neg-3"
onChange={(value) => {
setTime(value ?? '')
}}
step={1}
label=""
/>
</InputGroup>
</Grid>
<Grid row>
<InputGroup
className={classnames('maxw-full', {
'usa-input--error': subjectValid === false,
'usa-input--success': subjectValid,
})}
>
<InputPrefix className="wide-input-prefix">Subject</InputPrefix>
<TextInput
autoFocus
aria-describedby="subjectDescription"
className="maxw-full"
name="submitter"
id="submitter"
name="subject"
id="subject"
type="text"
defaultValue={submitter}
onChange={(event) => setUpdatedSubmitter(event.target.value)}
placeholder={useSubjectPlaceholder()}
defaultValue={defaultSubject}
required
disabled={!userIsModerator}
onChange={({ target: { value } }) => {
setSubject(value)
setSubjectValid(subjectIsValid(value))
}}
/>
</InputGroup>
</>
)}
<InputGroup className="border-0 maxw-full">
<InputPrefix className="wide-input-prefix">
{circularId === undefined ? 'From' : 'Editor'}
</InputPrefix>
<span className="padding-1">{formattedContributor} </span>
<Link
to="/user"
title="Adjust how your name and affiliation appear in new GCN Circulars"
</Grid>
<CollapsableInfo
id="subjectDescription"
preambleText="The subject line must contain (and should start with) the name of the transient, which must start with one of the"
buttonText="known keywords"
>
<Button unstyled type="button">
<Icon.Edit role="presentation" /> Edit
</Button>
</Link>
</InputGroup>
<InputGroup className="display-flex flex-align-center border-0">
<input
type="hidden"
name="createdOn"
id="createdOn"
value={dateNumber}
/>
<InputPrefix className="wide-input-prefix">Date</InputPrefix>
<DatePicker
defaultValue={date}
className="border-1px"
onChange={(value) => {
setDate(value ?? '')
}}
name="submissionDatePicker"
id="submissionDatePicker"
/>
<TimePicker
id="submissionTimePicker"
name="submissionTimePicker"
defaultValue={time}
className="border-1px margin-top-neg-3 margin-x-1"
onChange={(value) => {
setTime(value ?? '')
}}
step={1}
label=""
/>
</InputGroup>
<InputGroup
className={classnames('maxw-full', {
'usa-input--error': subjectValid === false,
'usa-input--success': subjectValid,
})}
>
<InputPrefix className="wide-input-prefix">Subject</InputPrefix>
<TextInput
autoFocus
aria-describedby="subjectDescription"
className="maxw-full"
name="subject"
id="subject"
type="text"
placeholder={useSubjectPlaceholder()}
defaultValue={defaultSubject}
required
onChange={({ target: { value } }) => {
setSubject(value)
setSubjectValid(subjectIsValid(value))
}}
/>
</InputGroup>
<CollapsableInfo
id="subjectDescription"
preambleText="The subject line must contain (and should start with) the name of the transient, which must start with one of the"
buttonText="known keywords"
>
<CircularsKeywords />
</CollapsableInfo>
<label hidden htmlFor="body">
Body
</label>
{useFeature('CIRCULARS_MARKDOWN') ? (
<RichEditor
aria-describedby="bodyDescription"
placeholder={bodyPlaceholder}
defaultValue={defaultBody}
defaultMarkdown={defaultFormat === 'text/markdown'}
required
className={bodyValid ? 'usa-input--success' : undefined}
onChange={({ target: { value } }) => {
setBody(value)
}}
markdownStateSetter={setFormat}
/>
) : (
<>
<SegmentedRadioButtonGroup>
<SegmentedRadioButton
defaultChecked
onClick={() => setShowPreview(false)}
>
Edit
</SegmentedRadioButton>
<SegmentedRadioButton onClick={() => setShowPreview(true)}>
Preview
</SegmentedRadioButton>
</SegmentedRadioButtonGroup>
<Textarea
hidden={showPreview}
name="body"
id="body"
<CircularsKeywords />
</CollapsableInfo>
<label hidden htmlFor="body">
Body
</label>
{useFeature('CIRCULARS_MARKDOWN') ? (
<RichEditor
aria-describedby="bodyDescription"
placeholder={bodyPlaceholder}
defaultValue={defaultBody}
defaultMarkdown={defaultFormat === 'text/markdown'}
required
className={classnames('maxw-full', {
'usa-input--success': bodyValid,
})}
className={bodyValid ? 'usa-input--success' : undefined}
onChange={({ target: { value } }) => {
setBody(value)
}}
markdownStateSetter={setFormat}
/>
{showPreview && (
<PlainTextBody className="border padding-1 margin-top-1">
{body}
</PlainTextBody>
)}
</>
)}
<CollapsableInfo
id="bodyDescription"
preambleText={
) : (
<>
Body text. If this is your first Circular, please review the{' '}
<Link to="/docs/circulars/styleguide">style guide</Link>.
References to Circulars, DOIs, arXiv preprints, and transients are
automatically shown as links; see
<SegmentedRadioButtonGroup>
<SegmentedRadioButton
defaultChecked
onClick={() => setShowPreview(false)}
>
Edit
</SegmentedRadioButton>
<SegmentedRadioButton onClick={() => setShowPreview(true)}>
Preview
</SegmentedRadioButton>
</SegmentedRadioButtonGroup>
<Textarea
hidden={showPreview}
name="body"
id="body"
aria-describedby="bodyDescription"
placeholder={bodyPlaceholder}
defaultValue={defaultBody}
required
className={classnames('maxw-full', {
'usa-input--success': bodyValid,
})}
onChange={({ target: { value } }) => {
setBody(value)
}}
/>
{showPreview && (
<PlainTextBody className="border padding-1 margin-top-1">
{body}
</PlainTextBody>
)}
</>
}
buttonText="syntax"
>
<SyntaxReference />
</CollapsableInfo>
<ButtonGroup>
<Link
to={`/circulars${searchString}`}
className="usa-button usa-button--outline"
>
Back
</Link>
<Button
disabled={sending || !valid || !changesHaveBeenMade}
type="submit"
value="save"
>
{saveButtonText}
</Button>
{sending && (
<div className="padding-top-1 padding-bottom-1">
<Spinner /> Sending...
</div>
)}
</ButtonGroup>
<CollapsableInfo
id="bodyDescription"
preambleText={
<>
Body text. If this is your first Circular, please review the{' '}
<Link to="/docs/circulars/styleguide">style guide</Link>.
References to Circulars, DOIs, arXiv preprints, and transients
are automatically shown as links; see
</>
}
buttonText="syntax"
>
<SyntaxReference />
</CollapsableInfo>
<ButtonGroup>
<Link
to={`/circulars${searchString}`}
className="usa-button usa-button--outline"
>
Back
</Link>
<Button
disabled={sending || !valid || !changesHaveBeenMade}
type="submit"
value="save"
>
{saveButtonText}
</Button>
{sending && (
<div className="padding-top-1 padding-bottom-1">
<Spinner /> Sending...
</div>
)}
</ButtonGroup>
</Grid>
</Form>
</AstroDataContext.Provider>
)
Expand Down
5 changes: 5 additions & 0 deletions app/routes/circulars.edit.$circularId/CircularsEditForm.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.DatePicker {
button {
margin-top: 0;
}
}

0 comments on commit bb37175

Please sign in to comment.