Skip to content

Commit 8a83c69

Browse files
yangwaoyangwao
authored
Merge pull request #25 from kodadot/item-detail
Item detail
2 parents 2e76158 + c4f022a commit 8a83c69

File tree

7 files changed

+206
-83
lines changed

7 files changed

+206
-83
lines changed

‎dashboard/src/components/rmrk/Create/Create.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,5 @@ import CreateCollection from './CreateCollection.vue'
1414
}
1515
})
1616
export default class extends Vue {
17-
18-
private value2: any;
19-
@Prop() public value!: any;
2017
}
2118
</script>

‎dashboard/src/components/rmrk/Create/CreateCollection.vue

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<template>
22
<div>
33
<b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
4-
<div>Using {{ version }}</div>
4+
5+
<p class="title">
6+
Context
7+
</p>
8+
<p class="subtitle">
9+
using {{ version }}
10+
</p>
511
<div>
612
Computed id: <b>{{ rmrkId }}</b>
713
</div>
@@ -19,8 +25,11 @@
1925
<b-field label="Symbol">
2026
<b-input v-model="rmrkMint.symbol"></b-input>
2127
</b-field>
22-
<b-switch v-model="uploadMode" passive-type="is-dark" type="is-info">
23-
{{ uploadMode ? 'Upload' : 'IPFS hash' }}
28+
<p class="title">
29+
Content
30+
</p>
31+
<b-switch v-model="uploadMode" passive-type="is-dark">
32+
{{ uploadMode ? 'Upload through KodaDot' : 'IPFS hash of your content' }}
2433
</b-switch>
2534
<template v-if="uploadMode">
2635
<b-field label="Description">
@@ -31,7 +40,7 @@
3140
></b-input>
3241
</b-field>
3342
<MetadataUpload v-model="image" />
34-
<b-field label="Image data">
43+
<b-field label="Multimedia data">
3544
<b-input v-model="meta.image_data"></b-input>
3645
</b-field>
3746
</template>
@@ -47,7 +56,7 @@
4756
:disabled="disabled"
4857
:loading="isLoading"
4958
>
50-
Submit
59+
Create Collection
5160
</b-button>
5261
</div>
5362
</template>

‎dashboard/src/components/rmrk/Create/MetadataUpload.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<b-upload v-model="file" class="file-label">
44
<span class="file-cta">
55
<b-icon class="file-icon" icon="file-image"></b-icon>
6-
<span class="file-label">Click to add Image</span>
6+
<span class="file-label">Add Multimedia</span>
77
</span>
88
<span class="file-name" v-if="file">
99
{{ file.name }}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,21 @@
2626
:src="nft.image"
2727
alt="Simple image"
2828
ratio="1by1"
29-
rounded
3029
></b-image>
3130
</div>
3231

3332
<div v-else class="card-image">
3433
<b-image
35-
:src="require('@/utils/placeholder.png')"
34+
:src="require('@/assets/kodadot_logo_v1_transparent_400px.png')"
3635
alt="Simple image"
3736
ratio="1by1"
3837
rounded
3938
></b-image>
4039
</div>
4140

4241
<div class="card-content">
43-
<p class="subtitle is-6">{{ nft.collection }}</p>
4442
<p class="title is-4">{{ nft.name }}</p>
43+
<p class="subtitle is-6">{{ nft.collection }}</p>
4544
</div>
4645
</router-link>
4746
</div>
@@ -113,8 +112,4 @@ export default class Gallery extends Vue {
113112
.nft-card__owner {
114113
word-break: break-word;
115114
}
116-
.nft-card__index {
117-
font-size: 1.35em;
118-
font-weight: bold;
119-
}
120115
</style>

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

Lines changed: 137 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,132 @@
44
<div class="tile is-6 is-vertical is-parent">
55
<div class="tile is-child box">
66
<b-image
7-
:src="nft.image || require('@/utils/placeholder.png')"
7+
:src="nft.image || require('@/assets/kodadot_logo_v1_transparent_400px.png')"
88
alt="Simple image"
99
ratio="1by1"
10-
rounded
1110
></b-image>
11+
<div class="card">
12+
<div class="card-content">
13+
<p class="title">
14+
Legend
15+
</p>
16+
<p class="subtitle is-size-6">
17+
<b># {{ nft.id }}</b>
18+
<b-tag v-if="nft.price" type="is-dark" size="is-medium">
19+
<Money :value="nft.price" :inline="true" />
20+
</b-tag>
21+
<p class="subtitle is-size-6">
22+
{{ nft.description }}
23+
</p>
24+
<!-- <p><a :href="nft.external_url" >View it on RMRK.app</a></p> -->
25+
</p>
26+
</div>
27+
</div>
1228
</div>
1329
</div>
1430

1531
<div class="tile is-vertical is-parent">
16-
<div class="tile is-child">
17-
<p class="title">{{ nft.name }}</p>
18-
<p class="subtitle">In Collection {{ nft.collection }}</p>
19-
<p><b>Owned by: </b>{{ nft.currentOwner }}</p>
20-
</div>
21-
<div class="tile is-child box">
22-
<p class="title is-4"><b>Actions</b></p>
23-
<p class="subtitle is-6"><b>{Coming soon}</b></p>
24-
<AccountSelect label="Account" v-model="accountId" />
25-
<AvailableActions :accountId="accountId" :currentOwnerId="nft.currentOwner" :price="nft.price" :nftId="nft.id" />
32+
<div class="card">
33+
<div class="card-content">
34+
<p class="title">
35+
{{ nft.name }}
36+
</p>
37+
<p class="title is-size-4">
38+
Collection
39+
</p>
40+
<p class="subtitle is-size-6">
41+
{{ nft.collection }}
42+
</p>
43+
<p class="title is-size-4">
44+
Owner
45+
</p>
46+
<p class="subtitle is-size-6">
47+
{{ nft.currentOwner }}
48+
</p>
49+
</div>
2650
</div>
27-
<div class="tile is-child box">
28-
<p class="title">Description</p>
29-
<div class="nft-card__index">
30-
<b># {{ nft.id }}</b>
51+
<br/>
52+
<div class="card">
53+
<div class="card-content">
54+
<p class="title">
55+
Actions
56+
</p>
57+
<p class="subtitle">
58+
<AccountSelect label="Account" v-model="accountId" />
59+
<AvailableActions :accountId="accountId" :currentOwnerId="nft.currentOwner" :price="nft.price" :nftId="nft.id" />
60+
</p>
3161
</div>
32-
<b-tag v-if="nft.price" type="is-dark" size="is-medium">
33-
<Money :value="nft.price" :inline="true" />
34-
</b-tag>
35-
<p class="nft-card__owner"><b>name:</b>{{ nft.name }}</p>
36-
<p class="nft-card__owner">
37-
<b>collection:</b>{{ nft.collection }}
38-
</p>
39-
<p class="nft-card__owner"><b>sn:</b>{{ nft.sn }}</p>
40-
<p class="nft-card__owner"><b>instance:</b>{{ nft.sn }}</p>
41-
<p class="nft-card__owner">
42-
<b>About:</b>{{ nft.description }}
43-
</p>
44-
<p><a :href="nft.external_url" >View it on RMRK.app</a></p>
62+
<footer class="card-footer">
63+
<p class="card-footer-item">
64+
<span>
65+
<a :href="twitterUri">
66+
<b-icon
67+
size="is-large"
68+
pack="fab"
69+
icon="twitter">
70+
</b-icon>
71+
</a>
72+
</span>
73+
</p>
74+
<p class="card-footer-item">
75+
<span>
76+
<a :href="telegramUri">
77+
<b-icon
78+
size="is-large"
79+
pack="fab"
80+
icon="telegram">
81+
</b-icon>
82+
</a>
83+
</span>
84+
</p>
85+
<p class="card-footer-item">
86+
<span>
87+
<a :href="linemeUri">
88+
<b-icon
89+
size="is-large"
90+
pack="fab"
91+
icon="line">
92+
</b-icon>
93+
</a>
94+
</span>
95+
</p>
96+
</footer>
4597
</div>
98+
<br>
99+
100+
101+
<b-collapse class="card" animation="slide"
102+
aria-id="contentIdForA11y3" :open="false">
103+
<template #trigger="props">
104+
<div
105+
class="card-header"
106+
role="button"
107+
aria-controls="contentIdForA11y3">
108+
<p class="card-header-title">
109+
Facts
110+
</p>
111+
<a class="card-header-icon">
112+
<b-icon
113+
:icon="props.open ? 'chevron-down' : 'chevron-up'">
114+
</b-icon>
115+
</a>
116+
</div>
117+
</template>
118+
119+
<div class="card-content">
120+
<div class="content">
121+
<p class="subtitle is-size-6">
122+
<b>COLLECTION:</b>{{ nft.collection }}
123+
</p>
124+
<p class="subtitle is-size-6">
125+
<b>SN:</b>{{ nft.sn }}
126+
</p>
127+
<p class="subtitle is-size-6">
128+
<b>INSTANCE:</b>{{ nft.sn }}
129+
</p>
130+
</div>
131+
</div>
132+
</b-collapse>
46133
</div>
47134
</div>
48135
</div>
@@ -107,7 +194,27 @@ export default class GalleryItem extends Vue {
107194
this.id = this.$route.params.id;
108195
}
109196
}
110-
}
197+
198+
get helloText() {
199+
return 'Check out this cool RMRK NFT'
200+
}
201+
202+
get realworldFullPath() {
203+
return `${window.location.origin}/%23${this.$route.fullPath}`
204+
}
205+
206+
get telegramUri() {
207+
return `tg://msg_url?url=${this.realworldFullPath}&text=${this.helloText}`
208+
}
209+
210+
get twitterUri() {
211+
return `https://twitter.com/intent/tweet?text=${this.helloText}&via=KodaDot&url=${this.realworldFullPath}`
212+
}
213+
214+
get linemeUri() {
215+
return `https://lineit.line.me/share/ui?url=${this.realworldFullPath}&text=${this.helloText}`
216+
}
217+
}
111218
</script>
112219

