Merge pull request #123 from penge/next

Save note on Spellcheck fix, update design and sync

README.md

@@ -1,98 +1,107 @@
-![My Notes](images/my-notes.png)
-
-**My Notes** is a note-taking app directly in Chrome.
-Available on [Web Store](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
+<p align="center"></p>
+<h1 align="center">My Notes — <a href="https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop">Web Store</a></h1>
+<p align="center">
+  <img src="https://badgen.net/github/release/penge/my-notes" />
+  <img src="https://badgen.net/github/license/penge/my-notes" />
+  <img src="https://badgen.net/chrome-web-store/users/lkeeogfaiembcblonahillacpaabmiop" />
+  <br><br>
+  <img src="images/my-notes.png" width="800" /><br>
+  My Notes is a Chrome extension for simple and fast note-taking.<br><br>
+  Write down your ideas, notes, todos, clipboard, articles, and other, all effortlessly in a Chrome's New Tab.
+</p>
+
+<br><br>
 
 ## Features
 
-- Quickly accessible (see [How to open](#how-to-open))
+→ &nbsp; All notes available inside your Chrome ([_How to open_](#how-to-open))
+
+→ &nbsp; All notes saved automatically
 
-- Saved automatically
+→ &nbsp; All notes synchronized in every open window as you edit them
 
-- Updated in every open window
+→ &nbsp; Can use HTML
 
-- HTML (bold, italic, underline, etc.)
+→ &nbsp; Great as a Clipboard
 
-- Transfer text to another computer (see [Context menu](#context-menu))
+→ &nbsp; Can send text between computers ([_Context menu_](#context-menu))
 
-- Google Drive Sync, to backup, share, and sync the notes between computers (see [Google Drive Sync](#google-drive-sync))
+→ &nbsp; Can store notes to Google Drive and edit them from other devices ([_Google Drive Sync_](#google-drive-sync))
 
-- Themes (Light, Dark, Custom)
+→ &nbsp; Themes (Light, Dark, Custom)
 
-- Hotkeys
+→ &nbsp; Hotkeys
 
-- Works offline
+→ &nbsp; Works offline
 
 <br>
 
 ## How to open
 
 **My Notes:**
 
-- Click on My Notes icon in Chrome toolbar
-- In every new tab (see Options)
-- Hotkey (see Options)
+<ol type="A">
+  <li>Click on My Notes icon in Chrome toolbar</li>
+  <li>In every new tab (see Options)</li>
+  <li>Use Hotkey (see Options)</li>
+</ol>
 
 **Options:**
 
-- Click on the gear icon
-- Right-click on My Notes icon in Chrome toolbar and select Options
-- Hotkey (see Options)
-
-<br>
+<ol type="A">
+  <li>Click on the gear icon in the bottom left corner</li>
+  <li>Right-click on My Notes icon in the Chrome toolbar and select Options</li>
+  <li>Use Hotkey (see Options)</li>
+</ol>
 
-## Options
+<br><br>
 
-- Font type (Serif, Sans Serif, Monospace, Google Fonts)
-- Font size
-- Theme (Light, Dark, Custom)
-- Hotkeys
-- Open My Notes in every New Tab
-- Enable Google Drive Sync
-- Indent text on Tab
+## Context menu
 
-<br>
+Context menu allows you to quickly save the selected text to My Notes Clipboard (a special note in My Notes).
 
-## Context menu
+<img src="images/context-menu.png" width="800" />
 
-Allows you to quickly save the selected text to My Notes Clipboard (a special note in My Notes).
+### Save selection
 
-![Context menu](images/context-menu.png)
+Saves the selected text to My Notes Clipboard in your current computer.
+My Notes doesn't have to be open.
 
-**Save selection** — Saves the selected text to My Notes Clipboard in your current computer.
+### Save selection to other devices
 
-**Save selection to other devices** — Saves the selected text to My Notes Clipboard in your other computer(s).
-**Condition:** My Notes needs to be open, same Google Account needs to be used.
+Saves the selected text to My Notes Clipboard in your other computer(s).
+My Notes needs to be open in the second computer and same Google Account needs to be used.
 
-<br>
+<br><br>
 
 ## Google Drive Sync
 
-**Google Drive Sync** automatically syncs your notes between My Notes and your Google Drive, in both directions (from Google Drive, to Google Drive).
+Google Drive Sync (see Options) saves your notes to Google Drive and synchronizes the changes between your local My Notes and your Google Drive
+every time you hit the Sync button (bottom left corner).
 
-This gives you:
+Benefits:
 
-- a backup (notes can be restored in the future)
-- can modify the notes in Google Drive, My Notes, and vice versa
-- can modify the notes from other computers (by installing My Notes and using the same Google Account)
+- backup of notes in your Google Drive
+- notes can be restored in the future if My Notes is re-installed, by re-enabling Google Drive Sync
+- notes can be edited from Google Drive if needed (or from other devices that have access to Google Drive)
+- notes can be edited from other computers where My Notes is installed and Google Drive Sync is enabled (using same Google Account is needed)
 
 ### Location
 
 Notes are uploaded to your Google Drive to the folder **My Notes**. This folder is created automatically.
-If the folder exists from a previous installation, it is restored, notes are downloaded and uploaded, and the synchronization continues.
+If the folder exists from a previous installation, notes are downloaded and uploaded.
 
 ### Synchronization
 
-Notes are synchronized immediately after you enable **Google Drive Sync**.
-Then on every My Notes **Open/Close/Refresh**, or with the **"Sync Now"** button.
+Notes are synchronized every time you hit the Sync button (bottom left corner).
 Synchronization works in both ways — to Google Drive, from Google Drive.
 
 ### Access
 
-My Notes can only access the files it created.
-It cannot see the other files in your Google Drive.
+My Notes has only access to the folder **My Notes**.
+It cannot see any other files in your Google Drive.
 
-<br>
+<br><br>
 
 ## Folder structure
 
@@ -146,7 +155,7 @@ LICENSE           # MIT
 manifest.json     # Main extension file
 
 
-background.html   # Entrypoint for background script
+background.html   # Entrypoint for background page
 background.js
 
 notes.html        # Entrypoint for notes
@@ -161,10 +170,12 @@ options.js
 README.md
 ```
 
-<br>
+<br><br>
 
 ## Permissions
 
+My Notes has the permissions listed in `manifest.json`.
+
 **Required:**
 
 - `"storage"` — used to save the notes and options to Chrome Storage
@@ -176,3 +187,9 @@ README.md
 - `"identity"` — used by **Enable Google Drive Sync** (see **Options**)
 
 `"tabs"` is a more powerful permission — the displayed warning may contain an unrelated message — `It can: Read your Browsing history`.
+
+<br><br>
+
+---
+
+<p align="center"><code>Created with ❤ in 2019.</code></p>

background/google-drive/sync/sync.js

@@ -1,4 +1,4 @@
-/* global navigator, console */
+/* global chrome, navigator, console */
 
 import { havingPermission } from "../../../shared/permissions/index.js";
 import { getItem, setItem } from "../../../shared/storage/index.js";
@@ -69,18 +69,23 @@ const runPreconditions = async (PREFIX) => {
 const sync = async () => {
   const fulfilled = await runPreconditions("SYNC");
   if (!fulfilled) {
+    chrome.runtime.sendMessage({ type: "SYNC_FAIL" });
     return;
   }
 
   const { folderId, folderLocation, files } = fulfilled;
   const notes = await getItem("notes");
 
   console.log("SYNC - START");
+  chrome.runtime.sendMessage({ type: "SYNC_START" });
+
   const notesAfterPull = await pull(notes, files, { getFile });
   const notesAfterPush = await push(folderId, notesAfterPull, files, { createFile, updateFile });
   await setItem("notes", notesAfterPush);
   await setItem("sync", { folderId, folderLocation, files, lastSync: new Date().toISOString() });
+
   console.log("SYNC - DONE");
+  chrome.runtime.sendMessage({ type: "SYNC_STOP" });
 
   return true;
 };

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
   "name": "My Notes",
-  "description": "Simple Note-taking app. Auto-saved. Auto-synced.",
-  "version": "3.4",
+  "description": "Simple and fast note-taking.",
+  "version": "3.4.1",
   "homepage_url": "https://github.com/penge/my-notes",
   "icons": { "128": "images/icon128.png" },
   "options_page": "options.html",

notes.css

@@ -86,12 +86,18 @@ svg {
 
 .bar > .button {
   font-weight: bold;
-  padding: .2em;
-  margin: .2em;
+  padding: .5em;
+  margin: .5em;
+  margin-right: 0;
+  border-radius: 3px;
+}
+
+.bar > .button.disabled {
+  opacity: .4;
 }
 
 .bar > .button > svg {
-  height: .7em;
+  height: .8em;
   pointer-events: none;
 }
 
@@ -111,19 +117,23 @@ body.with-sidebar { left: 25%; }
 body:not(.with-sidebar) { left: 0 !important; }
 
 #sidebar-notes {
-  margin-right: 1px;
+  margin-right: 1px; /* Drag */
+  padding: .5em;
   overflow-y: auto;
   flex-grow: 1;
   background: var(--sidebar-notes-background-color);
 }
 
-#sidebar .note {
+#sidebar-notes .note {
   cursor: pointer;
   font-weight: bold;
-  padding: .3em .5em;
+  padding: .5em 1em;
+  margin-top: 3px;
   color: var(--sidebar-notes-text-color);
+  border-radius: 3px;
 }
 
+#sidebar-notes .note:hover,
 #sidebar-notes .note.active {
   background: var(--sidebar-active-note-background-color);
   color: var(--sidebar-active-note-text-color);
@@ -335,7 +345,7 @@ body.with-modal #toolbar {
   outline: none;
   border: none;
   border-radius: 3px;
-  padding: .4em;
+  padding: .5em;
   font-family: inherit;
   font-size: .8em;
 }

notes.html

@@ -34,7 +34,7 @@
             s74.667,33.387,74.667,74.667S254.56,288,213.28,288z"/>
         </svg>
       </div>
-      <div id="sync-now" class="button" title="Click to sync to/from Google Drive now. Sync also happens automatically when My Notes is open or closed.">
+      <div id="sync-now" class="button disabled" title="Click to sync the notes to and from Google Drive now.">
         <svg viewBox="0 0 341.333 341.333">
             <path d="M341.227,149.333V0l-50.133,50.133C260.267,19.2,217.707,0,170.56,0C76.267,0,0.107,76.373,0.107,170.667
               s76.16,170.667,170.453,170.667c79.467,0,146.027-54.4,164.907-128h-44.373c-17.6,49.707-64.747,85.333-120.533,85.333

notes.js

@@ -1,4 +1,4 @@
-/* global chrome, window, document, Set, localStorage */
+/* global chrome, window, document, Set, localStorage, setTimeout */
 
 // Setting application state and view updates are done via a Proxy
 import state from "./notes/state/index.js";
@@ -37,11 +37,12 @@ openOptions.addEventListener("click", () => {
 });
 
 // Sync Now
-syncNow.addEventListener("click", () => {
-  if (document.body.classList.contains("syncing")) {
-    return;
+syncNow.addEventListener("click", () => syncNotes(state));
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.type === "SYNC_STOP" || message.type === "SYNC_FAIL") {
+    document.body.classList.remove("syncing");
   }
-  syncNotes(true);
 });
 
 // Hide context menu on click outside
@@ -99,8 +100,7 @@ chrome.storage.local.get([
   state.tab = tab;
 
   // Sync
-  state.sync = sync; // shows "Sync Now" button and "Last sync" timestamp, if "Google Drive Sync" is enabled
-  syncNotes(true); // downloads New and Edited notes from Google Drive
+  state.sync = sync;
 });
 
 chrome.storage.onChanged.addListener((changes, areaName) => {
@@ -232,6 +232,6 @@ window.addEventListener("blur", () => {
 // Notes are saved every 1 second by "saveNotesDebounce()"
 // When the window is closed sooner, save the notes immediately, if changed
 window.addEventListener("beforeunload", () => {
-  // Save the most recent version of notes (notes are synchronized across Tabs)
-  saveNotes(state.notes, syncNotes); // syncNotes without "force" => syncs notes only if changed
+  // Save the most recent version of notes (changes are gathered across Tabs)
+  saveNotes(state.notes);
 });

notes/hotkeys.js

@@ -29,9 +29,14 @@ const keydown = (state) => document.addEventListener("keydown", (event) => {
   }
 
   if (event.key === "Enter" || event.keyCode === 13) {
-    // Confirm #modal
+    // Look for #confirm in #modal
     const confirm = document.getElementById("confirm");
-    confirm && confirm.click();
+    if (confirm) {
+      // if modal is open and thefore can be confirmed and closed with Enter,
+      // prevent default behaviour of Enter
+      event.preventDefault();
+      confirm.click();
+    }
   }
 
   if ((event.metaKey || event.ctrlKey) && (event.key === "S" || event.key === "s")) {
@@ -59,21 +64,25 @@ const keydown = (state) => document.addEventListener("keydown", (event) => {
   }
 
   if ((event.metaKey || event.ctrlKey) && event.key === "[") {
+    event.preventDefault();
     state.previousNote();
     return;
   }
 
   if ((event.metaKey || event.ctrlKey) && event.key === "]") {
+    event.preventDefault();
     state.nextNote();
     return;
   }
 
   if ((event.metaKey || event.ctrlKey) && event.shiftKey && (event.key === "F" || event.key === "f")) {
+    event.preventDefault();
     state.active && toggleFocus(); // toggle focus only when a note is open
     return;
   }
 
   if ((event.metaKey || event.ctrlKey) && event.shiftKey && (event.key === "O" || event.key === "o")) {
+    event.preventDefault();
     chrome.tabs.create({ url: "/options.html" });
     return;
   }