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

App Center (read-only) #625

Merged
merged 62 commits into from Apr 14, 2019

Conversation

Projects
None yet
5 participants
@bpierre
Copy link
Member

bpierre commented Feb 20, 2019

App Center

This is a PR implementing the App Center in Aragon. This initial version will only add the possibility to list the installed apps. Future versions will add the possibility to upgrade and install apps (deploy instances).

Status

  • UI
  • Routing.
  • Use real data.

Preview

image

image

image

2019-02-26 02 37 53

image image image image

Grid Unit

In this PR I am experimenting with using a constant to reinforce the grid unit we use for spacing:

import { GU } from '../utils'

const App = () => <div css={`margin: ${GU}px ${4 * GU}px`} />

Another option would be to expose a function:

import { gu } from '../utils'

const App = () => <div css={`margin: ${gu(1)}px ${gu(4)}px`} />

// We could even add `px` by default in that case:

const App = () => <div css={`margin: ${gu(1)} ${gu(4)}`} />

Another solution to make it less verbose could be to extend the way styled-components transforms styles to add a custom syntax:

const App = () => <div css="margin: 1gu 4gu" />

Edit: this discussion has moved to aragon/aragon-ui#333

Local viewport breakpoints

As discussed in aragon/aragon-ui#303, there is no easy solution to get adaptive breakpoints in every container. But in some cases, we could inform Viewport’s within() / above() / below() functions of the space used by our local viewport, and they could act exactly the same way. For example, it is pretty easy to know the width of the menu (it is fixed), and whether it’s currently being displayed or not.

Example with below():

const appViewportBelow = (below, value) => (
  below(value + (below('medium') ? 0 : MENU_PANEL_WIDTH))
)

But because it is outside of Viewport, this temporary solution requires to:

  • Pass the below function.
  • Pass the interpreted value (using breakpoints[name] vs. only passing the name using below(name)).

It could be interesting to see how it could be integrated into below itself:

// Let’s assume this is automatically updated, and is either SIDEBAR_WIDTH
// or 0, depending on whether the sidebar is displayed or not.
import { useSidebarWidth } from './Sidebar'

