Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-22 18:32:34 +01:00
Code Issues Releases Activity

refactor sheets

Browse Source
This commit is contained in:
Mikael Finstad 2020-11-18 19:11:21 +01:00
parent 85d88cf944
commit 806e270da6
4 changed files with 122 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/HelpSheet.jsx
View File

@ -1,34 +1,23 @@
import React, { memo } from 'react';
import { IoIosCloseCircleOutline } from 'react-icons/io';
import { FaClipboard, FaHandPointRight, FaHandPointLeft, FaStepBackward, FaStepForward } from 'react-icons/fa';
import { motion, AnimatePresence } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import SetCutpointButton from './SetCutpointButton';
import { toast } from './util';
import { primaryTextColor } from './colors';
import Sheet from './Sheet';
const electron = window.require('electron');
const { clipboard } = electron;
const { githubLink } = electron.remote.require('./constants');
const HelpSheet = memo(({
visible, onTogglePress, ffmpegCommandLog, currentCutSeg,
}) => {
const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSeg }) => {
const { t } = useTranslation();
return (
<AnimatePresence>
{visible && (
<motion.div
initial={{ scale: 0, opacity: 0.5 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0, opacity: 0 }}
className="help-sheet"
>
<IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
<Sheet visible={visible} onClosePress={onTogglePress} style={{ background: '#6b6b6b', color: 'white' }}>
<div className="help-sheet">
<h1>{t('Common problems')}</h1>
<p>
{t('Lossless cutting is not an exact science. For some codecs and files it just works. For others you may need to trial and error depending on the codec, keyframes etc to get the best cut.')}
@ -105,9 +94,8 @@ const HelpSheet = memo(({
) : (
<p>{t('The last executed ffmpeg commands will show up here after you run operations. You can copy them to clipboard and modify them to your needs before running on your command line.')}</p>
)}
</motion.div>
)}
</AnimatePresence>
</div>
</Sheet>
);
});

23
src/SettingsSheet.jsx
View File

@ -1,25 +1,14 @@
import React, { memo } from 'react';
import { IoIosCloseCircleOutline } from 'react-icons/io';
import { motion, AnimatePresence } from 'framer-motion';
import { Table } from 'evergreen-ui';
import { useTranslation } from 'react-i18next';
const SettingsSheet = memo(({
visible, onTogglePress, renderSettings,
}) => {
import Sheet from './Sheet';
const SettingsSheet = memo(({ visible, onTogglePress, renderSettings }) => {
const { t } = useTranslation();
return (
<AnimatePresence>
{visible && (
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0, opacity: 0 }}
className="settings-sheet"
>
<IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
<Sheet visible={visible} onClosePress={onTogglePress} style={{ background: 'white', color: 'black' }}>
<Table style={{ marginTop: 40 }}>
<Table.Head>
<Table.TextHeaderCell>
@ -33,9 +22,7 @@ const SettingsSheet = memo(({
{renderSettings()}
</Table.Body>
</Table>
</motion.div>
)}
</AnimatePresence>
</Sheet>
);
});

33
src/Sheet.jsx Normal file
View File

@ -0,0 +1,33 @@
import React, { memo } from 'react';
import { IoIosCloseCircleOutline } from 'react-icons/io';
import { motion, AnimatePresence } from 'framer-motion';
const sheetStyle = {
padding: '1em 2em',
position: 'fixed',
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 10,
overflowY: 'scroll',
};
const Sheet = memo(({ visible, onClosePress, style, children }) => (
<AnimatePresence>
{visible && (
<motion.div
initial={{ scale: 0, opacity: 0.5 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0, opacity: 0 }}
style={{ ...sheetStyle, ...style }}
>
<IoIosCloseCircleOutline role="button" onClick={onClosePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
{children}
</motion.div>
)}
</AnimatePresence>
));
export default Sheet;

25
src/main.css
View File

@ -19,35 +19,14 @@ body {
cursor: default;
}
.help-sheet, .settings-sheet {
padding: 1em 2em;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
overflow-y: scroll;
}
.help-sheet {
background: #6b6b6b;
color: white;
}
.settings-sheet {
background: white;
color: black;
}
.help-sheet h1, .settings-sheet h1 {
.help-sheet h1 {
font-size: 1.2em;
margin-bottom: .5em;
margin-top: 1.3em;
text-transform: uppercase;
}
.help-sheet h2, .settings-sheet h2 {
.help-sheet h2 {
font-size: 1em;
margin-bottom: .5em;
text-transform: uppercase;