Skip to content

Commit

Permalink
* feat: add QRCodeVue library to package.json
Browse files Browse the repository at this point in the history
* feat: add QRCode button to PanelResult.vue
* feat: add QRCode dialog to VUpload.vue
* feat: add QRCode emitter to VUpload.vue
* feat: add QREvents interface to types.ts
* fix: remove unused code from VUpload.vue
* style: add styles for QRCode dialog in VUpload.vue
  • Loading branch information
alan890104 committed Apr 30, 2023
1 parent 16430a7 commit 7bf2e65
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 19 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"mitt": "^3.0.0",
"notyf": "^3.10.0",
"pinia": "^2.0.0-rc.6",
"qrcode.vue": "^3.4.0",
"uuid": "^9.0.0",
"vue": "^3.2.4",
"vue-connect-wallet": "^0.1.7",
Expand All @@ -43,4 +44,4 @@
"vite-plugin-fonts": "^0.2.2",
"vite-plugin-pwa": "^0.14.7"
}
}
}
17 changes: 15 additions & 2 deletions src/components/VUpload/PanelResult.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
<a v-if="isImage(item)" title="Open Link" target="_blank" :href="getPreviewUrl(item)" rel="noopener">
<i-ri-external-link-fill class="icon-color" />
</a>
<a title="QRCode" @click="item.cid ? handleQRCode(item) : {}">
<i-mdi-qrcode class="icon-color" />
</a>
<a title="Download" @click="item.cid ? download(item) : {}">
<i-mdi-download class="icon-color" />
</a>
Expand Down Expand Up @@ -57,6 +60,8 @@ import SearchResult from "@src/components/VUpload/SearchResult.vue";
import { useWallet } from "@src/store";
import { Notyf } from "notyf";
import { getBlob, downloadUint8ArrayFile } from "@src/services/ipfs"
import { Emitter, EventType } from "mitt";
import type { QREvents } from "@src/services/types"
export default {
name: "PanelResult",
Expand All @@ -78,7 +83,7 @@ export default {
const store = useStore();
const walletStore = useWallet();
const search = ref("");
const emitter = inject("emitter") as Emitter<Record<EventType, QREvents>>;
const getLink = (item: FileDetail) => {
if (item.secret && walletStore.address === "") {
Expand All @@ -91,6 +96,13 @@ export default {
}
}
const handleQRCode = (item: FileDetail) => {
if (!item.cid) return;
emitter.emit("open_qrcode", {
value: getLink(item),
})
}
const getPreviewUrl = (item: FileDetail) => {
return `https://ipfs.io/ipfs/${item.cid}`
}
Expand Down Expand Up @@ -131,7 +143,8 @@ export default {
generateLink,
getLink,
onDeleteResult,
onSearchChanged
onSearchChanged,
handleQRCode,
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/services/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,8 @@ export interface FileDetail {
export interface SafeAsync {
error: boolean | Error;
data: FileDetail;
}

export interface QREvents {
value: string;
}
4 changes: 2 additions & 2 deletions src/views/VDownload.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ export default {
components: {
PanelDownload,
},
setup() {
}
}
</script>

Expand All @@ -25,5 +23,7 @@ section#content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 100%;
}
</style>
135 changes: 121 additions & 14 deletions src/views/VUpload.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,143 @@
</div>
</div>
</section>
<div class="overlay" v-if="showQRCode" @click.self="closeOverlay">
<div class="dialog">
<div class="text">Share your file</div>
<QRCodeVue :value="QRCodeValue.value" class="qrcode" :size="200"></QRCodeVue>
<div class="item-cid">
<input class="input-cid" type="text" :value="QRCodeValue.value" readonly
@focus="(event) => (event.target as HTMLInputElement).select()" />
<button class="copy-button" @click="onCopy">
<i-mdi-clipboard-outline v-if="!isCopied" />
<i-mdi-check v-else style="color: green;" />
</button>
</div>
</div>
</div>
</template>

<script lang="ts">
import { provide } from "vue";
import { Notyf } from "notyf";
import { inject, ref, reactive } from "vue";
import { Emitter, EventType } from "mitt";
import PanelUpload from "@src/components/VUpload/PanelUpload.vue";
import PanelResult from "@src/components/VUpload/PanelResult.vue";
import QRCodeVue from "qrcode.vue";
import { copyToClipboard } from "@src/services/helpers";
import { QREvents } from "@src/services/types";
export default {
name: "VUpload",
components: {
PanelUpload,
PanelResult,
QRCodeVue,
},
setup() {
const showQRCode = ref(false)
const QRCodeValue = reactive({} as QREvents)
const isCopied = ref(false)
const emitter = inject("emitter") as Emitter<Record<EventType, QREvents>>
emitter.on("open_qrcode", (e) => {
if (!e.value) return;
QRCodeValue.value = e.value;
showQRCode.value = true;
})
const onCopy = () => {
isCopied.value = true
copyToClipboard(QRCodeValue.value);
setTimeout(() => {
isCopied.value = false
}, 2000)
}
const closeOverlay = () => {
QRCodeValue.value = ""
showQRCode.value = false
}
return {
emitter,
onCopy,
closeOverlay,
isCopied,
showQRCode,
QRCodeValue,
}
}
}
</script>

<style lang="scss">
<style lang="scss" scoped>
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 900;
.dialog {
position: fixed;
width: 30vw;
height: 30vh;
background-color: var(--gradient-800);
border-radius: 1.5rem;
padding: 20px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
color: var(--contrast-color);
.text {
font-size: large;
}
canvas {
z-index: 999;
}
.item-cid {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.input-cid {
outline: none;
border: none;
padding: 8px;
border-radius: 0.5rem;
font-size: 0.7rem;
width: 80%;
}
.copy-button {
all: unset;
margin-left: 2%;
cursor: pointer;
}
}
}
}
section#content {
position: relative;
height: 100%;
Expand All @@ -40,17 +158,6 @@ section#content {
height: 100%;
.tab {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
width: 12em;
height: 4em;
border-radius: 1em;
}
.main-content {
position: absolute;
z-index: 3;
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5836,6 +5836,11 @@ punycode@^2.1.0:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==

qrcode.vue@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/qrcode.vue/-/qrcode.vue-3.4.0.tgz#4513ff1a4734cb7184086c2fd439f0d462c6d281"
integrity sha512-4XeImbv10Fin16Fl2DArCMhGyAdvIg2jb7vDT+hZiIAMg/6H6mz9nUZr/dR8jBcun5VzNzkiwKhiqOGbloinwA==

queue-microtask@^1.2.2, queue-microtask@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
Expand Down

0 comments on commit 7bf2e65

Please sign in to comment.