Skip to content

Commit

Permalink
Refactoring view (#16)
Browse files Browse the repository at this point in the history 
* add module to package

* application view

* fix a typing error

* edit code base on comments
  • Loading branch information
@yuda1124 @ovekyc
yuda1124 authored and ovekyc committed Jan 17, 2017
1 parent b4e324e commit ac8b469
Show file tree
Hide file tree
Showing 17 changed files with 732 additions and 60 deletions.
Binary file added app/resources/checked/checked.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/checked/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/checked/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/close/close.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/close/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/close/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/not-checked/not-checked.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/not-checked/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/resources/not-checked/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 35 additions & 4 deletions app/view/app-component.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,57 @@
import React from 'react';
import ClipList from './clip-list';
import Header from './header';
import SettingView from './settingView';
import autobind from 'autobind-decorator';
import setting from '../setting.json';
import {ipcRenderer} from 'electron';
import update from 'react-addons-update';

@autobind
export default class AppComponent extends React.Component {
constructor() {
super();
this.state = {
enableDelete: false
enableDelete: false,
currentScene: 'clipList',
// TODO : change it using router later
appSetting: {
launchOnStartup: false,
showNotification: false,
enableTranslation: setting.enableServiceHook
}
};
}

setDeleteEnabled() {
this.setState({enableDelete: !this.state.enableDelete});
}

setCurrentScene(scene) {
this.setState({currentScene: scene});
}

toggleEnableTranslation() {
ipcRenderer.send('enable-translate', !this.state.appSetting.enableTranslation);
this.setState({
appSetting: update(this.state.appSetting,
{enableTranslation: {$set: !this.state.appSetting.enableTranslation}}
)
});
}

render() {
return (
<div>
<Header setDeleteEnabled={this.setDeleteEnabled}/>
<ClipList enableDelete={this.state.enableDelete}/>
<div style={{height: window.innerHeight, background: '#fbfbfb'}}>
<Header setDeleteEnabled={this.setDeleteEnabled}
setCurrentScene={this.setCurrentScene}
currentScene={this.state.currentScene}/>
{this.state.currentScene === 'clipList' ?
<ClipList enableDelete={this.state.enableDelete}
enableTranslation={this.state.appSetting.enableTranslation}/> :
<SettingView appSetting={this.state.appSetting}
toggleEnableTranslation={this.toggleEnableTranslation}/>
}
</div>
);
}
Expand Down
89 changes: 77 additions & 12 deletions app/view/clip-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ export default class ClipContainer extends React.Component {
super(props);
this.state = {
clips: [],
checkedClips: []
checkedClips: [],
launchOnStartup: false,
showNotification: false
};
}

Expand All @@ -28,6 +30,10 @@ export default class ClipContainer extends React.Component {
});
}

toggleEnableTranslation() {
this.setState({enableTranslation: !this.state.enableTranslation});
}

