restructure and complete move to semantic-ui-react

This commit is contained in:
Adam Brown 2016-11-30 14:57:35 -05:00
parent dc96ac104c
commit 822a012129
12 changed files with 15292 additions and 402 deletions

View File

@ -1,12 +0,0 @@
{
"name": "dubdiff",
"version": "2.0.1",
"dependencies": {
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"bootstrap-sass-official": "~3.1.1",
"font-awesome": ">=4.1.0"
},
"devDependencies": {
}
}

15458
dist/browser-bundle.js vendored

File diff suppressed because one or more lines are too long

16
dist/index.html vendored
View File

@ -3,20 +3,8 @@
<title>Dubdiff 2</title>
</head>
<body>
<div class="table-container">
<div class="table-block footer-push">
<div id="root">If you see this then something is wrong.</div>
</div>
<div class="table-block">
<div class="container">
<footer id="footer" class="twelve columns">
<p><a href="http://adamarthurryan.com">Adam Brown</a> | This website is <a href="https://github.com/adamarthurryan/dubdiff-2">open source</a>.</p>
</footer>
</div>
</div>
</div>
<script src="browser-bundle.js"></script>
<link href="old-dubdiff.css" rel="stylesheet">
</body>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
<link href="main.css" rel="stylesheet"> </body>
</html>

View File

