-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TAS-1062]💄 Add ISCN edit bar to the /new page #438
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
<template> | ||
<div | ||
:class="[ | ||
'flex', | ||
'justify-end', | ||
'items-center', | ||
'w-full', | ||
'pt-[24px]', | ||
'gap-[8px]', | ||
'lg:pt-0', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If the padding-top is depends on parent, please inject it in parent There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
]" | ||
> | ||
<div | ||
v-if="isIscnOwner" | ||
class="flex justify-center items-center gap-[4px] mr-[8px]" | ||
> | ||
<Button preset="plain" text="Edit ISCN" @click="handleEdit"> | ||
<template #prepend> | ||
<IconEdit /> | ||
</template> | ||
</Button> | ||
<div class="h-[20px] w-[2px] bg-medium-gray" /> | ||
</div> | ||
<Button | ||
preset="tertiary" | ||
:text="$t('NFTPortal.button.download.iscn')" | ||
@click="handleClickDownload" | ||
> | ||
<template #prepend> | ||
<IconDownload /> | ||
</template> | ||
</Button> | ||
<Button | ||
v-if="isShowMintButton && isNftBook" | ||
preset="secondary" | ||
class="w-full lg:w-auto" | ||
:text="$t('NFTPortal.button.mint.book')" | ||
@click="clickMintNFTBook" | ||
/> | ||
<Button | ||
v-if="isShowMintButton && !isNftBook" | ||
preset="secondary" | ||
class="w-full lg:w-auto" | ||
:to=" | ||
localeLocation({ | ||
name: 'nft-iscn-iscnId', | ||
params: { iscnId: iscnId }, | ||
query: mintQueries, | ||
}) | ||
" | ||
:text="$t('NFTPortal.button.mint')" | ||
/> | ||
<div | ||
v-if="!!classId" | ||
class="flex justify-center items-center p-[4px] rounded-[12px] border-like-cyan-light border-[2px]" | ||
> | ||
<Button | ||
preset="tertiary" | ||
:text="$t('NFTPortal.button.check.nft')" | ||
:href="likerlandNftUrl" | ||
target="_blank" | ||
> | ||
<template #append> | ||
<IconArrowRight /> | ||
</template> | ||
</Button> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { Vue, Component, Prop } from 'vue-property-decorator' | ||
|
||
@Component | ||
export default class IscnEditBar extends Vue { | ||
@Prop({ default: false }) readonly isIscnOwner!: boolean | ||
@Prop({ default: false }) readonly isShowMintButton!: boolean | ||
@Prop({ default: false }) readonly isNftBook!: boolean | ||
@Prop(String) readonly iscnId: string | undefined | ||
@Prop({ default: null }) readonly mintQueries!: any | null | ||
@Prop(String) readonly classId!: string | ||
@Prop(String) readonly likerlandNftUrl!: string | ||
|
||
handleClickDownload() { | ||
this.$emit('click-download', this.iscnId) | ||
} | ||
|
||
handleEdit() { | ||
this.$emit('click-edit', this.iscnId) | ||
} | ||
|
||
handleClickMintNFTBook() { | ||
this.$emit('click-mint-book', this.iscnId) | ||
} | ||
} | ||
</script> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,22 +6,24 @@ | |
<!-- header --> | ||
<IscnFormHeader :step="step" :total-step="4" /> | ||
<!-- guide title --> | ||
<div class="flex items-center justify-between mt-[12px] mb-[28px]"> | ||
<div class="flex items-center justify-start mt-[12px]"> | ||
<Label | ||
align="middle" | ||
:text="$t('IscnUploaded.guide.title')" | ||
class="text-medium-gray" | ||
/> | ||
<Button | ||
preset="plain" | ||
:text="$t('NFTPortal.button.download.iscn')" | ||
@click="handleClickDownload" | ||
> | ||
<template #prepend> | ||
<IconDownload /> | ||
</template> | ||
</Button> | ||
</div> | ||
<IscnEditBar | ||
class="my-[24px]" | ||
:is-iscn-owner="true" | ||
:iscn-id="iscnId" | ||
:is-show-mint-button="true" | ||
:is-nft-book="type === 'Book'" | ||
:should-show-mint-button="true" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is this prop and how is it different from is show mint button above? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
@click-edit="handleEdit" | ||
@click-download="handleClickDownload" | ||
@click-mint-book="clickMintNFTBook" | ||
/> | ||
|
||
<!-- ISCN card --> | ||
<IscnCard | ||
|
@@ -159,7 +161,7 @@ import { Vue, Component, Prop } from 'vue-property-decorator' | |
|
||
import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type' | ||
import { downloadJSON } from '~/utils/misc' | ||
import { BIG_DIPPER_TX_BASE_URL } from '~/constant' | ||
import { BIG_DIPPER_TX_BASE_URL, NFT_BOOK_PRESS_URL } from '~/constant' | ||
import { logTrackerEvent } from '~/utils/logger' | ||
import { copyToClipboard, extractIscnIdPrefix } from '~/utils/ui' | ||
|
||
|
@@ -228,12 +230,27 @@ export default class IscnUploadedInfo extends Vue { | |
} | ||
|
||
handleCopyIscnId() { | ||
logTrackerEvent(this, 'ISCNView', 'CopyISCNID', this.iscnId, 1) | ||
logTrackerEvent(this, 'ISCNUploaded', 'CopyISCNID', this.iscnId, 1) | ||
const iscnIdPrefix = extractIscnIdPrefix(this.iscnId) | ||
if (iscnIdPrefix) { | ||
copyToClipboard(iscnIdPrefix) | ||
this.isOpenCopiedAlert = true | ||
} | ||
} | ||
|
||
clickMintNFTBook() { | ||
logTrackerEvent(this, 'ISCNUploaded', 'RedirectToBookPress', this.iscnId, 1); | ||
window.open(`${NFT_BOOK_PRESS_URL}/mint-nft?iscn_id=${this.iscnId}`, '_blank', 'noopener'); | ||
} | ||
|
||
handleEdit() { | ||
logTrackerEvent(this, 'ISCNUploaded', 'ClickEdit', this.iscnId, 1) | ||
this.$router.replace( | ||
this.localeLocation({ | ||
name: 'edit-iscnId', | ||
params: { iscnId: this.iscnId }, | ||
})!, | ||
) | ||
} | ||
} | ||
</script> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -82,57 +82,19 @@ | |
'lg:px-0', | ||
]" | ||
> | ||
<div | ||
:class="[ | ||
'flex', | ||
'justify-end', | ||
'items-center', | ||
'w-full', | ||
'pt-[24px]', | ||
'gap-[8px]', | ||
'lg:pt-0', | ||
]" | ||
> | ||
<div v-if="isIscnOwner" class="flex justify-center items-center gap-[4px] mr-[8px]"> | ||
<Button preset="plain" text="Edit ISCN" @click="handleEdit"> | ||
<template #prepend> | ||
<IconEdit /> | ||
</template> | ||
</Button> | ||
<div class="h-[20px] w-[2px] bg-medium-gray" /> | ||
</div> | ||
<Button preset="tertiary" :text="$t('NFTPortal.button.download.iscn')" @click="handleClickDownload"> | ||
<template #prepend> | ||
<IconDownload /> | ||
</template> | ||
</Button> | ||
<Button | ||
v-if="isShowMintButton && isNFTBook" | ||
preset="secondary" | ||
class="w-full lg:w-auto" | ||
:text="$t('NFTPortal.button.mint.book')" | ||
@click="clickMintNFTBook" | ||
/> | ||
<Button | ||
v-if="isShowMintButton && !isNFTBook" | ||
preset="secondary" | ||
class="w-full lg:w-auto" | ||
:to="localeLocation({ name: 'nft-iscn-iscnId', params: { iscnId: iscnId }, query: mintQueries })" | ||
:text="$t('NFTPortal.button.mint')" | ||
/> | ||
<div v-if="!!classId" class="flex justify-center items-center p-[4px] rounded-[12px] border-like-cyan-light border-[2px]"> | ||
<Button | ||
preset="tertiary" | ||
:text="$t('NFTPortal.button.check.nft')" | ||
:href="likerlandNftUrl" | ||
target="_blank" | ||
> | ||
<template #append> | ||
<IconArrowRight /> | ||
</template> | ||
</Button> | ||
</div> | ||
</div> | ||
<IscnEditBar | ||
:is-iscn-owner="isIscnOwner" | ||
:iscn-id="iscnId" | ||
:is-show-mint-button="isShowMintButton" | ||
:is-nft-book="isNFTBook" | ||
:mint-queries="mintQueries" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What does this do? Can we just get route query in component instead of passing prop? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
:class-id="classId" | ||
:likerland-nft-url="likerlandNftUrl" | ||
:should-show-mint-button="isShowMintButton" | ||
@click-edit="handleEdit" | ||
@click-download="handleClickDownload" | ||
@click-mint-book="clickMintNFTBook" | ||
/> | ||
<div | ||
:class="[ | ||
'flex', | ||
|
@@ -966,6 +928,7 @@ export default class ViewIscnIdPage extends Vue { | |
} | ||
|
||
handleClickDownload() { | ||
logTrackerEvent(this, 'ISCNView', 'ClickDownload', this.iscnId, 1) | ||
const generateData = { | ||
contentMetadata: { | ||
...this.metadata, | ||
|
@@ -990,6 +953,7 @@ export default class ViewIscnIdPage extends Vue { | |
} | ||
|
||
handleEdit() { | ||
logTrackerEvent(this, 'ISCNView', 'ClickEdit', this.iscnId, 1) | ||
this.$router.replace( | ||
this.localeLocation({ | ||
name: 'edit-iscnId', | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that in /new, the items should be aligned to the center instead of to the right.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💄 Adjust UI of edit bar