Merge pull request #147 from penge/next

Improve hotkeys

README.md

@@ -222,6 +222,72 @@ To read more about the warnings, see the [offical documentation](https://develop
 
 <br><br>
 
+## QA
+
+**1. Where is My Notes published? What is the process behind publishing My Notes?**
+
+My Notes is published to [Web Store](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop), a store for Google Chrome extensions.
+When publishing a new version, I first make a [new release](https://github.com/penge/my-notes/releases) here on GitHub.
+Then, I download the zip file of the new release and send it to Web Store for a review.
+The review usually takes between 24 hours and a few days.
+After a successful review, the new version is available on Web Store.
+
+<br>
+
+**2. Can I install My Notes manually by downloading it from GitHub?**
+
+Yes, My Notes can be installed manually by downloading it from GitHub, but keep in mind, that Google Drive Sync works only if My Notes is installed from [Web Store]((https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop)).
+To install My Notes manually, download the zip file of the latest version which you can find at https://github.com/penge/my-notes/releases, then, unpack the downloaded file.
+Finally, open `chrome://extensions` address in Google Chrome and click the **"Load unpacked"** button to load the unpacked extension from your drive.
+
+<br>
+
+**3. Google Drive Sync isn't working. What's the cause?**
+
+Google Drive Sync works only if My Notes is installed from Web Store and in Google Chrome.
+The reasons for this are two.
+First, Google Chrome provides an "identity" API that My Notes relies on.
+Second, for security reasons, Google Drive Sync works only if My Notes has an ID equal to **"lkeeogfaiembcblonahillacpaabmiop"**, which is the ID it has on Web Store (also in the URL).
+When My Notes is installed manually, it gets an ID that is different to the one on Web Store.
+
+<br>
+
+**4. What browsers and operating systems are supported?**
+
+Currently, only Google Chrome is supported.
+Other Chromium-based browsers are next to come, if possible.
+Any common OS (Windows, Linux, OSX) is supported.
+Chromebooks are supported as well.
+
+<br>
+
+**5. How can I open or edit notes from my phone?**
+
+If Google Drive Sync is enabled, My Notes will sync your notes to/from your personal Google Drive into a folder **"My Notes"**.
+
+To get access to your Google Drive from a phone, install Google Drive application.
+To open the note, click on in from the list.
+To edit the note, click on the three-circles icon next to the note, and select "Open with" from the context menu.
+You can then chose a preferred editor from the list.
+
+<br>
+
+**6. What is the size limit for my notes?**
+
+Notes are limited to 5MB in total.
+
+This limit comes with the default setting of the browser.
+In case of interest, future versions of My Notes could be having a new optional **"unlimitedStorage"** permission, which if enabled, would increase the storage infinitely (as your hard drive allows).
+
+<br>
+
+**7. Is My Notes for free?**
+
+My Notes is available as open-source, free to download, install, and use.
+Preferred way to install My Notes is from [Web Store](https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop).
+
+<br><br>
+
 ---
 
 <p align="center"><code>Created with ❤ in 2019.</code></p>

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "My Notes",
   "description": "Simple and fast note-taking.",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "homepage_url": "https://github.com/penge/my-notes",
   "icons": { "128": "images/icon128.png" },
   "options_page": "options.html",

notes.css

@@ -1,3 +1,11 @@
+:root {
+  --default-sidebar-width: 25%;
+}
+
+html {
+  font-size: 12px;
+}
+
 body, #sidebar {
   display: flex;
   flex-direction: column;
@@ -105,15 +113,15 @@ svg {
 
 #sidebar {
   max-width: 50% !important;
-  width: 25%;
+  width: var(--default-sidebar-width);
   box-sizing: border-box;
   user-select: none;
   overflow: hidden;
   transform: translateX(-100%);
 }
 
 body.with-sidebar #sidebar { transform: translateX(0); }
-body.with-sidebar { left: 25%; }
+body.with-sidebar { left: var(--default-sidebar-width); }
 body:not(.with-sidebar) { left: 0 !important; }
 
 #sidebar-notes {

notes.html

@@ -16,8 +16,8 @@
     <div id="sidebar-buttons" class="bar">
       <div id="new-note" class="button" title="New note">
         <svg viewBox="0 0 426.667 426.667">
-            <path d="M256,0H85.333C61.76,0,42.88,19.093,42.88,42.667L42.667,384c0,23.573,18.88,42.667,42.453,42.667h256.213
-              C364.907,426.667,384,407.573,384,384V128L256,0z M234.667,149.333V32L352,149.333H234.667z"/>
+          <path d="M256,0H85.333C61.76,0,42.88,19.093,42.88,42.667L42.667,384c0,23.573,18.88,42.667,42.453,42.667h256.213
+            C364.907,426.667,384,407.573,384,384V128L256,0z M234.667,149.333V32L352,149.333H234.667z"/>
         </svg>
       </div>
       <div id="open-options" class="button" title="Options">
@@ -36,9 +36,9 @@
       </div>
       <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
-              c-70.72,0-128-57.28-128-128s57.28-128,128-128c35.307,0,66.987,14.72,90.133,37.867l-68.8,68.8H341.227z"/>
+          <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
+            c-70.72,0-128-57.28-128-128s57.28-128,128-128c35.307,0,66.987,14.72,90.133,37.867l-68.8,68.8H341.227z"/>
         </svg>
       </div>
     </div>
@@ -80,7 +80,7 @@
         <div id="H3" class="button" title="Heading 3">H<span>3</span></div>
       </div>
     </div>
-    <div id="UL" class="button" title="Unordered List">
+    <div id="UL" class="button" title="Bulleted List">
       <svg viewBox="0 0 394.971 394.971">
         <circle cx="56.424" cy="197.486" r="51.2"/>
         <path d="M379.298,187.037H143.151c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449h236.147
@@ -93,7 +93,7 @@
           c5.771,0,10.449-4.678,10.449-10.449S385.069,333.322,379.298,333.322z"/>
       </svg>
     </div>
-    <div id="OL" class="button" title="Ordered List">
+    <div id="OL" class="button" title="Numbered List">
       <svg viewBox="0 0 512.003 512.003">
         <path d="M155.003 90.001h342c8.284 0 15-6.716 15-15s-6.716-15-15-15h-342c-8.284 0-15 6.716-15 15s6.716 15 15 15z"/>
         <path d="M497.003 241.001h-342c-8.284 0-15 6.716-15 15s6.716 15 15 15h342c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/>
@@ -281,8 +281,9 @@
     </div>
 
     <div class="modal-description" id="insert-link-modal-description">
-      To open the inserted link, hold down the <span class="hotkey">Ctrl</span> key.<br><br>
       Link can start with <span class="hotlink">http</span>, <span class="hotlink">https</span>, or <span class="hotlink">chrome-extension</span> if referencing other note.
+      <br><br>
+      See <strong>Hotkeys</strong> for how to open the inserted link.
     </div>
   </template>