App center app details #750

AquiGorka · 2019-04-24T12:31:45Z

As discussed with @bpierre implemented react-remark and set up some rules (might need to add more) for content inside the markdown section.

Added a layout change for larger viewports so that the content uses all the available space:

Medium:

Small:

src/apps/AppCenter/InstalledApps/AppContent.js

sohkai · 2019-04-26T22:50:06Z

Hmm, I think the two-column layout was good as a design but in practice it can lead to some very confusing reading, e.g.

AquiGorka · 2019-04-29T07:47:09Z

cc @dizzypaty on the 2 columns concern raised by @sohkai

dizzypaty · 2019-04-29T13:33:00Z

@AquiGorka , @sohkai , @bpierre

I don't think the two-column layout is a problem, what it's visually unpleasant is that all the different elements are misaligned.

Originally we had more description content (that has now been revised and shorted) so the 2 columns made more sense. I've arranged the sections in 2 columns, but the copy of the Details section can be displayed all in one column. I think this solves the problem. Let me know what you think : )

Figma file

AquiGorka · 2019-04-29T14:51:46Z

@dizzypaty @sohkai where does Package Name link to?

AquiGorka · 2019-04-29T15:08:20Z

Last update:

Large:

Medium:

Small:

Pending:

Package name link

…ports

* Update aragonUI version * AppContent: refactor Viewport to useViewport hook * DaoSettings: refactor Viewport to useViewport hook * AppInstanceLabel: refactor Viewport to useViewport hook * NavigationItem: refactor Viewport to useViewport hook * Preferences: refactor Viewport to useViewport hook * AppInstanceLabel: add react memo to avoid re-renders * DaoSettings: add react memo to avoid re-renders

…n content for larger screens

src/apps/AppCenter/InstalledApps/AppContent.js

bpierre · 2019-04-29T17:44:58Z

src/apps/Settings/DaoSettings.js

    const enableTransactions = !!account && walletNetwork === network.type
    const financeApp = apps.find(({ name }) => name === 'Finance')
    const checksummedDaoAddr =
      daoAddress.address && toChecksumAddress(daoAddress.address)
    const apmApps = apps.filter(app => !app.isAragonOsInternalApp)
+    const { below } = useViewport()


🙆‍♂️

dizzypaty · 2019-04-30T08:21:37Z

@dizzypaty @sohkai where does Package Name link to?

@AquiGorka – about this link, Pierre mentioned that we can either link to GitHub or to Etherscan. At some point we might want to do an Aragon microsite to host this info and present it in a more readable way.

sohkai · 2019-04-30T13:29:08Z

@AquiGorka @dizzypaty We could link to https://etherscan.io/address/voting.aragonpm.eth (replace voting.aragonpm.eth for each name) for now, although its value is questionable (people could verify the deployments if they knew how to read the transactions, but I doubt most people will understand what they're looking at).

AquiGorka · 2019-04-30T13:45:54Z

@sohkai yep, already implemented here, we discussed it with @bpierre and the link goes to the #code section as linking to a list of txs made no sense in this context.

sohkai · 2019-04-30T14:17:48Z

To be fair, the #code doesn't contain much useful information; it will just always show the AppProxy contract. In that aspect, seeing the transactions is actually more useful since you can audit the version publishes if you know what you're looking for.

bpierre · 2019-04-30T14:22:15Z

Do app packages have a homepage? I think it could be nice to point to it rather than having this hardcoded. For aragon-apps, we could keep these URLs pointing to Etherscan for now, then we could have simple app pages to present them, e.g. on aragon.org/apps/finance.

sohkai · 2019-04-30T14:22:51Z

Unfortunately not, Aragon Black may design and implement something like this for aragonPM repos though.

AquiGorka · 2019-04-30T14:26:19Z

Hmmm, then I leave the decision to you @sohkai txs or code, I have no strong opinion on either and we are one commit away from it.

src/apps/AppCenter/InstalledApps/AppContent.js

bpierre

🔥 🔥 🔥

src/components/Markdown/Markdown.js

src/hooks.js

bpierre · 2019-04-30T15:21:21Z

package.json

    "react-blockies": "^1.3.0",
    "react-container-dimensions": "^1.3.3",
-    "react-dom": "^16.8.4",
+    "react-dom": "^16.8.6",


Just to confirm: is this only to align the two versions, or also because the previous versions were causing issues?

Only to align I guess as it was a freebie when npm installing

sohkai

LGTM! Sorry for all the back and forth 🙇!

Co-Authored-By: AquiGorka <gorka@aquigorka.com>

AquiGorka requested review from bpierre and sohkai April 24, 2019 12:32

AquiGorka force-pushed the feature/app-center-app-details branch from be75372 to 1f36c5a Compare April 24, 2019 12:33

AquiGorka mentioned this pull request Apr 25, 2019

Refactor Viewport to useViewport hook (for some components) #753

Merged

luisivan mentioned this pull request Apr 26, 2019

0.7 immediate polish aragonone/product#56

Closed

25 tasks

sohkai reviewed Apr 26, 2019

View reviewed changes

src/apps/AppCenter/InstalledApps/AppContent.js Outdated Show resolved Hide resolved

sohkai reviewed Apr 26, 2019

