From 3494fc73296f1bbf24c936320542b43600dd64cd Mon Sep 17 00:00:00 2001 From: Simon Huang Date: Thu, 10 Sep 2020 10:50:38 -0400 Subject: [PATCH] added invite clipboard, fixed caching issue --- firebase.json | 2 +- package-lock.json | 13 +++++++++ package.json | 1 + public/assets/icon/apple-icon.png | Bin 0 -> 22632 bytes public/index.html | 2 +- src/components/OnlineList.css | 31 ++++++++++++++++---- src/components/OnlineList.tsx | 45 ++++++++++++++++++++++++++++-- 7 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 public/assets/icon/apple-icon.png diff --git a/firebase.json b/firebase.json index a212bcd..0a31194 100644 --- a/firebase.json +++ b/firebase.json @@ -14,7 +14,7 @@ "headers": [ { "key": "Cache-Control", - "value": "public, max-age=31536000" + "value": "no-cache, no-store, must-revalidate" } ] } diff --git a/package-lock.json b/package-lock.json index 5460b6d..a29d966 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4381,6 +4381,14 @@ "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=" }, + "copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "requires": { + "toggle-selection": "^1.0.6" + } + }, "core-js": { "version": "3.6.5", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz", @@ -14032,6 +14040,11 @@ "repeat-string": "^1.6.1" } }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", diff --git a/package.json b/package.json index ce6574d..d5f4d1e 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react-dom": "^16.9.4", "@types/react-router": "^5.1.4", "@types/react-router-dom": "^5.1.3", + "copy-to-clipboard": "^3.3.1", "firebase": "^7.17.1", "firebase-functions": "^3.11.0", "ionicons": "^5.0.0", diff --git a/public/assets/icon/apple-icon.png b/public/assets/icon/apple-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..76cbd403b2979b8d8d165cc1798c942adde0835d GIT binary patch literal 22632 zcmV*cKvTboP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 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 bF*YqQG&(RaW#cVh00000NkvXXu0mjfn?G*u literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index 9ecf673..f5afa98 100644 --- a/public/index.html +++ b/public/index.html @@ -22,7 +22,7 @@ - + diff --git a/src/components/OnlineList.css b/src/components/OnlineList.css index 16a514d..75f3531 100644 --- a/src/components/OnlineList.css +++ b/src/components/OnlineList.css @@ -3,26 +3,47 @@ } .online-header { + border-bottom: 1px solid var(--ion-color-primary); color: var(--ion-color-primary); font-size: 20px; + align-items: center; } .online-list { padding-top: 0; - padding-bottom: 4px; + padding-bottom: 0; } .online-item { --padding-start: 12px; - --min-height: 0; + --min-height: 30px; color: var(--ion-color-secondary); } .online-label { - margin-top: 8px; + margin-top: 0; margin-bottom: 0; } -ion-backdrop { - cursor: default; +.clipboard-col { + position: absolute; + bottom: 0; + padding: 0; +} + +.clipboard-toolbar { + max-width: 428px; + margin-left: 12px; + padding-right: 16px; + height: 56px; + display: flex; + align-items: center; + --padding-start: 0; +} + +.clipboard-input { + border-radius: 5px; + border: 1px solid var(--ion-color-secondary); + max-width: 360px; + text-align: left; } diff --git a/src/components/OnlineList.tsx b/src/components/OnlineList.tsx index a14a39c..3946fd7 100644 --- a/src/components/OnlineList.tsx +++ b/src/components/OnlineList.tsx @@ -1,6 +1,21 @@ -import { IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; -import React from 'react'; +import { + IonContent, + IonFabButton, + IonInput, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonToolbar, + IonIcon, + IonRow, + IonCol, + IonToast, +} from '@ionic/react'; +import React, { useState, useRef } from 'react'; import './OnlineList.css'; +import { clipboardOutline } from 'ionicons/icons'; +import copy from 'copy-to-clipboard'; type OnlineListProps = { pane: string; @@ -8,6 +23,14 @@ type OnlineListProps = { }; const OnlineList: React.FC = ({ pane, userList }) => { + const inputRef = useRef(null); + const [showToast, setShowToast] = useState(false); + + const copyLink = () => { + copy(window.location.href); + setShowToast(true); + }; + return ( Online @@ -20,6 +43,24 @@ const OnlineList: React.FC = ({ pane, userList }) => { ); })} + + + Invite friends! + + + + + + + + + setShowToast(false)} + message="Room link copied" + color="primary" + duration={2000} + > ); };