diff --git a/app/components/Text/index.jsx b/app/components/Text/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b8b95ade86197555df063b3fd1f90d5fae8c181e
--- /dev/null
+++ b/app/components/Text/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+class Text extends React.Component {
+ render() {
+ return (
+ <div></div>
+ );
+ }
+}
+
+export default Text;
\ No newline at end of file
diff --git a/app/components/TitleBar/index.css b/app/components/TitleBar/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1a5bc45f5ffdd96f78496f299ae5e9ba4ca63f55
--- /dev/null
+++ b/app/components/TitleBar/index.css
@@ -0,0 +1,34 @@
+.title-bar {
+ padding: 8px;
+ background-color: #fff;
+ box-shadow: 0px 2px 5px #ccc;
+ position: relative;
+
+ &-title{
+ top: 0;
+ width: 100%;
+ padding: inherit;
+ text-align: center;
+ position: absolute;
+ user-select: none;
+ }
+}
+
+.button{
+ width: 8px;
+ height: 8px;
+ margin-right: 3px;
+ display: inline-block;
+
+ &-maximize{
+ background-color: green;
+ }
+
+ &-minimize{
+ background-color: orange;
+ }
+
+ &-close{
+ background-color:red;
+ }
+}
\ No newline at end of file
diff --git a/app/components/TitleBar/index.jsx b/app/components/TitleBar/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8cda80b47c2b58b3e3a915aafe4fdd7db835d26a
--- /dev/null
+++ b/app/components/TitleBar/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import './index.css';
+
+class TitleBar extends React.Component {
+ render(){
+ const { title } = this.props;
+ return (
+ <header className="title-bar" style={ { WebkitAppRegion: "drag" } } >
+ <div className="title-bar-controls" >
+ <span className="button button-close" ></span>
+ <span className="button button-minimize" ></span>
+ <span className="button button-maximize" ></span>
+ </div>
+ <span className="title-bar-title" >{ title }</span>
+ </header>
+ );
+ }
+}
+
+export default TitleBar;
\ No newline at end of file
diff --git a/app/components/Window/index.css b/app/components/Window/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..80001dd2d7d36f9f485a0d681afc2494430ba8bc
--- /dev/null
+++ b/app/components/Window/index.css
@@ -0,0 +1,5 @@
+.window {
+ width: 100%;
+ height: 100vh;
+ background-color: #f5f5f5;
+}
\ No newline at end of file
diff --git a/app/components/Window/index.jsx b/app/components/Window/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..47c64aa8e411310197ac5947128c7a0488eebc08
--- /dev/null
+++ b/app/components/Window/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import './index.css';
+
+class Window extends React.Component {
+ render() {
+ const { children } = this.props;
+ return (
+ <div className="window" >{ children }</div>
+ );
+ }
+}
+
+export default Window;
\ No newline at end of file
diff --git a/app/components/index.jsx b/app/components/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2c6d96788fe7bb1a8b01935078c3f0bc04901cb0
--- /dev/null
+++ b/app/components/index.jsx
@@ -0,0 +1,3 @@
+export { default as Window } from './Window';
+export { default as TitleBar } from './TitleBar';
+export { default as Text } from './Text';
\ No newline at end of file
diff --git a/app/index.jsx b/app/index.jsx
index be9785f21427dabb288b4b09b7a0e0cc0f193652..9c36dc877704a2ce61a00ec5fa15f24f538b1b94 100644
--- a/app/index.jsx
+++ b/app/index.jsx
@@ -1,10 +1,16 @@
import React from 'react';
+import { Window, TitleBar, Text } from './components';
class Index extends React.Component {
+import React from 'react';
render(){
return (
+ <Window>
+import React from 'react';
<div>
+import React from 'react';
<h1>Hello world</h1>
+import React from 'react';
</div>
);
}
diff --git a/index.css b/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..4dccfe024cf691968cb0590d90648170e5f8e840
--- /dev/null
+++ b/index.css
@@ -0,0 +1,5 @@
+body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3aeecf4510c1e0124156e1a81ad4181de983c723..717435e217a63ad2faf03bbd0f75a13b7df62282 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,12 @@
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
+ <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app"></div>
</body>
<script>
- // In this file you can include the rest of your app's specific main process
- // code. You can also put them in separate files and require them here.
require('./app')
</script>
</html>
diff --git a/main.js b/main.js
index fec0bf3de0bc07f097c664cc03bc24b3a2a48d0c..7ab9e019b4ddae9778b91e15b4fa1bb49aa2857a 100644
--- a/main.js
+++ b/main.js
@@ -13,8 +13,17 @@
// Module to control application life.
function createWindow () {
// Create the browser window.
+ mainWindow = new BrowserWindow({
+ width: 400,
+const { BrowserWindow, app } = electron;
const url = require('url');
+ frame: false,
+ webPreferences: {
+const { BrowserWindow, app } = electron;
// Module to create native browser window.
+ nodeIntegration: true,
+ }
+ });
// and load the index.html of the app.
mainWindow.loadURL(url.format({
diff --git a/package.json b/package.json
index 4fa1f76342194c16a71bdad76dfa09073eb23156..1ff10f276c3d48f80aee654ecc4c67ee71434494 100644
--- a/package.json
+++ b/package.json
@@ -14,338 +14,50 @@ "start",
"tutorial",
"demo"
],
- "author": "GitHub",
- "license": "MIT",
- "devDependencies": {
- "react": "^16.5.1",
- "react-dom": "^16.5.1",
- "@babel/core": "latest",
- "@babel/preset-env": "latest",
- "@babel/preset-react": "^7.0.0",
- "@babel/plugin-proposal-class-properties": "^7.0.0",
- "electron": "latest",
- "electron-rebuild": "latest",
- "rollup": "latest",
- "rollup-plugin-babel": "latest",
"rollup-plugin-commonjs": "latest",
- "rollup-plugin-node-resolve": "latest"
- },
- "dependencies": {
- "abbrev": "^1.1.1",
- "ajv": "^5.5.2",
- "ansi-regex": "^2.1.1",
- "ansi-styles": "^3.2.1",
- "version": "0.0.1",
"start": "electron .",
- "arr-diff": "^2.0.0",
- "are-we-there-yet": "^1.1.5",
- "arr-flatten": "^1.1.0",
- "description": "Electron application",
{
- "array-unique": "^0.2.1",
- "asn1": "^0.2.4",
- "assert-plus": "^1.0.0",
- "asynckit": "^0.4.0",
- "aws-sign2": "^0.7.0",
- "aws4": "^1.8.0",
- "description": "Electron application",
"dev": "rollup -c -w"
- "bcrypt-pbkdf": "^1.0.2",
- "block-stream": "^0.0.9",
- "main": "main.js",
{
- "braces": "^1.8.5",
- "browserslist": "^4.1.1",
- "buffer-from": "^1.1.1",
- "builtin-modules": "^2.0.0",
- "camelcase": "^3.0.0",
- "camelcase-keys": "^2.1.0",
- "caniuse-lite": "^1.0.30000887",
- "main": "main.js",
},
- "chalk": "^2.4.1",
- "cli-cursor": "^2.1.0",
- "scripts": {
"name": "electron-app",
- "cliui": "^3.2.0",
- "co": "^4.6.0",
- "code-point-at": "^1.1.0",
- "color-convert": "^1.9.3",
- "color-name": "^1.1.3",
- "colors": "^1.3.2",
- "combined-stream": "^1.0.7",
- "concat-map": "^0.0.1",
- "concat-stream": "^1.6.2",
- "start": "electron .",
"name": "electron-app",
- "convert-source-map": "^1.6.0",
- "core-util-is": "^1.0.2",
- "currently-unhandled": "^0.4.1",
- "dashdash": "^1.14.1",
- "debug": "^2.6.9",
- "decamelize": "^1.2.0",
- "deep-extend": "^0.6.0",
- "delayed-stream": "^1.0.0",
- "delegates": "^1.0.0",
- "dev": "rollup -c -w"
"name": "electron-app",
- "ecc-jsbn": "^0.1.2",
- "electron-download": "^4.1.1",
- "dev": "rollup -c -w"
"main": "main.js",
- "env-paths": "^1.0.0",
- "escape-string-regexp": "^1.0.5",
- "error-ex": "^1.3.2",
- "estree-walker": "^0.5.2",
- "esutils": "^2.0.2",
- "expand-brackets": "^0.1.5",
- },
"name": "electron-app",
- },
"version": "0.0.1",
- "extglob": "^0.3.2",
- "extract-zip": "^1.6.7",
- "extsprintf": "^1.3.0",
- "fast-deep-equal": "^1.1.0",
- "fast-json-stable-stringify": "^2.0.0",
- "fd-slicer": "^1.0.1",
- "filename-regex": "^2.0.1",
- "fill-range": "^2.2.4",
- "keywords": [
"name": "electron-app",
- "for-in": "^1.0.2",
- "keywords": [
"description": "Electron application",
- "forever-agent": "^0.6.1",
- "form-data": "^2.3.2",
- "fs-extra": "^3.0.1",
- "fs.realpath": "^1.0.0",
- "fstream": "^1.0.11",
- "gauge": "^2.7.4",
- "get-caller-file": "^1.0.3",
- "Electron",
"name": "electron-app",
- "getpass": "^0.1.7",
- "glob": "^7.1.3",
- "glob-base": "^0.3.0",
- "Electron",
"scripts": {
- "globals": "^11.7.0",
- "graceful-fs": "^4.1.11",
- "har-schema": "^2.0.0",
- "har-validator": "^5.1.0",
- "has-flag": "^3.0.0",
- "has-unicode": "^2.0.1",
- "hosted-git-info": "^2.7.1",
- "http-signature": "^1.2.0",
- "indent-string": "^2.1.0",
- "inflight": "^1.0.6",
-{
"electron-rebuild": "latest",
-{
"name": "electron-app",
- "dev": "rollup -c -w"
- "invariant": "^2.2.4",
- "start",
- "is-arrayish": "^0.2.1",
- "start",
"name": "electron-app",
{
- "abbrev": "^1.1.1",
- "is-dotfile": "^1.0.3",
- "is-equal-shallow": "^0.1.3",
- "is-extendable": "^0.1.1",
- "is-extglob": "^1.0.0",
- "is-finite": "^1.0.2",
- "is-fullwidth-code-point": "^1.0.0",
- "is-glob": "^2.0.1",
- "is-module": "^1.0.0",
- "tutorial",
"name": "electron-app",
- "is-posix-bracket": "^0.1.1",
- "is-primitive": "^2.0.0",
- "is-typedarray": "^1.0.0",
- "is-utf8": "^0.2.1",
- "isarray": "^1.0.0",
- "tutorial",
"dev": "rollup -c -w"
- "isobject": "^2.1.0",
- "isstream": "^0.1.2",
- "js-levenshtein": "^1.1.3",
- "demo"
"name": "electron-app",
- "jsbn": "^0.1.1",
- "jsesc": "^2.5.1",
- "json-schema": "^0.2.3",
- "json-schema-traverse": "^0.3.1",
- "json-stringify-safe": "^5.0.1",
- "json5": "^0.5.1",
- "demo"
},
- "jsonfile": "^3.0.1",
- "kind-of": "^3.2.2",
- "lcid": "^1.0.0",
- ],
"version": "0.0.1",
- "lodash.assign": "^4.2.0",
- "lodash": "^4.17.11",
- "log-symbols": "^2.2.0",
- "loose-envify": "^1.4.0",
- "loud-rejection": "^1.6.0",
- "magic-string": "^0.22.5",
- "author": "GitHub",
- "meow": "^3.7.0",
- "math-random": "^1.0.1",
- "author": "GitHub",
"version": "0.0.1",
- "mime-db": "^1.36.0",
- "mime-types": "^2.1.20",
- "mimic-fn": "^1.2.0",
- "minimatch": "^3.0.4",
- "minimist": "^1.2.0",
- "mkdirp": "^0.5.1",
- "license": "MIT",
-{
"dev": "rollup -c -w"
-{
- "node-gyp": "^3.8.0",
- "license": "MIT",
"version": "0.0.1",
- "nopt": "^3.0.6",
- "normalize-package-data": "^2.4.0",
- "normalize-path": "^2.1.1",
- "npmlog": "^4.1.2",
- "nugget": "^2.0.1",
- "number-is-nan": "^1.0.1",
- "devDependencies": {
-{
},
-{
- "object-keys": "^0.4.0",
- "devDependencies": {
"version": "0.0.1",
{
- "extglob": "^0.3.2",
- "ora": "^1.4.0",
- "onetime": "^2.0.1",
- "os-homedir": "^1.0.2",
- "os-locale": "^1.4.0",
- "os-tmpdir": "^1.0.2",
- "react": "^16.5.1",
- "parse-glob": "^3.0.4",
- "parse-json": "^2.2.0",
- "react": "^16.5.1",
"version": "0.0.1",
- "path-is-absolute": "^1.0.1",
- "path-parse": "^1.0.6",
- "path-type": "^1.1.0",
- "pend": "^1.2.0",
- "performance-now": "^2.1.0",
- "pify": "^2.3.0",
- "pinkie": "^2.0.4",
- "name": "electron-app",
"Electron",
- "preserve": "^0.2.0",
- "react-dom": "^16.5.1",
"version": "0.0.1",
- "name": "electron-app",
{
- "description": "Electron application",
"name": "electron-app",
- "demo"
- "progress-stream": "^1.2.0",
- "prop-types": "^15.6.2",
- "psl": "^1.1.29",
- "qs": "^6.5.2",
- "punycode": "^1.4.1",
- "randomatic": "^3.1.0",
- "rc": "^1.2.8",
- "read-pkg": "^1.1.0",
- "read-pkg-up": "^1.0.1",
- "readable-stream": "^2.3.6",
- "redent": "^1.0.0",
- "regenerate": "^1.4.0",
- "regenerate-unicode-properties": "^7.0.0",
- "regenerator-transform": "^0.13.3",
- "regex-cache": "^0.4.4",
- "name": "electron-app",
"rollup-plugin-node-resolve": "latest"
- "name": "electron-app",
"version": "0.0.1",
- "name": "electron-app",
- "regjsparser": "^0.3.0",
- "remove-trailing-separator": "^1.1.0",
- "repeat-element": "^1.1.3",
- "repeat-string": "^1.6.1",
- "repeating": "^2.0.1",
- "request": "^2.88.0",
- "@babel/preset-env": "latest",
},
- "require-main-filename": "^1.0.1",
- "resolve": "^1.8.1",
- "restore-cursor": "^2.0.0",
- "@babel/preset-react": "^7.0.0",
"version": "0.0.1",
"name": "electron-app",
- "assert-plus": "^1.0.0",
- "rxjs": "^5.5.12",
- "safe-buffer": "^5.1.2",
- "safer-buffer": "^2.1.2",
- "schedule": "^0.5.0",
- "semver": "^5.5.1",
- "set-blocking": "^2.0.0",
- "signal-exit": "^3.0.2",
- "single-line-log": "^1.1.2",
- "@babel/plugin-proposal-class-properties": "^7.0.0",
"version": "0.0.1",
- "spawn-rx": "^2.0.12",
- "spdx-correct": "^3.0.0",
- "spdx-exceptions": "^2.1.0",
- "spdx-expression-parse": "^3.0.0",
- "spdx-license-ids": "^3.0.1",
- "speedometer": "^0.1.4",
- "sshpk": "^1.14.2",
- "electron": "latest",
{
- "string_decoder": "^1.1.1",
- "strip-ansi": "^3.0.1",
- "electron": "latest",
"description": "Electron application",
- "strip-indent": "^1.0.1",
- "strip-json-comments": "^2.0.1",
- "sumchecker": "^2.0.2",
- "supports-color": "^5.5.0",
- "symbol-observable": "^1.0.1",
- "tar": "^2.2.1",
- "throttleit": "^0.0.2",
- "through2": "^0.2.3",
- "to-fast-properties": "^2.0.0",
- "tough-cookie": "^2.4.3",
- "trim-newlines": "^1.0.0",
- "trim-right": "^1.0.1",
- "tunnel-agent": "^0.6.0",
- "tweetnacl": "^0.14.5",
- "typedarray": "^0.0.6",
- "unicode-canonical-property-names-ecmascript": "^1.0.4",
- "unicode-match-property-ecmascript": "^1.0.4",
- "unicode-match-property-value-ecmascript": "^1.0.2",
- "unicode-property-aliases-ecmascript": "^1.0.4",
- "universalify": "^0.1.2",
- "util-deprecate": "^1.0.2",
- "uuid": "^3.3.2",
- "validate-npm-package-license": "^3.0.4",
- "verror": "^1.10.0",
- "vlq": "^0.2.3",
- "which": "^1.3.1",
- "which-module": "^1.0.0",
- "wide-align": "^1.1.3",
- "wrap-ansi": "^2.1.0",
- "wrappy": "^1.0.2",
- "xtend": "^2.1.2",
- "y18n": "^3.2.1",
- "yargs": "^7.1.0",
- "yargs-parser": "^5.0.0",
- "yauzl": "^2.4.1"
},
"repository": {
"type": "git",
diff --git a/rollup.config.js b/rollup.config.js
index 821e516aeeaffbe1f3bf2d23172f641716605453..14abd9c3b7247b8aea490eeaf90935c948cc81a5 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,6 +1,14 @@
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
+import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
+import resolve from "rollup-plugin-node-resolve";
+
+// PostCSS plugins
+import simplevars from 'postcss-simple-vars';
+import nested from 'postcss-nested';
+import cssnext from 'postcss-cssnext';
+import cssnano from 'cssnano';
export default {
input: "./app/main.jsx",
@@ -11,8 +19,18 @@ browser: false,
extensions: [ '.js', '.jsx' ]
}),
commonjs(),
+ babel(),
+ postcss({
+import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
+ plugins: [
+ simplevars(),
+import resolve from "rollup-plugin-node-resolve";
+ cssnext({ warnForDuplicates: false, }),
+ cssnano(),
+ ]
+ })
],
external: [ 'serialport', 'dsensor' ],
output: {
