Redesign Gallery item

[yangwao]

We've been working with @exezbcz on the new Gallery Item detail to bring a fresh design to the room.

I'll try briefly describe what will be made

• additional info from Exez was added.

We will go the same way as we did with landing, using ?redesign=true as it turns out to be quite flexible.

I will be going from top left to right bottom.

Figma

• Design File

File summary

• This time it isn't divided into more pages. Components, prototypes, and the main design are on one page. Hopefully, it's not confusing now.
• there are 4 main designs, and each is displaying a different state. As is normal, not listed, owner UI and listed owner UI.
• Next to every main design there are components/designs you will need or that are used in the specific state.
• If you zoom out you will see also the web mobile design. Also with components needed or used.
• If you want to use the prototype as a reference, there is an important thing to know. When you switch the tabs, you cannot control anything else until you switch to the default state of the tabs. Or press "R" to restart the prototype. So for example, switching from tab offers to activity. You cannot then switch to another window and play with other interactions - like buy animation, or other buttons (share, more, etc.)

https://user-images.githubusercontent.com/90852205/195850939-b3821f2e-7db6-4f6c-8020-b11b9435ad43.mp4

Buttons and others

• You will encounter a few types of buttons, one type is the actions(buy, make an offer, list, transfer) - I will describe them separately. The other type is a white button, working the same as the top collections selection or navbar selections. In the design you can see them in the top section - more actions, share, dropdown menus, tab selection, time frame selection - all these are these types of buttons.
  • Normal button - for white mode:
    • inactive state - white bg, black text
    • hover - accent light bg and black text
    • active - bg black, white text.
  • Links - links are always blue and if you hover over them, only your cursor changes. Links are for example - collection names, addresses, contracts, etc.

Galery Media card

This stays as it is, I guess; maybe a little refactoring would help here for the future as we plan to extend with various "media" here.

Item Name, Collection name

Collection name is link - blue, hover pointer

Things haven't changed much here, showing name, collection, creator and owner. At Creator and Owner we plan to showing Identicon for now for recognition till we figure out profile pictures Verify badge next to collection is about to come, we can skip that one for now

Misc actions

Right now, we have there Report NFT which could be put there as disabled till we figure out functionality on the background. (+ download) Other actions like Burn, &c are coming there which are not major actions

animation

• More actions when active - drop-down menu with Report NFT and download
  • more actions button should be dark - active state, this is a Figma issue in that you cannot link two states to one action in prototyping.
• Share active.
  • Again, drop down, this time with copy link, QR code, and share on Twitter. The share button should also change itself to black with text/content to white.

Actions Buy & Offer

Animation

• before clicking
  • hover effect - bg changes its color to white
• once you click: the buy button slides left and creates a dialog with a confirmation/ input field. Also, the text in the main button changes to confirm from buy. This whole box behaves similarly, it's composed of a main button and a secondary which is in this case confirmation.

Buying UI

Price will be shown in assets which item is listed, so for example Basilisk will future could list NFT in aUSD. Next to it will be shown denomination in USD Buy button will have an animation to confirm the trigger buying event. Make Offer will be available right now on Basilisk only. On click it will roll input with amount to enter and submit Offer for NFT

• in more actions: Report NFT, Download

  Not listed NFT UI

  Same as above skipping option for buy and not showing price. Showing ofcourse offer if there will be one

• In more actions: report NFT and download

Owner of NFT UI

There will be buttons LIST and Transfer. List will roll input for inputting address. Mind validation for right ss58 address per chain. This might in future change as we plan to route NFT on other chains later on :)

• in more actions: Download, burn

Listed NFT owner UI

Change price and transfer, both with the same animation, expanding to the left and confirming the message/your input.

• in more a actions: Download, Burn, Delist

Properties

We will be making ranking out of traits, there is issue already for that on Click iirc, can link it later We would like embrace openrarity so can link on issue for that as well to be data available Next there will be table with columns like Traits, Section, and Percentage. Percentage will be calculated of amount of total NFTs from collection having this trait. We will add this to indexer

• animation similar to search bar results, when hovering the line bg changes to accentlight2.

Description

Same as before, pull the description of NFT

Details

Contract address will be shown on EVM chains like GLMR & MOVR only iirc. Creator should be contract creator (will check this one) Blockchain is obvious where NFT is located right now. Options Kusama, Basilisk, MoonRiver, MoonBeam, Astar Token Standart -- RMRKv1, RMRKv2, Basilisk NFT, ERC721, ERC1155, ink!PS34, ink!PS1155, Royalties -- obvious, I guess right now we will be showing this just on Basilisk Media -- .png,.jpeg,.SVG,.onchain, ... Metadata -- .json

Offers

This would actually work only on Basilisk, as there support for offers. We will show all offers on particular NFT. Columns like we have in current offers. It has a column price in assets; this will be in future multi-currency. Price in asset, in future, can be KSM, BSX, aUSD and so on USD denomination of those assets... this will be tricky as there might be assets which are not always will be traded.. we will need figure out write wrapper probably for this one Floor Differences will be query which will check against floor of current collection and calculate if offer is above or below from nominal floor Expiration of offer in relative time, like hours, days, weeks, months From would show the address with resolver for identity on top of the address

Item Activity

