Merge remote-tracking branch 'origin/master' into fixes/electron-warnings

.all-contributorsrc

@@ -58,6 +58,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "romanakash",
+      "name": "Roman Akash",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/40427975?v=4",
+      "profile": "https://github.com/romanakash",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1,6 +1,6 @@
 # Responsively App ![Twitter Follow](https://img.shields.io/twitter/follow/ResponsivelyApp?style=social) [![xscode](https://img.shields.io/badge/Available%20on-xs%3Acode-blue?style=?style=plastic&logo=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAlUlEQVR42uzXSwqAMAwE0Mn9L+3Ggtgkk35QwcnSJo9S+yGwM9DCooCbgn4YrJ4CIPUcQF7/XSBbx2TEz4sAZ2q1RAECBAiYBlCtvwN+KiYAlG7UDGj59MViT9hOwEqAhYCtAsUZvL6I6W8c2wcbd+LIWSCHSTeSAAECngN4xxIDSK9f4B9t377Wd7H5Nt7/Xz8eAgwAvesLRjYYPuUAAAAASUVORK5CYII=)](https://xscode.com/manojvivek/responsively-app)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 [![PH](https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=200375&theme=light&period=daily)](https://www.producthunt.com/posts/responsively?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-responsively)
 
@@ -68,6 +68,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/leon0707"><img src="https://avatars1.githubusercontent.com/u/523684?v=4" width="100px;" alt=""/><br /><sub><b>Leon Feng</b></sub></a><br /><a href="https://github.com/manojVivek/responsively-app/commits?author=leon0707" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/kishoreio"><img src="https://avatars2.githubusercontent.com/u/30261988?v=4" width="100px;" alt=""/><br /><sub><b>Kishore S</b></sub></a><br /><a href="https://github.com/manojVivek/responsively-app/commits?author=kishoreio" title="Code">💻</a></td>
     <td align="center"><a href="https://jjavierdguezas.github.io"><img src="https://avatars2.githubusercontent.com/u/13673443?v=4" width="100px;" alt=""/><br /><sub><b>José Javier Rodríguez Zas</b></sub></a><br /><a href="https://github.com/manojVivek/responsively-app/commits?author=jjavierdguezas" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/romanakash"><img src="https://avatars1.githubusercontent.com/u/40427975?v=4" width="100px;" alt=""/><br /><sub><b>Roman Akash</b></sub></a><br /><a href="https://github.com/manojVivek/responsively-app/commits?author=romanakash" title="Code">💻</a></td>
   </tr>
 </table>
 

desktop-app/app/menu.js

@@ -1,7 +1,7 @@
 // @flow
 import {app, dialog, Menu, shell, BrowserWindow, clipboard} from 'electron';
 import * as os from 'os';
-import { pkg } from './utils/generalUtils'
+import {pkg} from './utils/generalUtils';
 
 const path = require('path');
 
@@ -49,10 +49,65 @@ export default class MenuBuilder {
           );
         },
       },
