Browse Source

Basic layout and frameworks

unread_counter
f0x 4 months ago
commit
496a520cbd
14 changed files with 6925 additions and 0 deletions
  1. 11
    0
      .babelrc
  2. 2
    0
      .gitignore
  3. 1
    0
      TODO
  4. 35
    0
      app.js
  5. 12
    0
      backends/matrix.js
  6. 15
    0
      budo.js
  7. 15
    0
      components/chat.js
  8. 15
    0
      components/info.js
  9. 90
    0
      components/sidebar.js
  10. 31
    0
      gulpfile.js
  11. 11
    0
      index.html
  12. 32
    0
      package.json
  13. 53
    0
      public/scss/style.scss
  14. 6602
    0
      shrinkwrap.yaml

+ 11
- 0
.babelrc View File

@@ -0,0 +1,11 @@
1
+{
2
+  "presets": [
3
+    "@babel/preset-react",
4
+    [
5
+      "@babel/preset-env",
6
+      {
7
+        "useBuiltIns": "entry"
8
+      }
9
+    ]
10
+  ]
11
+}

+ 2
- 0
.gitignore View File

@@ -0,0 +1,2 @@
1
+dist
2
+node_modules

+ 1
- 0
TODO View File

@@ -0,0 +1 @@
1
+* [ ] Abstract filtering list for reuse with memberlist

+ 35
- 0
app.js View File

@@ -0,0 +1,35 @@
1
+'use strict'
2
+const React = require('react')
3
+const ReactDOM = require('react-dom')
4
+const create = require('create-react-class')
5
+const Promise = require('bluebird')
6
+
7
+const Matrix = require('./backends/matrix.js')
8
+
9
+const Sidebar = require('./components/sidebar.js')
10
+
11
+const Info = require('./components/info.js')
12
+const Chat = require('./components/chat.js')
13
+
14
+let backend = new Matrix("user", "pass", "http://localhost")
15
+
16
+let App = create({
17
+  displayName: "App",
18
+
19
+  render: function() {
20
+    return (
21
+      <>
22
+        <Sidebar/>
23
+        <div className="main">
24
+          <Info />
25
+          <Chat />
26
+        </div>
27
+      </>
28
+    )
29
+  }
30
+})
31
+
32
+ReactDOM.render(
33
+  <App />,
34
+  document.getElementById('root')
35
+)

+ 12
- 0
backends/matrix.js View File

@@ -0,0 +1,12 @@
1
+class Matrix {
2
+  constructor(user, password, homeserver) {
3
+    console.log(user, password)
4
+  }
5
+
6
+  getEvents() {
7
+    console.log("new event")
8
+  }
9
+}
10
+
11
+
12
+module.exports = Matrix

+ 15
- 0
budo.js View File

@@ -0,0 +1,15 @@
1
+var budo = require('budo')
2
+var babelify = require('babelify')
3
+
4
+budo('app.js', {
5
+  live: true,             // setup live reload
6
+  port: 3000,             // use this port
7
+  browserify: {
8
+    transform: babelify   // ES6
9
+  }
10
+}).on('connect', function (ev) {
11
+  console.log('Server running on %s', ev.uri)
12
+  console.log('LiveReload running on port %s', ev.livePort)
13
+}).on('update', function (buffer) {
14
+  console.log('bundle - %d bytes', buffer.length)
15
+})

+ 15
- 0
components/chat.js View File

@@ -0,0 +1,15 @@
1
+'use strict'
2
+const React = require('react')
3
+const ReactDOM = require('react-dom')
4
+const create = require('create-react-class')
5
+const Promise = require('bluebird')
6
+
7
+let chat = create({
8
+  displayName: "Chat",
9
+  render: function() {
10
+    return <div className="chat">chat window</div>
11
+  }
12
+})
13
+
14
+
15
+module.exports = chat

+ 15
- 0
components/info.js View File

@@ -0,0 +1,15 @@
1
+'use strict'
2
+const React = require('react')
3
+const ReactDOM = require('react-dom')
4
+const create = require('create-react-class')
5
+const Promise = require('bluebird')
6
+
7
+let info = create({
8
+  displayName: "Info",
9
+  render: function() {
10
+    return <div className="info">Room Title</div> 
11
+  }
12
+})
13
+
14
+
15
+module.exports = info

+ 90
- 0
components/sidebar.js View File