// as options for below() / above() / within()
const App1 = () => {
  const excludeWidth = useSidebarWidth()
  return (
    <Viewport>
      {({ below }) => (
        below("medium", { excludeWidth: SIDEBAR_WIDTH }) && <span>Small (local) viewport</span>
      )}
    </Viewport>
  )
// as a Viewport prop
const App2 = () => {
  const excludeWidth = useSidebarWidth()
  return (
    <Viewport excludeWidth={SIDEBAR_WIDTH}>
      {({ below }) => (
        below("medium") && <span>Small (local) viewport</span>
      )}
    </Viewport>
  )
}
// We could have both, and the Viewport prop would only define the default
const App3 = () => {
  const excludeWidth = useSidebarWidth()
  return (
    <Viewport excludeWidth={SIDEBAR_WIDTH}>
      {({ below }) => (
        <div>
          {below("medium", { excludeWidth: 0 }) && <span>Small global viewport</span>}
          {below("medium") && <span>Small local viewport</span>}
        </div>
      )}
    </Viewport>
  )
}

Text styles

The idea of creating components/TextStyles is to group there the different text styles that we need so we can reuse them more easily. These styles should eventually end up in aragonUI, but having this directory would make it easier to add styles for a specific project, and have some time to get their name right before deciding to move it.

ZoomableCards

This PR also contains a new component, ZoomableCards (temporary name). This component allows to easily create layouts similar to the Survey app, with cards that can be expanded into a full screen layout composed of the expanded card and an optional sidebar, entering in the screen from the right side (and whose transition starts slightly after). At smaller viewport sizes, the content of the sidebar moves inside the expanded card itself.

The API looks like this (non finalized):

<ZoomableCards
  currentId={openedAppId}
  renderCards={({ card }) => (
    <Grid>
      {apps.map(({ id, name }) =>
        card(
          id,
          <section>
            <h1>{name}</h1>
            <Button mode="strong" onClick={() => this.openApp(id)}>
              Open
            </Button>
          </section>
        )
      )}
    </Grid>
  )}
  renderOpenedCard={({ currentId }) => {
    const app = apps.find(app => app.id === currentId)
    return (
      <div>
        {app.name}
        {currentId}
        <Button mode="strong" onClick={this.closeApp}>
          Close
        </Button>
      </div>
    )
  }}
  renderOpenedAside={({ currentId }) => <div>Sidebar</div>}
/>

Strict objectives for this API:

  • Abstract entirely the geometric calculations.
  • If possible, abstract entirely the passing of references.
  • Give users full control over the (non-expanded) cards layout.
  • Give users full control over the layout inside of the cards.

Other choices made during development:

  • Abstract the cards style: there is no need yet to let users changing it.
  • Abstract entirely the transitions.
  • Everything is declared as a render prop, to keep the components rendered until a fade out transition finishes and for consistency.
  • The sidebar content is declared separately: this one might change as it feels a bit weird to have it separated from the content, but the reason is to avoid anything too verbose on the author’s side.

Discarded design choices:

  • Let users declare components using a set of components (ZoomCard, ZoomCardsGroup and ZoomCardOpened), sharing data between each other using the Context API. This idea has been abandoned because it was given the false idea that ZoomCard and ZoomCardOpened were optional. The API was also feeling too clumsy.

  • Still with the idea of using a set of components: pass the sub components as parameters of a single render prop function. This is not common in React, and has been discarded because having static components have several advantages, like being able to use the css prop of the styled-components transform.

  • Giving full control over every component used, letting users passing the refs to the component using callbacks, and / or letting users define their own transitions, only passing the geometric calculations. This idea has been abandoned for now because it was making things slightly more complicated but there is no use case for it yet.

bpierre added some commits Feb 20, 2019

ZoomableCards: first version
ZoomableCards (temporary name) is a component that allows to easily
create layouts similar to the Survey app, with cards that can be
expanded into a full screen layout composed of the expanded card and an
optional sidebar, entering in the screen from the right side (and whose
transition starts slightly after).

At smaller viewport sizes, the content of the sidebar moves inside the
expanded card itself.

@bpierre bpierre added this to the A1 Sprint: 4.2 milestone Feb 20, 2019

@sohkai sohkai referenced this pull request Feb 27, 2019

Closed

EPIC: App Center v1 #540

@sohkai

This comment has been minimized.

Copy link
Member

sohkai commented Feb 27, 2019

@jounih It seems like we've made a few changes to the design since aragon/design#17 (comment); would it be possible to update the design spec?

@bpierre bpierre referenced this pull request Mar 1, 2019

Open

Grid unit utility #333

@sohkai sohkai modified the milestones: A1 Sprint: 4.2, A1 Sprint: 4.3 Mar 4, 2019

@luisivan luisivan referenced this pull request Mar 4, 2019

Closed

App Center (upgrades only) #3

0 of 1 task complete

sohkai and others added some commits Apr 10, 2019

fix: proptypes warnings for SignerPanel
SignerPanel doesn't actually need the `dao` prop until a certain state
is reached, so we can mark it optional.
Update Discover App
- Add Agent and Survey apps.
- Add the experimental flag.
- Make Payroll experimental.
- Randomize the sorting order.
- Read more => Learn more

@sohkai sohkai marked this pull request as ready for review Apr 14, 2019

sohkai added some commits Apr 14, 2019

feat: restart app worker when upgraded (#688)
Coupled with aragon/aragon.js#267, this allows the client to restart an upgraded app's worker in-place.

We reset the cache on the upgrade as well, as there may be incompatibilities in the reduced state between different worker versions (as well as paired with their frontends). Note that app frontends are handled mostly transparently as we re-load their URL into the iframe upon navigation.
@sohkai

This comment has been minimized.

Copy link
Member

sohkai commented Apr 14, 2019

A couple things still left to be done in future PRs:

  • Enable and wire together the "upgrade" action ("write")
    • Try to prettify the radspec description
  • Add AppIcon to AppCardContent and AppContent
  • Fix mobile menu panel
  • Add the following metadata in each of the apps:
    • author
    • changelog_url
    • details_url
    • source_url
  • (Nice to have) better screenshot gallery

@sohkai sohkai changed the title App Center App Center (read-only) Apr 14, 2019

@sohkai sohkai merged commit 533c308 into master Apr 14, 2019

4 checks passed

License Compliance All checks passed.
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
license/cla Contributor License Agreement is signed.
Details

@sohkai sohkai deleted the app-center branch Apr 14, 2019

2color added a commit that referenced this pull request Apr 15, 2019

@luisivan luisivan referenced this pull request Apr 15, 2019

Closed

0.7 remaining #55

29 of 29 tasks complete
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.