1
0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-25 03:33:14 +01:00

improve text #2108

and make it more clear that you can edit file name
This commit is contained in:
Mikael Finstad 2024-08-15 16:03:44 +02:00
parent c0ee8d7ee8
commit ed3fb95c51
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
2 changed files with 9 additions and 2 deletions

View File

@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import { WarningSignIcon, ErrorIcon, Button, IconButton, TickIcon, ResetIcon } from 'evergreen-ui'; import { WarningSignIcon, ErrorIcon, Button, IconButton, TickIcon, ResetIcon } from 'evergreen-ui';
import { IoIosHelpCircle } from 'react-icons/io'; import { IoIosHelpCircle } from 'react-icons/io';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { FaEdit } from 'react-icons/fa';
import { ReactSwal } from '../swal'; import { ReactSwal } from '../swal';
import HighlightedText from './HighlightedText'; import HighlightedText from './HighlightedText';
@ -117,7 +118,12 @@ function OutSegTemplateEditor({ outSegTemplate, setOutSegTemplate, generateOutSe
<motion.div style={{ maxWidth: 600 }} animate={{ margin: needToShow ? '1.5em 0' : 0 }}> <motion.div style={{ maxWidth: 600 }} animate={{ margin: needToShow ? '1.5em 0' : 0 }}>
<div>{outSegFileNames != null && t('Output name(s):', { count: outSegFileNames.length })}</div> <div>{outSegFileNames != null && t('Output name(s):', { count: outSegFileNames.length })}</div>
{outSegFileNames != null && <HighlightedText role="button" onClick={onShowClick} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: needToShow ? undefined : 'pointer' }}>{outSegFileNames[currentSegIndexSafe] || outSegFileNames[0] || '-'}</HighlightedText>} {outSegFileNames != null && (
<HighlightedText role="button" onClick={onShowClick} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: needToShow ? undefined : 'pointer' }}>
{outSegFileNames[currentSegIndexSafe] || outSegFileNames[0] || '-'}
{!needToShow && <FaEdit style={{ fontSize: '.9em', marginLeft: '.4em', verticalAlign: 'middle' }} />}
</HighlightedText>
)}
<AnimatePresence> <AnimatePresence>
{needToShow && ( {needToShow && (
@ -127,6 +133,7 @@ function OutSegTemplateEditor({ outSegTemplate, setOutSegTemplate, generateOutSe
animate={{ opacity: 1, height: 'auto', marginTop: '1em' }} animate={{ opacity: 1, height: 'auto', marginTop: '1em' }}
exit={{ opacity: 0, height: 0, marginTop: 0 }} exit={{ opacity: 0, height: 0, marginTop: 0 }}
> >
<div style={{ color: 'var(--gray11)', fontSize: '.8em' }}>{t('Output file name template')}:</div>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '.2em' }}> <div style={{ display: 'flex', alignItems: 'center', marginBottom: '.2em' }}>
<TextInput ref={inputRef} onChange={onTextChange} value={text} autoComplete="off" autoCapitalize="off" autoCorrect="off" /> <TextInput ref={inputRef} onChange={onTextChange} value={text} autoComplete="off" autoCapitalize="off" autoCorrect="off" />

View File

@ -129,7 +129,7 @@ function Settings({
<KeyCell> <KeyCell>
{t('Show export options screen before exporting?')} {t('Show export options screen before exporting?')}
<div style={detailsStyle}> <div style={detailsStyle}>
{t('This gives you an overview of the export and allows you to customise more parameters before exporting.')} {t('This gives you an overview of the export and allows you to customise more parameters before exporting, like changing the output file name.')}
</div> </div>
</KeyCell> </KeyCell>
<td> <td>