Move post tokenization button to dropdown menu

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",

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",

src/assets/feather/more-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>

src/components/Post.vue

@@ -90,14 +90,33 @@
         <img :src="require('@/assets/forkawesome/diamond.svg')">
       </router-link>
       <a
-        v-if="canTokenize()"
-        class="icon"
-        :class="{'waiting': isWaitingForToken}"
-        title="Tokenize post"
-        @click="tokenize()"
+        v-if="isWaitingForToken"
+        class="icon tokenize-progress"
+        title="Tokenizing..."
       >
         <img :src="require('@/assets/forkawesome/diamond.svg')">
       </a>
+      <div
+        class="post-menu-wrapper"
+        v-if="canMintToken()"
+        v-click-away="hideMenu"
+      >
+        <a class="icon" title="More" @click="toggleMenu()">
+          <img :src="require('@/assets/feather/more-horizontal.svg')">
+        </a>
+        <ul v-if="menuVisible" class="post-menu">
+          <li v-if="canMintToken()">
+            <a
+              class="icon"
+              title="Mint NFT"
+              @click="hideMenu(); mintToken()"
+            >
+              <img :src="require('@/assets/forkawesome/diamond.svg')">
+              <span>Mint NFT</span>
+            </a>
+          </li>
+        </ul>
+      </div>
       <div class="crypto-widget">
         <crypto-address
           v-if="selectedPaymentAddress"
@@ -163,6 +182,7 @@ export default class PostComponent extends Vue {
   inThread = false
 
   commentFormVisible = false
+  menuVisible = false
 
   private store = setup(() => {
     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;

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")