loadClips() {
this.setState({clips: ipcRenderer.sendSync('load-clips')});
}
Expand All @@ -45,7 +51,14 @@ export default class ClipContainer extends React.Component {

renderDeleteBar() {
return (
<div style={{flexBasis: 47, display: 'flex', flexDirection: 'column'}}>
<div style={{
flexBasis: 47,
display: 'flex',
flexDirection: 'column',
borderBottomStyle: 'solid',
borderBottomWidth: 1,
borderBottomColor: '#eaefef'
}}>
<div style={{flexBasis: 20}}/>
<div style={{display: 'flex', flexBasis: 15}}>
<div style={{flexBasis: 8}}/>
Expand Down Expand Up @@ -85,22 +98,74 @@ export default class ClipContainer extends React.Component {
);
}
// TODO : refactoring component

renderDeleteOption(isChecked, source) {
return (
<div style={{display: 'flex', flexDirection: 'column', flexBasis: 37}}>
<div style={{flex: 1, display: 'flex'}}>
<div style={{flexBasis: 8}}/>
<div style={{
flexBasis: 14,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<img src={isChecked ?
'../resources/delete_checked/[email protected]' :
'../resources/delete_unchecked/[email protected]'
}
style={{height: 14, width: 14}}
onClick={()=>{
if (isChecked) {
this.deleteCheckedClips(source);
return;
}
this.addCheckedClips(source);
}}/>
</div>
<div style={{flexBasis: 15}}/>
</div>
{this.props.enableTranslation && <div style={{flexBasis: 10}}/>}
</div>
);
}

render() {
return (
<div style={{display: 'flex', flex: 1}}>
<div style={{flexBasis: 14, flexShrink: 0}}/>
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
{this.props.enableDelete && this.renderDeleteBar() }
{this.props.enableDelete && this.renderDeleteBar()}
<div style={{flexBasis: this.props.enableDelete ? 12 : 24}}/>
{this.props.enableTranslation && !this.props.enableDelete &&
<Clip source='Enter text'
google='Translation'
enableTranslation={this.props.enableTranslation}
textStyle={{
color: '#c6cbcc',
fontSize: 12,
fontFamiliy: 'SanFranciscoText-Regular'
}}/>
}
{this.state.clips.map((content, i) =>
<Clip
source={content.source}
deleteLog={this.deleteClip}
enableDelete={this.props.enableDelete}
index={i}
addCheckedClips={this.addCheckedClips}
deleteCheckedClips={this.deleteCheckedClips}
isChecked={this.state.checkedClips.indexOf(content.source) >= 0}
/>
<div style={{display: 'flex'}}>
{
this.props.enableDelete &&
this.renderDeleteOption(
this.state.checkedClips.indexOf(content.source) >= 0, content.source
)
}
<div style={{flex: 1}}>
<Clip
source={content.source}
google={content.google}
deleteLog={this.deleteClip}
enableDelete={this.props.enableDelete}
index={i}
enableTranslation={this.props.enableTranslation}
/>
</div>
</div>
)}
</div>
<div style={{flexBasis: 14}}/>
Expand Down
109 changes: 71 additions & 38 deletions app/view/clip.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import {ipcRenderer} from 'electron';
import autobind from 'autobind-decorator';

@autobind
Expand All @@ -8,50 +7,17 @@ export default class Clip extends React.Component {
super(props);
}

deleteContents() {
this.props.deleteLog(this.props.index);
ipcRenderer.send('delete-contents', this.props.source);
ipcRenderer.on('delete-result', () => {
// TODO : alert message
});
}

render() {
renderSingleWord() {
return (
<div style={{
display: 'flex',
borderBottomStyle: 'solid',
borderBottomWidth: 1,
borderColor: '#efeff2'
borderColor: '#efeff2',
flex: 1
}}>
{
this.props.enableDelete &&
<div style={{flexBasis: 37, display: 'flex'}}>
<div style={{flexBasis: 8}}/>
<div style={{
flexBasis: 14,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<img src={this.props.isChecked ?
'../resources/delete_checked/[email protected]' :
'../resources/delete_unchecked/[email protected]'
}
style={{height: 14, width: 14}}
onClick={()=>{
if (this.props.isChecked) {
this.props.deleteCheckedClips(this.props.source);
return;
}
this.props.addCheckedClips(this.props.source);
}}/>
</div>
<div style={{flexBasis: 15}}/>
</div>
}
<div style={{flexBasis: 10}}/>
<div style={{flexBasis: 352, display: 'flex', flexDirection: 'column'}}>
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
<div style={{flexBasis: 12}}/>
<div style={{
fontFamily: 'SanFranciscoText-Regular',
Expand All @@ -64,4 +30,71 @@ export default class Clip extends React.Component {
</div>
);
}

renderDoubleWord() {
return (
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{
display: 'flex',
boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.1)',
background: '#ffffff',
flex: 1
}}>
<div style={{flexBasis: 2}}/>
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
<div style={{flexBasis: 10}}/>
<div style={{flex: 1, display: 'flex'}}>
<div style={{flex: 1, display: 'flex'}}>
<div style={{flexBasis: 12}}/>
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
<div style={{flexBasis: 4}}/>
<div style={
this.props.textStyle ? this.props.textStyle :
{
flex: 1,
fontSize: 12,
color: '#2e3031',
fontFamily: 'SanFranciscoText-Regular'
}}>{this.props.source} </div>
<div style={{flexBasis: 4}}/>
</div>
<div style={{flexBasis: 12}}/>
</div>
<div style={{
flexBasis: 3,
borderLeftStyle: 'solid',
borderLeftWidth: 1,
borderLeftColor: '#efeff2'
}}/>
<div style={{flex: 1, display: 'flex'}}>
<div style={{flexBasis: 12}}/>
<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
<div style={{flexBasis: 4}}/>
<div style={this.props.textStyle ? this.props.textStyle : {
flex: 1,
fontSize: 12,
color: '#2e3031',
fontFamily: 'Times New Roman, Georgia, Serif'
}}>{this.props.google} </div>
<div style={{flexBasis: 4}}/>
</div>
<div style={{flexBasis: 12}}/>
</div>
</div>
<div style={{flexBasis: 10}}/>
</div>
<div style={{flexBasis: 2}}/>
</div>
<div style={{flexBasis: 10}}/>
</div>
);
}

render() {
return (
<div>
{ this.props.enableTranslation ? this.renderDoubleWord() : this.renderSingleWord() }
</div>
);
}
}
28 changes: 23 additions & 5 deletions app/view/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,37 @@ export default class header extends React.Component {
style={{height: 12, width: 12}}/>
</div>
<div style={{flexBasis: 13, flexShrink: 0}}/>
<div style={{flexGrow: 285, color: '#ffffff', fontFamily: 'SanFranciscoText-Regular'}}>
Text Logger | Beta version
<div style={{flexGrow: 285}}>
<span style={{
fontSize: 14,
color: '#ffffff',
fontFamily: 'SanFranciscoText-Regular'
}}>Text Logger </span>
<span style={{
fontSize: 12,
color: '#ffffff',
fontFamily: 'SanFranciscoText-Regular'
}}>| Beta version</span>
</div>
<div style={{flexBasis: 18}}/>
<div style={{flexBasis: 18}}>
{this.props.currentScene === 'clipList' ?
<img src={'../resources/trash-closed/[email protected]'}
style={{height: 14, width: 14}}
onClick={this.props.setDeleteEnabled}/>
onClick={this.props.setDeleteEnabled}/> : <div/>
}
</div>
<div style={{flexBasis: 14}}/>
<div style={{flexBasis: 17}}>
<img src={'../resources/setting/[email protected]'}
style={{height: 14, width: 14}}/>
{this.props.currentScene === 'clipList' ?
// TODO : change it using router later
<img src={'../resources/setting/[email protected]'}
style={{height: 14, width: 14}}
onClick={()=>this.props.setCurrentScene('setting')}/> :
<img src={'../resources/close/[email protected]'}
style={{height: 14, width: 14}}
onClick={()=>this.props.setCurrentScene('clipList')}/>
}
</div>
<div style={{flexBasis: 17}}/>
</div>
Expand Down
7 changes: 7 additions & 0 deletions app/view/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,18 @@
<html>
<head>
<title>electron es6 react boilerplate</title>
<link rel="stylesheet" href="reactSelect.css">
<script>
// install babel hooks in the renderer process
require('babel-register');
require('./popup');
</script>
<style>
body {
display: block;
margin: 0px;
}
</style>
</head>

<body>
Expand Down
Loading

0 comments on commit ac8b469

Please sign in to comment.