Basic layout and frameworks
commit
496a520cbd
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"@babel/preset-react",
|
||||||
|
[
|
||||||
|
"@babel/preset-env",
|
||||||
|
{
|
||||||
|
"useBuiltIns": "entry"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
@ -0,0 +1,2 @@
|
|||||||
|
dist
|
||||||
|
node_modules
|
@ -0,0 +1 @@
|
|||||||
|
* [ ] Abstract filtering list for reuse with memberlist
|
@ -0,0 +1,35 @@
|
|||||||
|
'use strict'
|
||||||
|
const React = require('react')
|
||||||
|
const ReactDOM = require('react-dom')
|
||||||
|
const create = require('create-react-class')
|
||||||
|
const Promise = require('bluebird')
|
||||||
|
|
||||||
|
const Matrix = require('./backends/matrix.js')
|
||||||
|
|
||||||
|
const Sidebar = require('./components/sidebar.js')
|
||||||
|
|
||||||
|
const Info = require('./components/info.js')
|
||||||
|
const Chat = require('./components/chat.js')
|
||||||
|
|
||||||
|
let backend = new Matrix("user", "pass", "http://localhost")
|
||||||
|
|
||||||
|
let App = create({
|
||||||
|
displayName: "App",
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Sidebar/>
|
||||||
|
<div className="main">
|
||||||
|
<Info />
|
||||||
|
<Chat />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<App />,
|
||||||
|
document.getElementById('root')
|
||||||
|
)
|
@ -0,0 +1,12 @@
|
|||||||
|
class Matrix {
|
||||||
|
constructor(user, password, homeserver) {
|
||||||
|
console.log(user, password)
|
||||||
|
}
|
||||||
|
|
||||||
|
getEvents() {
|
||||||
|
console.log("new event")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = Matrix
|
@ -0,0 +1,15 @@
|
|||||||
|
var budo = require('budo')
|
||||||
|
var babelify = require('babelify')
|
||||||
|
|
||||||
|
budo('app.js', {
|
||||||
|
live: true, // setup live reload
|
||||||
|
port: 3000, // use this port
|
||||||
|
browserify: {
|
||||||
|
transform: babelify // ES6
|
||||||
|
}
|
||||||
|
}).on('connect', function (ev) {
|
||||||
|
console.log('Server running on %s', ev.uri)
|
||||||
|
console.log('LiveReload running on port %s', ev.livePort)
|
||||||
|
}).on('update', function (buffer) {
|
||||||
|
console.log('bundle - %d bytes', buffer.length)
|
||||||
|
})
|
@ -0,0 +1,15 @@
|
|||||||
|
'use strict'
|
||||||
|
const React = require('react')
|
||||||
|
const ReactDOM = require('react-dom')
|
||||||
|
const create = require('create-react-class')
|
||||||
|
const Promise = require('bluebird')
|
||||||
|
|
||||||
|
let chat = create({
|
||||||
|
displayName: "Chat",
|
||||||
|
render: function() {
|
||||||
|
return <div className="chat">chat window</div>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = chat
|
@ -0,0 +1,15 @@
|
|||||||
|
'use strict'
|
||||||
|
const React = require('react')
|
||||||
|
const ReactDOM = require('react-dom')
|
||||||
|
const create = require('create-react-class')
|
||||||
|
const Promise = require('bluebird')
|
||||||
|
|
||||||
|
let info = create({
|
||||||
|
displayName: "Info",
|
||||||
|
render: function() {
|
||||||
|
return <div className="info">Room Title</div>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = info
|
@ -0,0 +1,90 @@
|
|||||||
|
'use strict'
|
||||||
|
const React = require('react')
|
||||||
|
const ReactDOM = require('react-dom')
|
||||||
|
const create = require('create-react-class')
|
||||||
|
const Promise = require('bluebird')
|
||||||
|
const debounce = require('debounce')
|
||||||
|
|
||||||
|
let Filter = create({
|
||||||
|
displayName: "Filter",
|
||||||
|
|
||||||
|
inputRef: function(ref) {
|
||||||
|
if (ref == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
inputRef: ref
|
||||||
|
})
|
||||||
|
ref.addEventListener("keyup", debounce(this.input, 20))
|
||||||
|
},
|
||||||
|
|
||||||
|
input: function(e) {
|
||||||
|
this.props.setFilter(e.target.value.toUpperCase())
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return <div className="filter">
|
||||||
|
<input ref={this.inputRef}/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let List = create({
|
||||||
|
displayName: "List",
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
let rooms = ["Test", "aaaa", "Neo", "zzz", "Iris"]
|
||||||
|
let roomList = rooms.map((room, i) => {
|
||||||
|
return <RoomListItem name={room} filter={this.props.filter} key={i}/>
|
||||||
|
})
|
||||||
|
return <div className="list">
|
||||||
|
{roomList}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let RoomListItem = create({
|
||||||
|
displayName: "RoomListItem",
|
||||||
|
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
filterName: this.props.name.toUpperCase()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
if (this.state.filterName.indexOf(this.props.filter) == -1) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
return <div className="roomListItem">
|
||||||
|
{this.props.name}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let Sidebar = create({
|
||||||
|
displayName: "Sidebar",
|
||||||
|
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
filter: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setFilter: function(filter) {
|
||||||
|
this.setState({
|
||||||
|
filter: filter.toUpperCase()
|
||||||
|
})
|
||||||
|
console.log("setting", filter)
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return <div className="sidebar">
|
||||||
|
<Filter setFilter={this.setFilter} />
|
||||||
|
<List filter={this.state.filter} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = Sidebar
|
@ -0,0 +1,31 @@
|
|||||||
|
const gulp = require('gulp');
|
||||||
|
const sass = require('gulp-sass');
|
||||||
|
const concat = require('gulp-concat');
|
||||||
|
const gutil = require('gulp-util');
|
||||||
|
|
||||||
|
var budo = require('budo')
|
||||||
|
var babelify = require('babelify')
|
||||||
|
|
||||||
|
const cssFiles = 'public/scss/**/*.?(s)css';
|
||||||
|
|
||||||
|
let css = gulp.src(cssFiles)
|
||||||
|
.pipe(sass())
|
||||||
|
.pipe(concat('style.css'))
|
||||||
|
.pipe(gulp.dest('assets'));
|
||||||
|
|
||||||
|
gulp.task('watch', function(cb) {
|
||||||
|
budo("app.js", {
|
||||||
|
live: true,
|
||||||
|
port: 3000,
|
||||||
|
browserify: {
|
||||||
|
transform: babelify
|
||||||
|
}
|
||||||
|
}).on('exit', cb);
|
||||||
|
gulp.watch(cssFiles, function() {
|
||||||
|
console.log("Compiling CSS")
|
||||||
|
return gulp.src(cssFiles)
|
||||||
|
.pipe(sass())
|
||||||
|
.pipe(concat('style.css'))
|
||||||
|
.pipe(gulp.dest('./dist'))
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="/dist/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='root'>
|
||||||
|
</div>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "vortex",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "app.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "f0x",
|
||||||
|
"license": "AGPL-3.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/core": "^7.2.2",
|
||||||
|
"@babel/preset-env": "^7.2.0",
|
||||||
|
"@babel/preset-react": "^7.0.0",
|
||||||
|
"babelify": "^10.0.0",
|
||||||
|
"bluebird": "^3.5.3",
|
||||||
|
"budo": "^11.5.0",
|
||||||
|
"create-react-class": "^15.6.3",
|
||||||
|
"debounce": "^1.2.0",
|
||||||
|
"gulp": "^4.0.0",
|
||||||
|
"gulp-cli": "^2.0.1",
|
||||||
|
"gulp-concat": "^2.6.1",
|
||||||
|
"gulp-sass": "^4.0.2",
|
||||||
|
"gulp-util": "^3.0.8",
|
||||||
|
"react": "^16.6.3",
|
||||||
|
"react-dom": "^16.6.3",
|
||||||
|
"webpack": "^4.27.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"gulp-watch": "^5.0.1"
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,53 @@
|
|||||||
|
$bg: #1c1c1c;
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #1c1c1c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
flex: 0 0 15vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar, .main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
div:nth-child(2) { // Room list & Chat
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter {
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
background: purple
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background: lime;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
background: blue;
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue