Skip to content

Commit

Permalink
Merge pull request #1458 from roiLeo/feature/galleryItem/sync
Browse files Browse the repository at this point in the history 
πŸ”„ sync galleryItem
  • Loading branch information
@yangwao
yangwao committed Dec 9, 2021
2 parents 7fb1647 + e9b82ab commit 0405699
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 158 deletions.
197 changes: 107 additions & 90 deletions components/rmrk/Gallery/GalleryItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,131 @@
<template>
<section class="wrapper no-padding-desktop gallery-item">

<b-message type="is-primary" v-if="message">
<div class="columns">
<b-message type="is-primary" v-if="message">
<div class="columns">
<div class="column is-four-fifths">
<p class="title is-3 has-text-black">{{ $t('mint.success') }} πŸŽ‰</p>
<p class="subtitle is-size-5 has-text-black">{{ $t('mint.shareWithFriends', [nft.name]) }} β–³</p>
<p class="title is-3 has-text-black">{{ $t('mint.success') }} πŸŽ‰</p>
<p class="subtitle is-size-5 has-text-black">{{ $t('mint.shareWithFriends', [nft.name]) }} β–³</p>
</div>
<div class="column">
<Sharing onlyCopyLink/>
</div>
<Sharing onlyCopyLink/>
</div>

</b-message>
<div class="columns">
<div class="image-wrapper">
<button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
<div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
<div v-orientation="viewMode === 'default' && !isFullScreenView && imageVisible" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
<b-image
v-if="!isLoading && imageVisible && !meta.animation_url"
:src="meta.image || '/placeholder.svg'"
src-fallback="/placeholder.svg'"
alt="KodaDot NFT minted multimedia"
ratio="1by1"
@error="onImageError"
></b-image>
<img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
<b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
<MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
</div>
</div>
<button id="fullscreen-view" @keyup.esc="minimize" @click="toggleFullScreen" v-if="!isLoading && imageVisible" :class="{fullscreen: isFullScreenView}">
<b-icon
:icon="isFullScreenView ? 'compress-alt' : 'arrows-alt'"
>
</b-icon>
</button>
</div>
</div>
</b-message>

<div class="columns">
<div class="image-wrapper">
<button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
<div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
<div v-orientation="viewMode === 'default' && !isFullScreenView && imageVisible" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
<b-image
v-if="!isLoading && imageVisible && !meta.animation_url"
:src="meta.image || '/placeholder.svg'"
src-fallback="/placeholder.svg'"
alt="KodaDot NFT minted multimedia"
ratio="1by1"
@error="onImageError"
></b-image>
<img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
<b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
<MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
</div>
</div>
<button id="fullscreen-view" @keyup.esc="minimize" @click="toggleFullScreen" v-if="!isLoading && imageVisible" :class="{fullscreen: isFullScreenView}">
<b-icon
:icon="isFullScreenView ? 'compress-alt' : 'arrows-alt'"
>
</b-icon>
</button>
</div>
</div>

<div class="columns">
<div class="column is-6">
<Appreciation
:emotes="nft.emotes"
:accountId="accountId"
:currentOwnerId="nft.currentOwner"
:nftId="nft.id"
:burned="nft.burned"
/>
<div class="nft-title">
<Name :nft="nft" :isLoading="isLoading" />
</div>

<div class="columns">
<div class="column is-6">
<Appreciation
:emotes="nft.emotes"
:accountId="accountId"
:currentOwnerId="nft.currentOwner"
:nftId="nft.id"
:burned="nft.burned"
/>
<div class="nft-title">
<Name :nft="nft" :isLoading="isLoading" />
</div>

<div v-if="meta.description" class="block">
<p class="label">{{ $t('legend')}}</p>
<VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description.replaceAll('\n', ' \n')" />
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
</div>

<History v-if="!isLoading" :events="nft.events"/>
<div v-if="meta.description" class="block">
<p class="label">{{ $t('legend')}}</p>
<VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description.replaceAll('\n', ' \n')" />
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
</div>

<div class="column is-3 is-offset-3" v-if="detailVisible">
<b-skeleton :count="2" size="is-large" :active="isLoading"></b-skeleton>
</div>

<Sharing class="mb-4" />
<div class="column is-6" v-if="detailVisible">
<b-skeleton :count="2" size="is-large" :active="isLoading"></b-skeleton>

<div class="price-block mb-4" v-if="hasPrice">
<div class="label">{{ $t('price') }}</div>
<div class="price-block__container">
<div class="price-block__original">{{ nft.price | formatBalance(12, 'KSM') }}</div>
<b-button v-if="nft.currentOwner === accountId" type="is-warning" outlined @click="handleUnlist">{{ $t('Unlist') }}</b-button>
<div class="columns">
<div class="column">
<div class="nft-title">
<Detail :nft="nft" :isLoading="isLoading"/>
</div>
<!--<div class="label price-block__exchange">{{ this.nft.price | formatBalance(12, 'USD') }}</div>--> <!-- // price in USD -->
</div>

<template v-if="detailVisible && !nft.burned">
<!-- <PackSaver v-if="accountId" :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" /> -->
<div class="card mb-4" aria-id="contentIdForA11y3">
<div class="column is-flex is-flex-direction-column is-justify-content-space-between">
<div
class="card mb-4"
aria-id="contentIdForA11y3"
>
<div class="card-content">
<div class="label ">{{ $t('actions') }}</div>
<div class="content">
<p class="subtitle">
<Auth />
<IndexerGuard showMessage>
<AvailableActions
<template v-if="hasPrice">
<div class="label">
{{ $t('price') }}
</div>
<div class="price-block__container">
<div class="price-block__original">
{{ nft.price | formatBalance(12, 'KSM') }}
</div>
<b-button
v-if="nft.currentOwner === accountId"
type="is-warning"
outlined
@click="handleUnlist"
>
{{ $t('Unlist') }}
</b-button>
</div>
</template>

<div class="content pt-4">
<p class="subtitle">
<IndexerGuard show-message class="pb-4">
<AvailableActions
ref="actions"
:accountId="accountId"
:currentOwnerId="nft.currentOwner"
:account-id="accountId"
:current-owner-id="nft.currentOwner"
:price="nft.price"
:nftId="nft.id"
:ipfsHashes="[nft.image, nft.animation_url, nft.metadata]"
:nft-id="nft.id"
:ipfs-hashes="[nft.image, nft.animation_url, nft.metadata]"
@change="handleAction"
/>
</IndexerGuard>
</p>
</div>
/>
</IndexerGuard>
<Auth />
</p>
</div>
</div>
</template>

<template v-if="detailVisible">
<Facts :nft="nft" :meta="meta" />
</template>
<Sharing class="mb-4" />
</div>
</div>
</div>
</div>
</div>

<!-- <hr class="comment-divider" />
<BaseCommentSection :nft="nft" :meta="meta" /> -->
<Facts :nft="nft" :meta="meta" />
</div>
</div>

<div class="columns">
<div class="column">
<History v-if="!isLoading" :events="nft.events"/>
</div>
</div>
</section>
</template>

Expand Down Expand Up @@ -168,7 +184,8 @@ import Orientation from '@/directives/DeviceOrientation'
MediaResolver: () => import('../Media/MediaResolver.vue'),
// PackSaver: () => import('../Pack/PackSaver.vue'),
IndexerGuard: () => import('@/components/shared/wrapper/IndexerGuard.vue'),
VueMarkdown: () => import('vue-markdown-render')
VueMarkdown: () => import('vue-markdown-render'),
Detail: () => import('@/components/rmrk/Gallery/Item/Detail.vue'),
},
directives: {
orientation: Orientation
Expand Down
57 changes: 57 additions & 0 deletions components/rmrk/Gallery/Item/Detail.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<template>
<div v-if="detailVisible">
<p class="label">
{{ $t('collection') }}
</p>
<p class="subtitle is-size-6">
<router-link :to="{ name: 'collectionDetail', params: { id: nft.collectionId } }">
{{ nft.collectionId }}
</router-link>
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
</p>
<p class="label">
{{ $t('creator') }}
</p>
<p class="subtitle is-size-6">
<ProfileLink :address="nft.issuer" :showTwitter="true"/>
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
</p>
<template v-if="nft.issuer !== nft.currentOwner">
<p class="label">
{{ $t('owner') }}
</p>
<p class="subtitle is-size-6">
<ProfileLink :address="nft.currentOwner" :showTwitter="true"/>
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
</p>
</template>
</div>
</template>

<script lang="ts" >
import { Component, Prop, Vue } from 'nuxt-property-decorator'
import isShareMode from '@/utils/isShareMode'
import { NFTWithMeta } from '../../service/scheme'
import { emptyObject } from '@/utils/empty'
// import Identity from '@/components/shared/format/Identity.vue'
const components = {
ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue')
}
@Component({ components })
export default class Name extends Vue {
@Prop({ default: () => emptyObject<NFTWithMeta>() }) public nft!: NFTWithMeta;
@Prop() public isLoading!: boolean;
get detailVisible() {
return !isShareMode
}
get carbonlessBadge() {
return this.nft.attributes?.some(({trait_type, value}) => trait_type === 'carbonless' && value)
}
}
</script>
73 changes: 5 additions & 68 deletions components/rmrk/Gallery/Item/Name.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,79 +7,16 @@
<span v-if="!isLoading">
<span v-if="nft.burned">γ€ŒπŸ”₯」</span> {{ nft.name }} <span v-if="carbonlessBadge">γ€ŒπŸŒ±γ€</span>
</span>
<b-skeleton
height="100px"
size="is-large"
:active="isLoading"
/>
<b-skeleton height="100px" size="is-large" :active="isLoading"></b-skeleton>
</p>
<p
v-if="nft.burned"
class="title is-size-4 has-text-danger"
>
<p v-if="nft.burned" class="title is-size-4 has-text-danger">
{{ $t('nft.burned') }} γ€ŒπŸ”₯」
<b-skeleton
:count="1"
size="is-large"
:active="isLoading"
/>
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
</p>
<p
v-if="carbonlessBadge"
class="title is-size-4 has-text-success"
>
<p v-if="carbonlessBadge" class="title is-size-4 has-text-success">
{{ $t('nft.carbonless') }} γ€ŒπŸŒ±γ€
<b-skeleton
:count="1"
size="is-large"
:active="isLoading"
/>
</p>
<p class="label">
{{ $t('collection') }}
</p>
<p class="subtitle is-size-6">
<nuxt-link :to="`/rmrk/collection/${nft.collectionId}`">
{{ nft.collectionId }}
</nuxt-link>
<b-skeleton
:count="1"
size="is-large"
:active="isLoading"
/>
</p>
<p class="label">
{{ $t('creator') }}
</p>
<p class="subtitle is-size-6">
<ProfileLink
:address="nft.issuer"
:show-twitter="true"
/>
<b-skeleton
:count="1"
size="is-large"
:active="isLoading"
/>
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
<b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
</p>
<template v-if="nft.issuer !== nft.currentOwner">
<p class="label">
{{ $t('owner') }}
</p>
<p class="subtitle is-size-6">
<ProfileLink
:address="nft.currentOwner"
:show-twitter="true"
/>
<b-skeleton
:count="1"
size="is-large"
:active="isLoading"
/>
<!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
</p>
</template>
</div>
</template>

Expand Down

0 comments on commit 0405699

Please sign in to comment.