External app overlay

This commit is contained in:
Jaco Greeff 2016-11-16 12:27:16 +01:00
parent 9bd6378e42
commit 501c7369b0
3 changed files with 35 additions and 4 deletions

View File

@ -18,6 +18,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: -0.125em; margin: -0.125em;
position: relative;
} }
.list+.list { .list+.list {
@ -29,3 +30,14 @@
flex: 0 1 50%; flex: 0 1 50%;
box-sizing: border-box; box-sizing: border-box;
} }
.overlay {
background: rgba(255, 255, 255, 0.75);
bottom: 0;
left: -0.25em;
position: absolute;
right: -0.25em;
top: 0;
z-index: 100;
padding: 1em;
}

View File

@ -37,6 +37,12 @@ export default class Dapps extends Component {
store = new DappsStore(this.context.api); store = new DappsStore(this.context.api);
render () { render () {
const externalOverlay = (
<div className={ styles.overlay }>
dismiss me
</div>
);
return ( return (
<div> <div>
<AddDapps store={ this.store } /> <AddDapps store={ this.store } />
@ -53,14 +59,27 @@ export default class Dapps extends Component {
] } ] }
/> />
<Page> <Page>
<div className={ styles.list }> { this.renderList(this.store.sortedLocal) }
{ this.store.visibleApps.map(this.renderApp) } { this.renderList(this.store.sortedBuiltin) }
</div> { this.renderList(this.store.sortedNetwork, externalOverlay) }
</Page> </Page>
</div> </div>
); );
} }
renderList (items, overlay) {
if (!items || !items.length) {
return null;
}
return (
<div className={ styles.list }>
{ overlay }
{ items.map(this.renderApp) }
</div>
);
}
renderApp = (app) => { renderApp = (app) => {
return ( return (
<div <div

View File

@ -186,7 +186,7 @@ export default class DappsStore {
contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2), contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2),
manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2), manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2),
type: 'network', type: 'network',
visible: false visible: true
}; };
return app; return app;