basic desktop redesign
This commit is contained in:
Alexey Kasyanchuk
parent
b03655e570
commit
2c6a54651f
@ -6,8 +6,11 @@ import PagesPie from './pages-pie.js';
|
|||||||
import injectTapEventPlugin from 'react-tap-event-plugin';
|
import injectTapEventPlugin from 'react-tap-event-plugin';
|
||||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||||
|
|
||||||
|
import {Header} from './header'
|
||||||
|
import Footer from './footer'
|
||||||
|
|
||||||
const { ipcRenderer, remote } = require('electron');
|
const { ipcRenderer, remote } = require('electron');
|
||||||
const currentWindow = remote.getCurrentWindow()
|
window.currentWindow = remote.getCurrentWindow()
|
||||||
|
|
||||||
//var io = require("socket.io-client");
|
//var io = require("socket.io-client");
|
||||||
//window.torrentSocket = io(document.location.protocol + '//' + document.location.hostname + (process.env.NODE_ENV === 'production' ? '/' : ':8095/'));
|
//window.torrentSocket = io(document.location.protocol + '//' + document.location.hostname + (process.env.NODE_ENV === 'production' ? '/' : ':8095/'));
|
||||||
@ -110,14 +113,13 @@ class App extends Component {
|
|||||||
return (
|
return (
|
||||||
<MuiThemeProvider>
|
<MuiThemeProvider>
|
||||||
<div>
|
<div>
|
||||||
<PagesPie />
|
|
||||||
{
|
{
|
||||||
!currentWindow.isModal()
|
!window.currentWindow.isModal()
|
||||||
&&
|
&&
|
||||||
<div className='fs0-85 pad0-75' style={{position: 'fixed', bottom: 0, left: 0, color: window.peers > 0 ? 'green' : 'grey'}}>
|
<Header />
|
||||||
rats peers: {window.peers} {window.peers > 0 ? ' (p2p rats search enabled)' : ' (p2p rats search not available at this moment)'}
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
<PagesPie />
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</MuiThemeProvider>
|
</MuiThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Page from './page';
|
import Page from './page';
|
||||||
import Footer from './footer';
|
|
||||||
import {Header} from './index-page'
|
|
||||||
|
|
||||||
import Toggle from 'material-ui/Toggle';
|
import Toggle from 'material-ui/Toggle';
|
||||||
import RaisedButton from 'material-ui/RaisedButton';
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
@ -39,7 +37,6 @@ export default class ConfigPage extends Page {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
|
||||||
<div className='row center pad0-75'>
|
<div className='row center pad0-75'>
|
||||||
<RaisedButton label="Back to main page" primary={true} onClick={() => {
|
<RaisedButton label="Back to main page" primary={true} onClick={() => {
|
||||||
window.router('/')
|
window.router('/')
|
||||||
@ -279,7 +276,7 @@ export default class ConfigPage extends Page {
|
|||||||
this.saveSettings()
|
this.saveSettings()
|
||||||
}} />
|
}} />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Page from './page';
|
import Page from './page';
|
||||||
import Footer from './footer';
|
|
||||||
import { Header } from './index-page'
|
|
||||||
|
|
||||||
import TorrentLine from './torrent'
|
import TorrentLine from './torrent'
|
||||||
import {List} from 'material-ui/List';
|
import {List} from 'material-ui/List';
|
||||||
@ -41,7 +39,6 @@ export default class TopPage extends Page {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
|
||||||
<div className='column center w100p pad0-75'>
|
<div className='column center w100p pad0-75'>
|
||||||
<RaisedButton label="Back to main page" primary={true} onClick={() => {
|
<RaisedButton label="Back to main page" primary={true} onClick={() => {
|
||||||
window.router('/')
|
window.router('/')
|
||||||
@ -53,7 +50,6 @@ export default class TopPage extends Page {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</List>
|
</List>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
84
src/app/header.js
Normal file
84
src/app/header.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
|
||||||
|
import Background from './images/pirate-mod.jpg'
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
|
||||||
|
const Header = (props) => {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardMedia
|
||||||
|
overlay={<CardTitle title="Yarrr, Landlubbers!" subtitle="Welcome to torrent project" />}
|
||||||
|
>
|
||||||
|
<div className='row' style={{
|
||||||
|
padding: '15px',
|
||||||
|
background: `url('${Background}') no-repeat`,
|
||||||
|
minHeight: 360,
|
||||||
|
backgroundSize: 'cover'
|
||||||
|
}}>
|
||||||
|
<RaisedButton
|
||||||
|
label="Downloads"
|
||||||
|
onClick={() => {
|
||||||
|
window.router('/downloads')
|
||||||
|
}}
|
||||||
|
backgroundColor='#2080E4'
|
||||||
|
labelColor='white'
|
||||||
|
style={{height: 60, borderRadius: 5, margin: 5, zIndex: 1}}
|
||||||
|
buttonStyle={{borderRadius: 5}}
|
||||||
|
icon={<svg fill='white' style={{height: 30}} viewBox="0 0 548.176 548.176">
|
||||||
|
<path d="M524.326,297.352c-15.896-19.89-36.21-32.782-60.959-38.684c7.81-11.8,11.704-24.934,11.704-39.399
|
||||||
|
c0-20.177-7.139-37.401-21.409-51.678c-14.273-14.272-31.498-21.411-51.675-21.411c-18.083,0-33.879,5.901-47.39,17.703
|
||||||
|
c-11.225-27.41-29.171-49.393-53.817-65.95c-24.646-16.562-51.818-24.842-81.514-24.842c-40.349,0-74.802,14.279-103.353,42.83
|
||||||
|
c-28.553,28.544-42.825,62.999-42.825,103.351c0,2.474,0.191,6.567,0.571,12.275c-22.459,10.469-40.349,26.171-53.676,47.106
|
||||||
|
C6.661,299.594,0,322.43,0,347.179c0,35.214,12.517,65.329,37.544,90.358c25.028,25.037,55.15,37.548,90.362,37.548h310.636
|
||||||
|
c30.259,0,56.096-10.711,77.512-32.12c21.413-21.409,32.121-47.246,32.121-77.516C548.172,339.944,540.223,317.248,524.326,297.352
|
||||||
|
z M362.595,308.344L262.38,408.565c-1.711,1.707-3.901,2.566-6.567,2.566c-2.664,0-4.854-0.859-6.567-2.566L148.75,308.063
|
||||||
|
c-1.713-1.711-2.568-3.901-2.568-6.567c0-2.474,0.9-4.616,2.708-6.423c1.812-1.808,3.949-2.711,6.423-2.711h63.954V191.865
|
||||||
|
c0-2.474,0.905-4.616,2.712-6.427c1.809-1.805,3.949-2.708,6.423-2.708h54.823c2.478,0,4.609,0.9,6.427,2.708
|
||||||
|
c1.804,1.811,2.707,3.953,2.707,6.427v100.497h63.954c2.665,0,4.855,0.855,6.563,2.566c1.714,1.711,2.562,3.901,2.562,6.567
|
||||||
|
C365.438,303.789,364.494,306.064,362.595,308.344z"/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<RaisedButton
|
||||||
|
label="Top"
|
||||||
|
onClick={() => {
|
||||||
|
window.router('/top')
|
||||||
|
}}
|
||||||
|
backgroundColor='#B1CE57'
|
||||||
|
labelColor='white'
|
||||||
|
style={{height: 60, width: 120, borderRadius: 5, margin: 5, zIndex: 1}}
|
||||||
|
buttonStyle={{borderRadius: 5}}
|
||||||
|
icon={<svg fill='white' style={{height: 30}} viewBox="0 0 284.929 284.929">
|
||||||
|
<g>
|
||||||
|
<path d="M17.128,167.872c1.903,1.902,4.093,2.854,6.567,2.854c2.474,0,4.664-0.952,6.567-2.854L142.466,55.666l112.208,112.206
|
||||||
|
c1.902,1.902,4.093,2.854,6.563,2.854c2.478,0,4.668-0.952,6.57-2.854l14.274-14.277c1.902-1.902,2.847-4.093,2.847-6.563
|
||||||
|
c0-2.475-0.951-4.665-2.847-6.567L149.028,7.419c-1.901-1.906-4.088-2.853-6.562-2.853s-4.665,0.95-6.567,2.853L2.856,140.464
|
||||||
|
C0.95,142.367,0,144.554,0,147.034c0,2.468,0.953,4.658,2.856,6.561L17.128,167.872z"/>
|
||||||
|
<path d="M149.028,117.055c-1.901-1.906-4.088-2.856-6.562-2.856s-4.665,0.953-6.567,2.856L2.856,250.1
|
||||||
|
C0.95,252.003,0,254.192,0,256.67c0,2.472,0.953,4.661,2.856,6.564l14.272,14.276c1.903,1.903,4.093,2.848,6.567,2.848
|
||||||
|
c2.474,0,4.664-0.951,6.567-2.848l112.204-112.209l112.208,112.209c1.902,1.903,4.093,2.852,6.563,2.852
|
||||||
|
c2.478,0,4.668-0.948,6.57-2.852l14.274-14.276c1.902-1.903,2.847-4.093,2.847-6.564c0-2.478-0.951-4.667-2.847-6.57
|
||||||
|
L149.028,117.055z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
!window.currentWindow.isModal()
|
||||||
|
&&
|
||||||
|
<div className='fs0-85 pad0-75' style={{position: 'absolute', top: 0, right: 0, padding: 10, color: window.peers > 0 ? '#42f445' : 'white'}}>
|
||||||
|
rats peers: {window.peers} {window.peers > 0 ? ' (p2p rats search enabled)' : ' (p2p rats search not available at this moment)'}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</CardMedia>
|
||||||
|
<CardText>
|
||||||
|
Welcome to ROTB! This is file search engine based on the torrents from the internet.
|
||||||
|
Here you can easily find torrent or file that you intrested for. We are not responsible for any content:
|
||||||
|
this is only information about content that collected automatically!
|
||||||
|
</CardText>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {Header}
|
||||||
@ -1,88 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Page from './page';
|
import Page from './page';
|
||||||
import Footer from './footer';
|
|
||||||
|
|
||||||
import RecentTorrents from './recent-torrents'
|
import RecentTorrents from './recent-torrents'
|
||||||
import Search from './search'
|
import Search from './search'
|
||||||
|
|
||||||
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
|
|
||||||
import Background from './images/pirate-mod.jpg'
|
|
||||||
|
|
||||||
import RaisedButton from 'material-ui/RaisedButton';
|
|
||||||
|
|
||||||
const Header = (props) => {
|
|
||||||
return (
|
|
||||||
<Card style={{height: '100%', position: 'relative'}}>
|
|
||||||
<CardMedia
|
|
||||||
overlay={<CardTitle title="Yarrr, Landlubbers!" subtitle="Welcome to torrent project" />}
|
|
||||||
>
|
|
||||||
<div className='row' style={{
|
|
||||||
padding: '15px',
|
|
||||||
background: `url('${Background}') no-repeat`,
|
|
||||||
minHeight: 360,
|
|
||||||
backgroundSize: 'cover'
|
|
||||||
}}>
|
|
||||||
<RaisedButton
|
|
||||||
label="Downloads"
|
|
||||||
onClick={() => {
|
|
||||||
window.router('/downloads')
|
|
||||||
}}
|
|
||||||
backgroundColor='#2080E4'
|
|
||||||
labelColor='white'
|
|
||||||
style={{height: 60, borderRadius: 5, margin: 5, zIndex: 1}}
|
|
||||||
buttonStyle={{borderRadius: 5}}
|
|
||||||
icon={<svg fill='white' style={{height: 30}} viewBox="0 0 548.176 548.176">
|
|
||||||
<path d="M524.326,297.352c-15.896-19.89-36.21-32.782-60.959-38.684c7.81-11.8,11.704-24.934,11.704-39.399
|
|
||||||
c0-20.177-7.139-37.401-21.409-51.678c-14.273-14.272-31.498-21.411-51.675-21.411c-18.083,0-33.879,5.901-47.39,17.703
|
|
||||||
c-11.225-27.41-29.171-49.393-53.817-65.95c-24.646-16.562-51.818-24.842-81.514-24.842c-40.349,0-74.802,14.279-103.353,42.83
|
|
||||||
c-28.553,28.544-42.825,62.999-42.825,103.351c0,2.474,0.191,6.567,0.571,12.275c-22.459,10.469-40.349,26.171-53.676,47.106
|
|
||||||
C6.661,299.594,0,322.43,0,347.179c0,35.214,12.517,65.329,37.544,90.358c25.028,25.037,55.15,37.548,90.362,37.548h310.636
|
|
||||||
c30.259,0,56.096-10.711,77.512-32.12c21.413-21.409,32.121-47.246,32.121-77.516C548.172,339.944,540.223,317.248,524.326,297.352
|
|
||||||
z M362.595,308.344L262.38,408.565c-1.711,1.707-3.901,2.566-6.567,2.566c-2.664,0-4.854-0.859-6.567-2.566L148.75,308.063
|
|
||||||
c-1.713-1.711-2.568-3.901-2.568-6.567c0-2.474,0.9-4.616,2.708-6.423c1.812-1.808,3.949-2.711,6.423-2.711h63.954V191.865
|
|
||||||
c0-2.474,0.905-4.616,2.712-6.427c1.809-1.805,3.949-2.708,6.423-2.708h54.823c2.478,0,4.609,0.9,6.427,2.708
|
|
||||||
c1.804,1.811,2.707,3.953,2.707,6.427v100.497h63.954c2.665,0,4.855,0.855,6.563,2.566c1.714,1.711,2.562,3.901,2.562,6.567
|
|
||||||
C365.438,303.789,364.494,306.064,362.595,308.344z"/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<RaisedButton
|
|
||||||
label="Top"
|
|
||||||
onClick={() => {
|
|
||||||
window.router('/top')
|
|
||||||
}}
|
|
||||||
backgroundColor='#B1CE57'
|
|
||||||
labelColor='white'
|
|
||||||
style={{height: 60, width: 120, borderRadius: 5, margin: 5, zIndex: 1}}
|
|
||||||
buttonStyle={{borderRadius: 5}}
|
|
||||||
icon={<svg fill='white' style={{height: 30}} viewBox="0 0 284.929 284.929">
|
|
||||||
<g>
|
|
||||||
<path d="M17.128,167.872c1.903,1.902,4.093,2.854,6.567,2.854c2.474,0,4.664-0.952,6.567-2.854L142.466,55.666l112.208,112.206
|
|
||||||
c1.902,1.902,4.093,2.854,6.563,2.854c2.478,0,4.668-0.952,6.57-2.854l14.274-14.277c1.902-1.902,2.847-4.093,2.847-6.563
|
|
||||||
c0-2.475-0.951-4.665-2.847-6.567L149.028,7.419c-1.901-1.906-4.088-2.853-6.562-2.853s-4.665,0.95-6.567,2.853L2.856,140.464
|
|
||||||
C0.95,142.367,0,144.554,0,147.034c0,2.468,0.953,4.658,2.856,6.561L17.128,167.872z"/>
|
|
||||||
<path d="M149.028,117.055c-1.901-1.906-4.088-2.856-6.562-2.856s-4.665,0.953-6.567,2.856L2.856,250.1
|
|
||||||
C0.95,252.003,0,254.192,0,256.67c0,2.472,0.953,4.661,2.856,6.564l14.272,14.276c1.903,1.903,4.093,2.848,6.567,2.848
|
|
||||||
c2.474,0,4.664-0.951,6.567-2.848l112.204-112.209l112.208,112.209c1.902,1.903,4.093,2.852,6.563,2.852
|
|
||||||
c2.478,0,4.668-0.948,6.57-2.852l14.274-14.276c1.902-1.903,2.847-4.093,2.847-6.564c0-2.478-0.951-4.667-2.847-6.57
|
|
||||||
L149.028,117.055z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CardMedia>
|
|
||||||
<CardText>
|
|
||||||
Welcome to ROTB! This is file search engine based on the torrents from the internet.
|
|
||||||
Here you can easily find torrent or file that you intrested for. We are not responsible for any content:
|
|
||||||
this is only information about content that collected automatically!
|
|
||||||
</CardText>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {Header}
|
|
||||||
|
|
||||||
export default class IndexPage extends Page {
|
export default class IndexPage extends Page {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
@ -91,11 +12,9 @@ export default class IndexPage extends Page {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div id='index-window'>
|
<div id='index-window'>
|
||||||
<Header />
|
|
||||||
<Search />
|
<Search />
|
||||||
<div className='column center w100p pad0-75'>
|
<div className='column center w100p pad0-75'>
|
||||||
<RecentTorrents />
|
<RecentTorrents />
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Page from './page';
|
import Page from './page';
|
||||||
import Footer from './footer';
|
|
||||||
import { Header } from './index-page'
|
|
||||||
|
|
||||||
import TorrentLine from './torrent'
|
import TorrentLine from './torrent'
|
||||||
import {List} from 'material-ui/List';
|
import {List} from 'material-ui/List';
|
||||||
@ -41,7 +39,6 @@ export default class TopPage extends Page {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
|
||||||
<div className='column center w100p pad0-75'>
|
<div className='column center w100p pad0-75'>
|
||||||
<RaisedButton label="Back to main page" primary={true} onClick={() => {
|
<RaisedButton label="Back to main page" primary={true} onClick={() => {
|
||||||
window.router('/')
|
window.router('/')
|
||||||
@ -70,7 +67,6 @@ export default class TopPage extends Page {
|
|||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Page from './page';
|
import Page from './page';
|
||||||
import formatBytes from './format-bytes'
|
import formatBytes from './format-bytes'
|
||||||
import Footer from './footer';
|
|
||||||
|
|
||||||
import {List, ListItem} from 'material-ui/List';
|
import {List, ListItem} from 'material-ui/List';
|
||||||
import Subheader from 'material-ui/Subheader';
|
import Subheader from 'material-ui/Subheader';
|
||||||
@ -510,7 +509,6 @@ export default class TorrentPage extends Page {
|
|||||||
:
|
:
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user