Experimental Share

margni · Sep 28, 2020 · ab793ad · ab793ad
1 parent 7f8d7d9
commit ab793ad
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 25 deletions.
diff --git a/NOTEPAD.md b/NOTEPAD.md
@@ -61,7 +61,7 @@ window.addEventListener('DOMContentLoaded', () => {
 });
 ```
 
-## Conditional CSS
+### Conditional CSS
 
 ```css
 @media all and (display-mode: standalone) {

diff --git a/TODO.md b/TODO.md
@@ -4,16 +4,21 @@
 
 ### Picked For Development Next
 
--   Install prompt
 -   Update prompt (and menu?)
 -   Global context / account menu.
     -   Link to source
     -   Link to margni
     -   Toggle dark mode
--   Folders
+    -   Toggle experimental features
+-   Folders/Tags
 
 ### New Functionality
 
+-   Add a router.
+    -   This could be useful for share target, app shortcuts, publicly shared notes, etc.
+-   Web Share https://web.dev/web-share/
+-   Web Share Target https://web.dev/web-share-target/
+-   App Shortcuts https://web.dev/app-shortcuts/
 -   Use history api or routing. Essentially just respond to the back button.
 -   Other login options?
 -   Catch and log firestore and auth errors.
@@ -36,20 +41,19 @@
 
 ### Enhanced UX
 
+-   Accessibility.
 -   Enhance keyboard navigation and add shortcuts.
 -   Drawer menu.
 -   Scroll shadows.
--   Service worker should produce dialogue when reload available.
+-   Service worker should produce notification when reload available.
 -   Delete confirmation dialogue.
 -   Long press on list.
 -   Offline Indicator.
--   Install prompt/enhanced process.
 -   Note colours/icons/etc.
 -   Passive notifications (e.g. when a new note is deleted).
 -   Multi-lingual (especially considering there is so little text to translate).
 -   Rich editor (to allow perhaps caret style markdown editing, clickable links, etc.)
 -   Ability to explicitly toggle dark mode. (Perhaps add an options menu first.)
--   Accessibility.
 
 ### Visual
 

diff --git a/assets/icons/share.svg b/assets/icons/share.svg
diff --git a/assets/selection.json b/assets/selection.json
@@ -13,19 +13,19 @@
                     { "fill": "rgb(17, 85, 204)" },
                     { "fill": "rgb(17, 85, 204)" }
                 ],
-                "grid": 0,
-                "tags": ["context-menu"],
                 "isMulticolor": false,
-                "isMulticolor2": false
+                "isMulticolor2": false,
+                "grid": 0,
+                "tags": ["context-menu"]
             },
             "attrs": [
                 { "fill": "rgb(17, 85, 204)" },
                 { "fill": "rgb(17, 85, 204)" },
                 { "fill": "rgb(17, 85, 204)" }
             ],
             "properties": {
-                "order": 22,
-                "id": 9,
+                "order": 23,
+                "id": 10,
                 "name": "context-menu",
                 "prevSize": 32,
                 "code": 8942
@@ -34,6 +34,36 @@
             "setId": 1,
             "iconIdx": 0
         },
+        {
+            "icon": {
+                "paths": [
+                    "M64 544c0-17.672-14.328-32-32-32s-32 14.328-32 32v384c0 53.020 42.98 96 96 96h832c53.020 0 96-42.98 96-96v-384c0-17.672-14.328-32-32-32s-32 14.328-32 32v384c0 17.674-14.328 32-32 32h-832c-17.672 0-32-14.328-32-32v-384z",
+                    "M489.374 9.372l-316.786 316.784c-12.496 12.496-12.498 32.758 0 45.254 12.496 12.496 32.758 12.496 45.254 0l262.158-262.156v626.746c0 17.672 14.328 32 32 32s32-14.328 32-32v-626.746l262.156 262.156c12.496 12.496 32.76 12.496 45.256 0 12.494-12.496 12.494-32.758 0-45.254l-316.786-316.784c-12.496-12.498-32.756-12.496-45.252 0z"
+                ],
+                "attrs": [
+                    { "fill": "rgb(17, 85, 204)" },
+                    { "fill": "rgb(17, 85, 204)" }
+                ],
+                "isMulticolor": false,
+                "isMulticolor2": false,
+                "grid": 0,
+                "tags": ["share"]
+            },
+            "attrs": [
+                { "fill": "rgb(17, 85, 204)" },
+                { "fill": "rgb(17, 85, 204)" }
+            ],
+            "properties": {
+                "order": 22,
+                "id": 9,
+                "name": "share",
+                "prevSize": 32,
+                "code": 128228
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 1
+        },
         {
             "icon": {
                 "paths": [
@@ -65,7 +95,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 1
+            "iconIdx": 2
         },
         {
             "icon": {
@@ -88,7 +118,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 2
+            "iconIdx": 3
         },
         {
             "icon": {
@@ -111,7 +141,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 3
+            "iconIdx": 4
         },
         {
             "icon": {
@@ -150,7 +180,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 4
+            "iconIdx": 5
         },
         {
             "icon": {
@@ -173,7 +203,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 5
+            "iconIdx": 6
         },
         {
             "icon": {
@@ -196,7 +226,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 6
+            "iconIdx": 7
         },
         {
             "icon": {
@@ -226,7 +256,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 7
+            "iconIdx": 8
         },
         {
             "icon": {
@@ -249,7 +279,7 @@
             },
             "setIdx": 0,
             "setId": 1,
-            "iconIdx": 8
+            "iconIdx": 9
         }
     ],
     "height": 1024,

diff --git a/src/component/Main.js b/src/component/Main.js
@@ -103,6 +103,18 @@ export const Main = ({
                                 onClick={() => onClose(selectedNote)}
                             />
                         </div>
+                        {navigator.share && (
+                            <IconButton
+                                name="share"
+                                onClick={() =>
+                                    navigator.share({
+                                        text: selectedNote.text,
+                                    })
+                                }
+                                position="right"
+                                secondary
+                            />
+                        )}
                         <IconButton
                             name="delete"
                             onClick={() => onDelete(selectedNote)}

diff --git a/src/context/InstallContext.js b/src/context/InstallContext.js
@@ -6,25 +6,28 @@ export const InstallProvider = ({ children }) => {
     const [deferredPrompt, setDeferredPrompt] = useState();
 
     useEffect(() => {
-        const onBeforeInstallPrompt = (e) => {
+        const handleBeforeInstallPrompt = (e) => {
             e.preventDefault();
 
             setDeferredPrompt(e);
         };
 
-        const onAppInstalled = () => {
+        const handleAppInstalled = () => {
             setDeferredPrompt();
         };
 
-        window.addEventListener('beforeinstallprompt', onBeforeInstallPrompt);
-        window.addEventListener('appinstalled', onAppInstalled);
+        window.addEventListener(
+            'beforeinstallprompt',
+            handleBeforeInstallPrompt
+        );
+        window.addEventListener('appinstalled', handleAppInstalled);
 
         return () => {
             window.removeEventListener(
                 'beforeinstallprompt',
-                onBeforeInstallPrompt
+                handleBeforeInstallPrompt
             );
-            window.removeEventListener('appinstalled', onAppInstalled);
+            window.removeEventListener('appinstalled', handleAppInstalled);
         };
     }, []);
 

diff --git a/src/font/icomoon.eot b/src/font/icomoon.eot
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,7 +61,7 @@ window.addEventListener('DOMContentLoaded', () => { @@
     });
     ```
-    ## Conditional CSS
+    ### Conditional CSS
     ```css
     @media all and (display-mode: standalone) {
@@ Expand Down @@