From c5c75efc238c632abf095f5b5d6b451eb456abe2 Mon Sep 17 00:00:00 2001 From: Joey Payne Date: Mon, 15 Feb 2016 21:28:21 -0700 Subject: [PATCH] Add initial journal app with library menu on left --- .babelrc | 1 + .gitignore | 1 + app/main.jsx | 72 ++++++++++++++ app/modules/EntrySelector.jsx | 65 +++++++++++++ app/modules/LibraryNav.jsx | 134 ++++++++++++++++++++++++++ app/modules/MobileTearSheet.jsx | 60 ++++++++++++ images/bottom-tear.svg | 12 +++ images/note.svg | 162 ++++++++++++++++++++++++++++++++ index.html | 26 +++++ main.js | 93 ++++++++++++++++++ package.json | 157 +++++++++++++++++++++++++++++++ style.css | 26 +++++ webpack.config.js | 29 ++++++ 13 files changed, 838 insertions(+) create mode 100644 .babelrc create mode 100644 app/main.jsx create mode 100644 app/modules/EntrySelector.jsx create mode 100644 app/modules/LibraryNav.jsx create mode 100644 app/modules/MobileTearSheet.jsx create mode 100644 images/bottom-tear.svg create mode 100644 images/note.svg create mode 100644 index.html create mode 100644 main.js create mode 100644 package.json create mode 100644 style.css create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..46c2c65 --- /dev/null +++ b/.babelrc @@ -0,0 +1 @@ +{ "presets": ["es2015", "react", "stage-0", "stage-1", "stage-2", "stage-3"] } diff --git a/.gitignore b/.gitignore index a2eab8e..0f4da31 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,4 @@ jspm_packages # Optional REPL history .node_repl_history +dist diff --git a/app/main.jsx b/app/main.jsx new file mode 100644 index 0000000..f72f73c --- /dev/null +++ b/app/main.jsx @@ -0,0 +1,72 @@ +import React from 'react' +import injectTapEventPlugin from "react-tap-event-plugin" +injectTapEventPlugin() +import ThemeManager from 'material-ui/lib/styles/theme-manager' +import ReactDOM from 'react-dom' +import LibraryNav from 'LibraryNav' +import Styles from 'material-ui/lib/styles' +import Rethink from 'rethinkdbdash' +import moment from 'moment' + + +const DefaultRawTheme = Styles.LightRawTheme + +let r = Rethink({ + db: 'technote', + servers: [ + {host: '162.243.255.144', + port: 28015} + ]}) + +function createTables(){ + r.tableCreate('notes').run() + .then(function(){ + r.table('notes').indexCreate('account_id').run() + }) + .error(function(){}) + + r.tableCreate('accounts').run().error(function(){}) +} + +class Main extends React.Component { + constructor(props){ + super(props) + createTables() + this.state = {entries: []} + } + + static get childContextTypes(){ + return {muiTheme: React.PropTypes.object} + } + + getChildContext() { + return { + muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme) + } + } + + entriesTapped = () => { + r.table('notes').getAll('jyapayne@gmail.com', {index: 'account_id'}).run().then( + function(notes){ + console.log(notes) + } + ) + }; + + render() { + + return ( + + ) + } + +} + +ReactDOM.render( +
, + document.getElementById('main') +); + diff --git a/app/modules/EntrySelector.jsx b/app/modules/EntrySelector.jsx new file mode 100644 index 0000000..16f8dc4 --- /dev/null +++ b/app/modules/EntrySelector.jsx @@ -0,0 +1,65 @@ +import React from 'react' + +import mui from 'material-ui' +import ThemeManager from 'material-ui/lib/styles/theme-manager' + +import List from 'material-ui/lib/lists/list' +import ListItem from 'material-ui/lib/lists/list-item' +import ActionGrade from 'material-ui/lib/svg-icons/action/grade' +import History from 'material-ui/lib/svg-icons/action/history' +import AddCircleOutline from 'material-ui/lib/svg-icons/content/add-circle-outline' +import Folder from 'material-ui/lib/svg-icons/file/folder' +import Delete from 'material-ui/lib/svg-icons/action/delete' +import Divider from 'material-ui/lib/divider' + + +const {AppBar, + AppCanvas, + FontIcon, + IconButton, + EnhancedButton, + NavigationClose, + Menu, + Mixins, + RaisedButton, + FlatButton, + Dialog, + Styles, + Tab, + Tabs, + Paper} = mui + +const colors = Styles.Colors + +const DefaultRawTheme = Styles.LightRawTheme + +export default class EntrySelector extends React.Component { + + constructor(props){ + super(props) + this.state = {entries: []} + } + + static get childContextTypes(){ + return {muiTheme: React.PropTypes.object} + } + + getChildContext() { + return { + muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme) + } + } + + blank(){ + + } + + render(){ + return ( + + + + ) + } +} + diff --git a/app/modules/LibraryNav.jsx b/app/modules/LibraryNav.jsx new file mode 100644 index 0000000..162fe94 --- /dev/null +++ b/app/modules/LibraryNav.jsx @@ -0,0 +1,134 @@ +import React from 'react' + +import mui from 'material-ui' +import ThemeManager from 'material-ui/lib/styles/theme-manager' + +import styles from 'material-ui/lib/styles' +import List from 'material-ui/lib/lists/list' +import ListItem from 'material-ui/lib/lists/list-item' +import ActionGrade from 'material-ui/lib/svg-icons/action/grade' +import History from 'material-ui/lib/svg-icons/action/history' +import AddCircleOutline from 'material-ui/lib/svg-icons/content/add-circle-outline' +import Folder from 'material-ui/lib/svg-icons/file/folder' +import Delete from 'material-ui/lib/svg-icons/action/delete' +import Divider from 'material-ui/lib/divider' + +const colors = styles.Colors + +const {AppBar, + AppCanvas, + FontIcon, + IconButton, + EnhancedButton, + NavigationClose, + Menu, + Mixins, + RaisedButton, + FlatButton, + Dialog, + Styles, + Tab, + Tabs, + Paper} = mui + +const DefaultRawTheme = Styles.LightRawTheme + +export default class LibraryNav extends React.Component { + + constructor(props){ + super(props) + this.state = {open: false, items: []} + } + + static get childContextTypes(){ + return {muiTheme: React.PropTypes.object} + } + + handleOpen = () => { + console.log(this); + this.setState({open: true}) + }; + + handleClose = () => { + this.setState({open: false}) + }; + + getChildContext() { + return { + muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme) + } + } + + displayDialog(){ + console.log(this) + } + + readDir = () => { + console.log(fs.readdirSync('.')) + }; + + entriesTapped = () => { + var items = this.state.items + items.push({name: 'Stuff '+(items.length+1), id: items.length}) + this.setState({items: items}) + }; + + blank(){ + + } + + render(){ + return ( +
+ + } + className="noselect"/> + } + className="noselect" /> + } + className="noselect" /> + } + className="noselect" /> + } + className="noselect" /> + {this.state.items.map(function(item){ + return ; + })} + + + +
NoteBooks
+ + + +
}> + + + + ) + } +} + diff --git a/app/modules/MobileTearSheet.jsx b/app/modules/MobileTearSheet.jsx new file mode 100644 index 0000000..712f71e --- /dev/null +++ b/app/modules/MobileTearSheet.jsx @@ -0,0 +1,60 @@ +import React from 'react'; +import {StylePropable} from 'material-ui/lib/mixins'; + +const MobileTearSheet = React.createClass({ + + propTypes: { + children: React.PropTypes.node, + height: React.PropTypes.number, + }, + + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + mixins: [ + StylePropable, + ], + + getDefaultProps() { + return { + height: 500, + }; + }, + + render() { + const styles = { + root: { + float: 'left', + marginBottom: 24, + marginRight: 24, + width: 360, + height: "100%", + }, + container: { + border: 'solid 1px #d9d9d9', + borderBottom: 'none', + height: '100%', + overflow: 'hidden', + }, + bottomTear: { + display: 'block', + position: 'relative', + marginTop: -10, + width: 360, + }, + }; + + return ( +
+
+ {this.props.children} +
+ +
+ ); + }, + +}); + +export default MobileTearSheet; diff --git a/images/bottom-tear.svg b/images/bottom-tear.svg new file mode 100644 index 0000000..20a5de1 --- /dev/null +++ b/images/bottom-tear.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/images/note.svg b/images/note.svg new file mode 100644 index 0000000..5610be4 --- /dev/null +++ b/images/note.svg @@ -0,0 +1,162 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..236cd8a --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + +
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..9948024 --- /dev/null +++ b/main.js @@ -0,0 +1,93 @@ +var app = require('app'); // Module to control application life. +var BrowserWindow = require('browser-window'); // Module to create native browser window. + +app.commandLine.appendSwitch("no-proxy-server"); + +// Report crashes to our server. + +// Keep a global reference of the window object, if you don't, the window will +// be closed automatically when the JavaScript object is garbage collected. +var mainWindow = null; + +// Quit when all windows are closed. +app.on('window-all-closed', function() { + // On OS X it is common for applications and their menu bar + // to stay active until the user quits explicitly with Cmd + Q + if (process.platform != 'darwin') { + app.quit(); + } +}); + +// This method will be called when Electron has finished +// initialization and is ready to create browser windows. +app.on('ready', function() { + // Create the browser window. + var mainWindow = new BrowserWindow({ + "resizable": true, + "macIcon": "", + "titleBarStyle": "default", + "minHeight": "", + "frame": true, + "enableLargerThanScreen": false, + "height": 768, + "maxHeight": "", + "autoHideMenuBar": false, + "useContentSize": false, + "skipTaskbar": false, + "fullscreen": false, + "icon": "", + "acceptFirstMouse": false, + "transparent": false, + "minWidth": "", + "x": "", + "maxWidth": "", + "width": 1024, + "type": "", + "alwaysOnTop": false, + "darkTheme": false, + "show": true, + "y": "", + "kiosk": false, + "exeIcon": "", + "backgroundColor": "#000000", + "webPreferences": { + "preload": "", + "nodeIntegration": true, + "javascript": true, + "images": true, + "plugins": false, + "experimentalCanvasFeatures": false, + "webgl": true, + "allowRunningInsecureContent": false, + "webaudio": true, + "zoomFactor": 1.0, + "blinkFeatures": "", + "experimentalFeatures": false, + "allowDisplayingInsecureContent": false, + "textAreasAreResizable": true, + "directWrite": true, + "partition": "", + "webSecurity": true + }, + "title": "Electrify", + "disableAutoHideCursor": false, + "center": true +}); + // and load the index.html of the app. + mainWindow.loadURL('file://' + __dirname + '/index.html'); + + mainWindow.webContents.setUserAgent(""); + + mainWindow.webContents.on('did-finish-load',function(){ + mainWindow.setTitle("Electrify"); + + }); + + // Emitted when the window is closed. + mainWindow.on('closed', function() { + // Dereference the window object, usually you would store windows + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null; + }); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..299c7cf --- /dev/null +++ b/package.json @@ -0,0 +1,157 @@ +{ + "inject_js_start": "", + "chromium_args": "", + "host_resolver_rules": "", + "remote_debugging_port": "", + "js_flags": "", + "js-flags": "", + "main": "main.js", + "additional_trust_anchors": [ + "" + ], + "disable_http_cache": false, + "web_preferences": {}, + "node-main": "", + "chromium-args": "", + "user_agent": "", + "webkit": { + "java": false, + "page-cache": false, + "plugin": false + }, + "client_certificate": "", + "scripts": { + "dev": "webpack-dev-server --progress --colors --port 8090", + "serve": "./node_modules/.bin/http-server -p 8080", + "start": "npm run serve | npm run dev", + "webpack": "webpack --progress --colors --watch" + }, + "single-instance": true, + "app_name": "Electrify", + "name": "Electrify", + "node-remote": "", + "host_rules": "", + "proxy_pac_url": "", + "cipher_suite_blacklist": "", + "ignore_connections_limit": "", + "ppapi_flash_path": "", + "inject-js-end": "", + "no_proxy_server": "False", + "inject-js-start": "", + "description": "A web/node app to desktop exporter using Electron.", + "webexe_settings": { + "electron_version": "0.36.7", + "linux-x32": false, + "force_download": false, + "mac-x64": false, + "nw_version": "0.12.2", + "download_dir": "/home/joey/Downloads/nwdls", + "windows-x64": false, + "export_dir": "output", + "custom_script": "", + "nw_compression_level": 0, + "electron_compression_level": 0, + "uncompressed_folder": false, + "windows-x32": false, + "mac-x32": false, + "linux-x64": true + }, + "dependencies": { + "material-ui": "^0.14.4", + "materialize-css": "^0.97.5", + "moment": "^2.11.2", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-quill": "^0.4.1", + "react-tap-event-plugin": "^0.2.2", + "rethinkdbdash": "^2.2.17" + }, + "ppapi_flash_version": "", + "nodejs": true, + "proxy_server": "", + "user-agent": "", + "version": "0.1.0", + "proxy_bypass_list": "", + "snapshot": "", + "author": "Joey Payne", + "license": "MIT", + "inject_js_end": "", + "window": { + "as_desktop": false, + "kiosk_emulation": false, + "resizable": true, + "max_width": "", + "always-on-top": false, + "title_bar_style": "default", + "enable_larger_than_screen": false, + "use_content_size": false, + "min_width": "", + "height": 480, + "background_color": "#000000", + "show_in_taskbar": true, + "max_height": "", + "toolbar": true, + "disable_auto_hide_cursor": false, + "fullscreen": false, + "icon": "", + "skip_taskbar": false, + "transparent": false, + "frame": true, + "x": "", + "always_on_top": false, + "accept_first_mouse": false, + "position": "", + "type": "", + "mac_icon": "", + "min_height": "", + "show": true, + "y": "", + "kiosk": false, + "exe_icon": "", + "width": 640, + "title": "Electrify", + "center": true, + "visible": true, + "dark_theme": false, + "auto_hide_menu_bar": false + }, + "disable_renderer_backgrounding": false, + "ssl_version_fallback_min": "", + "web": { + "experimental_canvas_features": false, + "preload": "", + "allow_displaying_insecure_content": false, + "javascript": true, + "images": true, + "direct_write": true, + "text_areas_are_resizable": true, + "blink_features": "", + "webgl": true, + "plugins": false, + "webaudio": true, + "zoom_factor": 100, + "experimental_features": false, + "allow_running_insecure_content": false, + "web_security": true, + "partition": "", + "node_integration": true + }, + "ignore_certificate_errors": false, + "log_net_log": "", + "main_html": "index.html", + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-0": "^6.5.0", + "babel-preset-stage-1": "^6.5.0", + "babel-preset-stage-2": "^6.5.0", + "babel-preset-stage-3": "^6.5.0", + "http-server": "^0.8.4", + "webpack": "*", + "webpack-dev-server": "^1.11.0" + }, + "keywords": [], + "node_main": "" +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..8306001 --- /dev/null +++ b/style.css @@ -0,0 +1,26 @@ +body, html{ + margin: 0px; + height: 100%; +} +#main{ + min-height: 100%; +} +.fill-height{ + height: 100%; +} +.noselect{ + -webkit-user-select: none; +} +.inline{ + display: inline-block; + vertical-align: top; +} +.left{ +} +.right{ + float: right; +} +#library-nav{ + border-right: solid 1px #d9d9d9; + width: 200px; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..8dbbaf6 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,29 @@ +var path = require('path'); + +module.exports = { + entry: './app/main.jsx', + output: { + path: __dirname + "/dist", + filename: "bundle.js", + sourceMapFilename: 'bundle.map' + }, + target: 'node', + //devtool: 'source-map', + module:{ + loaders: [ + { + test: /\.jsx?$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel', + query: {presets: ['react', 'es2015', 'stage-0', + 'stage-1', 'stage-2', 'stage-3']} + } + ] + }, + resolve:{ + extensions: ['', '.js', '.jsx'], + root: [ + path.resolve('./app/modules') + ] + } +};