Skip to content

Commit 2511019

Browse files
mifimifi
committed
ui improvements
1 parent 2511014 commit 2511019

File tree

8 files changed

+51
-45
lines changed

8 files changed

+51
-45
lines changed

‎src/renderer/src/BottomBar.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { GiSoundWaves } from 'react-icons/gi';
88
// import useTraceUpdate from 'use-trace-update';
99
import invariant from 'tiny-invariant';
1010

11-
import { primaryTextColor, primaryColor, darkModeTransition } from './colors';
11+
import { primaryTextColor, primaryColor, darkModeTransition, dangerColor } from './colors';
1212
import SegmentCutpointButton from './components/SegmentCutpointButton';
1313
import SetCutpointButton from './components/SetCutpointButton';
1414
import ExportButton from './components/ExportButton';
@@ -49,17 +49,15 @@ const InvertCutModeButton = memo(({ invertCutSegments, setInvertCutSegments }: {
4949
}, [setInvertCutSegments, t]);
5050

5151
return (
52-
<div style={{ marginRight: 5 }}>
52+
<div>
5353
<motion.div
54-
style={{ width: 24, height: 24 }}
5554
animate={{ rotateX: invertCutSegments ? 0 : 180 }}
5655
transition={{ duration: 0.3 }}
5756
>
5857
<FaYinYang
59-
size={24}
6058
role="button"
6159
title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
62-
style={{ color: invertCutSegments ? primaryTextColor : undefined }}
60+
style={{ display: 'block', fontSize: '1.5em', color: invertCutSegments ? primaryTextColor : undefined }}
6361
onClick={onYinYangClick}
6462
/>
6563
</motion.div>
@@ -383,8 +381,7 @@ function BottomBar({
383381
<>
384382
{hasAudio && (
385383
<GiSoundWaves
386-
size={24}
387-
style={{ padding: '0 .1em', color: waveformMode != null ? primaryTextColor : undefined }}
384+
style={{ fontSize: '1.6em', padding: '0 .1em', color: waveformMode != null ? primaryTextColor : undefined }}
388385
role="button"
389386
title={t('Show waveform')}
390387
onClick={() => toggleWaveformMode()}
@@ -393,14 +390,14 @@ function BottomBar({
393390
{hasVideo && (
394391
<>
395392
<FaImages
396-
style={{ fontSize: '1em', padding: '0 .2em', color: showThumbnails ? primaryTextColor : undefined }}
393+
style={{ fontSize: '1.1em', padding: '0 .2em', color: showThumbnails ? primaryTextColor : undefined }}
397394
role="button"
398395
title={t('Show thumbnails')}
399396
onClick={toggleShowThumbnails}
400397
/>
401398

402399
<FaKey
403-
style={{ fontSize: '.9em', padding: '0 .2em', color: keyframesEnabled ? primaryTextColor : undefined }}
400+
style={{ fontSize: '1em', padding: '0 .2em', color: keyframesEnabled ? primaryTextColor : undefined }}
404401
role="button"
405402
title={t('Show keyframes')}
406403
onClick={toggleShowKeyframes}
@@ -504,69 +501,74 @@ function BottomBar({
504501

505502
<div
506503
className="no-user-select"
507-
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '3px 4px' }}
504+
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '.2em .3em', gap: '.5em' }}
508505
>
509506
<InvertCutModeButton invertCutSegments={invertCutSegments} setInvertCutSegments={setInvertCutSegments} />
510507

511-
<SimpleModeButton style={{ flexShrink: 0 }} />
508+
<div>
509+
<SimpleModeButton style={{ verticalAlign: 'middle' }} />
512510

513-
{simpleMode && <div role="button" onClick={toggleSimpleMode} style={{ marginLeft: 5, fontSize: '90%' }}>{t('Toggle advanced view')}</div>}
511+
{simpleMode && (
512+
<span role="button" onClick={toggleSimpleMode} style={{ fontSize: '.8em', marginLeft: '.1em' }}>{t('Toggle advanced view')}</span>
513+
)}
514+
</div>
514515

515516
{!simpleMode && (
516517
<>
517-
<div role="button" style={{ marginRight: 5, marginLeft: 10 }} title={t('Zoom')} onClick={timelineToggleComfortZoom}>{Math.floor(zoom)}x</div>
518+
<div role="button" title={t('Zoom')} onClick={timelineToggleComfortZoom}>{Math.floor(zoom)}x</div>
518519

519-
<Select style={{ height: 20, flexBasis: 85, flexGrow: 0 }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title={t('Zoom')} onChange={withBlur((e) => setZoom(() => parseInt(e.target.value, 10)))}>
520+
<Select style={{ width: '4.5em' }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title={t('Zoom')} onChange={withBlur((e) => setZoom(() => parseInt(e.target.value, 10)))}>
520521
<option key="" value="" disabled>{t('Zoom')}</option>
521522
{zoomOptions.map((val) => (
522523
<option key={val} value={String(val)}>{t('Zoom')} {val}x</option>
523524
))}
524525
</Select>
525526

526-
{detectedFps != null && (
527-
<div title={t('Video FPS')} role="button" onClick={handleChangePlaybackRateClick} style={{ color: 'var(--gray-11)', fontSize: '.7em', marginLeft: 6 }}>{(detectedFps * outputPlaybackRate).toFixed(3)}</div>
528-
)}
527+
<div ref={playbackRateRef} title={t('Playback rate')} style={{ color: 'var(--gray-11)', fontSize: '.7em' }}>{playbackRate.toFixed(1)}</div>
529528

530-
<IoMdSpeedometer title={t('Change FPS')} style={{ padding: '0 .2em', fontSize: '1.3em' }} role="button" onClick={handleChangePlaybackRateClick} />
529+
<div>
530+
<IoMdSpeedometer title={t('Change FPS')} style={{ fontSize: '1.3em', verticalAlign: 'middle' }} role="button" onClick={handleChangePlaybackRateClick} />
531531

532-
<div ref={playbackRateRef} title={t('Playback rate')} style={{ color: 'var(--gray-11)', fontSize: '.7em', marginLeft: '.1em' }}>{playbackRate.toFixed(1)}</div>
532+
{detectedFps != null && (
533+
<span title={t('Video FPS')} role="button" onClick={handleChangePlaybackRateClick} style={{ color: 'var(--gray-11)', fontSize: '.7em', marginLeft: '.3em' }}>{(detectedFps * outputPlaybackRate).toFixed(3)}</span>
534+
)}
535+
</div>
533536
</>
534537
)}
535538

536-
<div style={{ flexGrow: 1 }} />
537-
538539
{hasVideo && (
539-
<>
540-
<span style={{ textAlign: 'right', display: 'inline-block', fontSize: '.8em', marginRight: '.3em' }}>{isRotationSet && rotationStr}</span>
540+
<div onClick={increaseRotation} role="button">
541541
<MdRotate90DegreesCcw
542-
style={{ fontSize: '1.2em', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
542+
style={{ fontSize: '1.3em', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
543543
title={`${t('Set output rotation. Current: ')} ${isRotationSet ? rotationStr : t('Don\'t modify')}`}
544-
onClick={increaseRotation}
545-
role="button"
546544
/>
547-
</>
545+
<span style={{ textAlign: 'right', display: 'inline-block', fontSize: '.8em', marginLeft: '.1em' }}>{isRotationSet && rotationStr}</span>
546+
</div>
548547
)}
549548

549+
550+
<div style={{ flexGrow: 1 }} />
551+
550552
{!simpleMode && isFileOpened && (
551553
<FaTrashAlt
552554
title={t('Close file and clean up')}
553-
style={{ padding: '0 .7em', fontSize: '1em' }}
555+
style={{ fontSize: '1em', color: dangerColor }}
554556
onClick={cleanupFilesDialog}
555557
role="button"
556558
/>
557559
)}
558560

559561
{hasVideo && (
560-
<>
561-
{!simpleMode && <CaptureFormatButton style={{ width: '3.7em', textAlign: 'center' }} />}
562-
562+
<div>
563563
<IoIosCamera
564-
style={{ paddingLeft: '.1em', paddingRight: '.5em' }}
565-
size={25}
564+
role="button"
565+
style={{ fontSize: '1.9em', verticalAlign: 'middle' }}
566566
title={t('Capture frame')}
567567
onClick={captureSnapshot}
568568
/>
569-
</>
569+
570+
{!simpleMode && <CaptureFormatButton style={{ width: '3.7em', textAlign: 'center', marginLeft: '.1em' }} />}
571+
</div>
570572
)}
571573

572574
{(!simpleMode || !exportConfirmEnabled) && <ToggleExportConfirm style={{ marginRight: '.5em' }} />}

‎src/renderer/src/NoFileLoaded.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode, keyBindingBy
7575

7676
<div style={{ fontSize: '1.3em', color: 'var(--gray-11)' }} role="button" onClick={(e) => e.stopPropagation()}>
7777
{simpleMode ? (
78-
<Trans><SimpleModeButton style={{ verticalAlign: 'middle' }} size={16} /> to show advanced view</Trans>
78+
<Trans><SimpleModeButton style={{ verticalAlign: 'middle' }} /> to show advanced view</Trans>
7979
) : (
80-
<Trans><SimpleModeButton style={{ verticalAlign: 'middle' }} size={16} /> to show simple view</Trans>
80+
<Trans><SimpleModeButton style={{ verticalAlign: 'middle' }} /> to show simple view</Trans>
8181
)}
8282
</div>
8383

‎src/renderer/src/colors.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export const saveColor = 'var(--green-11)';
2+
export const dangerColor = 'var(--red-11)';
23
export const primaryColor = 'var(--cyan-9)';
34
export const primaryTextColor = 'var(--cyan-11)';
45
export const controlsBackground = 'var(--gray-4)';

‎src/renderer/src/components/ExpressionDialog.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DialogButton } from './Button';
66
import TextInput from './TextInput';
77
import { useGenericDialogContext } from './GenericDialog';
88
import { ButtonRow } from './Dialog';
9+
import { dangerColor } from '../colors';
910

1011

1112
interface Props {
@@ -73,11 +74,11 @@ const ExpressionDialog = forwardRef<HTMLDivElement, Props>(({ onSubmit, examples
7374
placeholder={t('Enter JavaScript expression')}
7475
value={value}
7576
onChange={(e) => setValue(e.target.value)}
76-
style={{ margin: '1em 0', width: '100%', boxSizing: 'border-box' }}
77+
style={{ margin: '1em 0', padding: '1em', width: '100%', boxSizing: 'border-box', fontFamily: 'monospace' }}
7778
/>
7879

7980
{error != null && (
80-
<div style={{ color: 'var(--red-9)', fontWeight: 'bold' }}>
81+
<div style={{ color: dangerColor, fontWeight: 'bold' }}>
8182
{error}
8283
</div>
8384
)}

‎src/renderer/src/components/FileNameTemplateEditor.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Select from './Select';
1414
import TextInput from './TextInput';
1515
import Button from './Button';
1616
import * as Dialog from './Dialog';
17+
import { dangerColor } from '../colors';
1718

1819
const electron = window.require('electron');
1920

@@ -188,7 +189,7 @@ function FileNameTemplateEditor(opts: {
188189
</Dialog.Root>
189190
)}
190191

191-
<Button title={t('Reset')} onClick={reset} style={{ marginLeft: '.3em' }}><FaUndo style={{ fontSize: '.8em', color: 'var(--red-11)' }} /></Button>
192+
<Button title={t('Reset')} onClick={reset} style={{ marginLeft: '.3em' }}><FaUndo style={{ fontSize: '.8em', color: dangerColor }} /></Button>
192193
{!haveImportantMessage && (
193194
<Button title={t('Close')} onClick={onHideClick} style={{ marginLeft: '.3em' }}><FaCheck style={{ fontSize: '.8em' }} /></Button>
194195
)}
@@ -224,7 +225,7 @@ function FileNameTemplateEditor(opts: {
224225

225226
{problems.error != null ? (
226227
<div style={{ marginBottom: '1em', fontSize: '.9em' }}>
227-
<FaExclamationTriangle color="var(--red-9)" style={{ verticalAlign: 'middle', fontSize: '1.1em' }} /> {problems.error}
228+
<FaExclamationTriangle color={dangerColor} style={{ verticalAlign: 'middle', fontSize: '1.1em' }} /> {problems.error}
228229
</div>
229230
) : (
230231
<>

‎src/renderer/src/components/SimpleModeButton.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@ import { primaryTextColor } from '../colors';
66
import useUserSettings from '../hooks/useUserSettings';
77

88

9-
function SimpleModeButton({ size = 20, style }: { size?: number, style: CSSProperties }) {
9+
function SimpleModeButton({ style }: { style?: CSSProperties } = {}) {
1010
const { t } = useTranslation();
1111
const { simpleMode, toggleSimpleMode } = useUserSettings();
1212

1313
return (
1414
<FaBaby
1515
title={t('Toggle advanced view')}
16-
size={size}
17-
style={{ color: simpleMode ? primaryTextColor : 'var(--gray-12)', ...style }}
16+
style={{ fontSize: '1.2em', color: simpleMode ? primaryTextColor : 'var(--gray-12)', ...style }}
1817
onClick={toggleSimpleMode}
1918
/>
2019
);

‎src/renderer/src/dialogs/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Checkbox from '../components/Checkbox';
1313
import { isWindows, showItemInFolder } from '../util';
1414
import { ParseTimecode } from '../types';
1515
import { FindKeyframeMode } from '../ffmpeg';
16+
import { dangerColor } from '../colors';
1617

1718
const remote = window.require('@electron/remote');
1819
const { dialog } = remote;
@@ -100,7 +101,7 @@ export async function askForFileOpenAction(inputOptions: Record<string, string>)
100101
))}
101102

102103
<button type="button" onClick={() => onClick()} className="button-unstyled" style={{ display: 'block', marginTop: '.5em' }}>
103-
<FaArrowRight style={{ color: 'var(--red-11)' }} /> {i18n.t('Cancel')}
104+
<FaArrowRight style={{ color: dangerColor, verticalAlign: 'middle' }} /> {i18n.t('Cancel')}
104105
</button>
105106

106107
</div>

‎src/renderer/src/hooks/useTimecode.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import * as AlertDialog from '../components/AlertDialog';
1111
import TextInput from '../components/TextInput';
1212
import { ButtonRow } from '../components/Dialog';
1313
import { DialogButton } from '../components/Button';
14+
import { dangerColor } from '../colors';
1415

1516

1617
export default ({ detectedFps, timecodeFormat, showGenericDialog }: {
@@ -119,7 +120,7 @@ export default ({ detectedFps, timecodeFormat, showGenericDialog }: {
119120
/>
120121

121122
{error != null && (
122-
<div style={{ color: 'var(--red-9)', fontWeight: 'bold' }}>
123+
<div style={{ color: dangerColor, fontWeight: 'bold' }}>
123124
{error}
124125
</div>
125126
)}

0 commit comments

Comments
 (0)