Please login or register.

GUI redesign

What

Bring the designs made by knueffelbund to life.

Dark scheme:

Light scheme:


  • A fresh change of colors
  • Color scheme switching (dark/light)
  • Make small modifications to the GUI that improve UX

I've already started, this is what I have working right now: Image | GitHub PR

Who

I have 6+ yrs of professional experience of various kinds of coding - mostly back-end (Postgres/Python) for high-traffic websites.

I've only been active in the Monero community for 2 months, my contributions thus far has been:

  • a small guide on how to get started as an UX/QT contributor: link
  • increasing the market cap. by converting my dogecoin into monero ^_^

Why

I love the fundamentals of Monero and want to get more involved. I believe in the project and the development team behind it. For me personally, contributing to Monero is satisfying and exciting.

As Monero grows in terms of user base and technical functionality, a good looking/working wallet is important. The wallet we currently have works, but I believe the changes proposed in the above designs will make it more responsive, more user-friendly and overall has a more professional feel to it.


In the past, there have been 3 UI proposals:

  • https://github.com/monero-project/monero-core/issues/419
  • https://github.com/monero-project/monero-core/issues/869
  • https://github.com/monero-project/monero-core/issues/949

Of which I decided to pick-up #949:

  • Most trivial to implement for the short-term.
  • A black look embodies the Monero philosophy; stealth/privacy

The Proposal and Milestones

Rate

Hourly pay: 0.2 xmr (~$25)

14-26 hours per week. My estimation is at least 2 months of work.

Total: 25 XMR (a percentage goes to the designer and anyone that contributes in the development, based on hours worked)

Payments: 4 milestone payments of 6.25 XMR each

Milestone #1

  • ~~Implement menu section~~ (done)
  • Implement titlebar (almost done)
    • dynamic height based on window size
  • Implement UI components: input boxes, buttons, combo-boxes
    • input boxes with buttons in them

Milestone #2

  • Implement transactions (history) page: image
    • New design, filtering panel
  • Network-status section (below the menu)
  • Refactoring existing QML code as I go

Milestone #3

  • Color scheme switching functionality
  • Implement the introduction dialogs (wallet creation) + other various dialogs/pop-ups

Milestone #4

  • Testing existing responsive layout for mobile
  • Making sure my branch is ready for release
Replies: 14
gummiworm4 posted 6 years ago Weight: 0 | Link [ - ]

I would like to work with you. I need help in some designs I'm integrating.. Please email me at: abew1985 AT phenetics DOT com. Thanks for your interests,

monerowallet posted 6 years ago Weight: 0 | Link [ - ]

dsc has been active on IRC and making great progress.

I would be happy to help fund this proposal.

Gingeropolous edited 6 years ago Weight: 0 | Link [ - ]

in general, I am concerned about an ever evolving feature set for monero. I mean, subaddress came out of nowhere. Well, not nowhere, but this element was never even considered in the original design.

I guess my point is we need to find a way to make the GUI adaptable to added features without complete rehauls everytime someone thinks of something cool

jamieson4399 posted 6 years ago Weight: 0 | Link [ - ]

Will support

dsc edited 6 years ago Weight: 0 | Link [ - ]

Hey guys,

I completed milestone #2. The history page took some time, but it looks good now. There are loads of improvement over the old(er) history page. Here's a list of what I worked on:

  • Transactions (history) page
    • Implement design
    • Responsive (for mobile)
    • Hover text effect : left-click = copy value
      • address/tx id/payment id/fee is now directly copyable
    • Replaced the old "Details" button with a ?
    • Truncated XMR amounts
      • 1.2346430000 XMR becomes 1.234643
    • Truncated addresses
      • Since addresses don't fit on the page, I've used the first and last 6 characters; so the user may more quickly verify the integrity of the address. When the full version is required; it may be copied or the details pop-up window may be opened.
    • Sort on Block height/date
      • Can add more here - will need to check later what makes sense
    • Modified the Datepicker QML component
      • Restyled for black theme
      • Responsive with a window resize
    • Filtering does not require you to push a button anymore; it happens dynamically
  • Addressbook
    • Restyled for black theme
    • Made text boxes for address/description/payment id read-only
  • Misc. changes
    • Changed input fields header/label font to 14px+bold, looks better.
    • Changed the height of the input fields / dropdown
      • previously there was a bug with my new multi-line inputboxes where the margins were buggy; fixed that.
    • Changing password from within the GUI now works (can be done on the settings page) (thx stoffu)
    • "View-only" text in the balance card when using a view only wallet (thx Timo614)

