-
-
Notifications
You must be signed in to change notification settings - Fork 351
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
Redesign Gallery item #4111
Comments
This looks so cool. Will be great to see it in production 🎉 |
some feedback:
I would like to see when Click on Avatar (Identicon) it will copy address & link address to user profile
I would have put "Report NFT" in more actions menu (...) and put it on far right after "Share" button
What kind of animation? can we see it rendered on Figma?
Currently not implemented (% indexer)
I would rename it "Activity"
This one can be tricky, first implementation was not great
Some missing stuff:
|
I have added a link for the Figma - beginning of the @yangwao commentThanks for the feedback @roiLeo
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.
I will closely describe it in the guide, but if you run the main frame prototype you should see that. ¨
done
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 |
Update in Figma file: Dark mode UI
done |
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 :) |
let's go~ while I am still reading the requirements, this is to prepare the new layout on the gallery item |
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...
|
No worries, i believe we can add it with full screen view into the v1.1 and also once we have some more feedback. |
Feedback is still welcome, and features request is being frozen for this There are some leftovers for tasks, if anyone is looking to grab something. |
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. |
If there is not anything else outstanding, except I would love to
|
Continue to |
unpin |
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
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.
![telegram-cloud-photo-size-4-5922397127227587100-y](https://user-images.githubusercontent.com/5887929/195130585-326d163f-8d8c-4314-be66-1ae1561d12d4.jpg)
Figma
File summary
short.mp4
Buttons and others
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
Actions Buy & Offer
Animation
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
Not listed NFT UI
Same as above skipping option for buy and not showing price.
Showing ofcourse offer if there will be one
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 :)
Listed NFT owner UI
Change price and transfer, both with the same animation, expanding to the left and confirming the message/your input.
![image](https://user-images.githubusercontent.com/90852205/195855300-a727525b-7c69-4eb1-a532-421f9e9cdc25.png)
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
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...
![image](https://user-images.githubusercontent.com/90852205/195859098-69a854f5-d6ac-441f-8267-a271a494e6b0.png)
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
.The text was updated successfully, but these errors were encountered: