Tray/NoTray

main.js

@@ -1,23 +1,24 @@
 'use strict'
 
 // Import parts of electron to use
-const { app, BrowserWindow, dialog, ipcMain, Menu} = require('electron')
+const {app, BrowserWindow, dialog, ipcMain, Menu, screen, Tray} = require('electron')
 const openAboutWindow = require('about-window').default
 const path = require('path')
 const url = require('url')
 
 // 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 mainWindow, tray;
+let devBrowserProperties = {};
+
+function createTray() {
+  tray = new Tray('./marvin16x16.png');
+  tray.setToolTip('Marvin')
+}
 
 // Keep a reference for dev mode
 let dev = false
 
-// Broken:
-// if (process.defaultApp || /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || /[\\/]electron[\\/]/.test(process.execPath)) {
-//   dev = true
-// }
-
 if (process.env.NODE_ENV !== undefined && process.env.NODE_ENV === 'development') {
   dev = true
 }
@@ -31,8 +32,8 @@ if (process.platform === 'win32') {
 
 // Functions
 
- async function handleFileOpen() {
+async function handleFileOpen() {
-  const { canceled, filePaths } =  await dialog.showOpenDialog(mainWindow, {properties: ['openDirectory']})
+  const {canceled, filePaths} = await dialog.showOpenDialog(mainWindow, {properties: ['openDirectory']})
   if (canceled) {
     return
   } else {
@@ -102,7 +103,7 @@ let mainMenu = Menu.buildFromTemplate(
           click: () => {
             openAboutWindow({
               icon_path: path.join(__dirname, 'marvin.ico'),
-              bug_report_url:'mailto:r.nasarek@gnm.de',
+              bug_report_url: 'mailto:r.nasarek@gnm.de',
               bug_link_text: 'Einen Fehler melden',
               license: 'MIT',
               description: 'App zur Dokumentverwaltung im IKK am Germanischen Nationalmuseum.',
@@ -117,12 +118,26 @@ let mainMenu = Menu.buildFromTemplate(
 )
 
 
+function createWindow(dimensions) {
+  if (dev !== true) {
+    devBrowserProperties = {
+      fullscreenable: false,
+      resizable: false,
+    }
 
-function createWindow() {
+  }
+  // Create tray icon.
+  createTray()
+  let appWidth = 400;
+  let appHeight = 720;
+  let xPosition = (dimensions.width - appWidth)
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 400,
+    ...devBrowserProperties,
-    height: 600,
+    x: xPosition,
+    y: 0,
+    width: appWidth,
+    height: appHeight,
     icon: __dirname + '/marvin.ico',
     show: false,
     webPreferences: {
@@ -163,23 +178,17 @@ function createWindow() {
   // Don't show until we are ready and loaded
   mainWindow.once('ready-to-show', () => {
     mainWindow.show()
-
     // Open the DevTools automatically if developing
     if (dev) {
-      const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
+      const {default: installExtension, REACT_DEVELOPER_TOOLS} = require('electron-devtools-installer')
-
       installExtension(REACT_DEVELOPER_TOOLS)
         .catch(err => console.log('Error loading React DevTools: ', err))
       mainWindow.webContents.openDevTools()
     }
   })
 
-  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
-  mainWindow.on('closed', function() {
+    mainWindow = null;
-    // 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
   })
 }
 
@@ -188,7 +197,9 @@ function createWindow() {
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
   ipcMain.handle('dialog:openFile', handleFileOpen)
-  createWindow();
+  const display = screen.getPrimaryDisplay();
+  const dimensions = display.size;
+  createWindow(dimensions);
 
 })
 

resources/files/config/config.json

@@ -1,3 +1,3 @@
 {
-  "rootDir": "/home/rbrt/WebstormProjects/marvin"
+  "rootDir": "/home/rbrt/Schreibtisch/marvin"
 }

splashScreen.css

@@ -0,0 +1,52 @@
+body {
+  background-color: #f9f9fa;
+  background-image: url('background.jpg');
+}
+
+.flex {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto
+}
+.loader {
+  border: 5px solid rgba(18, 65, 145, 255);
+  border-radius: 50%;
+  border-top: 5px solid #ffffff;
+  width: 40px;
+  height: 40px;
+  -webkit-animation: spin 1s linear infinite;
+  /* Safari */
+  animation: spin 1s linear infinite;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0px;
+  bottom: 0;
+  position: fixed;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.center {
+  border: none !important;
+  text-align: center;
+}

splashScreen.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+<h3>Application Is Starting...</h3>
+<div class="loader"></div>
+</body>
+</html>

src/assets/css/styles.css

@@ -12,7 +12,7 @@ body {
   background-color: white ;
   color: #d5d5d5;
   font-family: 'Open Sans', sans-serif;
-  font-size: 1rem;
+  font-size: 1.1rem;
 }
 
 
@@ -92,6 +92,8 @@ div {
 }
 
 input {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.1rem;
   border-top: none;
   border-right: none;
   border-left: none;
@@ -111,7 +113,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 input:focus {
 background-color: #d5d5d5;
   color: #00152E;
-  font-size: .9rem;
+  font-size: 1.1rem;
 }
 
 input.edit-input:not(:disabled) {
@@ -123,8 +125,8 @@ input.edit-input:not(:disabled) {
 .input-field {
   background-color: #f2f2f2 ;
   color: black;
-  font-size: .9rem;
+  font-size: 1.1rem;
-  font-family: roboto, sans-serif;
+  font-family: "Open Sans", sans-serif;
 }
 
 
@@ -166,7 +168,7 @@ label {
 }
 
 .open {
-  height: 550px;
+  height: 610px;
   overflow: hidden;
 }
 p {
@@ -192,8 +194,10 @@ p {
 
 select {
   border: none;
-  font-size: medium;
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.1rem;
   outline: none;
+  border-radius: 3px;
 
 }
 
@@ -201,7 +205,7 @@ select {
   background-color: #e30f27;
   color: white;
   font-family: "Open Sans", sans-serif;
-  font-size: 1rem;
+  font-size: 1.1rem;
   border: unset;
 
 }
@@ -214,7 +218,8 @@ select {
   background-color: #00152E ;
   color: #d5d5d5;
   width: 100%;
-  font-size: .85rem;
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.1rem;
 }
 
 .settings-div {
@@ -235,13 +240,15 @@ select {
   align-items: flex-start;
 }
 textarea, textarea:focus, input:focus{
+  font-family: "Open Sans", sans-serif;
   outline: none;
-  font-size: .9rem;
+  font-size: 1.1rem;
 ;
 }
 
 textarea.select-folder-field, textarea.select-folder-field:focus, input.select-folder-field:focus {
-  font-size: .85rem;
+  font-size: 1.1rem;
+  font-family: "Open Sans", sans-serif;
 }
 
 .top-distance {
@@ -255,25 +262,26 @@ textarea.select-folder-field, textarea.select-folder-field:focus, input.select-f
 
 /* width */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 5px;
   height: 5px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
 
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #888;
+  background-color: #d5d5d5;
-  width: 10px;
+  width: 3px;
+  border-radius: 3px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: #464646;
 }
 
 

src/routes/settings.js

@@ -70,7 +70,7 @@ export default function Settings() {
       <main>
         <form onSubmit={selectFolderHandler}>
           <label htmlFor={"output-root"}>
-            Wurzelverzeichnis
+            Hauptverzeichnis
           </label>
           <div className="col-sm-10 d-flex align-items-center flex sticky-edit">
             <Input config={config} setConfig={setConfig}/>