Align list displays with SectionList (UI consistency) #4621

jacogr · 2017-02-21T09:36:07Z

derhuerst · 2017-02-21T13:37:01Z

Not sure I agree with the UX. But that aside, it lags significantly on my laptop.

MacBook Pro (Retina, 13-inch, Early 2015)
Chromium 56.0.2890.0 (64-bit)

jacogr · 2017-02-21T14:08:46Z

Transitions. Great feedback, will remove those.

derhuerst · 2017-02-21T14:17:14Z

Also, consider that there won't necessarily be mouse support (hover) on all clients. It's uncommon among devs, but I can imagine people that want to use the UI on their Surface with touch.

ngotchac

Few comments. One thing that must be fixed (the tags not working properly).

On last comment : when hovering a line of Accounts (for example) where the number of item is less than the max (eg. 2), even if the mouse is not over an Account, there will be some transformation/animation going on. This is a bit misleading.

ngotchac · 2017-02-24T09:42:41Z

js/src/ui/Container/container.css

@@ -48,7 +51,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);

    .hoverOverlay {
      background: $backgroundHover;
-      transform: scale(1, 1);
+      /*transform: scale(1, 1);*/


Shouldn't they be removed ? (The commented out properties)

I left it in on purpose - want to revisit the actual animations, so need guidance as to what it was. (There are a couple)

ngotchac · 2017-02-24T09:47:14Z

js/src/ui/DappCard/dappCard.js

+
+    return app.url === 'web'
+      ? '/web'
+      : `/app/${app.id}`;


Can't we have this piece of logic somewhere else where it could be accessible from every component? I can imagine that it could be useful to have an easy access to this function.

Sure, logged as https://github.com/ethcore/parity/issues/4660

ngotchac · 2017-02-24T09:49:45Z

js/src/ui/SectionList/sectionList.css

      opacity: 0.85;
      padding: 0.25em;
-      transition: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
+      /* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
+      transform: translateZ(0);


ngotchac · 2017-02-24T09:53:44Z

js/src/views/Accounts/Summary/summary.js

+        <Tags
+          className={ styles.tags }
+          tags={ tags }
+          handleAddSearchToken={ handleAddSearchToken }


This doesn't seem to work (cannot click on Tags anymore to add them to the Search)

Ummm.... Not intended :)

ngotchac · 2017-02-24T09:59:51Z

js/src/views/Accounts/Summary/summary.js

+                <div
+                  data-tip
+                  data-for={ `owner_${owner.address}` }
+                  data-effect='solid'


What are these for again ?

You added them :) It is actually quite nice, shows the name info on hover. (Have it on my todos to replication for Vaults)

Ah, right (well it's part of react-tooltip)

ngotchac · 2017-02-24T10:02:24Z

js/src/views/Application/Container/container.js

@@ -33,7 +33,10 @@ export default class Container extends Component {
    const { children, onCloseFirstRun, showFirstRun, upgradeStore } = this.props;

    return (
-      <ParityBackground className={ styles.container }>
+      <ParityBackground
+        attachDocument


I'm not sure we want this (at least not for every single dapp). Some dapp devs might built their app thinking that the background would be white. There is actually one example of this on Ropsten, which is just some text, black. If the Parity Background is black/dark, the dapp won't render correctly.

Good point. Will make the iframe bg white.

Fixed. (iframe bg white)

ngotchac · 2017-02-24T13:23:19Z

Looks good, only last point remaining:

when hovering a line of Accounts (for example) where the number of item is less than the max (eg. 2), even if the mouse is not over an Account, there is an transformation/animation going on

jacogr · 2017-02-24T13:28:44Z

Not going to fix that, it actually is part of the SectionList component - feel free to give it a stab, but it is maybe annoying, but really not anywhere near the critical path, so I'm not considering it.

I have discussed this - Best work-around I could muster a couple of PRs ago - need to move the unselected sizes down to 29% when hovering the row, keeping it at 33.33% and makes at least Chrome not resize all equally - and then we end up with an issue since overflows start to occur.

Logged, but not addressing here - https://github.com/ethcore/parity/issues/4665

* Added SelectionList component for selections * Use SelectionList in DappPermisions * AddDapps uses SelectionList * Fix AccountCard to consistent height * Convert Signer defaults to SelectionList * Subtle selection border * Convert VaultAccounts to SelectionList * Add tests for SectionList component * Apply scroll fixes from lates commit in #4621 * Remove unneeded logs * Remove extra div, fixing ParityBar overflow

* Add VaultMeta edit dialog * Updated (WIP) * Meta & password edit completed * Added SelectionList component for selections * Use SelectionList in DappPermisions * AddDapps uses SelectionList * Fix AccountCard to consistent height * Convert Signer defaults to SelectionList * Subtle selection border * Display account vault information * Allow invalid addresses to display icons (e.g. vaults) * Display vault on edit meta * Convert VaultAccounts to SelectionList * Allow editing of Vault in meta * Add tests for SectionList component * Add tests for VaultSelector component * Auto-focus description field (aligns with #4657) * Apply scroll fixes from lates commit in #4621 * Remove unneeded logs * Remove extra div, fixing ParityBar overflow * Disable save if password don't match * s/disabled/readOnly/ * string -> bool

* Added SelectionList component for selections * Use SelectionList in DappPermisions * AddDapps uses SelectionList * Fix AccountCard to consistent height * Display type icons in creation dialog * Complimentary colours * Convert Signer defaults to SelectionList * Fix Geth import - actually pass addresses through * Work from addresses returned via RPC * Display actual addresses imported (not selected) * Update tests to cover bug fixed * Prettyfy Geth import * Description on selection actions * SelectionList as entry point * Update failing tests * Subtle selection border * Styling updates for account details * Add ModalBox summary * AddAddress updated * Convert VaultAccounts to SelectionList * Add tests for SectionList component * Add tests for ModalBox component * Re-apply stretch fix * Apply scroll fixes from lates commit in #4621 * Clear name on switch (test in #4652, not pulling in) * Remove refs (cleanup)

* Render Dapps via SectionList * Initial rendering of accounts via SectionList * Width vars * Allow classNames in certifications & tags * Overlay of info on hover * Adjust hover balances * Large owner icons (align with vaults) * Consistent block mined at message * Attach ParityBackground to html * Adjust page padding to align * Lint fixes * Link to different types of addresses * Make content parts clickable only (a within a) * Force Chrome hardware acceleration * Trust the vendors... don't go crazy with transform :) * Use faster & default transitions * Add VaultMeta edit dialog * Updated (WIP) * Meta & password edit completed * Added SelectionList component for selections * Use SelectionList in DappPermisions * AddDapps uses SelectionList * Fix AccountCard to consistent height * Display type icons in creation dialog * Complimentary colours * Convert Signer defaults to SelectionList * Fix Geth import - actually pass addresses through * Work from addresses returned via RPC * Display actual addresses imported (not selected) * Update tests to cover bug fixed * Prettyfy Geth import * Description on selection actions * SelectionList as entry point * Update failing tests * Subtle selection border * Styling updates for account details * Add ModalBox summary * AddAddress updated * Display account vault information * Allow invalid addresses to display icons (e.g. vaults) * Display vault on edit meta * Convert VaultAccounts to SelectionList * Allow editing of Vault in meta * Add tests for SectionList component * Add tests for ModalBox component * Add tests for VaultSelector component * Add vaultsOpened in store * Add ~/ui/Form/VaultSelect * WIP * Fix failing tests * Move account to vault when selected * Fix circular build deps * EditMeta uses Form/VaultSelect * Vault move into meta store (alignment) * Re-apply stretch fix * Display vault in account summary * Add busy indicators to relevant modals * Auto-focus description field (aligns with #4657) * Remove extra container (double scrolling) * Remove unused container style * Apply scroll fixes from lates commit in #4621 * Remove unneeded logs * Remove extra div, fixing ParityBar overflow * Make dapp iframe background white * Stop event propgation on tag click * ChangeVault component (re-usable) * Use ChangeVault component * Pass vaultStores in * Icon highlight colour * Tag-ify vault name display * ChangeVault location * Bothced merge, selector rendering twice * Value can be undefined (no vault) * Close selector on Select bug * Fix toggle botched merge * Update tests * Add Vault Tags to Account Header

jacogr added 12 commits February 20, 2017 11:23

Render Dapps via SectionList

cb9457a

Initial rendering of accounts via SectionList

7f27061

Width vars

2599ae4

Allow classNames in certifications & tags

806e8e9

Overlay of info on hover

6a00c50

Adjust hover balances

dbca85b

Merge branch 'master' into jg-sectionlists

e2e0d66

Large owner icons (align with vaults)

16c7ebb

Consistent block mined at message

c3c1b27

Attach ParityBackground to html

9aab39b

Adjust page padding to align

41b21ee

Lint fixes

be0b81e

jacogr added A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. M7-ui labels Feb 21, 2017

jacogr added 2 commits February 21, 2017 11:42

Link to different types of addresses

c3167a0

Make content parts clickable only (a within a)

94d429f

jacogr added A0-pleasereview 🤓 Pull request needs code review. and removed A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. labels Feb 21, 2017

jacogr added 3 commits February 21, 2017 15:19

Force Chrome hardware acceleration

5ff264c

Trust the vendors... don't go crazy with transform :)

69a4209

Use faster & default transitions

3ad9ec0

This was referenced Feb 23, 2017

Vault Management UI (round 2) #4631

Merged

Vault Management UI (round 3) #4652

Merged

jacogr added 3 commits February 24, 2017 08:53

Merge branch 'master' into jg-sectionlists

afad8f4

Remove extra container (double scrolling)

6682b71

Remove unused container style

d8249c1

jacogr added a commit that referenced this pull request Feb 24, 2017

Apply scroll fixes from lates commit in #4621

93c4eef

ngotchac suggested changes Feb 24, 2017

View reviewed changes

ngotchac added A4-gotissues 💥 Pull request is reviewed and has significant issues which must be addressed. and removed A0-pleasereview 🤓 Pull request needs code review. labels Feb 24, 2017

jacogr mentioned this pull request Feb 24, 2017

Component for web URL redirection #4660

Closed

Make dapp iframe background white

33f7495

jacogr added A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. and removed A4-gotissues 💥 Pull request is reviewed and has significant issues which must be addressed. labels Feb 24, 2017

Stop event propgation on tag click

aeca0e7

jacogr added A0-pleasereview 🤓 Pull request needs code review. and removed A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. labels Feb 24, 2017

ngotchac approved these changes Feb 24, 2017

View reviewed changes

ngotchac added A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. and removed A0-pleasereview 🤓 Pull request needs code review. labels Feb 24, 2017

ngotchac added A8-looksgood 🦄 Pull request is reviewed well. and removed A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. labels Feb 24, 2017

jacogr merged commit f670b18 into master Feb 24, 2017

jacogr deleted the jg-sectionlists branch February 24, 2017 14:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Align list displays with SectionList (UI consistency) #4621

Align list displays with SectionList (UI consistency) #4621

jacogr commented Feb 21, 2017 •

edited

Loading

derhuerst commented Feb 21, 2017

jacogr commented Feb 21, 2017

derhuerst commented Feb 21, 2017

ngotchac left a comment

ngotchac Feb 24, 2017

jacogr Feb 24, 2017

ngotchac Feb 24, 2017

jacogr Feb 24, 2017

ngotchac Feb 24, 2017

ngotchac Feb 24, 2017

jacogr Feb 24, 2017

jacogr Feb 24, 2017

ngotchac Feb 24, 2017

jacogr Feb 24, 2017

ngotchac Feb 24, 2017 •

edited

Loading

ngotchac Feb 24, 2017

jacogr Feb 24, 2017

jacogr Feb 24, 2017

ngotchac commented Feb 24, 2017

jacogr commented Feb 24, 2017 •

edited

Loading

Align list displays with SectionList (UI consistency) #4621

Align list displays with SectionList (UI consistency) #4621

Conversation

jacogr commented Feb 21, 2017 • edited Loading

derhuerst commented Feb 21, 2017

jacogr commented Feb 21, 2017

derhuerst commented Feb 21, 2017

ngotchac left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngotchac Feb 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngotchac commented Feb 24, 2017

jacogr commented Feb 24, 2017 • edited Loading

jacogr commented Feb 21, 2017 •

edited

Loading

ngotchac Feb 24, 2017 •

edited

Loading

jacogr commented Feb 24, 2017 •

edited

Loading