Merge pull request #102 from penge/custom-theme

Custom theme, Image by URL, Modals
penge · Jun 11, 2020 · a4a1d9d · a4a1d9d
2 parents dec1be0 + 931e3fa
commit a4a1d9d
Show file tree

Hide file tree

Showing 25 changed files with 478 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
 
 <br>
 
-**My Notes** — Chrome extension for simple note taking.
-Available on [_Web Store_](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
+**My Notes** — The best way to take notes in a new tab.
+Available on [**Web Store**](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
 
 <br>
 
@@ -31,7 +31,7 @@ Available on [_Web Store_](https://chrome.google.com/webstore/detail/my-notes/lk
 
 ## Installation
 
-Available on [_Web Store_](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
+Available on [**Web Store**](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
 
 <br>
 
@@ -59,23 +59,23 @@ There are 3 ways to open **Options:**
 2. Click on Options link in the main page
 3. Keyboard shortcut (see [_Options_](#options))
 
-**Options on Appearance:**
+**Appearance:**
 
 - Font type (Serif, Sans Serif, Monospace, Google Fonts)
 - Font size
-- Theme (Light, or Dark)
+- Theme (Light, Dark, Custom)
 - Enable Focus mode
 
-**Options on Convenience:**
+**Convenience:**
 
 - Hotkeys
 
-**Options on Behavior:**
+**Behavior:**
 
 - Open My Notes in every New Tab (see [_Permissions_](PERMISSIONS.md))
-- Indent text on Tab
+- Indent text on Tab (by default focuses the address bar)
 
-**Options on Additional functionality:**
+**Additional functionality:**
 
 - Enable Google Drive Sync (see [_Permissions_](PERMISSIONS.md))
 
@@ -142,7 +142,7 @@ The files you see here, are the same files you get in the extension.
 
 - ECMAScript `Proxy` (UI updates)
 
-- Event Driven Background Script (run in background, unloaded when not used)
+- Event Driven Background Script (run in background)
 
 - `await` / `async`
 
@@ -177,6 +177,8 @@ background/
 
 images/           # Images and icons used in My Notes or README
 
+themes/           # Initialization of the custom theme for Notes and Options
+
 notes/            # Everything related to Notes
                     # - Create/Rename/Delete notes; Note editing, Note saving
                     # - Toolbar

diff --git a/background/init/migrations/__tests__/core.test.js b/background/init/migrations/__tests__/core.test.js
@@ -4,8 +4,18 @@ import migrate from "../core.js";
 import runTests from "../../../../tests/run-tests.js";
 
 const assertItems = (items) => {
-  console.assert(Object.keys(items).length === 8);
-  console.assert(["font", "size", "theme", "notes", "active", "focus", "newtab", "tab"].every(key => key in items));
+  console.assert(Object.keys(items).length === 9);
+  console.assert([
+    "font",
+    "size",
+    "theme",
+    "customTheme",
+    "notes",
+    "active",
+    "focus",
+    "newtab",
+    "tab",
+  ].every(key => key in items));
 };
 
 const testDefaultValues = (myItems) => {
@@ -25,6 +35,11 @@ const testDefaultValues = (myItems) => {
   // theme
   console.assert(items.theme === "light");
 
+  // custom theme
+  console.assert(Object.keys(items.customTheme).length === 2);
+  console.assert(items.customTheme.background === "#35363a");
+  console.assert(items.customTheme.text === "#ffffff");
+
   // notes
   console.assert(Object.keys(items.notes).length === 4);
   ["One", "Two", "Three", "Clipboard"].every(noteName => {
@@ -61,6 +76,10 @@ const testCustomValues = () => {
     },
     size: 340,
     theme: "dark",
+    customTheme: {
+      background: "#545454",
+      text: "#ffffff",
+    },
     notes: {
       Todo: {
         content: "buy milk",
@@ -115,6 +134,11 @@ const testCustomValues = () => {
   // theme
   console.assert(items.theme === "dark");
 
+  // customTheme
+  console.assert(Object.keys(items.customTheme).length === 2);
+  console.assert(items.customTheme.background === "#545454");
+  console.assert(items.customTheme.text === "#ffffff");
+
   // notes
   console.assert(Object.keys(items.notes).length === 3);
 
@@ -162,6 +186,7 @@ const testValidValues = () => { // any invalid value should fallback to a defaul
     },
     size: "large",  // must be number
     theme: "green", // must be "light" or "dark"
+    customTheme: { background: "#ffffff" }, // must be valid object
     notes: null,    // must be object
     active: "Todo", // must be in "notes"
     focus: 1,       // must be boolean

diff --git a/background/init/migrations/core.js b/background/init/migrations/core.js
@@ -3,6 +3,7 @@ import defaultValues, {
   validFont,
   validSize,
   validTheme,
+  validCustomTheme,
 
   // Options
   validFocus,
@@ -46,6 +47,7 @@ export default (sync, local) => {
     font: validFont(local.font) ? local.font : defaultValues.font,
     size: validSize(local.size) ? local.size : defaultValues.size,
     theme: validTheme(local.theme) ? local.theme : defaultValues.theme,
+    customTheme: validCustomTheme(local.customTheme) ? local.customTheme : defaultValues.customTheme,
 
     // Notes
     notes: notes, // already migrated to [3.x]

diff --git a/background/init/migrations/index.js b/background/init/migrations/index.js
@@ -4,7 +4,7 @@ import migrate from "./core.js";
 
 const run = () => {
   chrome.storage.sync.get(["newtab", "value", "notes"], sync => {
-    chrome.storage.local.get(["font", "size", "theme", "notes", "active", "focus", "newtab", "tab"], local => {
+    chrome.storage.local.get(["font", "size", "theme", "customTheme", "notes", "active", "focus", "newtab", "tab"], local => {
       const items = migrate(sync, local); // migrate notes and options
       chrome.storage.local.set(items); // store the migrated data
 

diff --git a/images/my-notes.png b/images/my-notes.png
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "My Notes",
   "description": "Simple note taking.",
-  "version": "3.0.5",
+  "version": "3.1",
   "homepage_url": "https://github.com/penge/my-notes",
   "icons": { "128": "images/icon128.png" },
   "options_page": "options.html",

diff --git a/notes.css b/notes.css
@@ -13,7 +13,7 @@ body {
 
 /* Themes */
 
-#light, #dark {
+#light, #dark, #custom {
   opacity: 1;
 }
 
@@ -49,6 +49,10 @@ hr {
   font-weight: bold;
 }
 
+#notification a:hover {
+  text-decoration: underline;
+}
+
 /* Main page */
 
 #notes {
@@ -62,7 +66,7 @@ hr {
   display: inline-block;
   box-sizing: border-box;
   width: 48%;
-  border: 1px solid #dfe1e5;
+  border: 1px solid transparent;
   border-radius: 3px;
   cursor: pointer;
   margin: 0 2% 2% 0;
@@ -202,12 +206,6 @@ hr {
 #toolbar .control .two { font-size: .9em; font-weight: bold; }
 #toolbar .control .three { font-size: .7em; font-weight: bold; }
 
-#toolbar .control { color: #222; }
-#toolbar .control > svg { fill: #222; }
-
-#toolbar .control:hover { background: #222; color: white; }
-#toolbar .control:hover > svg { fill: white; }
-
 #toolbar #S { margin-right: 2.5em; }
 
 /* Overlay */
@@ -226,6 +224,59 @@ hr {
 .to-delete { background: rgba(255,0,0,.6); }
 .to-delete.note-tile { border-color: transparent !important; }
 
+/* Modal */
+
+#modal {
+  position: fixed;
+  padding: .5em;
+  border-radius: 5px;
+}
+
+#modal input {
+  max-width: 500px;
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  border-radius: 3px;
+  padding: 12px;
+}
+
+#modal #input {
+  width: 100%;
+  background: white;
+}
+
+#modal #buttons {
+  text-align: right;
+}
+
+#modal #buttons input {
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+body.with-overlay #modal {
+  border: none !important;
+}
+
+/* Modal position */
+
+#modal.center {
+  top: 50%;
+  left: 50%;
+  transform: translate(calc(-50% - .5em), calc(-50% - .5em));
+}
+
+#modal.top {
+  top: 0;
+  left: 50%;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top-style: none !important;
+  min-width: 30%;
+  transform: translate(calc(-50% - .5em), 0);
+}
+
 /* Focus */
 
 body.focus #panel,
@@ -258,6 +309,19 @@ body.focus #toolbar {
   border: 1px solid #1a73e8;
 }
 
+#light #toolbar .control { color: #222; }
+#light #toolbar .control > svg { fill: #222; }
+
+#light #toolbar .control:hover { color: white; background: #222; }
+#light #toolbar .control:hover > svg { fill: white; }
+
+#light #modal { background: white; border: 1px solid #dfe1e5; }
+#light #modal #input { border: 1px solid #dfe1e5; }
+#light #modal #buttons input {
+  background: #222;
+  color: white;
+}
+
 /* Dark theme */
 
 #dark, #dark #content {
@@ -269,12 +333,6 @@ body.focus #toolbar {
   color: white;
 }
 
-#dark #toolbar .control { color: #626262; }
-#dark #toolbar .control > svg { fill: #626262; }
-
-#dark #toolbar .control:hover { color: white; }
-#dark #toolbar .control:hover > svg { fill: white; }
-
 #dark .note-tile { border-color: #3c3c3c; }
 #dark .note-tile:hover { border-color: #8e8e8e; }
 
@@ -285,6 +343,49 @@ body.focus #toolbar {
   border: 1px solid #dfe1e5;
 }
 
+#dark #toolbar .control { color: #626262; }
+#dark #toolbar .control > svg { fill: #626262; }
+
+#dark #toolbar .control:hover { color: white; background: #222; }
+#dark #toolbar .control:hover > svg { fill: white; }
+
+#dark #modal { background: #222; border: 1px solid #3c3c3c; }
+#dark #modal #buttons input {
+  background: white;
+  color: #121212;
+}
+
+/* Custom theme */
+
+#custom {
+  background: var(--background);
+  color: var(--text);
+}
+
+#custom a { color: var(--text); }
+
+#custom .note-tile { border-color: var(--text); }
+
+#custom .note-options .dropdown-toggle { fill: var(--text); opacity: .6; }
+#custom .note-options .dropdown {
+  background: var(--background);
+  color: var(--text);
+  border: 1px solid var(--text);
+}
+
+#custom #toolbar .control { color: var(--text); }
+#custom #toolbar .control > svg { fill: var(--text); }
+
+#custom #toolbar .control:hover { color: var(--background); background: var(--text); }
+#custom #toolbar .control:hover > svg { fill: var(--background); }
+
+#custom #modal { background: var(--background); border: 1px solid var(--text); }
+#custom #modal #input { border: 1px solid var(--text); }
+#custom #modal #buttons input {
+  background: var(--text);
+  color: var(--background);
+}
+
 /* Media Queries */
 
 @media (max-width: 800px) {

diff --git a/notes.html b/notes.html
@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Notes</title>
+  <style id="theme-variables"></style>
   <link rel="stylesheet" href="" id="google-fonts">
   <link rel="stylesheet" href="notes.css">
 </head>
@@ -42,7 +43,7 @@
     </div>
   </div>
 
-  <div contenteditable="true" id="content"><!-- Content of the active note --></div>
+  <div contenteditable="true" spellcheck="true" id="content"><!-- Content of the active note --></div>
   <div id="toolbar">
     <div id="B" class="bold control" title="Bold">
       <svg viewBox="0 0 298.667 298.667" style="enable-background:new 0 0 298.667 298.667;">
@@ -149,6 +150,13 @@
           V10.449C350.041,4.678,345.363,0,339.592,0z"/>
       </svg>
     </div>
+    <div id="IMG" class="control" title="Insert Image">
+      <svg viewBox="0 -47 425.968 425">
+        <path d="m166.960938 56.484375c-26.34375 0-47.699219 21.355469-47.699219 47.699219s21.355469 47.699218 47.699219 47.699218 47.699218-21.355468 47.699218-47.699218c-.027344-26.332032-21.367187-47.667969-47.699218-47.699219zm0 0"/>
+        <path d="m395.96875.484375h-365.96875c-16.5625.019531-29.9804688 13.4375-30 30v224.019531l69.699219-46.417968c16.796875-11.109376 38.621093-11.039063 55.347656.179687l50.910156 34.070313c13.351563 8.980468 31.40625 5.796874 40.886719-7.199219l68.101562-92.980469c9.507813-12.980469 24.683594-20.59375 40.777344-20.453125 16.089844.140625 31.132813 8.019531 40.410156 21.167969l59.832032 84.773437v-197.160156c-.019532-16.558594-13.4375-29.980469-29.996094-30zm-229.007812 171.40625c-37.386719 0-67.699219-30.308594-67.699219-67.699219s30.3125-67.699218 67.699219-67.699218c37.390624 0 67.699218 30.308593 67.699218 67.699218-.042968 37.371094-30.328125 67.65625-67.699218 67.699219zm0 0"/>
+        <path d="m325.550781 141.699219c-9.671875-.148438-18.804687 4.429687-24.464843 12.269531l-68.101563 92.980469c-15.796875 21.664062-45.894531 26.96875-68.144531 12.007812l-50.917969-34.074219c-10.023437-6.726562-23.105469-6.777343-33.179687-.125l-80.742188 53.773438v21.953125c.0195312 16.558594 13.4375 29.980469 30 30h365.96875c16.558594-.019531 29.980469-13.441406 30-30v-38.160156l-76.171875-107.925781c-5.53125-7.929688-14.578125-12.667969-24.246094-12.699219zm0 0"/>
+      </svg>
+    </div>
   </div>
 
   <template id="note-tile-template">
@@ -177,6 +185,17 @@
     </div>
   </template>
 
+  <template id="modal-template">
+    <div id="modal">
+      <div class="bold" id="caption">Caption</div>
+      <input type="text" id="input" />
+      <div id="buttons">
+        <input type="button" value="Cancel" id="cancel" />
+        <input type="submit" value="Confirm" id="confirm" class="bold" />
+      </div>
+    </div>
+  </template>
+
   <script type="module" src="notes.js"></script>
 </body>