For Milestone #3; I'm adding:

  • Subaddresses on the 'Receive' panel
    • Originally made by Kenshi84; I plan to continue on his work
  • Merchant panel
    • Move the merchant part of the 'Receive' panel into it's own panel, called Merchant. This would be located as a sub-menu item under "Receive".
    • This panel would include: "Amount to receive" / "No transactions found thingy" / QR code
    • The Receive panel would then only include the receiving address and the subaddresses section

All in all, things are going well - the GUI is beginning to look like what was designed and I'm positive this is an improvement over the old (current). I'm also trying to make a Jan. deadline.

My progress can be observed in the github issue.

scoobybejesus posted 6 years ago Weight: 0 | Link [ - ]

This individual is hopeful the work will be completed in time for the next release (despite the two month time budget). He’ll work on it anyway, but I vote we fund this to incentive him to crush it in time for the next release. The work looks great, after all.

scoobybejesus posted 6 years ago Weight: 0 | Link [ - ]

This individual is hopeful the work will be completed in time for the next release (despite the two month time budget). He’ll work on it anyway, but I vote we fund this to incentive him to crush it in time for the next release. The work looks great, after all.

dsc edited 6 years ago Weight: 0 | Link [ - ]

Hi guys,

Managed to finish the theme for the new 0.12 release. Hope you all like it.

dsc edited 6 years ago Weight: 0 | Link [ - ]

Hey guys,

First of all, thanks for your contribution(s). It's very appreciated.

For the past 3 weeks I've worked hard, making steady progress on the re-design. I post WIP pictures on GitHub every once in a while, so give that a visit if you want to visually see how I'm progressing. I'm trying to make the end of December as a deadline but it's going to be hard for sure.

Ill be present at CCC in Leipzig, if you wish to see this in action come give the Monero assembly visit - love to tell you all about it.

Again, thanks for the support and ill make sure to deliver a nice looking GUI, I owe the community my full focus :)

dsc edited 6 years ago Weight: 0 | Link [ - ]

Hey guys,

I completed milestone #1. I've worked closely with kneuffelbund, the designer and have managed to implement the following:

  • Added custom font "SFUIDisplay"
  • Redesigned the left panel
    • Re-done & improved menu buttons
    • Background gradient
    • Balance card
    • Hide 'balance' when it is 0 (shows only unlocked balance)
    • hover mouse pointer style for the menu buttons
    • menu button gradients
    • menu button arrow icon(s)
    • increased left panel width
  • Redesigned titlebar
    • new monero logo
    • new minimize/expand/close icons
    • gradient background
  • Line inputs
    • Added QML component LineEditMulti for multi-line text
    • Added support for an inline icon (left side)
    • Added support for an inline button (right side)
    • Added support for a inputbox label
    • Added support for a button in the inputbox label
    • inputbox error state: red border
  • Dropdowns
    • Changed colors/fonts
  • Checkboxes
    • Change padding, color, font and size
    • Replaced the checked icon .png with a new one
  • Refactoring of existing javascript/qml
    • Did small stuff here and there, such as changing == to ===. Normalized some QML variable names. This is an on-going process
  • Responsiveness and UX
    • The relevant input boxes that are often CTRL-C'd (copied) now have a dedicated copy button.
    • Gave components that are clickable 'mouse pointer' styles, so it's more apparent you may click on them.
    • Faster and more smooth animations for panel switching (when you click a menu button - OutCubic animations).
    • Redesigned the settings page. The individual options should be more logically laid out right now. Should help in understanding which settings/options are available to the user.
  • Network status (bottom left)
    • Redesigned as per new design(s)

Next up for milestone #2:

  • Transactions history panel
  • Address book panel
  • Network Status (completed)

Getting there. Again, thanks for the contributions. My progress can be observed in the github issue.

keatonofthedrake posted 6 years ago Weight: 0 | Link [ - ]

Donated to start the ball rolling! Thanks for working on this!

TheseAreBetterDays posted 6 years ago Weight: 0 | Link [ - ]

Contributed +1

antw081 posted 6 years ago Weight: 0 | Link [ - ]

Donated.

Electricsheep posted 6 years ago Weight: 0 | Link [ - ]

I think it would be useful for newcomers to give some sort of indication as to what the synchronization means / is doing. Maybe if you hover over a "?" to the right of network status it shows some dialog explaining. Looks fantastic but mate!