Merge pull request #20 from rolandbernard/devel

v0.0.12

package.json

@@ -1,6 +1,6 @@
 {
     "name": "marvin",
-    "version": "0.0.11",
+    "version": "0.0.12",
     "license": "MIT",
     "scripts": {
         "dev": "electron-webpack dev",
@@ -32,7 +32,7 @@
     },
     "devDependencies": {
         "@babel/preset-react": "^7.10.1",
-        "electron": "^9.3.5",
+        "electron": "^11.0.0",
         "electron-builder": "^22.4.1",
         "electron-webpack": "^2.8.2",
         "webpack": "~4.42.1"

src/common/local/english.js

@@ -12,10 +12,15 @@ const translation_english = {
     recenter_on_show: 'Recenter when opening the main window',
 
     theme: 'Color theme',
-    background_color: 'Background color',
-    text_color: 'Text color',
+    background_color_input: 'Background color (Input)',
+    background_color_output: 'Background color (Output)',
+    text_color_input: 'Text color (Input)',
+    text_color_output: 'Text color (Output)',
     accent_color: 'Accent color',
     select_color: 'Selection color',
+    border_radius: 'Border radius [px]',
+    background_blur_input: 'Background blur (Input) [px]',
+    background_blur_output: 'Background blur (Output) [px]',
 
     modules: 'Modules',
     active: 'Active',

src/common/local/german.js

@@ -12,10 +12,15 @@ const translation_german = {
     recenter_on_show: 'Zentrieren des Fensters beim Öffnen',
 
     theme: 'Farbschema',
-    background_color: 'Hintergundfarbe',
-    text_color: 'Textfarbe',
+    background_color_input: 'Hintergundfarbe (Eingabe)',
+    background_color_output: 'Hintergundfarbe (Ausgabe)',
+    text_color_input: 'Textfarbe (Eingabe)',
+    text_color_output: 'Textfarbe (Ausgabe)',
     accent_color: 'Akzentfarbe',
     select_color: 'Auswahlfarbe',
+    border_radius: 'Randradius [px]',
+    background_blur_input: 'Hintergrundunschärfe (Eingabe) [px]',
+    background_blur_output: 'Hintergrundunschärfe (Ausgabe) [px]',
 
     modules: 'Module',
     active: 'Aktiv',

src/common/local/italian.js

@@ -12,10 +12,15 @@ const translation_italian = {
     recenter_on_show: "Centrare la finestra dopo l'apertura",
 
     theme: 'Combinazione di colori',
-    background_color: 'Colore di sfondo',
-    text_color: 'Colore del testo',
+    background_color_input: 'Colore di sfondo (Input)',
+    background_color_output: 'Colore di sfondo (Output)',
+    text_color_input: 'Colore del testo (Input)',
+    text_color_output: 'Colore del testo (Output)',
     accent_color: 'Colore di accento',
     select_color: 'Colore di selezione',
+    border_radius: 'Raggio di confine [px]',
+    background_blur_input: 'Sfocatura di sfondo (Input) [px]',
+    background_blur_output: 'Sfocatura di sfondo (Output) [px]',
 
     modules: 'Moduli',
     active: 'Attivo',

src/main/config.js

@@ -18,10 +18,15 @@ export let config_default = {
         recenter_on_show: true,
     },
     theme: {
-        background_color: 'black',
-        text_color: 'white',
+        background_color_input: 'black',
+        background_color_output: 'black',
+        text_color_input: 'white',
+        text_color_output: 'white',
         accent_color: 'white',
         select_color: 'grey',
+        border_radius: 0,
+        background_blur_input: 0,
+        background_blur_output: 0,
     },
     modules: {
         linux_system: {

src/main/index.js

@@ -11,13 +11,16 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 
 let main_window;
 
+app.commandLine.appendSwitch("disable-gpu"); // Transparancy will not work without this
+
 function createMainWindow() {
     main_window = new BrowserWindow({
         webPreferences: {
             nodeIntegration: true,
             plugins: true,
             contextIsolation: false,
             webSecurity: !isDevelopment,
+            experimentalFeatures: true,
         },
         resizable: false,
         maximizable: false,
@@ -28,17 +31,12 @@ function createMainWindow() {
         frame: false,
         show: false,
         transparent: true,
-        width: config.general.width + (isDevelopment ? 1000 : 0),
+        width: config.general.width,
         height: config.general.max_height,
         alwaysOnTop: true,
         icon: path.join(__static, 'logo.png'),
-        paintWhenInitiallyHidden: true,
     });
 
-    if (isDevelopment) {
-        main_window.webContents.openDevTools();
-    }
-
     if (isDevelopment) {
         main_window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}/index.html`);
     } else {
@@ -61,7 +59,9 @@ function createMainWindow() {
         e.preventDefault();
     });
     main_window.on('close', hideWindow);
-    main_window.on('blur', hideWindow);
+    if (!isDevelopment) {
+        main_window.on('blur', hideWindow);
+    }
 }
 
 async function toggleMain(op) {

src/main/puppeteer.js

@@ -3,9 +3,11 @@ import puppeteer from 'puppeteer-core';
 import pie from 'puppeteer-in-electron';
 import { app } from 'electron';
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
 export let browser = null;
 
 (async () => {
-    await pie.initialize(app);
+    await pie.initialize(app, isDevelopment ? 33551 : undefined);
     browser = await pie.connect(app, puppeteer);
 })();

src/renderer/main/index.css

@@ -30,3 +30,7 @@ html, body, * {
 #listbox::-webkit-scrollbar-thumb {
     background: lightgrey;
 }
+
+.MuiOutlinedInput-notchedOutline {
+    border: none !important;
+}

src/renderer/main/index.js

@@ -11,36 +11,6 @@ import InputField from './input-field';
 import OutputList from './output-list';
 import PreviewField from './preview-field';
 
-const styles = {
-    root: {
-        width: '100%',
-        display: 'flex',
-        flexFlow: 'column',
-        overflow: 'hidden',
-        height: '100%',
-    },
-    output_area: {
-        flex: '1 1 auto',
-        width: '100%',
-        height: '0',
-        position: 'relative',
-        overflow: 'hidden',
-    },
-    output: {
-        display: 'flex',
-        flexFlow: 'row nowrap',
-        width: '100%',
-        height: 'min-content',
-        maxHeight: '100%',
-        overflow: 'hidden',
-    },
-    list: {
-        flex: '1 1 auto',
-        width: '100%',
-        overflow: 'hidden',
-    }
-};
-
 class App extends React.Component {
     constructor(props) {
         super(props);
@@ -78,6 +48,38 @@ class App extends React.Component {
     }
 
     render() {
+        const styles = {
+            root: {
+                width: '100%',
+                display: 'flex',
+                flexFlow: 'column',
+                overflow: 'hidden',
+                height: '100%',
+            },
+            output_area: {
+                flex: '1 1 auto',
+                width: '100%',
+                height: '0',
+                position: 'relative',
+                overflow: 'hidden',
+            },
+            output: {
+                display: 'flex',
+                flexFlow: 'row nowrap',
+                width: '100%',
+                height: 'min-content',
+                maxHeight: '100%',
+                overflow: 'hidden',
+                // backdropFilter: this.state.config && `blur(${this.state.config.theme.background_blur_input}px)`,
+                borderRadius: this.state.config && `0 0 ${this.state.config.theme.border_radius}px ${this.state.config.theme.border_radius}px`,
+            },
+            list: {
+                flex: '1 1 auto',
+                width: '100%',
+                overflow: 'hidden',
+            }
+        };
+
         return (
             <div style={styles.root} onKeyDown={(e) => this.handle_key_down(e)}>
                 <InputField config={this.state.config} inputRef={this.input}></InputField>

src/renderer/main/input-field.js

@@ -33,12 +33,13 @@ class InputField extends React.Component {
         const styles = {
             input: {
                 width: '100%',
-                background: this.props.config && this.props.config.theme.background_color,
-                color: this.props.config && this.props.config.theme.text_color,
                 fontSize: '1.5rem',
                 fontWeight: 300,
-                borderRadius: 0,
-                padding: '0.25rem',
+                padding: '0.275rem',
+                background: this.props.config && this.props.config.theme.background_color_input,
+                color: this.props.config && this.props.config.theme.text_color_input,
+                // backdropFilter: this.props.config && `blur(${this.props.config.theme.background_blur_input}px)`,
+                borderRadius: this.props.config && `${this.props.config.theme.border_radius}px ${this.props.config.theme.border_radius}px 0 0`,
             },
             text_field: {
                 margin: 0,

src/renderer/main/output-list.js

@@ -31,14 +31,14 @@ class OutputList extends React.Component {
                 width: '100%',
                 flex: '1 1 auto',
                 overflow: 'auto',
-                background: this.props.config && this.props.config.theme.background_color,
+                background: this.props.config && this.props.config.theme.background_color_output,
             },
             list: {
                 width: '100%',
             },
             result: {
                 width: '100%',
-                color: this.props.config && this.props.config.theme.text_color,
+                color: this.props.config && this.props.config.theme.text_color_output,
             },
             selected: {
                 background: this.props.config && this.props.config.theme.select_color,

src/renderer/main/preview/iframe.js

@@ -19,10 +19,7 @@ function IFramePreview(props) {
         ref.current.style.width = '50%';
         ref.current.style.height = '100%';
         if(props.onLoad) {
-            console.log(ref.current.currentDocument.body.innerHTML);
-            if(ref.current.currentDocument.body.innerHTML) {
-                props.onLoad('50%');
-            }
+            props.onLoad('0%');
         }
     };
     return (

src/renderer/settings/config.js

@@ -12,10 +12,15 @@ const config_definition = [
         { name: 'recenter_on_show', type: 'boolean' },
     ], type: 'page' },
     { name: 'theme', icon: 'palette', options: [
-        { name: 'background_color', type: 'color' },
-        { name: 'text_color', type: 'color' },
+        { name: 'background_color_input', type: 'color' },
+        { name: 'background_color_output', type: 'color' },
+        { name: 'text_color_input', type: 'color' },
+        { name: 'text_color_output', type: 'color' },
         { name: 'accent_color', type: 'color' },
         { name: 'select_color', type: 'color' },
+        { name: 'border_radius', type: 'size' },
+        // { name: 'background_blur_input', type: 'size' },
+        // { name: 'background_blur_output', type: 'size' },
     ], type: 'page' },
     { name: 'modules', pages: [
         { name: 'linux_system', active: 'active', options: [

yarn.lock

@@ -3080,10 +3080,10 @@ electron-webpack@^2.8.2:
     webpack-merge "^4.2.2"
     yargs "^15.3.1"
 
-electron@^9.3.5:
-  version "9.3.5"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-9.3.5.tgz#7967146b81e6d9b484773243fd4a4f671a50b884"
-  integrity sha512-EPmDsp7sO0UPtw7nLD1ufse/nBskP+ifXzBgUg9psCUlapkzuwYi6pmLAzKLW/bVjwgyUKwh1OKWILWfOeLGcQ==
+electron@^11.0.0:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-11.0.3.tgz#c29eaacda38ce561890e59906ca5f507c72b3ec4"
+  integrity sha512-nNfbLi7Q1xfJXOEO2adck5TS6asY4Jxc332E4Te8XfQ9hcaC3GiCdeEqk9FndNCwxhJA5Lr9jfSGRTwWebFa/w==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"