@ -22,7 +22,8 @@
"react-router": "^1.0.0",
"redux": "^3.5.1",
"redux-router": "^1.0.0-beta5",
"reselect": "^2.5.1"
"reselect": "^2.5.1",
"semantic-ui-react": "^0.61.6"
},
"devDependencies": {
"babel-core": "^6.3.26",

View File

@ -1,10 +1,13 @@
import React from 'react'
import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
import Header from './Header'
import Footer from './Footer'
import CompareControls from './CompareControls'
import Show from './Show'
@ -26,29 +29,32 @@ const mapDispatchToProps = dispatch => ({
class Compare extends React.Component {
render() {
console.log(this.props.safeInput)
return (
<div>
<Header/>
<div className="container">
<form className="row">
<div className="col-md-2 col-sm-12">
<Segment basic padded>
<Grid stackable columns={2}>
<Grid.Column width="3">
<CompareControls/>
</div>
<div className="col-md-10 col-sm-12 content-well">
</Grid.Column>
<Grid.Column width="13">
<Segment>
{ this.props.isShowDifference ?
<div>{this.props.diff}</div>:
<Show diff={this.props.diff} isMarkdownFormat={this.props.isMarkdownFormat}>{this.props.diff}</Show>:
<Show
text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final}
isMarkdownFormat={this.props.isMarkdownFormat}
/>
}
</Segment>
</Grid.Column>
</Grid>
</Segment>
</div>
</form>
</div>
<Footer/>
</div>
)
}

View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
@ -38,19 +40,20 @@ class CompareControls extends React.Component {
render() {
return (
<div className="form-group">
<div className="controls well btn-group col-lg-12">
<a type="submit" onClick={this.props.onShowOriginal} className={(this.props.isShowOriginal?'active ':'')+'btn btn-block btn-primary'}>Original</a>
<a type="submit" onClick={this.props.onShowFinal} className={(this.props.isShowFinal?'active ':'')+'btn btn-block btn-primary'}>Final</a>
<a type="submit" onClick={this.props.onShowDifference} className={(this.props.isShowDifference?'active ':'')+'btn btn-block btn-primary'}>Difference</a>
</div>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span>
<Segment.Group>
<Segment >
<Button fluid onClick={this.props.onShowOriginal} active={this.props.isShowOriginal}>Original</Button>
<Button fluid onClick={this.props.onShowFinal} active={this.props.isShowFinal}>Final</Button>
<Button fluid onClick={this.props.onShowDifference} active={this.props.isShowDifference}>Difference</Button>
</Segment>
<Segment >
<Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
{this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
&nbsp;As Markdown
</a>
</div>
</div>
</Button>
</Segment>
</Segment.Group>
)
}
}

View File

@ -1,16 +1,13 @@
import React from 'react'
import {Segment, Header} from 'semantic-ui-react'
import {Link} from 'react-router'
const Header = (props) => (
<nav>
<header id="banner" className="hero-unit">
<div className="container">
<h1><Link to="/">dubdiff</Link></h1>
<h3></h3>
</div>
</header>
</nav>
const SiteHeader = (props) => (
<Segment basic padded textAlign="center" as="header" id='masthead'>
<Header><Link to="/">dubdiff</Link></Header>
</Segment>
)
export default Header
export default SiteHeader

View File

@ -2,10 +2,13 @@
import React from 'react'
import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
import Header from './Header'
import Footer from './Footer'
import MainControls from './MainControls'
const mapStateToProps = (state) => ({
@ -30,22 +33,37 @@ class Main extends React.Component {
return (
<div>
<Header/>
<div className="container">
<form className="row">
<div className="col-md-2 col-sm-12">
<Segment basic padded>
<Grid stackable columns={3}>
<Grid.Column width="3">
<MainControls/>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Original</label>
<textarea value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Final</label>
<textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
</Grid>
</Segment>
<Footer/>
</div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docA">Original</label>
<textarea id="docA" value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)} className="form-control"></textarea>
</div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docB">Final</label>
<textarea id="docB" value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)} className="form-control"></textarea>
</div>
</form>
</div>
</div>
)
}
}

View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions'
import * as Selectors from '../selectors'
@ -32,17 +34,18 @@ class MainControls extends React.Component {
render() {
return (
<div className="form-group">
<div className="controls well col-lg-12">
<Link to="compare" className="btn btn-block btn-primary">Compare</Link>
</div>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span>
<Segment.Group>
<Segment >
<Link to="compare"><Button fluid>Compare</Button></Link>
</Segment>
<Segment >
<Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
{this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
&nbsp;As Markdown
</a>
</div>
</div>
</Button>
</Segment>
</Segment.Group>
)
}
}

View File

@ -1,11 +1,32 @@
import React from 'react'
const Show = (props) => (
<div>
<pre>
{props.text}
const Show = (props) => {
return <div>
<pre style={{whiteSpace:'pre-wrap'}}>
{props.text ?
props.text:
props.diff ?
diffToPre(props.diff) :
null
}
</pre>
</div>
)
}
export default Show
function diffToPre(diff) {
return diff.map(part => (
part.added ? <span><ins>{part.value}</ins>{ifNotNewlineSpace(part.value)}</span> :
part.removed ? <span><del>{part.value}</del>{ifNotNewlineSpace(part.value)}</span> :
<span>{part.value}{ifNotNewlineSpace(part.value)}</span>
))
}
const ifNotNewlineSpace = str => {
console.log(str)
return !str.endsWith('\n') ? ' ' : ''
}

View File

@ -4,10 +4,11 @@ import { createSelector } from 'reselect'
import React from 'react'
import * as JsDiff from 'diff'
import {Format, Show} from './reducers'
import * as Dubdiff from './util/dubdiff'
const input = (state) => state.input
const format = (state) => state.format
@ -44,14 +45,7 @@ export const isShowDifference= isShow(Show.DIFFERENCE)
export const diff = createSelector(
[format, input],
(format, input) => {
let diff = JsDiff.diffLines(input.original.replace(/ /g, '###\n'), input.final.replace(/ /g, '###\n'))
console.log(diff, diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})).map(part => (
part.added ? <ins>{part.value}</ins> :
part.removed ? <del>{part.value}</del> :
<span>{part.value}</span>
))
return Dubdiff.plaintextDiff(input.original, input.final)
/*
let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' '))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => (
@ -63,6 +57,8 @@ export const diff = createSelector(
}
)
/*
html diff
---

View File

@ -5,7 +5,8 @@ module.exports = {
filename: './dist/browser-bundle.js'
},
target: 'web',
devtool: 'eval-module-source-map',
// devtool: 'eval-module-source-map',
module: {
loaders: [
{
@ -13,7 +14,7 @@ module.exports = {
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
compact: "false"
compact: "true"
}
},
]