Merge pull request #166 from kodadot/sharing

sharing

Author: yangwao

dashboard/.gitignore

@@ -22,3 +22,4 @@ yarn-error.log*
 *.sw?
 
 .vercel
+/test

dashboard/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container is-max-desktop">
-    <Navbar/>
+    <Navbar v-if="isNavbarVisible"/>
     <router-view id="routerview" />
   </div>
 </template>
@@ -10,6 +10,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
 import { cryptoWaitReady } from '@polkadot/util-crypto';
 import keyring from '@polkadot/ui-keyring';
 import Navbar from './components/Navbar.vue';
+import isShareMode from '@/utils/isShareMode'
 
 @Component<Dashboard>({
   metaInfo() {
@@ -69,6 +70,10 @@ export default class Dashboard extends Vue {
   public mounted(): void {
     this.mountWasmCrypto();
   }
+
+  get isNavbarVisible() {
+    return !isShareMode
+  }
 }
 </script>
 
@@ -103,6 +108,10 @@ $link: $primary;
 $link-invert: $primary-invert;
 $link-focus-border: $primary;
 
+// DEV: for dark mode
+// $scheme-main: rgb(27, 34, 44);
+// $scheme-invert: $white;
+
 // Import Bulma and Buefy styles
 @import "~bulma";
 @import "~buefy/src/scss/buefy";

dashboard/src/components/rmrk/Gallery/CollectionItem.vue

@@ -9,7 +9,7 @@
           <p class="subtitle">
             Issued by: <ProfileLink v-if="owner" :address="owner" :inline="true" />
           </p>
-          <Sharing label="Check this awesome Collection on %23KusamaNetwork %23KodaDot" />
+          <Sharing v-if="sharingVisible" label="Check this awesome Collection on %23KusamaNetwork %23KodaDot" :iframe="iframeSettings" />
         </div>
       </div>
     </div>
@@ -26,6 +26,7 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { getInstance } from '../service/RmrkService';
 import { CollectionWithMeta, NFTWithMeta, Collection } from '../service/scheme';
 import { fetchNFTMetadata, sanitizeIpfsUrl, defaultSortBy, fetchCollectionMetadata } from '../utils';
+import isShareMode from '@/utils/isShareMode';
 
 const components = {
   GalleryCardList: () => import('@/components/rmrk/Gallery/GalleryCardList.vue'),
@@ -48,6 +49,10 @@ export default class CollectionItem extends Vue {
     return this.collection.issuer || ''
   }
 
+  get sharingVisible() {
+    return !isShareMode
+  }
+
   public async mounted() {
   this.checkId();
   const rmrkService = getInstance();
@@ -82,6 +87,10 @@ export default class CollectionItem extends Vue {
     }
   }
 
+  get iframeSettings() {
+    return { width: '100%', height: '100vh' }
+  }
+
   collectionMeta(collection: Collection) {
     fetchCollectionMetadata(collection)
     .then(

dashboard/src/components/rmrk/Gallery/GalleryCard.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="card nft-card">
-    <router-link
-      :to="{ name: type, params: { id: id } }"
-      tag="div"
-      class="nft-card__skeleton"
-    >
+    <LinkResolver class="nft-card__skeleton" :route="type" :param="id" :link="link" tag="div" >
       <div class="card-image" v-if="image">
         <b-image
           :src="image"
@@ -23,22 +19,26 @@
       </div>
 
       <div class="card-content">
-        <p class="title is-4">
-          <router-link :to="{ name: type, params: { id: id } }">{{
-            name
-          }}</router-link>
+        <p class="title is-4 has-text-centered has-text-primary">
+          {{ name }}
         </p>
       </div>
-    </router-link>
+    
+    </LinkResolver>
   </div>
 </template>
 
 <script lang="ts" >
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
+const components = {
+  LinkResolver: () => import('@/components/shared/LinkResolver.vue')
+}
+
+@Component({ components })
 export default class GalleryCard extends Vue {
   @Prop({ default: 'nftDetail' }) public type!: string;
+  @Prop({ default: 'rmrk/detail' }) public link!: string;
   @Prop() public id!: string;
   @Prop() public name!: string;
   @Prop() public image!: string;
@@ -61,8 +61,4 @@ export default class GalleryCard extends Vue {
 a {
   color: grey;
 }
-
-a:hover {
-  color: black;
-}
 </style>

dashboard/src/components/rmrk/Gallery/GalleryCardList.vue

@@ -5,7 +5,7 @@
       v-for="nft in items"
       :key="nft.id"
     >
-      <GalleryCard :id="nft.id" :name="nft.name" :image="nft.image" :type="type" />
+      <GalleryCard :id="nft.id" :name="nft.name" :image="nft.image" :type="type" :link="link" />
     </div>
   </div>
 </template>
@@ -20,6 +20,7 @@ const components = { GalleryCard };
 @Component({ components })
 export default class GalleryCardList extends Vue {
   @Prop({ default: 'nftDetail' }) public type!: string;
+  @Prop({ default: 'rmrk/detail' }) public link!: string;
   @Prop() public items!: RmrkType[];
 }
 </script>

dashboard/src/components/rmrk/Gallery/GalleryItem.vue

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <div class="columns">
       <div class="column is-8 is-offset-2">
-        <div class="box">
+        <div :class="{ box: detailVisible }">
           <b-image
             v-if="!isLoading && imageVisible"
             :src="nft.image || require('@/assets/kodadot_logo_v1_transparent_400px.png')"
@@ -11,10 +11,10 @@
             ratio="1by1"
           ></b-image>
           <b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
-
-          <MediaResolver v-if="nft.animation_url" :class="{ withPicture: imageVisible }" :src="nft.animation_url" :mimeType="mimeType" />
-          <Appreciation :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" />
-          <PackSaver v-if="accountId" :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" />
+          <template v-if="detailVisible">
+            <MediaResolver v-if="nft.animation_url" :class="{ withPicture: imageVisible }" :src="nft.animation_url" :mimeType="mimeType" />
+            <Appreciation :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" />
+            <PackSaver v-if="accountId" :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" />
 
           <b-collapse class="card" animation="slide"
             aria-id="contentIdForA11y3" :open="false">
@@ -42,10 +42,11 @@
             </div>
           </div>
         </b-collapse>
+        </template>
         <Name :nft="nft" :isLoading="isLoading" />
           <div class="card">
             <div class="card-content">
-              <p class="title is-size-2">
+              <p class="title" :class="[ detailVisible ? 'is-size-2' : 'is-size-4' ]">
                 {{ $t('legend')}}
               </p>
               <p class="subtitle is-size-7">
@@ -54,16 +55,16 @@
                 </b-tag>
                 <p v-if="!isLoading"
                   class="subtitle is-size-5">
-                  <!-- <markdown-it-vue class="md-body" :content="nft.description" /> -->
-                  <!-- <markdown-it-vue-light class="md-body" :content="nft.description" /> -->
                   {{ nft.description }}
                 </p>
                 <b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
               </p>
             </div>
           </div>
-          <Facts :nft="nft" />
-          <Sharing />
+          <template v-if="detailVisible">
+            <Facts :nft="nft" />
+            <Sharing />
+          </template>
         </div>
       </div>
     </div>
@@ -92,6 +93,7 @@ import api from '@/fetch';
 import { resolveMedia } from '../utils';
 import { MediaType } from '../types';
 import { MetaInfo } from 'vue-meta';
+import isShareMode from '@/utils/isShareMode';
 // import { VueConstructor } from 'vue';
 
 type NFTType =  NFTWithMeta;
@@ -189,6 +191,10 @@ export default class GalleryItem extends Vue {
     const { id } = this.nft;
     return id;
   }
+
+  get detailVisible() {
+    return !isShareMode
+  }
 }
 </script>
 

dashboard/src/components/rmrk/Gallery/Item/Name.vue

@@ -7,7 +7,10 @@
             class="card-header"
             role="button"
             aria-controls="contentIdForA11y3">
-            <p class="card-header-title is-size-1">
+            <p
+              class="card-header-title"
+              :class="[ detailVisible ? 'is-size-1' : 'is-size-3' ]"
+            >
               <span v-if="!isLoading">
                 {{ nft.name }}
               </span>
@@ -43,6 +46,7 @@
 
 <script lang="ts" >
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import isShareMode from '@/utils/isShareMode';
 // import Identity from '@/components/shared/format/Identity.vue'
 
 const components = {
@@ -53,5 +57,9 @@ const components = {
 export default class Name extends Vue {
   @Prop() public nft!: any;
   @Prop() public isLoading!: boolean;
+
+  get detailVisible() {
+    return !isShareMode
+  }
 }
 </script>

dashboard/src/components/rmrk/Gallery/Item/Sharing.vue

@@ -50,16 +50,31 @@
           </a>
         </span>
       </p>
+      <p class="card-footer-item">
+        <span>
+          <a
+            v-clipboard:copy="iframeUri"
+            @click="toast('Code copied to clipboard')">
+            <b-icon
+              size="is-medium"
+              pack="fas"
+              icon="code">
+            </b-icon>
+          </a>
+        </span>
+      </p>
     </footer>
   </div>
 </template>
 
 <script lang="ts" >
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { IFrame, emptyIframe } from '../../types';
 
 @Component({})
 export default class Sharing extends Vue {
   @Prop({ default: 'Check this cool NFT on %23KusamaNetwork %23kodadot' }) label!: string;
+  @Prop({ default: emptyIframe }) iframe!: IFrame;
 
   get helloText() {
     return this.label;
@@ -85,6 +100,30 @@ export default class Sharing extends Vue {
     return `https://lineit.line.me/share/ui?url=${this.realworldFullPath}&text=${this.helloText}`;
   }
 
+  get width() {
+    return this.iframe.width || '480px'
+  }
+
+  get height() {
+    return this.iframe.height || '840px'
+  }
+
+  get customIframeUri() {
+    return this.iframe.customUrl || this.realworldFullPath
+  }
+
+  get iframeUri() {
+    return `
+    <iframe
+      src="${this.customIframeUri}"
+      title="${this.label}"
+      style="width:${this.width};height:${this.height};border:none;"
+    ></iframe>
+    `
+  }
+
+
+
   public toast(message: string): void {
     this.$buefy.toast.open(message);
   }

dashboard/src/components/rmrk/Pack/PackItem.vue

@@ -9,7 +9,7 @@
           <p class="subtitle">
             Curated by: <ProfileLink v-if="owner" :address="owner" :inline="true" />
           </p>
-          <Sharing label="Check this awesome Pack on %23KusamaNetwork %23KodaDot" />
+          <Sharing v-if="sharingVisible" label="Check this awesome Pack on %23KusamaNetwork %23KodaDot" :iframe="iframeSettings" />
         </div>
       </div>
     </div>
@@ -26,6 +26,7 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { getInstance } from '../service/RmrkService';
 import { CompletePack } from '../service/scheme';
 import { fetchNFTMetadata, sanitizeIpfsUrl } from '../utils';
+import isShareMode from '@/utils/isShareMode';
 
 const components = {
   GalleryCardList: () => import('@/components/rmrk/Gallery/GalleryCardList.vue'),
@@ -51,13 +52,19 @@ export default class PackItem extends Vue {
     return this.pack.nfts || [];
   }
 
+  get sharingVisible() {
+    return !isShareMode
+  }
+
+
   public async mounted() {
   this.checkId();
   const rmrkService = getInstance();
   if (!rmrkService || !this.id) {
     return;
   }
 
+
   this.isLoading = true;
 
   try {
@@ -82,6 +89,10 @@ export default class PackItem extends Vue {
     }
   }
 
+  get iframeSettings() {
+    return { width: '100%', height: '100vh' }
+  }
+
   nftMeta() {
     this.pack.nfts.map(fetchNFTMetadata).forEach(async (call, index) => {
       const res = await call;