Skip to content
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

feat: different style for names provided by the network & ui fixes #991

Merged
merged 20 commits into from Jan 24, 2019

Conversation

Projects
None yet
4 participants
@dated
Copy link
Contributor

commented Jan 18, 2019

Proposed changes

image

When a wallet or contact has no name assigned, but a name can be retrieved from the network, it is now shown in a different color and a tooltip shows up when hovering the name.

Also fixes some of the issues described in #997:

  • merge wallets and ledger wallets in wallet list and wallet sidebar, so that there are no duplicates in the list
  • respect numerical order when ordering by wallet name (e.g. 1 -> 2 -> 10 instead of 1 -> 10 -> 2)
  • add ledger badge to wallet sidebar

And also:

  • makes the whole wallet/contact card clickable instead of only the identicon and name

Types of changes

  • New feature (non-breaking change which adds functionality)

Checklist

  • I have read the CONTRIBUTING documentation
  • Lint and unit tests pass locally with my changes

dated added some commits Jan 19, 2019

@dated dated changed the title feat: different style for names provided by the network feat: different style for names provided by the network & ui fixes Jan 19, 2019

@dated dated force-pushed the dated:wallet-table-name branch from 466b99b to 6361306 Jan 20, 2019

@j-a-m-l

This comment has been minimized.

Copy link
Contributor

commented Jan 20, 2019

@dated Is this PR finished now?

@j-a-m-l j-a-m-l self-requested a review Jan 20, 2019

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 20, 2019

ready for review, yea :)

@j-a-m-l
Copy link
Contributor

left a comment

I added a delegate as a contact, without a name.

  • In grid view, the name is not used
  • In list view the name is used, with the new style that this PR includes

That doesn't occur with wallets

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 20, 2019

Will be fixed by EOD!

dated added some commits Jan 20, 2019

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 20, 2019

Changing the color of the wallet/contact names in the grid view felt too disruptive, so I opted against that and instead just added the same tooltip as in the grid view when hovering the name. While at it I made the whole card clickable instead of just the identicon and wallet name.

@j-a-m-l

This comment has been minimized.

Copy link
Contributor

commented Jan 21, 2019

Now, everything looks OK, except

  • Making the whole card clickable: I like it, but selecting the balance or name implies clicking accidentally on it, so I wouldn't include this change. What do you think @alexbarnsley @luciorubeens?
  • The create contact card now is misaligned
@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 21, 2019

I fixed the create contact card, making it clickable as a whole as well.

@j-a-m-l

This comment has been minimized.

Copy link
Contributor

commented Jan 21, 2019

@dated On mouse over the links should be underlined.

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 21, 2019

