ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow sending with <Enter> on tablets

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-14 13:25:51 +02:00
parent d2a7996ea1
commit d56b61c82d
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/left/settings/SettingsGeneral.tsx
View File

@ -8,7 +8,7 @@ import type { ISettings, TimeFormat } from '../../../types';
import { SettingsScreens } from '../../../types'; import { SettingsScreens } from '../../../types';
import { import {
getSystemTheme, IS_IOS, IS_MAC_OS, IS_TOUCH_ENV, getSystemTheme, IS_ANDROID, IS_IOS, IS_MAC_OS,
} from '../../../util/windowEnvironment'; } from '../../../util/windowEnvironment';
import { pick } from '../../../util/iteratees'; import { pick } from '../../../util/iteratees';
import { setTimeFormat } from '../../../util/langProvider'; import { setTimeFormat } from '../../../util/langProvider';
@ -19,6 +19,7 @@ import ListItem from '../../ui/ListItem';
import RangeSlider from '../../ui/RangeSlider'; import RangeSlider from '../../ui/RangeSlider';
import type { IRadioOption } from '../../ui/RadioGroup'; import type { IRadioOption } from '../../ui/RadioGroup';
import RadioGroup from '../../ui/RadioGroup'; import RadioGroup from '../../ui/RadioGroup';
import useAppLayout from '../../../hooks/useAppLayout';
type OwnProps = { type OwnProps = {
isActive?: boolean; isActive?: boolean;
@ -61,7 +62,10 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
const lang = useLang(); const lang = useLang();
const APPEARANCE_THEME_OPTIONS: IRadioOption[] = [{ const { isMobile } = useAppLayout();
const isMobileDevice = isMobile && (IS_IOS || IS_ANDROID);
const appearanceThemeOptions: IRadioOption[] = [{
label: lang('EmptyChat.Appearance.Light'), label: lang('EmptyChat.Appearance.Light'),
value: 'light', value: 'light',
}, { }, {
@ -72,11 +76,11 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
value: 'auto', value: 'auto',
}]; }];
const KEYBOARD_SEND_OPTIONS = !IS_TOUCH_ENV ? [ const keyboardSendOptions = !isMobileDevice ? [
{ value: 'enter', label: lang('lng_settings_send_enter'), subLabel: 'New line by Shift + Enter' }, { value: 'enter', label: lang('lng_settings_send_enter'), subLabel: 'New line by Shift + Enter' },
{ {
value: 'ctrl-enter', value: 'ctrl-enter',
label: lang(IS_MAC_OS ? 'lng_settings_send_cmdenter' : 'lng_settings_send_ctrlenter'), label: lang(IS_MAC_OS || IS_IOS ? 'lng_settings_send_cmdenter' : 'lng_settings_send_ctrlenter'),
subLabel: 'New line by Enter', subLabel: 'New line by Enter',
}, },
] : undefined; ] : undefined;
@ -143,7 +147,7 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
</h4> </h4>
<RadioGroup <RadioGroup
name="theme" name="theme"
options={APPEARANCE_THEME_OPTIONS} options={appearanceThemeOptions}
selected={shouldUseSystemTheme ? 'auto' : theme} selected={shouldUseSystemTheme ? 'auto' : theme}
onChange={handleAppearanceThemeChange} onChange={handleAppearanceThemeChange}
/> />
@ -161,13 +165,13 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
/> />
</div> </div>
{KEYBOARD_SEND_OPTIONS && ( {keyboardSendOptions && (
<div className="settings-item"> <div className="settings-item">
<h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>{lang('VoiceOver.Keyboard')}</h4> <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>{lang('VoiceOver.Keyboard')}</h4>
<RadioGroup <RadioGroup
name="keyboard-send-settings" name="keyboard-send-settings"
options={KEYBOARD_SEND_OPTIONS} options={keyboardSendOptions}
onChange={handleMessageSendComboChange} onChange={handleMessageSendComboChange}
selected={messageSendKeyCombo} selected={messageSendKeyCombo}
/> />

7
src/components/middle/composer/MessageInput.tsx
View File

@ -154,6 +154,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
const [selectedRange, setSelectedRange] = useState<Range>(); const [selectedRange, setSelectedRange] = useState<Range>();
const [isTextFormatterDisabled, setIsTextFormatterDisabled] = useState<boolean>(false); const [isTextFormatterDisabled, setIsTextFormatterDisabled] = useState<boolean>(false);
const { isMobile } = useAppLayout(); const { isMobile } = useAppLayout();
const isMobileDevice = isMobile && (IS_IOS || IS_ANDROID);
useInputCustomEmojis( useInputCustomEmojis(
getHtml, getHtml,
@ -363,7 +364,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
if (!isComposing && e.key === 'Enter' && !e.shiftKey) { if (!isComposing && e.key === 'Enter' && !e.shiftKey) {
if ( if (
!(IS_IOS || IS_ANDROID) !isMobileDevice
&& ( && (
(messageSendKeyCombo === 'enter' && !e.shiftKey) (messageSendKeyCombo === 'enter' && !e.shiftKey)
|| (messageSendKeyCombo === 'ctrl-enter' && (e.ctrlKey || e.metaKey)) || (messageSendKeyCombo === 'ctrl-enter' && (e.ctrlKey || e.metaKey))
@ -441,7 +442,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
!chatId !chatId
|| editableInputId !== EDITABLE_INPUT_ID || editableInputId !== EDITABLE_INPUT_ID
|| noFocusInterception || noFocusInterception
|| (IS_TOUCH_ENV && isMobile) || isMobileDevice
|| isSelectModeActive || isSelectModeActive
) { ) {
return undefined; return undefined;
@ -488,7 +489,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
return () => { return () => {
document.removeEventListener('keydown', handleDocumentKeyDown, true); document.removeEventListener('keydown', handleDocumentKeyDown, true);
}; };
}, [chatId, editableInputId, isMobile, isSelectModeActive, noFocusInterception]); }, [chatId, editableInputId, isMobileDevice, isSelectModeActive, noFocusInterception]);
useEffect(() => { useEffect(() => {
const captureFirstTab = debounce((e: KeyboardEvent) => { const captureFirstTab = debounce((e: KeyboardEvent) => {