113220
<style scoped>

‎dashboard/src/icons.ts

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,54 @@
11
import Vue from 'vue';
22

33
import {
4-
faTrash, faKey, faSync, faRedo,
5-
faCloudDownloadAlt, faPlay, faFolderOpen,
6-
faUsers, faAddressBook, faPaperPlane,
7-
faCalendarCheck, faCogs, faEye, faEyeSlash,
8-
faExclamationCircle, faUpload, faCopy, faAngleDoubleLeft,
9-
faAngleDoubleRight, faPlus, faTimes, faCaretDown,
10-
faCaretUp, faMinus, faFile, faBook,
11-
faCodeBranch, faSearch, faQuestionCircle, faExternalLinkAlt,
12-
faArrowUp, faTools, faCheck, faSeedling, faDatabase, faGem,
13-
faInfoCircle, faExchangeAlt, faBug, faStop, faEllipsisV, faPercent,
14-
faUsersCog, faCoins, faAngleLeft, faAngleRight,
15-
faCreditCard, faStepForward, faRing, faDonate, faFileImage,
16-
faPenNib, faImages
4+
// faPlay, faFolderOpen, faAddressBook,
5+
// faCalendarCheck, faCogs, faEyeSlash,
6+
// faExclamationCircle, faAngleDoubleLeft,
7+
// faAngleDoubleRight, faCaretDown,
8+
// faCaretUp, faFile, faBook,
9+
// faCodeBranch, faSearch,
10+
// faArrowUp, faTools, faCheck, faSeedling, faDatabase, faGem,
11+
// faInfoCircle, faExchangeAlt, faBug, faStop, faEllipsisV, faPercent,
12+
// faUsersCog, faCoins, faAngleLeft, faAngleRight,
13+
// faCreditCard, faStepForward, faRing, faDonate,
14+
// faPenNib, faImages,
15+
16+
faPaperPlane, faFileImage, faPlus, faSync, faEye,
17+
faTimes, faCopy, faTrash, faCloudDownloadAlt,
18+
faKey, faExternalLinkAlt, faUpload, faUsers,
19+
faQuestionCircle, faMinus,
20+
faChevronDown, faChevronUp
1721

1822
} from '@fortawesome/free-solid-svg-icons';
1923

2024
// throws error, idk why
2125
// import { faImages } from '@fortawesome/free-regular-svg-icons';
2226

23-
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
27+
import { faTwitter, faLine, faTelegram } from '@fortawesome/free-brands-svg-icons';
2428

2529
import { library } from '@fortawesome/fontawesome-svg-core';
2630

27-
library.add(faTrash, faKey, faSync, faRedo,
28-
faCloudDownloadAlt, faPlay, faFolderOpen,
29-
faUsers, faAddressBook, faPaperPlane,
30-
faCalendarCheck, faCogs, faEye, faEyeSlash,
31-
faExclamationCircle, faUpload, faCopy, faAngleDoubleLeft,
32-
faAngleDoubleRight, faPlus, faTimes, faCaretDown,
33-
faCaretUp, faMinus, faFile, faBook,
34-
faCodeBranch, faSearch, faQuestionCircle, faExternalLinkAlt,
35-
faTwitter, faArrowUp, faTools, faCheck, faSeedling,
36-
faDatabase, faGem, faInfoCircle, faExchangeAlt,
37-
faBug, faStop, faEllipsisV, faPercent, faUsersCog, faCoins,
38-
faAngleLeft, faAngleRight, faCreditCard, faStepForward, faRing,
39-
faDonate, faFileImage, faPenNib, faImages
31+
library.add(
32+
// faTrash, faKey, faSync, faRedo,
33+
// faCloudDownloadAlt, faPlay, faFolderOpen,
34+
// faUsers, faAddressBook, faPaperPlane,
35+
// faCalendarCheck, faCogs, faEye, faEyeSlash,
36+
// faExclamationCircle, faUpload, faCopy, faAngleDoubleLeft,
37+
// faAngleDoubleRight, faPlus, faTimes, faCaretDown,
38+
// faCaretUp, faMinus, faFile, faBook,
39+
// faCodeBranch, faSearch, faQuestionCircle, faExternalLinkAlt,
40+
// faTwitter, faArrowUp, faTools, faCheck, faSeedling,
41+
// faDatabase, faGem, faInfoCircle, faExchangeAlt,
42+
// faBug, faStop, faEllipsisV, faPercent, faUsersCog, faCoins,
43+
// faAngleLeft, faAngleRight, faCreditCard, faStepForward, faRing,
44+
// faDonate, faFileImage, faPenNib, faImages, faLine
45+
46+
faPaperPlane, faFileImage, faPlus, faSync, faEye,
47+
faTimes, faCopy, faTrash, faCloudDownloadAlt,
48+
faKey, faExternalLinkAlt, faUpload, faUsers,
49+
faQuestionCircle, faMinus,
50+
faChevronDown, faChevronUp,
51+
faTwitter, faTelegram, faLine
4052
);
4153

4254
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

0 commit comments

Comments
 (0)