Skip to content

Commit

Permalink
✨ Add load project logic
Browse files Browse the repository at this point in the history
  • Loading branch information
benjaminadk committed Jun 13, 2019
1 parent ae52967 commit 8be0e7a
Show file tree
Hide file tree
Showing 7 changed files with 334 additions and 59 deletions.
38 changes: 27 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
"source-map-support": "0.5.12",
"styled-components": "4.2.0",
"styled-icons": "7.11.0",
"system-font-families": "0.4.1"
"system-font-families": "0.4.1",
"yauzl": "2.10.0"
},
"devDependencies": {
"@babel/preset-react": "7.0.0",
Expand Down
1 change: 0 additions & 1 deletion src/renderer/components/App/state.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ const initialState = {
videoInputs: null,
mode: 0,
projectFolder: ''
// projectFolder: '2019-06-10@00-53-20'
}

export { reducer, initialState }
140 changes: 140 additions & 0 deletions src/renderer/components/Editor/SaveAs/Project.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React from 'react'
import { remote, shell } from 'electron'
import path from 'path'
import Svg from '../../Svg'
import Checkbox from '../../Shared/Checkbox'
import Select from '../../Shared/Select'
import { PathInput, Warning } from './styles'
import { Section } from '../Drawer/styles'

export default function Project({
projectFolderPath,
projectFilename,
projectOverwrite,
projectOverwriteError,
setProjectFolderPath,
setProjectFilename,
setProjectOverwrite
}) {
function onInputChange({ target: { name, value } }) {
if (name === 'projectFolderPath') {
setProjectFolderPath(value)
} else if (name === 'projectFilename') {
setProjectFilename(value)
}
}

function onProjectFolderClick() {
const win = remote.getCurrentWindow()
const opts = {
title: 'Save As',
defaultPath: remote.app.getPath('desktop'),
buttonLabel: 'Save',
filters: [
{
name: 'Zip',
extensions: ['zip']
}
]
}
const callback = filepath => {
if (filepath) {
const folder = path.dirname(filepath)
const file = path.basename(filepath).slice(0, -4)
setProjectFolderPath(folder)
setProjectFilename(file)
}
}
remote.dialog.showSaveDialog(win, opts, callback)
}

function onPlusMinusClick(button) {
const re = /\((-?\d+)\)(?!.*\(-?\d+\))/g
if (!projectFilename) {
setProjectFilename('Animation')
return
}
if (re.test(projectFilename)) {
const filename = projectFilename.replace(re, (match, val) => {
const x = button === 'plus' ? Number(val) + 1 : Number(val) - 1
return `(${x})`
})
setProjectFilename(filename)
} else {
setProjectFilename(projectFilename + ' (0)')
}
}

function onShowOverwriteFile() {
const filepath = path.join(projectFolderPath, projectFilename + '.zip')
shell.openExternal(filepath)
}

return (
<>
<Section height={70}>
<div className='title'>
<div className='text'>Save options</div>
<div className='divider' />
</div>
<div>
<Checkbox
value={true}
primary='Save to a folder of your choice.'
style={{ marginLeft: '10px' }}
/>
<Checkbox
value={projectOverwrite}
primary='Overwrite (if already exists).'
style={{ marginLeft: '20px' }}
onClick={() => setProjectOverwrite(!projectOverwrite)}
/>
</div>
</Section>
<Section height={100}>
<div className='title'>
<div className='text'>File</div>
<div className='divider' />
</div>
<div>
<PathInput>
<div className='top'>
<input
type='text'
name='projectFolderPath'
value={projectFolderPath}
onChange={onInputChange}
spellCheck={false}
/>
<div className='action' onClick={onProjectFolderClick}>
<Svg name='folder' />
</div>
</div>
<div className='bottom'>
<input
type='text'
name='projectFilename'
value={projectFilename}
onChange={onInputChange}
spellCheck={false}
/>
<Select width={50} value='.zip' options={['.zip']} onClick={() => {}} />
<div className='action' onClick={() => onPlusMinusClick('plus')}>
<Svg name='insert' />
</div>
<div className='action' onClick={() => onPlusMinusClick('minus')}>
<Svg name='minus' />
</div>
</div>
</PathInput>
{projectOverwriteError && (
<Warning onClick={onShowOverwriteFile}>
<Svg name='warning' />
<div className='text'>A file with the same name already exists.</div>
</Warning>
)}
</div>
</Section>
</>
)
}
47 changes: 21 additions & 26 deletions src/renderer/components/Editor/SaveAs/index.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,10 @@
import React, { useRef } from 'react'
import { remote, shell } from 'electron'
import path from 'path'
import React from 'react'
import Svg from '../../Svg'
import Choice from '../../Shared/Choice'
import Checkbox from '../../Shared/Checkbox'
import Select from '../../Shared/Select'
import NumberInput from '../../Shared/NumberInput'
import RangeInput from '../../Shared/RangeInput'
import Textarea from '../../Shared/Textarea'
import { Encoders, Encoder, RepeatCount, PathInput, Warning } from './styles'
import Gif from './Gif'
import Images from './Images'
import {
Header,
Main,
Section,
ChoiceRow,
Property,
Label,
Footer,
Button,
PostLabel
} from '../Drawer/styles'
import config from 'common/config'

const {
editor: { drawerWidth }
} = config
import Project from './Project'
import { Header, Main, Section, ChoiceRow, Footer, Button } from '../Drawer/styles'

export default function SaveAs({
drawerHeight,
Expand All @@ -48,6 +26,10 @@ export default function SaveAs({
imagesZip,
imagesOverwrite,
imagesOverwriteError,
projectFolderPath,
projectFilename,
projectOverwrite,
projectOverwriteError,
setSaveMode,
setGifFolderPath,
setGifFilename,
Expand All @@ -63,6 +45,9 @@ export default function SaveAs({
setImagesFilename,
setImagesZip,
setImagesOverwrite,
setProjectFolderPath,
setProjectFilename,
setProjectOverwrite,
onAccept,
onCancel
}) {
Expand Down Expand Up @@ -107,7 +92,7 @@ export default function SaveAs({
/>
<Choice
selected={saveMode === 'project'}
icon={<Svg name='image' />}
icon={<Svg name='recent' />}
label='Project'
onClick={() => setSaveMode('project')}
/>
Expand Down Expand Up @@ -151,6 +136,16 @@ export default function SaveAs({
setImagesZip={setImagesZip}
setImagesOverwrite={setImagesOverwrite}
/>
) : saveMode === 'project' ? (
<Project
projectFolderPath={projectFolderPath}
projectFilename={projectFilename}
projectOverwrite={projectOverwrite}
projectOverwriteError={projectOverwriteError}
setProjectFolderPath={setProjectFolderPath}
setProjectFilename={setProjectFilename}
setProjectOverwrite={setProjectOverwrite}
/>
) : null}
</Main>
<Footer>
Expand Down
9 changes: 7 additions & 2 deletions src/renderer/components/Editor/Toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default function Toolbar({
onNewRecordingClick,
onNewWebcamClick,
onNewBoardClick,
onLoadClick,
onDiscardProjectClick,
onCutClick,
onCopyClick,
Expand Down Expand Up @@ -109,12 +110,16 @@ export default function Toolbar({
</GenericGrid>
<SectionText>New</SectionText>
</Section>
<Section width={225}>
<GenericGrid columns={3}>
<Section width={300}>
<GenericGrid columns={4}>
<Action onClick={() => onOpenDrawer('save')}>
<Svg name='save' />
<div className='text'>Save As</div>
</Action>
<Action onClick={onLoadClick}>
<Svg name='folder' />
<div className='text'>Load</div>
</Action>
<Action onClick={() => onOpenDrawer('recent')}>
<Svg name='recent' />
<div className='text'>Recent Projects</div>
Expand Down
Loading

0 comments on commit 8be0e7a

Please sign in to comment.