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