+      {
+        label: 'Shortcuts',
+        click: () => {
+          /*
+          //helper function which gets all shortcuts as array of strings
+          const generateShortcuts = () => {
+            const template =
+              process.platform !== 'darwin'
+                ? this.buildDarwinTemplate()
+                : this.buildDefaultTemplate();
+
+            const shortcuts = template
+              .map(({submenu}) =>
+                submenu
+                  .filter(({accelerator}) => accelerator)
+                  .map(({accelerator, label}) => [
+                    label.replace('&', ''),
+                    accelerator,
+                  ])
+              )
+              .flat();
+
+            return shortcuts;
+          };
+          console.log(generateShortcuts());
+          */
+
+          let win = new BrowserWindow({
+            parent: BrowserWindow.getFocusedWindow(),
+            modal: true,
+            frame: false,
+            height: 900,
+            webPreferences: {
+              devTools: false,
+              nodeIntegration: true,
+            },
+          });
+
+          win.loadFile('./shortcuts.html', {
+            query: {platform: process.platform},
+          });
+
+          win.once('ready-to-show', () => {
+            win.show();
+          });
+
+          win.on('blur', () => {
+            win.close();
+          });
+
+          win.on('close', () => {
+            win = null;
+          });
+        },
+      },
       {
         label: 'About',
         click() {
-          const iconPath = path.join(__dirname, '../resources/icons/64x64.png')
+          const iconPath = path.join(__dirname, '../resources/icons/64x64.png');
           const title = 'Responsively';
           const description = pkg.description;
           const version = pkg.version || 'Unknown';
@@ -60,18 +115,22 @@ export default class MenuBuilder {
           const chrome = process.versions['chrome'] || 'Unknown';
           const node = process.versions['node'] || 'Unknown';
           const v8 = process.versions['v8'] || 'Unknown';
-          const osText = `${os.type()} ${os.arch()} ${os.release()}`.trim() || 'Unknown';
+          const osText =
+            `${os.type()} ${os.arch()} ${os.release()}`.trim() || 'Unknown';
           const usefulInfo = `Version: ${version}\nElectron: ${electron}\nChrome: ${chrome}\nNode.js: ${node}\nV8: ${v8}\nOS: ${osText}`;
-          const detail = description? `${description}\n\n${usefulInfo}` : usefulInfo;
+          const detail = description
+            ? `${description}\n\n${usefulInfo}`
+            : usefulInfo;
           let buttons = ['OK', 'Copy'];
           let cancelId = 0;
           let defaultId = 1;
           if (process.platform === 'linux') {
-            buttons =  ['Copy', 'OK'];
+            buttons = ['Copy', 'OK'];
             cancelId = 1;
             defaultId = 0;
           }
-          dialog.showMessageBox(BrowserWindow.getAllWindows()[0], {
+          dialog
+            .showMessageBox(BrowserWindow.getAllWindows()[0], {
               type: 'none',
               buttons,
               title,
@@ -80,12 +139,13 @@ export default class MenuBuilder {
               noLink: true,
               icon: iconPath,
               cancelId,
-              defaultId
+              defaultId,
-            }).then(({response }) => {
+            })
+            .then(({response}) => {
               if (response === defaultId) {
                 clipboard.writeText(usefulInfo, 'clipboard');
               }
-          });
+            });
         },
       },
     ],

desktop-app/app/shortcuts.html

@@ -0,0 +1,130 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="app.global.css" />
+    <style>
+      body {
+        background-color: #313131;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        font-family: 'Roboto', sans-serif;
+      }
+      ul {
+        margin: 50px;
+      }
+      li {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 5px;
+      }
+      .label {
+        width: 250px;
+        font-size: large;
+      }
+      .key {
+        display: flex;
+        text-align: right;
+        padding: 7px;
+        margin-left: 10px;
+        justify-content: center;
+        align-items: center;
+        font-size: large;
+        background-color: black;
+        border-radius: 5px;
+      }
+      .btn-wrapper {
+        display: flex;
+        justify-content: center;
+        background-color: transparent;
+        padding-bottom: 50px;
+      }
+      #close-btn {
+        font-family: 'Roboto', sans-serif;
+        font-size: x-large;
+        padding: 10 20 10 20px;
+        border: 0;
+        border-radius: 5px;
+        background-color: black;
+        color: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <ul id="list"></ul>
+    <div class="btn-wrapper">
+      <button id="close-btn">Ok</button>
+    </div>
+    <script>
+      const urlParams = new URLSearchParams(window.location.search);
+      const platform = urlParams.get('platform');
+      const shortcuts =
+        platform !== 'darwin'
+          ? [
+              ['Hide ResponsivelyApp', ['Cmd', 'H']],
+              ['Hide Others', ['Cmd', 'Shift', 'H']],
+              ['Quit', ['Cmd', 'Q']],
+              ['Open HTML file', ['Cmd', 'O']],
+              ['Undo', ['Cmd', 'Z']],
+              ['Redo', ['Shift', 'Cmd', 'Z']],
+              ['Cut', ['Cmd', 'X']],
+              ['Copy', ['Cmd', 'C']],
+              ['Paste', ['Cmd', 'V']],
+              ['Select All', ['Cmd', 'A']],
+              ['Reload', ['Cmd/Ctrl', 'R']],
+              ['Reload Ignoring Cache', ['Cmd/Ctrl', 'H']],
+              ['Toggle Full Screen', ['Ctrl', 'Cmd', 'F']],
+              ['Toggle Developer Tools', ['Alt', 'Cmd', 'I']],
+              ['Minimize', ['Cmd', 'M']],
+              ['Close', ['Cmd', 'W']],
+            ]
+          : [
+              ['Open HTML File', ['Ctrl', 'O']],
+              ['Reload', ['Ctrl', 'R']],
+              ['Reload CSS', ['Ctrl', 'Alt', 'R']],
+              ['Reload Ignoring Cache', ['Ctrl', 'Shift', 'R']],
+              ['Toggle Full Screen', ['F11']],
+              ['Toggle Developer tools', ['Alt', 'Ctrl', 'I']],
+            ];
+
+      const shortcutNodes = shortcuts.map(([label, keys]) => {
+        const liElem = document.createElement('li');
+
+        const labelElem = document.createElement('div');
+        const labelTextNode = document.createTextNode(label);
+        labelElem.classList.add('label');
+        labelElem.appendChild(labelTextNode);
+
+        liElem.appendChild(labelElem);
+
+        keys.forEach(k => {
+          const keyElem = document.createElement('div');
+          const keyTextNode = document.createTextNode(k);
+          keyElem.classList.add('key');
+          keyElem.appendChild(keyTextNode);
+
+          liElem.appendChild(keyElem);
+        });
+
+        return liElem;
+      });
+
+      shortcutNodes.forEach(node => {
+        document.getElementById('list').append(node);
+      });
+
+      const remote = require('electron').remote;
+      const BrowserWindow = remote.BrowserWindow;
+
+      document.onreadystatechange = () => {
+        if (document.readyState === 'complete') {
+          document.getElementById('close-btn').addEventListener('click', () => {
+            const window = BrowserWindow.getFocusedWindow();
+            window.hide();
+          });
+        }
+      };
+    </script>
+  </body>
+</html>