@@ -0,0 +1,90 @@
1
+'use strict'
2
+const React = require('react')
3
+const ReactDOM = require('react-dom')
4
+const create = require('create-react-class')
5
+const Promise = require('bluebird')
6
+const debounce = require('debounce')
7
+
8
+let Filter = create({
9
+  displayName: "Filter",
10
+
11
+  inputRef: function(ref) {
12
+    if (ref == null) {
13
+      return
14
+    }
15
+    this.setState({
16
+      inputRef: ref
17
+    })
18
+    ref.addEventListener("keyup", debounce(this.input, 20))
19
+  },
20
+
21
+  input: function(e) {
22
+    this.props.setFilter(e.target.value.toUpperCase())
23
+  },
24
+
25
+  render: function() {
26
+    return <div className="filter">
27
+        <input ref={this.inputRef}/>
28
+      </div>
29
+  }
30
+})
31
+
32
+let List = create({
33
+  displayName: "List",
34
+
35
+  render: function() {
36
+    let rooms = ["Test", "aaaa", "Neo", "zzz", "Iris"]
37
+    let roomList = rooms.map((room, i) => {
38
+      return <RoomListItem name={room} filter={this.props.filter} key={i}/>
39
+    })
40
+    return <div className="list">
41
+      {roomList}
42
+    </div>
43
+  }
44
+})
45
+
46
+let RoomListItem = create({
47
+  displayName: "RoomListItem",
48
+
49
+  getInitialState: function() {
50
+    return {
51
+      filterName: this.props.name.toUpperCase()
52
+    }
53
+  },
54
+
55
+  render: function() {
56
+    if (this.state.filterName.indexOf(this.props.filter) == -1) {
57
+      return null
58
+    }
59
+    return <div className="roomListItem">
60
+      {this.props.name}
61
+    </div>
62
+  }
63
+})
64
+
65
+let Sidebar = create({
66
+  displayName: "Sidebar",
67
+
68
+  getInitialState: function() {
69
+    return {
70
+      filter: ""
71
+    }
72
+  },
73
+
74
+  setFilter: function(filter) {
75
+    this.setState({
76
+      filter: filter.toUpperCase()
77
+    })
78
+    console.log("setting", filter)
79
+  },
80
+
81
+  render: function() {
82
+    return <div className="sidebar">
83
+      <Filter setFilter={this.setFilter} />
84
+      <List filter={this.state.filter} />
85
+    </div>
86
+  }
87
+})
88
+
89
+
90
+module.exports = Sidebar

+ 31
- 0
gulpfile.js View File

@@ -0,0 +1,31 @@
1
+const gulp = require('gulp');
2
+const sass = require('gulp-sass');
3
+const concat = require('gulp-concat');
4
+const gutil = require('gulp-util');
5
+
6
+var budo = require('budo')
7
+var babelify = require('babelify')
8
+
9
+const cssFiles = 'public/scss/**/*.?(s)css';
10
+
11
+let css = gulp.src(cssFiles)
12
+    .pipe(sass())
13
+    .pipe(concat('style.css'))
14
+    .pipe(gulp.dest('assets'));
15
+
16
+gulp.task('watch', function(cb) {
17
+  budo("app.js", {
18
+  live: true,
19
+  port: 3000,
20
+  browserify: {
21
+    transform: babelify
22
+  }
23
+  }).on('exit', cb);
24
+  gulp.watch(cssFiles, function() {
25
+    console.log("Compiling CSS")
26
+    return gulp.src(cssFiles)
27
+      .pipe(sass())
28
+      .pipe(concat('style.css'))
29
+      .pipe(gulp.dest('./dist'))
30
+    });
31
+});

+ 11
- 0
index.html View File

@@ -0,0 +1,11 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+    <head>
4
+      <link rel="stylesheet" href="/dist/style.css">
5
+    </head>
6
+    <body>
7
+      <div id='root'>
8
+      </div>
9
+      <script src="app.js"></script>
10
+    </body>
11
+</html>

+ 32
- 0
package.json View File

@@ -0,0 +1,32 @@
1
+{
2
+  "name": "vortex",
3
+  "version": "1.0.0",
4
+  "description": "",
5
+  "main": "app.js",
6
+  "scripts": {
7
+    "test": "echo \"Error: no test specified\" && exit 1"
8
+  },
9
+  "author": "f0x",
10
+  "license": "AGPL-3.0",
11
+  "dependencies": {
12
+    "@babel/core": "^7.2.2",
13
+    "@babel/preset-env": "^7.2.0",
14
+    "@babel/preset-react": "^7.0.0",
15
+    "babelify": "^10.0.0",
16
+    "bluebird": "^3.5.3",
17
+    "budo": "^11.5.0",
18
+    "create-react-class": "^15.6.3",
19
+    "debounce": "^1.2.0",
20
+    "gulp": "^4.0.0",
21
+    "gulp-cli": "^2.0.1",
22
+    "gulp-concat": "^2.6.1",
23
+    "gulp-sass": "^4.0.2",
24
+    "gulp-util": "^3.0.8",
25
+    "react": "^16.6.3",
26
+    "react-dom": "^16.6.3",
27
+    "webpack": "^4.27.1"
28
+  },
29
+  "devDependencies": {
30
+    "gulp-watch": "^5.0.1"
31
+  }
32
+}

+ 53
- 0
public/scss/style.scss View File

@@ -0,0 +1,53 @@
1
+$bg: #1c1c1c;
2
+
3
+html, body {
4
+  margin: 0;
5
+  padding: 0;
6
+  background: #1c1c1c;
7
+  color: white;
8
+}
9
+
10
+body {
11
+  height: 100vh;
12
+  display: flex;
13
+}
14
+
15
+#root {
16
+  height: 100vh;
17
+  width: 100vw;
18
+  display: flex;
19
+}
20
+
21
+.sidebar {
22
+  flex: 0 0 15vw;
23
+}
24
+
25
+.main {
26
+  flex: 1 1 auto;
27
+}
28
+
29
+.sidebar, .main {
30
+  display: flex;
31
+  flex-direction: column;
32
+
33
+  div:nth-child(2) { // Room list & Chat
34
+    flex: 1 1 auto;
35
+    overflow-y: auto;
36
+  }
37
+}
38
+
39
+.filter {
40
+  background: red;
41
+}
42
+
43
+.list {
44
+  background: purple
45
+}
46
+
47
+.info {
48
+  background: lime;
49
+}
50
+
51
+.chat {
52
+  background: blue;
53
+}

+ 6602
- 0
shrinkwrap.yaml
File diff suppressed because it is too large
View File


Loading…
Cancel
Save