Available Dapp selection alignment with Permissions (Portal) (#4374)
* Manage default accounts * Portal * Portal * Allow Portal to be used in as both top-level and popover * modal/popover variable naming * Move to Portal * export Portal in ~/ui * WIP * Tags handle empty values * Export AccountCard in ~/ui * Allow ETH-only & zero display * Use ui/Balance for balance display * Add tests for Balance & Tags component availability * WIP * Default overlay display to block (not flex) * Revert block * WIP * Add className, optional handlers only * WIP * Properly handle optional onKeyDown * Selection updated * Align margins * Remove old code * Remove debug logging * TransitionGroup for animations * No anim * Cleanups * Revert addons removal * Fix tests * WIP * Add onClick to Container * Create ui/DappCard component * WIP * Pass dummy displayApps * Rename DappsVisible back to AddDapps (easier git diff) * Rename CSS * Fix tests after merge
This commit is contained in:
Jaco Greeff
Gav Wood
41
js/src/ui/DappCard/dappCard.css
Normal file
41
js/src/ui/DappCard/dappCard.css
Normal file
@@ -0,0 +1,41 @@
|
||||
/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
/* This file is part of Parity.
|
||||
/*
|
||||
/* Parity is free software: you can redistribute it and/or modify
|
||||
/* it under the terms of the GNU General Public License as published by
|
||||
/* the Free Software Foundation, either version 3 of the License, or
|
||||
/* (at your option) any later version.
|
||||
/*
|
||||
/* Parity is distributed in the hope that it will be useful,
|
||||
/* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
/* GNU General Public License for more details.
|
||||
/*
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image {
|
||||
left: 1.5em;
|
||||
position: absolute;
|
||||
top: 1.5em;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-left: 72px;
|
||||
}
|
||||
|
||||
.title {
|
||||
mragin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.author, .version {
|
||||
font-size: 0.75em;
|
||||
opacity: 0.5;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
98
js/src/ui/DappCard/dappCard.js
Normal file
98
js/src/ui/DappCard/dappCard.js
Normal file
@@ -0,0 +1,98 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
import Container, { Title as ContainerTitle } from '~/ui/Container';
|
||||
import DappIcon from '~/ui/DappIcon';
|
||||
import Tags from '~/ui/Tags';
|
||||
|
||||
import styles from './dappCard.css';
|
||||
|
||||
export default class DappCard extends Component {
|
||||
static propTypes = {
|
||||
app: PropTypes.object.isRequired,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
showLink: PropTypes.bool,
|
||||
showTags: PropTypes.bool
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
showLink: false,
|
||||
showTags: false
|
||||
};
|
||||
|
||||
render () {
|
||||
const { app, children, className, onClick, showLink, showTags } = this.props;
|
||||
|
||||
if (!app) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container
|
||||
className={
|
||||
[styles.container, className].join(' ')
|
||||
}
|
||||
onClick={ onClick }
|
||||
>
|
||||
<DappIcon
|
||||
app={ app }
|
||||
className={ styles.image }
|
||||
/>
|
||||
<Tags
|
||||
tags={
|
||||
showTags
|
||||
? [app.type]
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<div className={ styles.description }>
|
||||
<ContainerTitle
|
||||
className={ styles.title }
|
||||
title={
|
||||
showLink
|
||||
? this.renderLink(app)
|
||||
: app.name
|
||||
}
|
||||
byline={ app.description }
|
||||
/>
|
||||
<div className={ styles.author }>
|
||||
{ app.author }, v{ app.version }
|
||||
</div>
|
||||
{ children }
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderLink (app) {
|
||||
return (
|
||||
<Link
|
||||
to={
|
||||
app.url === 'web'
|
||||
? '/web'
|
||||
: `/app/${app.id}`
|
||||
}
|
||||
>
|
||||
{ app.name }
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/DappCard/index.js
Normal file
17
js/src/ui/DappCard/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './dappCard';
|
||||
Reference in New Issue
Block a user