View reviewed changes

src/apps/AppCenter/InstalledApps/AppContent.js Outdated Show resolved Hide resolved

AquiGorka force-pushed the feature/app-center-app-details branch 2 times, most recently from 7739e40 to 7bfc477 Compare April 26, 2019 12:56

sohkai reviewed Apr 26, 2019

View reviewed changes

src/apps/AppCenter/InstalledApps/AppContent.js Outdated Show resolved Hide resolved

AquiGorka force-pushed the feature/app-center-app-details branch 2 times, most recently from 1e681d8 to 9bec3aa Compare April 29, 2019 08:41

sohkai mentioned this pull request Apr 29, 2019

Update App Center copy aragon/aragon-apps#784

Merged

AquiGorka added 12 commits April 29, 2019 17:11

Add remark deps

2e57f6f

Screenshots: add key to list items

7e5ab46

AppContent: add app details parsed from markdown

b8c3cbf

AppContent: add app details to use all available space in larger view…

ed315f3

…ports

AppContent: add right padding to app details

144e106

AppContent: refactor var name to use camel case

ba0cb7e

AppContent: use details from latest version

2d652f2

AppContent: override links with SafeLinks in markdown

46124bc

AppContent: add two column layout for larger screens

9053c59

Hooks: add usePromise

2e056e2

AppContent: update useEffect to usePromise (which is cancellable)

61fdbc4

AppContent: reorder elements, remove 2 column details and add 2 colum…

0247500

…n content for larger screens

AquiGorka force-pushed the feature/app-center-app-details branch from 4773ce6 to 0247500 Compare April 29, 2019 15:17

bpierre reviewed Apr 29, 2019

View reviewed changes

AquiGorka added 5 commits April 30, 2019 11:10

Markdown: add component

e339ec7

AppContent: refactor details to use markdown component

45e4eb7

Markdown: add react memo

2339896

Hooks: add use repo details hook

3e22e0e

AppContent: update to useRepoDetails hook and refactor links

6b94bc3

AquiGorka force-pushed the feature/app-center-app-details branch from 0f8e07a to 6b94bc3 Compare April 30, 2019 09:12

AquiGorka requested review from bpierre and sohkai April 30, 2019 09:13

sohkai reviewed Apr 30, 2019

View reviewed changes

src/apps/AppCenter/InstalledApps/AppContent.js Outdated Show resolved Hide resolved

AppContent: update repo name link to use block explorer url

fa5a04f

sohkai reviewed Apr 30, 2019

View reviewed changes

src/apps/AppCenter/InstalledApps/AppContent.js Outdated Show resolved Hide resolved

AppContent: use repo address instead of repo name for link

34f7abc

bpierre approved these changes Apr 30, 2019

View reviewed changes

sohkai approved these changes Apr 30, 2019

View reviewed changes

bpierre and others added 4 commits April 30, 2019 17:38

Add li rules to markdown context

2422c82

Co-Authored-By: AquiGorka <gorka@aquigorka.com>

Add focus rules to markdown context

b2e2063

Co-Authored-By: AquiGorka <gorka@aquigorka.com>

useRepoDetails: update error log

966934f

Markdown: fix linter error

e5027d4

AquiGorka merged commit e1ad4a8 into master Apr 30, 2019

AquiGorka deleted the feature/app-center-app-details branch April 30, 2019 15:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App center app details #750

App center app details #750

AquiGorka commented Apr 24, 2019 •

edited

Loading

sohkai commented Apr 26, 2019

AquiGorka commented Apr 29, 2019

dizzypaty commented Apr 29, 2019

AquiGorka commented Apr 29, 2019

AquiGorka commented Apr 29, 2019 •

edited

Loading

bpierre Apr 29, 2019

dizzypaty commented Apr 30, 2019

sohkai commented Apr 30, 2019

AquiGorka commented Apr 30, 2019

sohkai commented Apr 30, 2019

bpierre commented Apr 30, 2019

sohkai commented Apr 30, 2019

AquiGorka commented Apr 30, 2019

bpierre left a comment

bpierre Apr 30, 2019

AquiGorka Apr 30, 2019

sohkai left a comment

App center app details #750

App center app details #750

Conversation

AquiGorka commented Apr 24, 2019 • edited Loading

sohkai commented Apr 26, 2019

AquiGorka commented Apr 29, 2019

dizzypaty commented Apr 29, 2019

AquiGorka commented Apr 29, 2019

AquiGorka commented Apr 29, 2019 • edited Loading

bpierre Apr 29, 2019

Choose a reason for hiding this comment

dizzypaty commented Apr 30, 2019

sohkai commented Apr 30, 2019

AquiGorka commented Apr 30, 2019

sohkai commented Apr 30, 2019

bpierre commented Apr 30, 2019

sohkai commented Apr 30, 2019

AquiGorka commented Apr 30, 2019

bpierre left a comment

Choose a reason for hiding this comment

bpierre Apr 30, 2019

Choose a reason for hiding this comment

AquiGorka Apr 30, 2019

Choose a reason for hiding this comment

sohkai left a comment

Choose a reason for hiding this comment

AquiGorka commented Apr 24, 2019 •

edited

Loading

AquiGorka commented Apr 29, 2019 •

edited

Loading