An important one, it's coming. Instead of dropdown, we plan to have selecting boxes, where multi-checkbox is possible. So for example you could see Listings and Sales at once. Default could be Sales. Event column would be name of events Price column would be denominated in that asset From column address Date will be relative date with possibility hover to get exact date

Listings

Will show all listed NFTs across current collection. On click BUY will trigger a buy event on NFT from same collection

Chart

Chart... On the top right, you can choose from time range ALL, 14 days, 30 days, 90 days. Default 90 days When hovering over one point in the chart, there is a popup with additional info, and the point itself changes into a white fill main color stroke. The components needed are under the chart in Figma.

Recommended For You

This will be revamping of old passion feed we previously had, yet we had torn it down for a reason it has not worked correctly. Plans are it will be working like a passion feed with the way we would like to recommend based on users' ownership. Goal is to recommend items from artists you already own as it might have a taste you might like

More From This Collection

This is obviously one showing NFTs from the same collection as we currently have, hopefully, we won't break anything here on the way there

Hope I described it all, @exezbcz will correct some stuff where I forgot some stuff. Let's see, drop questions:)

Tasks

Let's try to unify our GalleryItem component. currently, we have multiple GalleryItem components in each chain. and make sure to try to use composition API and put base components using histoire.

• [x] #4228
• [x] #4229
• [x] #4230
• [x] #4231
• [x] #4232
• [x] #4233
• [x] #4234
• [x] #4235

[spacesmutje]

This looks so cool. Will be great to see it in production 🎉

[roiLeo]

some feedback:

Item Name, Collection name

I would like to see when Click on Avatar (Identicon) it will copy address & link address to user profile

Misc actions

I would have put "Report NFT" in more actions menu (...) and put it on far right after "Share" button No need to show disabled features I find it's a bad pattern

Buying

What kind of animation? can we see it rendered on Figma?

Properties

Currently not implemented (% indexer)

Item Activity

I would rename it "Activity"

Recommended For You

This one can be tricky, first implementation was not great

Hope I described it all, @exezbcz will correct some stuff where I forgot some stuff. Let's see, drop questions:)

Some missing stuff:

• full screen view
• download button
• QR code?
• emotes for RMRK
• user balance

[exezbcz]

I have added a link for the Figma - beginning of the @yangwao comment

Thanks for the feedback @roiLeo

I would have put "Report NFT" in more actions menu (...) and put it on far right after "Share" button No need to show disabled features I find it's a bad pattern

Not sure if I understand that correctly but by default the report button isn't there. Its right after you click the more actions. If we won't have the report button till the launch, there is still a newly added download button.

What kind of animation? can we see it rendered on Figma?

I will closely describe it in the guide, but if you run the main frame prototype you should see that. ¨

I would rename it "Activity"

done

Some missing stuff: full screen view download button QR code? emotes for RMRK user balance

We dropped full-screen view. The download button is now in more actions. The qr code is in the share dropdown. Emotes - not in the redesign yet. User balance - moved to the nav bar - see #3946

[exezbcz]

Update in Figma file: Dark mode UI

• design guide soon

done

[yangwao]

Hey, I guess starting at least giving a layout so others can start working on that would be doable; I've chatted quickly with @preschian & @Jarsen136.

I guess starting with some section per issue would be great.

I or @preschian can create issues, and let's go from here :)

[preschian]

let's go~

while I am still reading the requirements, this is to prepare the new layout on the gallery item

• https://github.com/kodadot/nft-gallery/pull/4224

[roiLeo]

Hey @exezbcz can we redesign emojis box too? (on RMRK)

I don't see on Figma where the emojis/reactions will be displayed, it would be a shame to remove this feature

EDIT: forgot you already answered...

Emotes - not in the redesign yet.

[exezbcz]

Hey @exezbcz can we redesign emojis box too? (on RMRK)

I don't see on Figma where the emojis/reactions will be displayed, it would be a shame to remove this feature

EDIT: forgot you already answered...

Emotes - not in the redesign yet.

No worries, i believe we can add it with full screen view into the v1.1 and also once we have some more feedback.

[yangwao]

Feedback is still welcome, and features request is being frozen for this

• https://github.com/kodadot/nft-gallery/issues/4403

There are some leftovers for tasks, if anyone is looking to grab something.

• [ ] #4229
• [ ] #4231
• [ ] #4233
• [ ] #4234
• [ ] #4235

[preschian]

hi @exezbcz, since we use bold for some hover effects. maybe it could be better if we use uniwidth fonts https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7. to avoid glitches on hover effects

currently glitches under Explore menu and in the footer menus

[exezbcz]

hi @exezbcz, since we use bold for some hover effects. maybe it could be better if we use uniwidth fonts https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7. to avoid glitches on hover effects

currently glitches under Explore menu and in the footer menus

makes perfect sense. The issue is that there aren't many typefaces that support this, or they don't fit the design. Please correct me if I'm wrong. I was recently attempting to remove the bold hover effect. We'll most likely replace it with a grey hover - new issue #4456 - this also could be pushed into explore dropdown. As a result, we won't have any strange glitches.

[yangwao]

If there is not anything else outstanding, except

• 4231

I would love to

• vote close it
• unpin it
• pin #4231

[yangwao]

Continue to

• 4231

[yangwao]

unpin