Author Topic: Reworking the wallet trading interface  (Read 22560 times)

0 Members and 1 Guest are viewing this topic.

Offline valzav

  • Sr. Member
  • ****
  • Posts: 294
    • View Profile
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.

Offline valzav

  • Sr. Member
  • ****
  • Posts: 294
    • View Profile
 +5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Offline svk

Cool .. thanks for the feedback .. much appreciated.

This is the second graph I am talking about:

It allows to define the 'borders' of the bigger plot

Right, that's called the "navigator" in highcharts terminology. Not a fan of that myself really, adds clutter. You can get the same effect through x-axis zooming directly on the plot, like I have on the price chart that I linked above.
Worker: dev.bitsharesblocks

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12922
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BitShares: xeroc
  • GitHub: xeroc
Cool .. thanks for the feedback .. much appreciated.

This is the second graph I am talking about:

It allows to define the 'borders' of the bigger plot

Offline svk

Nice work so far!  +5% +5%

Some suggestions:

- right align all numbers (price and volume) such that in the table all comma separators are aligned
- why is the price history gone? can't you add a button/switch above the plot to switch between orderbook/price history? I think cryptsy is doing it that way
- can I have a zoom function for all plots? You know, the second graph from highchartsJS
- If you are also pimping the JS part: make a double click of an order in the order book an instant "execute+confirm"

Also, what happens on a 4:3 screen?

edit: have you contacted @cass? He had some nice thoughts and templates for a feature reach and nicely looking trading page ..

Not sure right aligning will work but I agree something needs to be done, also need to make the decimals more uniform.

Price history charts are pretty ugly due to a bug in the client giving too big ranges, that should get fixed in 0.7 I believe though. But I just feel it gets too messy with that plot on the same page, I'll try to bring it back through a switch or tab.

Not sure which second graph you mean, I could put in a zoom similar to what you have on bitsharesblocks here: http://bitsharesblocks.com/charts/prices

Currently clicking on a row fills out the bid/ask part, insta-confirm is dangerous imo, I prefer to keep it as is.

On smaller screens things move down etc, it works ok but not as nice of course.

Worker: dev.bitsharesblocks

Offline cass

  • Hero Member
  • *****
  • Posts: 4311
  • /(┬.┬)\
    • View Profile
 +5%  +5% Yesss Sir :)

I'll will ping you for more suggestion later this day
█║▌║║█  - - -  The quieter you become, the more you are able to hear  - - -  █║▌║║█

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12922
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BitShares: xeroc
  • GitHub: xeroc
Nice work so far!  +5% +5%

Some suggestions:

- right align all numbers (price and volume) such that in the table all comma separators are aligned
- why is the price history gone? can't you add a button/switch above the plot to switch between orderbook/price history? I think cryptsy is doing it that way
- can I have a zoom function for all plots? You know, the second graph from highchartsJS
- If you are also pimping the JS part: make a double click of an order in the order book an instant "execute+confirm"

Also, what happens on a 4:3 screen?

edit: have you contacted @cass? He had some nice thoughts and templates for a feature reach and nicely looking trading page ..

Offline svk

I've made some initial progress on reworking the trading interface of the wallet, I would like to get some feedback and for us to do some brainstorming on features. I've used the coinbase interface as inspiration, but due to the complexity of Bitshares trading with shorts/margin calls etc you end up having to display more info resulting in a more cramped interface, so it's hard to get it as nice as theirs.

The biggest changes so far are:
  • Buy/Sell/Short section is now fixed on the left side and always visible
  • The order book is displayed vertically next to the orderbook chart (sorting is weird because of ui-grid table)
  • Open orders for the currently selected tab are displayed immediately below in order to always be visible
  • Removed the price history chart
  • Removed grid lines from plots
  • Open orders other than the currently selected tab shown below the orderbook chart
  • Table headings are now black and bolded instead of grey (this applies elsewhere too, the old one was hardly visible imo)
  • Less paddings and margins to fit everything
Improvements I'd like to make still:
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
- Put daily range, volume etc on top of orderbook chart like on bitsharesblocks
- Unify open order tables to contain buy, sell and shorts
- Split order history and price history chart into separate tab

You can check this out by using the web_wallet in a browser, simply checkout the branch newlayout_market, then follow the standard procedure for running the web wallet.

Here are some screenshots:



Worker: dev.bitsharesblocks