Fixed form labels

This commit is contained in:
Alejandro Celaya 2022-03-05 19:43:10 +01:00
parent 661b9b2cc1
commit dee1932a64
7 changed files with 28 additions and 37 deletions

View file

@ -25,8 +25,8 @@ const RealTimeUpdatesSettings = (
</FormText> </FormText>
</ToggleSwitch> </ToggleSwitch>
</FormGroup> </FormGroup>
<FormGroup className="mb-0"> <div>
<label className={classNames({ 'text-muted': !realTimeUpdates.enabled })}> <label className={classNames('form-label', { 'text-muted': !realTimeUpdates.enabled })}>
Real-time updates frequency (in minutes): Real-time updates frequency (in minutes):
</label> </label>
<Input <Input
@ -47,7 +47,7 @@ const RealTimeUpdatesSettings = (
{!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'} {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
</FormText> </FormText>
)} )}
</FormGroup> </div>
</SimpleCard> </SimpleCard>
); );

View file

@ -50,8 +50,8 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
</FormText> </FormText>
</ToggleSwitch> </ToggleSwitch>
</FormGroup> </FormGroup>
<FormGroup className="mb-0"> <div>
<label>Tag suggestions search mode:</label> <label className="form-label">Tag suggestions search mode:</label>
<DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}> <DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}>
<DropdownItem <DropdownItem
active={!shortUrlCreation.tagFilteringMode || shortUrlCreation.tagFilteringMode === 'startsWith'} active={!shortUrlCreation.tagFilteringMode || shortUrlCreation.tagFilteringMode === 'startsWith'}
@ -67,7 +67,7 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
</DropdownItem> </DropdownItem>
</DropdownBtn> </DropdownBtn>
<FormText>{tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}</FormText> <FormText>{tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}</FormText>
</FormGroup> </div>
</SimpleCard> </SimpleCard>
); );
}; };

View file

@ -1,5 +1,4 @@
import { FC } from 'react'; import { FC } from 'react';
import { FormGroup } from 'reactstrap';
import { OrderingDropdown } from '../utils/OrderingDropdown'; import { OrderingDropdown } from '../utils/OrderingDropdown';
import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data'; import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
@ -14,13 +13,11 @@ export const ShortUrlsListSettings: FC<ShortUrlsListProps> = (
{ settings: { shortUrlsList }, setShortUrlsListSettings }, { settings: { shortUrlsList }, setShortUrlsListSettings },
) => ( ) => (
<SimpleCard title="Short URLs list" className="h-100"> <SimpleCard title="Short URLs list" className="h-100">
<FormGroup className="mb-0"> <label className="form-label">Default ordering for short URLs list:</label>
<label>Default ordering for short URLs list:</label> <OrderingDropdown
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS}
items={SHORT_URLS_ORDERABLE_FIELDS} order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING} onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })} />
/>
</FormGroup>
</SimpleCard> </SimpleCard>
); );

View file

@ -16,7 +16,7 @@ interface TagsProps {
export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => ( export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
<SimpleCard title="Tags" className="h-100"> <SimpleCard title="Tags" className="h-100">
<FormGroup> <FormGroup>
<label>Default display mode when managing tags:</label> <label className="form-label">Default display mode when managing tags:</label>
<TagsModeDropdown <TagsModeDropdown
mode={tags?.defaultMode ?? 'cards'} mode={tags?.defaultMode ?? 'cards'}
renderTitle={(tagsMode) => capitalize(tagsMode)} renderTitle={(tagsMode) => capitalize(tagsMode)}
@ -24,13 +24,13 @@ export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSetting
/> />
<FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText> <FormText>Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</FormText>
</FormGroup> </FormGroup>
<FormGroup className="mb-0"> <div>
<label>Default ordering for tags list:</label> <label className="form-label">Default ordering for tags list:</label>
<OrderingDropdown <OrderingDropdown
items={TAGS_ORDERABLE_FIELDS} items={TAGS_ORDERABLE_FIELDS}
order={tags?.defaultOrdering ?? {}} order={tags?.defaultOrdering ?? {}}
onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })} onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
/> />
</FormGroup> </div>
</SimpleCard> </SimpleCard>
); );

View file

@ -1,4 +1,3 @@
import { FormGroup } from 'reactstrap';
import { FC } from 'react'; import { FC } from 'react';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector'; import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
@ -11,13 +10,11 @@ interface VisitsProps {
export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => ( export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
<SimpleCard title="Visits" className="h-100"> <SimpleCard title="Visits" className="h-100">
<FormGroup className="mb-0"> <label className="form-label">Default interval to load on visits sections:</label>
<label>Default interval to load on visits sections:</label> <DateIntervalSelector
<DateIntervalSelector allText="All visits"
allText="All visits" active={settings.visits?.defaultInterval ?? 'last30Days'}
active={settings.visits?.defaultInterval ?? 'last30Days'} onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })} />
/>
</FormGroup>
</SimpleCard> </SimpleCard>
); );

View file

@ -3,7 +3,6 @@ import { Modal, FormGroup, ModalBody, ModalHeader, Row, Button } from 'reactstra
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons'; import { faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons';
import { ExternalLink } from 'react-external-link'; import { ExternalLink } from 'react-external-link';
import classNames from 'classnames';
import { ShortUrlModalProps } from '../data'; import { ShortUrlModalProps } from '../data';
import { SelectedServer } from '../../servers/data'; import { SelectedServer } from '../../servers/data';
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon'; import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
@ -56,10 +55,8 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Row> <Row>
<FormGroup <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
className={classNames({ 'col-md-4': willRenderThreeControls, 'col-md-6': !willRenderThreeControls })} <label>Size: {size}px</label>
>
<label className="mb-0">Size: {size}px</label>
<input <input
type="range" type="range"
className="form-control-range" className="form-control-range"
@ -71,8 +68,8 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
/> />
</FormGroup> </FormGroup>
{capabilities.marginIsSupported && ( {capabilities.marginIsSupported && (
<FormGroup className={willRenderThreeControls ? 'col-md-4' : 'col-md-6'}> <FormGroup className={`d-grid ${willRenderThreeControls ? 'col-md-4' : 'col-md-6'}`}>
<label className="mb-0">Margin: {margin}px</label> <label>Margin: {margin}px</label>
<input <input
type="range" type="range"
className="form-control-range" className="form-control-range"

View file

@ -15,13 +15,13 @@ export interface FormGroupContainerProps {
} }
export const FormGroupContainer: FC<FormGroupContainerProps> = ( export const FormGroupContainer: FC<FormGroupContainerProps> = (
{ children, value, onChange, id, type, required, placeholder, className, labelClassName }, { children, value, onChange, id, type, required, placeholder, className, labelClassName = '' },
) => { ) => {
const forId = useRef<string>(id ?? uuid()); const forId = useRef<string>(id ?? uuid());
return ( return (
<FormGroup className={className ?? ''}> <FormGroup className={className ?? ''}>
{children && <label htmlFor={forId.current} className={labelClassName ?? ''}>{children}:</label>} <label htmlFor={forId.current} className={`form-label ${labelClassName}`}>{children}:</label>
<input <input
className="form-control" className="form-control"
type={type ?? 'text'} type={type ?? 'text'}