Only when hovering the name like before or when hovering the whole card (this felt a bit off, hence i didn't add the text-decoration)?

@j-a-m-l

This comment has been minimized.

Copy link
Contributor

commented Jan 21, 2019

At least when hovering the names.

When hovering the whole card would be another clue that clicking on it could be used to navigate to the wallet/contact, although I'm not completely sure if it would be the best decision aesthetically and for UX.

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 21, 2019

Alright, I'll do that in a few minutes.

dated added some commits Jan 21, 2019

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 23, 2019

Has this been decided on yet?

@j-a-m-l

This comment has been minimized.

Copy link
Contributor

commented Jan 23, 2019

@alexbarnsley @luciorubeens what's you opinion about #991 (comment) ?

@alexbarnsley
Copy link
Member

left a comment

I think the hover over card works well. I don't think it needs to underline the wallet name. I mean if you really want to fix it, don't make the wallet name clickable on cards 🤷‍♂️

Everything looks good but I have a couple of tweaks:

  • Tooltip on the Ledger "L" icon in the sidebar, so those that don't realise what it is can figure it out
  • Add the Ledger flag on the Wallet cards also

I'm undecided by this one so it's your call:

  • Make the Ledger "L" icon more square

image

New changes asked by Alex

dated added some commits Jan 23, 2019

@dated

This comment has been minimized.

Copy link
Contributor Author

commented Jan 23, 2019

I added/changed the following:

  • removed click event on card name and balance, so they can be highlighted and copied
  • added ledger badge on the wallet cards
  • if sidebar is slim
    • added ledger tooltip
    • made ledger badge square

@alexbarnsley alexbarnsley merged commit 1cb53cb into ArkEcosystem:develop Jan 24, 2019

1 check passed

ci/circleci: test-node-9 Your tests passed on CircleCI!
Details

@dated dated deleted the dated:wallet-table-name branch Jan 24, 2019

luciorubeens added a commit that referenced this pull request Jan 29, 2019

chore: release 2.2.1 (#1041)
* improvement: make wallet heading name more visible in dark mode (#996)

* fix: correctly handle zero balance on wallet heading info (#1000)

* fix: conditional alignment of items (#1005)

* improvement: adjust announcement section to fit new design (#982)

* improvement: new instructions section for wallet import/new and network overview page (#1003)

* improvement: new instructions section for wallet import page
* improvement: new instructions section for wallet new page
* improvement: new instructions section for network overview page

* refactor: new wallet selection styles and ui (#1006)

* fix: do not shake when generating new wallets (#1008)

* refactor: success/error colors and delay on clipboard button tooltip (#1010)

* refactor: success/error colors and delay on clipboard button tooltip

* misc: use tailwind classes


Co-authored-by: Lúcio Rubens <luciorubeens@gmail.com>

* docs: fix and improve the instructions of how to translate the app (#1004)

* feat: adapt the contact creation page to new style (#1012)

* refactor: how to infer which background to use on contact new page

* test: adapt the tests

* misc: include the new background for the contact creation page

* feat: add new design to the contact creation page

* refactor: rename contact creation background from `purse.svg` to `wallet.svg`

* refactor: remove unnecessary delegate api calls (#995)

* refactor: differentiate between wallet and contact rename (#988)

* feat/fix: validation on sign/verify modals & signed messages alignment (#1014)

* feat: validation on sign/verify modals

* misc: add :focus color to input icons

* fix: signed message alignment

* refactor: remove nested if branch

* fix: json validation

* misc: update example json format

* feat: different network name style & add ledger flags (#991)

* feat: different style for names provided by the network

* fix: show only ledger wallet if address is also watch only wallet

* fix: correct sorting by name if numerical

* refactor: ledger badge in wallet sidebar

* fix: show wallet/contact name

* feat: make whole wallet/contact card clickable

* feat: network name tooltip on wallet/contact grid view

* fix: create contact card alignment

* misc: set hover styles to wallet/contact name on card

* fix: network name tooltip condition

* misc: remove wallet/contact name hover classes

* misc: stop click propagation on card name and balance

* misc: ledger badge styles and tooltip

* fix: sidebar truncation length if ledger

* docs: remove the beta warning and collpase list of commands (#1020)

* feat: allow expanding and collapsing the wallet/contact sidebar (#1015)

* fix: inconsistencies between network versions (#1016)

* fix: transaction fees for v1 networks

* chore: update @arkecosystem/client

* fix: store isHttps for current peer in client

* fix: broadcast tx if no other peers

* refactor: rename method to get peer api version

* fix: check config for core-api excluding prefix(es)

* fix: getters return empty array if no peers

* fix: check peer if v2 to update props, not network

* refactor: get /config from wallet to remove header

* fix: only swap ports on refresh if not already

* test: fix by passing peers in as v2 peers not v1

* fix: set tx timestamp based on network epoch

* fix: sending to single peer if broadcast off

* fix: use 3s timeout when broadcasting to peers

* fix: add forged to delegate model (#1017)

* fix: add forged to delegate model

* test: adjust delegate fixtures and tests

* feat: persistent sorting in wallet/contact table (#1002)

* feat: persistent sorting in wallet/contact table

* test: add getter & setter tests

* refactor: replace the profile avatars with a new component `ProfileAvatar` (#1019)

* refactor: extract the `ProfileAvatar` component from the main sidemenu

* refactor: `ProfileAll` to include `ProfileAvatar`

* fix: avoid breaking the layout and displacing links when the profile balance has 8 decimals

* refactor: extract the `ProfileAvatar` component from the main sidemenu

* refactor: `ProfileAll` to include `ProfileAvatar`

* fix: avoid breaking the layout and displacing links when the profile balance has 8 decimals

* refactor: use the `ProfileAvatar` on the wallets page

* refactor: use the `ProfileAvatar` on the remove profile confirmation

* fix: adjust the position of the avatar on wallet page

* fix: importing of profile avatar selection modal component (#1031)

* feat: adapt the contacts page to new design (#1007)

* feat: show contact balance on list layout

* feat: adapt the contacts page to the new style

* refactor: increase padding

* fix: increase the font weight of the "i" badge on contact placeholder

* feat: show contact balance on list layout

* feat: adapt the contacts page to the new style

* refactor: increase padding

* fix: increase the font weight of the "i" badge on contact placeholder


Co-authored-by: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com>
Co-authored-by: Lúcio Rubens <luciorubeens@gmail.com>

* refactor: invert identicon hover behaviour (#1025)

* feat: add sidebar animation (#1021)

* feat: add sidebar animation

* misc: speed up transition

* fix: errors during and after removing profiles (#1033)

* fix: do not fail on the profile creation page when removing the last profile

* fix: do not fail at start due not having an active profile

* test: the profile removal confirmation

* fix: avoid errors when removing a profile

* feat: loading screen when broadcasting to many peers (#1023)

* fix: don't modify modal loader state

* chore: correct ModalLoder name

* feat: ModalLoader emit closed

* feat: show loader on broadcast to many peers

* fix: timeout when getting peer config

* feat: allow close warning message override

* refactor: update close message for slow broadcasting


Co-authored-by: Juan <j-a-m-l@users.noreply.github.com>

* fix: allow selecting the balance on the wallet page heading (#994)

* fix: show "Unvote" action on delegate tab when using Ledger (#1032)

* fix: do not fail when voting with Ledger

* fix: show the "Unvote" button at the bottom of the delegate tab when using Ledger wallets

* refactor: new selection design for the network overview (#1037)

* change instructions image

* refactor: new selection design for the network overview

* fix: broadcasting modal not closing on unvote (#1038)

* chore: update @arkecosystem/client (#1036)

* feat: use network static fees as max (#1022)

* chore: update @arkecosystem/client to 0.1.19

* feat: client method to fetch static fees

* feat: tx store method to update static fees

* feat: update static fees on peer change

* feat: inputFee component use static if available

* test: fix failing

* test: api client service fetchStaticFees

* test: transaction store with static fees

* docs: jsdoc for new methods

* refactor: store fees against network, not profile

* test: refactor to use network not profile

* fix: update fees when changing peer or custom

* chore: update wallet import and networks pages headings (#1039)

* fix: numbers with colon (",") and other formats on the send transfer inputs (#1009)

* chore: bump to 2.2.1 (#1040)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.