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

Activity panel #674

Merged
merged 54 commits into from Apr 16, 2019
Merged
Changes from 1 commit
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
944bb24
prettier
drcmda Jan 17, 2019
af603e1
fix eslint errors
drcmda Jan 17, 2019
dd690fb
merge master
drcmda Jan 21, 2019
e73944a
fix onBlur, merge master
drcmda Jan 22, 2019
9255199
eslint errors
drcmda Jan 22, 2019
3fe7228
timetags
drcmda Jan 24, 2019
2edc744
reinstate badge reset + fix, notification.close, colors
drcmda Jan 24, 2019
c707ff7
eslint
drcmda Jan 25, 2019
44a19c4
Merge remote-tracking branch 'origin/master' into notifications
2color Apr 3, 2019
3081916
Add mising props
2color Apr 3, 2019
088fe2a
Add activity provider
2color Apr 3, 2019
25043e0
Move activities to context from wrapper state
2color Apr 4, 2019
ea5f53f
Remove unused SignerPanel onClose prop
2color Apr 4, 2019
705a740
Fix bug with activity panel not closing properly
2color Apr 4, 2019
629ac3b
Rename to activity
2color Apr 5, 2019
102076c
Always show the activity count in menubar badge
2color Apr 5, 2019
b9d4c53
Add transaction activities with its data structure
2color Apr 5, 2019
baa7f77
Unread activity functionality
2color Apr 5, 2019
35b1d46
Use transactionHash as the key for notifications list
2color Apr 8, 2019
675ad43
Filter single activity item
2color Apr 8, 2019
28ec0c2
Organise compnents and render relative time
2color Apr 8, 2019
fea3c09
Renaming from notifcations to activity
2color Apr 8, 2019
c55e446
Merge remote-tracking branch 'origin/master' into activity-panel
2color Apr 8, 2019
d343700
Render activity status
2color Apr 8, 2019
9585ee4
Update activity status
2color Apr 8, 2019
b303f36
Scope rendered activities to user and DAO
2color Apr 9, 2019
d9a5891
Remove about from relative time
2color Apr 9, 2019
45a9dec
Render progress bar conditionally
2color Apr 9, 2019
5b1508c
Make description smaller
2color Apr 9, 2019
0360024
fixup! Scope rendered activities to user and DAO
2color Apr 9, 2019
772da76
Set activity items to timed out after pending for 10 minutes
2color Apr 9, 2019
648a30f
Update status to failed
2color Apr 9, 2019
bc1e8f9
Add proxy addresses
2color Apr 9, 2019
7e953b5
Set activity none after submitting transaction
2color Apr 10, 2019
11fb67c
Merge branch 'master' into activity-panel
bpierre Apr 10, 2019
90f27ac
Remove automatic closing of activity panel
2color Apr 10, 2019
e7d2fdd
Refresh activity status on load
2color Apr 10, 2019
9211a3d
Scope activities in localStorage per account
2color Apr 12, 2019
385051c
Remove intent when resolving transaction bag
2color Apr 12, 2019
3a8c825
Activity Panel: UI (#687)
bpierre Apr 14, 2019
d464e31
cosmetic: clarify comment about getting account nonce
sohkai Apr 14, 2019
8fedb2e
Merge branch 'master' into activity-panel
sohkai Apr 14, 2019
a5905dd
ActivityPanel: receive all apps, not just ones with frontend
sohkai Apr 14, 2019
93ae5d9
chore: use AppType prop-type more
sohkai Apr 14, 2019
ecbd957
fix: correct merge conflicts
sohkai Apr 14, 2019
c2fa9b9
Use default web3 connected to Aragon's eth node
2color Apr 15, 2019
158508a
Use async func instead of promises
2color Apr 15, 2019
0f1e62b
Ensure pre-transactions have a different description
2color Apr 16, 2019
9bb6bec
Remove unused method
2color Apr 16, 2019
2432f5f
fixup! Ensure pre-transactions have a different description
2color Apr 16, 2019
f909dae
Set forwarderProxyAddress only if transaction has forwarder
2color Apr 16, 2019
70aca1d
Merge remote-tracking branch 'origin/master' into activity-panel
2color Apr 16, 2019
3671b77
Leave the app name capitalised
2color Apr 16, 2019
87d4030
Ensure MenuPanel is only displayed when needed + code refresh (#695)
bpierre Apr 16, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Activity Panel: UI (#687)

  • Loading branch information...
bpierre authored and sohkai committed Apr 14, 2019
commit 3a8c82555ddab8b152c3c9635acb5631243fb28e
@@ -20,12 +20,9 @@
"startups"
],
"author": "Aragon Institution MTU <contact@aragon.one>",
"contributors": [
"Pierre Bertet <pierre@aragon.one>"
],
"dependencies": {
"@aragon/templates-tokens": "^1.1.1",
"@aragon/ui": "^0.33.0",
"@aragon/ui": "^0.34.0",
"@aragon/wrapper": "^4.0.0",
"@babel/polyfill": "^7.0.0",
"bn.js": "4.11.6",
@@ -7,12 +7,9 @@ import AppIFrame from './components/App/AppIFrame'
import App404 from './components/App404/App404'
import Home from './components/Home/Home'
import Preferences from './components/Preferences/Preferences'
import MenuPanel from './components/MenuPanel/MenuPanel'
import SwipeContainer from './components/MenuPanel/SwipeContainer'
import CombinedPanel from './components/MenuPanel/CombinedPanel'
import SignerPanel from './components/SignerPanel/SignerPanel'
import { ActivityContext } from './contexts/ActivityContext'
import DeprecatedBanner from './components/DeprecatedBanner/DeprecatedBanner'
import ActivityPanel from './components/Activity/ActivityPanel'
import {
AppType,
AppsStatusType,
@@ -29,7 +26,6 @@ import ethereumLoadingAnimation from './assets/ethereum-loading.svg'
class Wrapper extends React.PureComponent {
static propTypes = {
account: EthereumAddressType,
unreadActivityCount: PropTypes.number.isRequired,
apps: PropTypes.arrayOf(AppType).isRequired,
appsStatus: AppsStatusType.isRequired,
autoClosingPanel: PropTypes.bool.isRequired,
@@ -39,7 +35,6 @@ class Wrapper extends React.PureComponent {
type: PropTypes.oneOf([DeprecatedBanner]),
}),
]),
clearActivities: PropTypes.func.isRequired,
connected: PropTypes.bool,
daoAddress: DaoAddressType.isRequired,
historyBack: PropTypes.func.isRequired,
@@ -48,7 +43,6 @@ class Wrapper extends React.PureComponent {
onRequestAppsReload: PropTypes.func.isRequired,
onRequestEnable: PropTypes.func.isRequired,
permissionsLoading: PropTypes.bool.isRequired,
markActivitiesRead: PropTypes.func.isRequired,
transactionBag: PropTypes.object,
walletNetwork: PropTypes.string,
walletProviderId: PropTypes.string,
@@ -70,7 +64,6 @@ class Wrapper extends React.PureComponent {
appInstance: {},
menuPanelOpened: !this.props.autoClosingPanel,
preferencesOpened: false,
activitiesOpen: false,
}

componentDidUpdate(prevProps) {
@@ -163,33 +156,16 @@ class Wrapper extends React.PureComponent {
this.openApp(this.props.locator.instanceId, params)
}

handleClearActivities = e => {
e.preventDefault()
this.props.clearActivities()
}

toggleActivity = () => {
const openBeforeToggle = this.state.activitiesOpen

this.setState({ activitiesOpen: !openBeforeToggle }, () => {
if (openBeforeToggle) {
// mark as read after closing
this.props.markActivitiesRead()
}
})
}
isAppInstalled(instanceId) {
const { apps } = this.props
return (
staticApps.has(instanceId) &&
!!apps.find(app => addressesEqual(app.proxyAddress, instanceId))
Boolean(this.getAppByProxyAddress(instanceId))
)
}

render() {
const {
account,
unreadActivityCount,
apps,
appsStatus,
autoClosingPanel,
@@ -206,7 +182,7 @@ class Wrapper extends React.PureComponent {
wrapper,
} = this.props

const { menuPanelOpened, activitiesOpen, preferencesOpened } = this.state
const { menuPanelOpened, preferencesOpened } = this.state

return (
<Main>
@@ -217,41 +193,24 @@ class Wrapper extends React.PureComponent {
wrapper={wrapper}
/>
<BannerWrapper>{banner}</BannerWrapper>
<SwipeContainer
<CombinedPanel
activeInstanceId={locator.instanceId}
apps={apps.filter(app => app.hasWebApp)}
appsStatus={appsStatus}
autoClosing={autoClosingPanel}
menuPanelOpened={menuPanelOpened}
connected={connected}
daoAddress={daoAddress}
onMenuPanelClose={this.handleMenuPanelClose}
onMenuPanelOpen={this.handleMenuPanelOpen}
onOpenApp={this.openApp}
onOpenPreferences={this.handleOpenPreferences}
onRequestAppsReload={onRequestAppsReload}
opened={menuPanelOpened}
>
{progress => (
<React.Fragment>
<MenuPanel
apps={apps.filter(app => app.hasWebApp)}
appsStatus={appsStatus}
activeInstanceId={locator.instanceId}
unreadActivityCount={unreadActivityCount}
connected={connected}
daoAddress={daoAddress}
swipeProgress={progress}
autoClosing={autoClosingPanel}
onOpenApp={this.openApp}
onCloseMenuPanel={this.handleMenuPanelClose}
onOpenPreferences={this.handleOpenPreferences}
onRequestAppsReload={onRequestAppsReload}
onActivityClicked={this.toggleActivity}
activitiesOpen={activitiesOpen}
/>
<AppScreen>
<ActivityPanel
open={activitiesOpen}
onClearAll={this.handleClearActivities}
onBlur={this.toggleActivity}
/>
{this.renderApp(locator.instanceId, locator.params)}
</AppScreen>
</React.Fragment>
)}
</SwipeContainer>
<AppScreen>
{this.renderApp(locator.instanceId, locator.params)}
</AppScreen>
</CombinedPanel>
<SignerPanel
account={account}
apps={apps}
@@ -387,23 +346,9 @@ const LoadingApps = () => (
)

export default props => {
const {
unreadActivityCount,
clearActivities,
markActivitiesRead,
} = React.useContext(ActivityContext)

return (
<Viewport>
{({ below }) => (
<Wrapper
{...props}
autoClosingPanel={below('medium')}
unreadActivityCount={unreadActivityCount}
clearActivities={clearActivities}
markActivitiesRead={markActivitiesRead}
/>
)}
{({ below }) => <Wrapper {...props} autoClosingPanel={below('medium')} />}
</Viewport>
)
}
@@ -2,87 +2,81 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Spring, animated } from 'react-spring'
import { theme, springs, IconNotifications } from '@aragon/ui'
import { ButtonIcon, IconNotifications, springs, theme } from '@aragon/ui'

export default class ActivityAlert extends React.PureComponent {
class ActivityAlert extends React.PureComponent {
static propTypes = {
unreadActivityCount: PropTypes.number.isRequired,
activitiesOpen: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
}
handleClick = () => {
// Only use for opening. Blur event closes the activity panel
if (!this.props.activitiesOpen) {
this.props.onClick()
}

getUnreadCount() {
return Math.min(99, this.props.unreadActivityCount)
}

render() {
const { unreadActivityCount } = this.props
const showCount = unreadActivityCount > 0
const { onClick } = this.props
const unreadCount = this.getUnreadCount()
const showCount = unreadCount > 0

return (
<div className="actions">
<IconButton
style={{ height: 22 }}
role="button"
tabIndex="0"
onClick={this.handleClick}
<ButtonIcon
css={`
display: flex;
width: 100%;
height: 100%;
position: relative;
`}
label="Activity"
onClick={onClick}
>
<IconNotifications />
<Spring
native
reset
from={{ opacity: 0, size: 0 }}
to={{ opacity: showCount ? 1 : 0, size: 1 }}
config={springs.lazy}
>
<IconNotifications />
<Spring
native
reset
from={{ opacity: 0, size: 0 }}
to={{ opacity: showCount ? 1 : 0, size: 1 }}
config={springs.lazy}
>
{props => (
<Badge
style={{
...props,
position: 'absolute',
marginLeft: -12,
marginTop: -8,
transform: props.size
.interpolate(
[0, 0.2, 0.4, 0.6, 0.8, 1],
[1.5, 1, 1.5, 1, 1.5, 1]
)
.interpolate(s => `scale(${s})`),
}}
>
{showCount && this.props.unreadActivityCount}
</Badge>
)}
</Spring>
</IconButton>
</div>
{props => (
<Badge
style={{
...props,
position: 'absolute',
top: '14px',
right: '12px',
transform: props.size
.interpolate(
[0, 0.2, 0.4, 0.6, 0.8, 1],
[1.5, 1, 1.5, 1, 1.5, 1]
)
.interpolate(s => `scale(${s})`),
}}
>
{showCount && unreadCount}
</Badge>
)}
</Spring>
</ButtonIcon>
)
}
}

const IconButton = styled.span`
cursor: pointer;
outline: 0;
`

const Badge = styled(animated.div)`
display: inline-flex;
font-weight: 600;
white-space: nowrap;
color: ${theme.badgeNotificationForeground};
background: ${theme.accent};
overflow: hidden;
padding-top: 2px;
letter-spacing: -0.5px;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
width: 14px;
height: 14px;
padding-top: 2px;
overflow: hidden;
border-radius: 9px;
line-height: 1.5;
font-size: 12px;
color: ${theme.badgeNotificationForeground};
background: ${theme.accent};
font-size: 10px;
font-weight: 600;
line-height: 20px;
white-space: nowrap;
letter-spacing: -0.5px;
`

export default ActivityAlert
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.