diff --git a/package-lock.json b/package-lock.json index 8d83496..220041e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "vue": "^3.2.0", "vue-class-component": "^8.0.0-0", "vue-property-decorator": "^10.0.0-rc.3", - "vue-router": "^4.0.0-0" + "vue-router": "^4.0.0-0", + "vue3-click-away": "^1.2.1" }, "devDependencies": { "@lavamoat/allow-scripts": "^1.0.6", @@ -20461,6 +20462,11 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0.tgz", "integrity": "sha512-MgdilC3YHYSCFuNlxZBgugh8B9/h/h+nQ6lkeaxqFWW+FnV/JzCwW4Bh5bYIYvBleG8QZjFwxdmdqSAWLXzgEA==" }, + "node_modules/vue3-click-away": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/vue3-click-away/-/vue3-click-away-1.2.1.tgz", + "integrity": "sha512-8GA3rfFlwIS9oCqFzqGdk7CvUz7JwvoiBJQLW4BxrVQEgzTB9oo/lWMazz4XwouA8tnquIHa2ZBHLix689RpAg==" + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -38002,6 +38008,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vue3-click-away": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/vue3-click-away/-/vue3-click-away-1.2.1.tgz", + "integrity": "sha512-8GA3rfFlwIS9oCqFzqGdk7CvUz7JwvoiBJQLW4BxrVQEgzTB9oo/lWMazz4XwouA8tnquIHa2ZBHLix689RpAg==" + }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index 1d1a982..7bd1527 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "vue": "^3.2.0", "vue-class-component": "^8.0.0-0", "vue-property-decorator": "^10.0.0-rc.3", - "vue-router": "^4.0.0-0" + "vue-router": "^4.0.0-0", + "vue3-click-away": "^1.2.1" }, "devDependencies": { "@lavamoat/allow-scripts": "^1.0.6", diff --git a/src/assets/feather/more-horizontal.svg b/src/assets/feather/more-horizontal.svg new file mode 100644 index 0000000..f8eb6a9 --- /dev/null +++ b/src/assets/feather/more-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Post.vue b/src/components/Post.vue index 0c979a3..6fb70bb 100644 --- a/src/components/Post.vue +++ b/src/components/Post.vue @@ -90,14 +90,33 @@ +
+ + + + +
{ const { currentUser, ensureAuthToken } = useCurrentUser() @@ -239,6 +259,14 @@ export default class PostComponent extends Vue { this.post.favourited = post.favourited } + toggleMenu() { + this.menuVisible = !this.menuVisible + } + + hideMenu() { + this.menuVisible = false + } + getPaymentOptions(): PaymentOption[] { const items = [] for (const [code, name] of CRYPTOCURRENCIES) { @@ -263,13 +291,17 @@ export default class PostComponent extends Vue { return this.post.token_id !== null } - canTokenize(): boolean { - return this.post.account.id === this.store.currentUser?.id && !this.isTokenized - } - isWaitingForToken = false - async tokenize() { + canMintToken(): boolean { + return ( + this.post.account.id === this.store.currentUser?.id && + !this.isTokenized && + !this.isWaitingForToken + ) + } + + async mintToken() { const { currentUser, instance } = this.store if (!currentUser || !instance || !instance.nft_contract_name || !instance.nft_contract_address) { return @@ -414,7 +446,7 @@ export default class PostComponent extends Vue { filter: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%); } - &.waiting img { + &.tokenize-progress img { animation: spin 1s linear infinite; } } @@ -426,6 +458,20 @@ export default class PostComponent extends Vue { } } +.post-menu-wrapper { + position: relative; +} + +.post-menu { + background-color: $block-background-color; + border: 1px solid $separator-color; + border-radius: $btn-border-radius; + padding: $block-inner-padding / 2; + position: absolute; + white-space: nowrap; + z-index: 3; +} + .crypto-widget { display: flex; flex-grow: 1; diff --git a/src/main.ts b/src/main.ts index 51fc6e6..ea2e849 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,8 +1,12 @@ import { createApp } from "vue" +import VueClickAway from "vue3-click-away" + import App from "./App.vue" import router from "./router" const app = createApp(App) +app.use(VueClickAway) + app.use(router).mount("#app")