QML-based GUI development

[layters]

Details

Update: I will be working on the GUI on my own from now on with technical support from yuriio whenever he's free and willing to lend a hand.

Todo

• [x] Product page
• [ ] Cart page (redesign)
• [ ] Order checkout page
• [ ] Seller Hub/Dashboard page
• [ ] Account page
• [ ] Orders page
• [x] User Profile page
• [x] Messages page

The only thing I struggle with is making certain components visible, anchoring/positioning, making the ScrollView work properly (often a PITA), and knowing which QML Component Types are suitable for my needs. That's where I'd like some help in.

After the front-end and GUI is completed, I will release the project for beta testing on the front-end only. Then later on I will create a second release containing both the front-end and the back-end.

GUI Structure/Hierarchy:

CartPage.qml
|_ items/product images
|_ name
|_ quantity
|_ unit price
|_ total/subtotal
|_ delete button (trash icon button)

** 10 is the max unique items carts can hold **

MessagesPage.qml
|_ inbox
    |_ read
    |_ unread 

SellersHubPage.qml
|_ dashboard containing sales-related statistics
|_ list item
|_ delist item  
|_ manage stock
|_ sales stats

CatalogPage.qml
|_ filter box:
    |_ condition (new, used, etc.), 
    |_ price
    |_ material
    |_ color
    |_ size
    |_ popularity
    |_ count (number of items that match the filter tags)
|_ sort by
    |_ latest (or most recent)
    |_ oldest
    |_ alphabetical order
    |_ low to high price
    |_ high to low price
|_ view toggle
    |_ grid view (default)
    |_ list view
|_ page results count (total number of results)

ProductPage.qml
|_ product image
|_ product name
|_ seller price (sales price)
|_ seller name or id (contains link to seller's profile)
|_ product description and specs
|_ buttons (buy, chat, rate)
|_ quantity spinbox
|_ add to cart button
|_ product reviews/ratings

SettingsDialog.qml
|_ general settings tab
    |_ theme
        |_ appearance ("PurpleDust", "DefaultDark", "DefaultLight")
    |_ currency 
        |_ preffered local currency (e.g USD)
        |_ show/hide fiat price
        |_ show/hide monero price
    |_ language
    |_ product filter
        |_ show/hide illegal products (illegal products will be hidden by default)
    |_save button (this save button will rewrite the configuration file with the changed settings)

WalletPage.qml
|_ balance (locked and unlocked)
|_ send (transfer)
|_ receive (show addresses and selected address qr and user can set a used/unused/all filter to display specific addresses - this should be a tableview I think)
|_ history (tx history)
|_ wallet settings
    |_ change wallet password
    |_ show seed phrase (requires password in order to be displayed)
|_ block explorer
    |_ xmrchain.net

OrderPage.qml
|_ my orders
|_ customer orders (only displayed if you are a seller)

AccountSettingsPage.qml
|_ convert to/revert from seller (this may not be needed as all users are both buyers and sellers by default)
|_ upload/remove avatar, (name cannot be changed in order to reduce scams from sellers)
|_ my favorites
|_ my reviews
|_ delete account
|_ logout

OrderCheckoutPage
|_ choose payment method (xmr)
|_ choose payment transfer method (direct pay or escrow)
|_ choose delivery method (delivery or pick-up)
|_ shipping method - only displayed if "delivery" is selected (USPS, FedEx, UPS, etc.)
|_ delivery address (will be encrypted)
|_ order summary

main.qml:
Header
|_ search bar and button
|_ navigational bar

Footer
|_ show XMR/USD rate
|_ show available updates
|_ monero wallet daemon sync status (progressbar - orange)
|_ neroshop daemon sync status (progressbar - purple)
|_ configuration settings - load from settings.lua
|_ tor settings?
|_ theme switcher

HomePage.qml
|_ homepage_banner -
        show featured products
        recent news from reddit, revuo monero newsletter
        BUY monero Now promotional messages with links to official website
        feature monerochan and other artworks
|_ other sections -
        recently listed products
        deals and discounted products
        recommendations

Example GUI Templates:

Seller Profile:

[rnayabed]

I have created the ProductPage.qml, and can also work on the other ones.

Result:

How to avail the bounty? What should I do from here?

[layters]

It looks good so far. You seem to be on the right track. Do you think you can add a section for user product reviews/ratings at the bottom of the page, maybe inside of a scrollview?

As for the bounty reward, what payment method do your prefer? I can send it to a cryptocurrency address of yours or pay you through cashapp (if you have one)