From 5ad50ab1e37ec0b7775e7a5974313a707e6ea1ad Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 26 Jan 2017 16:17:30 +0100 Subject: [PATCH] Split Dapp icon into ui/DappIcon (#4308) --- js/src/ui/DappIcon/dappIcon.css | 31 ++++++++++++ js/src/ui/DappIcon/dappIcon.js | 49 ++++++++++++++++++ js/src/ui/DappIcon/dappIcon.spec.js | 70 ++++++++++++++++++++++++++ js/src/ui/DappIcon/index.js | 17 +++++++ js/src/ui/index.js | 2 + js/src/views/Dapps/Summary/summary.css | 7 +-- js/src/views/Dapps/Summary/summary.js | 25 ++------- 7 files changed, 176 insertions(+), 25 deletions(-) create mode 100644 js/src/ui/DappIcon/dappIcon.css create mode 100644 js/src/ui/DappIcon/dappIcon.js create mode 100644 js/src/ui/DappIcon/dappIcon.spec.js create mode 100644 js/src/ui/DappIcon/index.js diff --git a/js/src/ui/DappIcon/dappIcon.css b/js/src/ui/DappIcon/dappIcon.css new file mode 100644 index 000000000..95ceed864 --- /dev/null +++ b/js/src/ui/DappIcon/dappIcon.css @@ -0,0 +1,31 @@ +/* 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 . +*/ + +.icon { + border-radius: 50%; + margin: 0 0.75em 0 0; +} + +.normal { + height: 56px; + width: 56px; +} + +.small { + height: 32px; + width: 32px; +} diff --git a/js/src/ui/DappIcon/dappIcon.js b/js/src/ui/DappIcon/dappIcon.js new file mode 100644 index 000000000..891f45405 --- /dev/null +++ b/js/src/ui/DappIcon/dappIcon.js @@ -0,0 +1,49 @@ +// 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 . + +import React, { Component, PropTypes } from 'react'; + +import styles from './dappIcon.css'; + +export default class DappIcon extends Component { + static contextTypes = { + api: PropTypes.object.isRequired + }; + + static propTypes = { + app: PropTypes.object.isRequired, + className: PropTypes.string, + small: PropTypes.bool + }; + + render () { + const { dappsUrl } = this.context.api; + const { app, className, small } = this.props; + + return ( + + ); + } +} diff --git a/js/src/ui/DappIcon/dappIcon.spec.js b/js/src/ui/DappIcon/dappIcon.spec.js new file mode 100644 index 000000000..b7bc81653 --- /dev/null +++ b/js/src/ui/DappIcon/dappIcon.spec.js @@ -0,0 +1,70 @@ +// 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 . + +import { shallow } from 'enzyme'; +import React from 'react'; + +import DappIcon from './'; + +const DAPPS_URL = 'http://test'; + +let api; +let component; + +function createApi () { + api = { + dappsUrl: DAPPS_URL + }; + + return api; +} + +function render (props = {}) { + if (!props.app) { + props.app = {}; + } + + component = shallow( + , + { + context: { api: createApi() } + } + ); + + return component; +} + +describe('ui/DappIcon', () => { + it('renders defaults', () => { + expect(render()).to.be.ok; + }); + + it('adds specified className', () => { + expect(render({ className: 'testClass' }).hasClass('testClass')).to.be.true; + }); + + it('renders local apps with correct URL', () => { + expect(render({ app: { id: 'test', type: 'local', iconUrl: 'test.img' } }).props().src).to.equal( + `${DAPPS_URL}/test/test.img` + ); + }); + + it('renders other apps with correct URL', () => { + expect(render({ app: { id: 'test', image: '/test.img' } }).props().src).to.equal( + `${DAPPS_URL}/test.img` + ); + }); +}); diff --git a/js/src/ui/DappIcon/index.js b/js/src/ui/DappIcon/index.js new file mode 100644 index 000000000..c0b80956e --- /dev/null +++ b/js/src/ui/DappIcon/index.js @@ -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 . + +export default from './dappIcon'; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index e3fa97bf8..99a6348af 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -29,6 +29,7 @@ import Container, { Title as ContainerTitle } from './Container'; import ContextProvider from './ContextProvider'; import CopyToClipboard from './CopyToClipboard'; import CurrencySymbol from './CurrencySymbol'; +import DappIcon from './DappIcon'; import Editor from './Editor'; import Errors from './Errors'; import Features, { FEATURES, FeaturesStore } from './Features'; @@ -74,6 +75,7 @@ export { ContextProvider, CopyToClipboard, CurrencySymbol, + DappIcon, Editor, Errors, FEATURES, diff --git a/js/src/views/Dapps/Summary/summary.css b/js/src/views/Dapps/Summary/summary.css index 08f277eb3..385f5cbc5 100644 --- a/js/src/views/Dapps/Summary/summary.css +++ b/js/src/views/Dapps/Summary/summary.css @@ -16,17 +16,14 @@ */ .container { - position: relative; height: 100%; + position: relative; } .image { + left: 1.5em; position: absolute; top: 1.5em; - left: 1.5em; - border-radius: 50%; - width: 56px; - height: 56px; } .description { diff --git a/js/src/views/Dapps/Summary/summary.js b/js/src/views/Dapps/Summary/summary.js index 28bb0b617..cf7f225d0 100644 --- a/js/src/views/Dapps/Summary/summary.js +++ b/js/src/views/Dapps/Summary/summary.js @@ -17,34 +17,31 @@ import React, { Component, PropTypes } from 'react'; import { Link } from 'react-router'; -import { Container, ContainerTitle, Tags } from '~/ui'; +import { Container, ContainerTitle, DappIcon, Tags } from '~/ui'; import styles from './summary.css'; export default class Summary extends Component { - static contextTypes = { - api: React.PropTypes.object - } - static propTypes = { app: PropTypes.object.isRequired, children: PropTypes.node } render () { - const { dappsUrl } = this.context.api; const { app } = this.props; if (!app) { return null; } - const image = this.renderImage(dappsUrl, app); const link = this.renderLink(app); return ( - { image } +
- ); - } - - return ( - - ); - } - renderLink (app) { // Special case for web dapp if (app.url === 'web') {