Merge branch 'test/windows'

cuteapple · Mar 21, 2019 · 15b2ab0 · 15b2ab0
2 parents 90fb40e + 92840cd
commit 15b2ab0
Show file tree

Hide file tree

Showing 6 changed files with 254 additions and 66 deletions.
diff --git a/exit-icon.png b/exit-icon.png
diff --git a/index.html b/index.html
@@ -1,19 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
  <head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  </head>
  <body>
  <h1>Hello World!</h1>
- <!-- All of the Node.js APIs are available in this renderer process. -->
- We are using Node.js <script>document.write(process.versions.node)</script>,
- Chromium <script>document.write(process.versions.chrome)</script>,
- and Electron <script>document.write(process.versions.electron)</script>.
-
- <script>
- // You can also require other files to run in this process
- require('./renderer.js')
- </script>
  </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,56 +1,77 @@
-// Modules to control application life and create native browser window
-const {app, BrowserWindow} = require('electron')
-
-// 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.
-let mainWindow
-
-function createWindow () {
- // Create the browser window.
- mainWindow = new BrowserWindow({
- width: 800,
- height: 600,
- webPreferences: {
- nodeIntegration: true
- }
- })
-
- // and load the index.html of the app.
- mainWindow.loadFile('index.html')
-
- // Open the DevTools.
- // mainWindow.webContents.openDevTools()
-
- // 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
- })
-}
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on('ready', createWindow)
-
-// Quit when all windows are closed.
-app.on('window-all-closed', function () {
- // On macOS 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()
- }
-})
-
-app.on('activate', function () {
- // On macOS it's common to re-create a window in the app when the
- // dock icon is clicked and there are no other windows open.
- if (mainWindow === null) {
- createWindow()
- }
-})
-
-// 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.
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron')
+const debug = require('electron-debug');
+debug();
+
+// 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.
+let mainWindow
+
+let components = []
+
+function createWindow() {
+ // Create the browser window.
+ mainWindow = new BrowserWindow({
+ width: 1,
+ height: 1,
+ y: -1,
+ x: -1,
+ transparent: true,
+ frame: false,
+ webPreferences: {
+ nodeIntegration: false
+ }
+ })
+ mainWindow.setIgnoreMouseEvents(true)
+
+
+ for (let i of [1]) {
+ let component = new BrowserWindow({
+ x: 30,
+ y: 30,
+ width: 300,
+ height: 300 + 32,
+ transparent: true,
+ frame: false,
+ backgroundColor: '#000',
+ parent: mainWindow
+ })
+ component.loadFile('note.html')
+ components.push(component)
+ }
+
+
+
+ // 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
+ })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+ // On macOS 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()
+ }
+})
+
+app.on('activate', function () {
+ // On macOS it's common to re-create a window in the app when the
+ // dock icon is clicked and there are no other windows open.
+ if (mainWindow === null) {
+ createWindow()
+ }
+})
+
+// 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.
diff --git a/note.html b/note.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <style>
+ * {
+ box-sizing: border-box;
+ border: 0;
+ padding: 0;
+ }
+
+
+
+ html, body {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ }
+
+ body {
+ /*box-shadow: 0 0 10px #719ECE;
+ border: 1px solid gray;*/
+ display: grid;
+ overflow: hidden;
+ grid-template-rows: 32px minmax(0,1fr)
+ }
+
+ header {
+ width: 100%;
+ height: 32px;
+ display: grid;
+ background-color: #50ffc4;
+ grid-template-columns: minmax(0,1fr) auto;
+ -webkit-user-drag: none;
+ }
+
+ header * {
+ -webkit-user-drag: none;
+ }
+
+
+ #window-handle {
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ -webkit-user-select: none;
+ -webkit-app-region: drag;
+ }
+
+ #window-toolbar {
+ height: 100%;
+ background-color: transparent;
+ }
+
+ #window-toolbar > * {
+ width: 32px;
+ height: 32px;
+ }
+
+ button {
+ position: relative;
+ background-color: transparent;
+ border: none;
+ }
+
+ button:focus {
+ outline: none;
+ box-shadow: none;
+ }
+
+ button:focus::after {
+ content:'';
+ display:block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border: 2px solid black;
+ }
+
+ #content {
+ width: 100%;
+ height: 100%;
+ padding: 6px;
+ background-color: #9fffc1
+ }
+
+ #content > textarea {
+ width: 100%;
+ height: 100%;
+ resize: none;
+ background-color: transparent;
+ }
+
+ #content > textarea:focus {
+ /*border: 1px solid gray;*/
+ outline: none;
+ }
+ </style>
+</head>
+
+<body>
+ <header>
+ <div id="window-handle"></div>
+ <div id="window-toolbar">
+ <button onclick="alert('exit')">
+ <img src="exit-icon.png" style="width:100%;height:100%; object-fit:contain" />
+ </button>
+ </div>
+ </header>
+ <section id="content">
+ <textarea></textarea>
+ </section>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,5 +16,8 @@
  "author": "cuteapple",
  "devDependencies": {
  "electron": "^4.0.7"
+ },
+ "dependencies": {
+ "electron-debug": "^2.1.0"
  }
 }