Basic layout and frameworks

master
f0x 6 years ago
commit 496a520cbd

@ -0,0 +1,11 @@
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}

2
.gitignore vendored

@ -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…
Cancel
Save