ref(dialog) Update some dialogs' styles (#12467)
This commit is contained in:
parent
b5065306e5
commit
75d7c4b160
|
@ -45,11 +45,11 @@ const Input = ({
|
||||||
const handleChange = useCallback((e: NativeSyntheticEvent<TextInputChangeEventData>) => {
|
const handleChange = useCallback((e: NativeSyntheticEvent<TextInputChangeEventData>) => {
|
||||||
const { nativeEvent: { text } } = e;
|
const { nativeEvent: { text } } = e;
|
||||||
|
|
||||||
onChange(text);
|
onChange?.(text);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const clearInput = useCallback(() => {
|
const clearInput = useCallback(() => {
|
||||||
onChange('');
|
onChange?.('');
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const blur = useCallback(() => {
|
const blur = useCallback(() => {
|
||||||
|
|
|
@ -70,7 +70,7 @@ export interface IInputProps {
|
||||||
/**
|
/**
|
||||||
* Change callback.
|
* Change callback.
|
||||||
*/
|
*/
|
||||||
onChange: (value: string) => void;
|
onChange?: (value: string) => void;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The input placeholder text.
|
* The input placeholder text.
|
||||||
|
|
|
@ -21,6 +21,8 @@ const useStyles = makeStyles()((theme: Theme) => {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
|
color: theme.palette.text01,
|
||||||
|
...withPixelLineHeight(theme.typography.bodyLongRegular),
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
|
|
@ -21,6 +21,7 @@ interface IProps extends IInputProps {
|
||||||
minRows?: number;
|
minRows?: number;
|
||||||
name?: string;
|
name?: string;
|
||||||
onKeyPress?: (e: React.KeyboardEvent) => void;
|
onKeyPress?: (e: React.KeyboardEvent) => void;
|
||||||
|
readOnly?: boolean;
|
||||||
textarea?: boolean;
|
textarea?: boolean;
|
||||||
type?: 'text' | 'email' | 'number' | 'password';
|
type?: 'text' | 'email' | 'number' | 'password';
|
||||||
}
|
}
|
||||||
|
@ -147,6 +148,7 @@ const Input = React.forwardRef<any, IProps>(({
|
||||||
onChange,
|
onChange,
|
||||||
onKeyPress,
|
onKeyPress,
|
||||||
placeholder,
|
placeholder,
|
||||||
|
readOnly = false,
|
||||||
textarea = false,
|
textarea = false,
|
||||||
type = 'text',
|
type = 'text',
|
||||||
value
|
value
|
||||||
|
@ -155,9 +157,9 @@ const Input = React.forwardRef<any, IProps>(({
|
||||||
const isMobile = isMobileBrowser();
|
const isMobile = isMobileBrowser();
|
||||||
|
|
||||||
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
|
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
|
||||||
onChange(e.target.value), []);
|
onChange?.(e.target.value), []);
|
||||||
|
|
||||||
const clearInput = useCallback(() => onChange(''), []);
|
const clearInput = useCallback(() => onChange?.(''), []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className = { cx(styles.inputContainer, className) }>
|
<div className = { cx(styles.inputContainer, className) }>
|
||||||
|
@ -183,6 +185,7 @@ const Input = React.forwardRef<any, IProps>(({
|
||||||
onChange = { handleChange }
|
onChange = { handleChange }
|
||||||
onKeyPress = { onKeyPress }
|
onKeyPress = { onKeyPress }
|
||||||
placeholder = { placeholder }
|
placeholder = { placeholder }
|
||||||
|
readOnly = { readOnly }
|
||||||
ref = { ref }
|
ref = { ref }
|
||||||
value = { value } />
|
value = { value } />
|
||||||
) : (
|
) : (
|
||||||
|
@ -198,6 +201,7 @@ const Input = React.forwardRef<any, IProps>(({
|
||||||
onChange = { handleChange }
|
onChange = { handleChange }
|
||||||
onKeyPress = { onKeyPress }
|
onKeyPress = { onKeyPress }
|
||||||
placeholder = { placeholder }
|
placeholder = { placeholder }
|
||||||
|
readOnly = { readOnly }
|
||||||
ref = { ref }
|
ref = { ref }
|
||||||
type = { type }
|
type = { type }
|
||||||
value = { value } />
|
value = { value } />
|
||||||
|
|
|
@ -7,6 +7,7 @@ import CopyButton from '../../base/buttons/CopyButton.web';
|
||||||
import { getInviteURL } from '../../base/connection/functions';
|
import { getInviteURL } from '../../base/connection/functions';
|
||||||
import { translate } from '../../base/i18n/functions';
|
import { translate } from '../../base/i18n/functions';
|
||||||
import Dialog from '../../base/ui/components/web/Dialog';
|
import Dialog from '../../base/ui/components/web/Dialog';
|
||||||
|
import Input from '../../base/ui/components/web/Input';
|
||||||
|
|
||||||
interface IProps extends WithTranslation {
|
interface IProps extends WithTranslation {
|
||||||
|
|
||||||
|
@ -37,10 +38,10 @@ function EmbedMeeting({ t, url }: IProps) {
|
||||||
ok = {{ hidden: true }}
|
ok = {{ hidden: true }}
|
||||||
titleKey = { 'embedMeeting.title' }>
|
titleKey = { 'embedMeeting.title' }>
|
||||||
<div className = 'embed-meeting-dialog'>
|
<div className = 'embed-meeting-dialog'>
|
||||||
<textarea
|
<Input
|
||||||
aria-label = { t('dialog.embedMeeting') }
|
accessibilityLabel = { t('dialog.embedMeeting') }
|
||||||
className = 'embed-meeting-code'
|
|
||||||
readOnly = { true }
|
readOnly = { true }
|
||||||
|
textarea = { true }
|
||||||
value = { getEmbedCode() } />
|
value = { getEmbedCode() } />
|
||||||
<CopyButton
|
<CopyButton
|
||||||
aria-label = { t('addPeople.copyLink') }
|
aria-label = { t('addPeople.copyLink') }
|
||||||
|
|
|
@ -34,16 +34,17 @@ const useStyles = makeStyles()((theme: Theme) => {
|
||||||
'& .shortcuts-list__item': {
|
'& .shortcuts-list__item': {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
marginBottom: theme.spacing(2),
|
alignItems: 'center',
|
||||||
...withPixelLineHeight(theme.typography.labelRegular),
|
padding: `${theme.spacing(1)} 0`,
|
||||||
|
...withPixelLineHeight(theme.typography.bodyShortRegular),
|
||||||
color: theme.palette.text01
|
color: theme.palette.text01
|
||||||
},
|
},
|
||||||
|
|
||||||
'& .item-action': {
|
'& .item-action': {
|
||||||
backgroundColor: theme.palette.ui04,
|
backgroundColor: theme.palette.ui04,
|
||||||
fontWeight: 'bold',
|
...withPixelLineHeight(theme.typography.labelBold),
|
||||||
padding: '1px 4px',
|
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
|
||||||
borderRadius: '4px'
|
borderRadius: `${Number(theme.shape.borderRadius) / 2}px`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue