Skip to content
This repository was archived by the owner on Dec 5, 2025. It is now read-only.

Commit 334aaad

Browse files
lohbalohba
committed
Merge branch 'main-nuxt' of https://github.com/kodadot/nft-gallery into creator-twitter
2 parents 5f77e91 + 2d271ee commit 334aaad

File tree

7 files changed

+393
-183
lines changed

7 files changed

+393
-183
lines changed

‎components/rmrk/Gallery/GalleryItem.vue‎

Lines changed: 107 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,131 @@
11
<template>
22
<section class="wrapper no-padding-desktop gallery-item">
3-
4-
<b-message type="is-primary" v-if="message">
5-
<div class="columns">
3+
<b-message type="is-primary" v-if="message">
4+
<div class="columns">
65
<div class="column is-four-fifths">
7-
<p class="title is-3 has-text-black">{{ $t('mint.success') }} 🎉</p>
8-
<p class="subtitle is-size-5 has-text-black">{{ $t('mint.shareWithFriends', [nft.name]) }} △</p>
6+
<p class="title is-3 has-text-black">{{ $t('mint.success') }} 🎉</p>
7+
<p class="subtitle is-size-5 has-text-black">{{ $t('mint.shareWithFriends', [nft.name]) }} △</p>
98
</div>
109
<div class="column">
11-
<Sharing onlyCopyLink/>
12-
</div>
10+
<Sharing onlyCopyLink/>
1311
</div>
14-
15-
</b-message>
16-
<div class="columns">
17-
<div class="image-wrapper">
18-
<button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
19-
<div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
20-
<div v-orientation="viewMode === 'default' && !isFullScreenView && imageVisible" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
21-
<b-image
22-
v-if="!isLoading && imageVisible && !meta.animation_url"
23-
:src="meta.image || '/placeholder.svg'"
24-
src-fallback="/placeholder.svg'"
25-
alt="KodaDot NFT minted multimedia"
26-
ratio="1by1"
27-
@error="onImageError"
28-
></b-image>
29-
<img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
30-
<b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
31-
<MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
32-
</div>
33-
</div>
34-
<button id="fullscreen-view" @keyup.esc="minimize" @click="toggleFullScreen" v-if="!isLoading && imageVisible" :class="{fullscreen: isFullScreenView}">
35-
<b-icon
36-
:icon="isFullScreenView ? 'compress-alt' : 'arrows-alt'"
37-
>
38-
</b-icon>
39-
</button>
40-
</div>
4112
</div>
13+
</b-message>
14+
15+
<div class="columns">
16+
<div class="image-wrapper">
17+
<button id="theatre-view" @click="toggleView" v-if="!isLoading && imageVisible">{{ viewMode === 'default' ? $t('theatre') : $t('default') }} {{$t('view')}}</button>
18+
<div class="column" :class="{ 'is-12 is-theatre': viewMode === 'theatre', 'is-6 is-offset-3': viewMode === 'default'}">
19+
<div v-orientation="viewMode === 'default' && !isFullScreenView && imageVisible" class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
20+
<b-image
21+
v-if="!isLoading && imageVisible && !meta.animation_url"
22+
:src="meta.image || '/placeholder.svg'"
23+
src-fallback="/placeholder.svg'"
24+
alt="KodaDot NFT minted multimedia"
25+
ratio="1by1"
26+
@error="onImageError"
27+
></b-image>
28+
<img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
29+
<b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
30+
<MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
31+
</div>
32+
</div>
33+
<button id="fullscreen-view" @keyup.esc="minimize" @click="toggleFullScreen" v-if="!isLoading && imageVisible" :class="{fullscreen: isFullScreenView}">
34+
<b-icon
35+
:icon="isFullScreenView ? 'compress-alt' : 'arrows-alt'"
36+
>
37+
</b-icon>
38+
</button>
39+
</div>
40+
</div>
41+
42+
<div class="columns">
43+
<div class="column is-6">
44+
<Appreciation
45+
:emotes="nft.emotes"
46+
:accountId="accountId"
47+
:currentOwnerId="nft.currentOwner"
48+
:nftId="nft.id"
49+
:burned="nft.burned"
50+
/>
51+
<div class="nft-title">
52+
<Name :nft="nft" :isLoading="isLoading" />
53+
</div>
4254

43-
<div class="columns">
44-
<div class="column is-6">
45-
<Appreciation
46-
:emotes="nft.emotes"
47-
:accountId="accountId"
48-
:currentOwnerId="nft.currentOwner"
49-
:nftId="nft.id"
50-
:burned="nft.burned"
51-
/>
52-
<div class="nft-title">
53-
<Name :nft="nft" :isLoading="isLoading" />
54-
</div>
55-
56-
<div v-if="meta.description" class="block">
57-
<p class="label">{{ $t('legend')}}</p>
58-
<VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description.replaceAll('\n', ' \n')" />
59-
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
60-
</div>
61-
62-
<History v-if="!isLoading" :events="nft.events"/>
55+
<div v-if="meta.description" class="block">
56+
<p class="label">{{ $t('legend')}}</p>
57+
<VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description.replaceAll('\n', ' \n')" />
58+
<b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
6359
</div>
6460

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

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

70-
<div class="price-block mb-4" v-if="hasPrice">
71-
<div class="label">{{ $t('price') }}</div>
72-
<div class="price-block__container">
73-
<div class="price-block__original">{{ nft.price | formatBalance(12, 'KSM') }}</div>
74-
<b-button v-if="nft.currentOwner === accountId" type="is-warning" outlined @click="handleUnlist">{{ $t('Unlist') }}</b-button>
66+
<div class="columns">
67+
<div class="column">
68+
<div class="nft-title">
69+
<Detail :nft="nft" :isLoading="isLoading"/>
7570
</div>
76-
<!--<div class="label price-block__exchange">{{ this.nft.price | formatBalance(12, 'USD') }}</div>--> <!-- // price in USD -->
7771
</div>
78-
79-
<template v-if="detailVisible && !nft.burned">
80-
<!-- <PackSaver v-if="accountId" :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" /> -->
81-
<div class="card mb-4" aria-id="contentIdForA11y3">
72+
<div class="column is-flex is-flex-direction-column is-justify-content-space-between">
73+
<div
74+
class="card mb-4"
75+
aria-id="contentIdForA11y3"
76+
>
8277
<div class="card-content">
83-
<div class="label ">{{ $t('actions') }}</div>
84-
<div class="content">
85-
<p class="subtitle">
86-
<Auth />
87-
<IndexerGuard showMessage>
88-
<AvailableActions
78+
<template v-if="hasPrice">
79+
<div class="label">
80+
{{ $t('price') }}
81+
</div>
82+
<div class="price-block__container">
83+
<div class="price-block__original">
84+
{{ nft.price | formatBalance(12, 'KSM') }}
85+
</div>
86+
<b-button
87+
v-if="nft.currentOwner === accountId"
88+
type="is-warning"
89+
outlined
90+
@click="handleUnlist"
91+
>
92+
{{ $t('Unlist') }}
93+
</b-button>
94+
</div>
95+
</template>
96+
97+
<div class="content pt-4">
98+
<p class="subtitle">
99+
<IndexerGuard show-message class="pb-4">
100+
<AvailableActions
89101
ref="actions"
90-
:accountId="accountId"
91-
:currentOwnerId="nft.currentOwner"
102+
:account-id="accountId"
103+
:current-owner-id="nft.currentOwner"
92104
:price="nft.price"
93-
:nftId="nft.id"
94-
:ipfsHashes="[nft.image, nft.animation_url, nft.metadata]"
105+
:nft-id="nft.id"
106+
:ipfs-hashes="[nft.image, nft.animation_url, nft.metadata]"
95107
@change="handleAction"
96-
/>
97-
</IndexerGuard>
98-
</p>
99-
</div>
108+
/>
109+
</IndexerGuard>
110+
<Auth />
111+
</p>
100112
</div>
101-
</div>
102-
</template>
103113

104-
<template v-if="detailVisible">
105-
<Facts :nft="nft" :meta="meta" />
106-
</template>
114+
<Sharing class="mb-4" />
115+
</div>
116+
</div>
117+
</div>
107118
</div>
108-
</div>
109119

110-
<!-- <hr class="comment-divider" />
111-
<BaseCommentSection :nft="nft" :meta="meta" /> -->
120+
<Facts :nft="nft" :meta="meta" />
121+
</div>
122+
</div>
112123

124+
<div class="columns">
125+
<div class="column">
126+
<History v-if="!isLoading" :events="nft.events"/>
127+
</div>
128+
</div>
113129
</section>
114130
</template>
115131

@@ -168,7 +184,8 @@ import Orientation from '@/directives/DeviceOrientation'
168184
MediaResolver: () => import('../Media/MediaResolver.vue'),
169185
// PackSaver: () => import('../Pack/PackSaver.vue'),
170186
IndexerGuard: () => import('@/components/shared/wrapper/IndexerGuard.vue'),
171-
VueMarkdown: () => import('vue-markdown-render')
187+
VueMarkdown: () => import('vue-markdown-render'),
188+
Detail: () => import('@/components/rmrk/Gallery/Item/Detail.vue'),
172189
},
173190
directives: {
174191
orientation: Orientation

‎components/rmrk/Gallery/History.vue‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
class="card"
55
animation="slide"
66
aria-id="contentIdForHistory"
7-
:open="collapsedHistory"
87
>
98
<template #trigger="props">
109
<div
@@ -23,9 +22,20 @@
2322
</template>
2423
<div class="card-content">
2524
<div class="content">
25+
<b-field>
26+
<b-select placeholder="Select an event" v-model="selectedEvent">
27+
<option value="all">All</option>
28+
<option
29+
v-for="option in uniqType"
30+
:value="option.Type"
31+
:key="option.Type">
32+
{{ option.Type }}
33+
</option>
34+
</b-select>
35+
</b-field>
36+
2637
<b-table :data="data" class="mb-4" hoverable>
2738
<b-table-column
28-
cell-class="short-identity__table"
2939
field="Type"
3040
label="Type"
3141
v-slot="props"
@@ -94,6 +104,7 @@ import formatBalance from '@/utils/formatBalance';
94104
import ChainMixin from '@/utils/mixins/chainMixin';
95105
import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator';
96106
import { Interaction } from '../service/scheme';
107+
import i18n from '@/i18n'
97108
98109
const components = {
99110
Identity: () => import('@/components/shared/format/Identity.vue'),
@@ -115,21 +126,30 @@ type ChartData = { buy: [Date, number][]; list: [Date, number][] };
115126
export default class History extends mixins(ChainMixin) {
116127
@Prop({ type: Array }) public events!: Interaction[];
117128
protected data: TableRow[] = [];
129+
protected copyTableData: TableRow[] = [];
118130
protected priceChartData: [Date, number][][] = [];
119-
protected collapsedHistory = true;
120131
121-
public mounted(): void {
122-
this.collapsedHistory = true;
132+
get uniqType(): any[] {
133+
return [...new Map(this.copyTableData.map(v => [v.Type, v])).values()]
134+
}
123135
124-
setTimeout(() => {
125-
this.collapsedHistory = false;
126-
}, 200);
136+
get selectedEvent(): string {
137+
return 'all'
138+
}
139+
140+
set selectedEvent(event: string) {
141+
if (event) {
142+
this.data = event === 'all'
143+
? this.copyTableData
144+
: [...new Set(this.copyTableData.filter(v => v.Type === event))]
145+
}
127146
}
128147
129148
protected createTable(): void {
130149
let prevOwner = '';
131150
let curPrice = '0.0000000';
132151
this.data = [];
152+
this.copyTableData = [];
133153
134154
const chartData: ChartData = {
135155
buy: [],
@@ -141,23 +161,25 @@ export default class History extends mixins(ChainMixin) {
141161
142162
// Type
143163
if (newEvent['interaction'] === 'MINTNFT') {
144-
event['Type'] = 'CREATE';
164+
event['Type'] = i18n.t('nft.event.MINTNFT');
145165
event['From'] = newEvent['caller'];
146166
event['To'] = '';
147167
} else if (newEvent['interaction'] === 'LIST') {
148-
event['Type'] = 'SET-PRICE';
168+
event['Type'] = i18n.t('nft.event.LIST');
149169
event['From'] = newEvent['caller'];
150170
event['To'] = '';
151171
prevOwner = event['From'];
152172
curPrice = newEvent['meta'];
153173
} else if (newEvent['interaction'] === 'SEND') {
154-
event['Type'] = 'GIFT';
174+
event['Type'] = i18n.t('nft.event.SEND');
155175
event['From'] = newEvent['caller'];
156176
event['To'] = newEvent['meta'];
157177
} else if (newEvent['interaction'] === 'CONSUME') {
158-
event['Type'] = 'BURNT';
178+
event['Type'] = i18n.t('nft.event.CONSUME');
159179
event['From'] = newEvent['caller'];
160180
event['To'] = '';
181+
} else if (newEvent['interaction'] === 'BUY') {
182+
event['Type'] = i18n.t('nft.event.BUY');
161183
} else event['Type'] = newEvent['interaction'];
162184
163185
// From
@@ -189,9 +211,11 @@ export default class History extends mixins(ChainMixin) {
189211
}
190212
191213
this.data.push(event);
214+
this.copyTableData.push(event);
192215
}
193216
194217
this.data = this.data.reverse();
218+
this.copyTableData = this.copyTableData.reverse();
195219
this.priceChartData = [chartData.buy, chartData.list];
196220
}
197221

0 commit comments

Comments
 (0)