Home landing page (#4178)
* Home entry point (basics) * WIP store for web * Add DappUrlInput component * Updated tests * WIP store update * Adjust styling * Add home tab * Collapse first/last without extra divs * Navigation actually navigates * styling * Encoding of ethlink.io URLs * encodedUrl setup * base58 encoded URLs * Added decoding, updated tests to Parity-compliant * Base32 (synced with Rust implementation via tests) * Split URL into 63 character chunks * Fix store test * Cleanups * s/ethlink/dapplink/ * Display app navigation & histroy * Start on /accounts (for now, until expanded fully) * Update tests * ethlink.io -> web3.site * Basic list layout * Store history on navigation * Show Accounts & Dapps * Add skeleton for DappIcon (WIP) * DappIcon WIP * DappIcon in place * Split into maneable sub-components * WIP * Tests for views/Home * Swap default entry-point to /home * Expose registry.get via lookupMeta * Add getEntry interface, fix instance retrieval (with tests) * Add news display component * Add tests for added contracts/registry methods * Fix GHH test refactoring * render news via SectionList * News items store directly * Images * News & Urls has new layout * Convert remainder * First run-through of MVP for SectionList * Update tests * Deploycontract should not override global p styles * Allow styles overrides for head & body * Adjust layout styling * revert Container>flex * Adjust sizes of history items * Cleanups * HistoryStore for tracking relevant routes * Default route is still /accounts * Fix tests * Update 2015-2017 * Add lookupMeta & tests * Add getEntry & tests * Split Dapp icon into ui/DappIcon * Update copyright dates * Encoding for *.web3.site urls * Dapp history retrieval * Grow to only 40% on hover * Update description * Add DappUrlInput component * Update Web views with store * Update spec description * Update spec description * edited url does not allow in-place store edits * Use /web/<hash> urls for iframe * Removed (now) unused _list.css * Mistamtched merge fixed * Tab split (WIP) * Split Tab component * Update tests after merge * typo * Remove background !important * Set item width to parent * Set width, remove overflow-x: hidden * Align hover overlays * Container defaults to some opacity * Display history from listRecentDapps * Override styles for a tags * Open URLs in new window when extension is available * Fix tests after update * AccountCard width 100% * Re-add opening correct url in tab * Cleanup link rendering * Remove hardcoded news URL * pre-merge * Extra padding at Home bottom (Pr grumble) * Match js-vaults stretch * s/Web Apps via URL/Web Apps/ (PR grumble) * Store recent wallets (PR grumble) * Simplify inline style matching (PR comment) * Add store for new retrieval * Add missing observer * Auto-link based on account type * Fix UI overlaps * Extra spacing * Only show account when accountInfo is available * Align timestamp line-heights * Fix tests * Update tests * Really fix failing test (check for Connect(Account))
This commit is contained in:
Jaco Greeff
GitHub
@@ -26,7 +26,7 @@ import styles from './extension.css';
|
||||
|
||||
@observer
|
||||
export default class Extension extends Component {
|
||||
store = new Store();
|
||||
store = Store.get();
|
||||
|
||||
render () {
|
||||
const { showWarning } = this.store;
|
||||
|
||||
@@ -29,7 +29,10 @@ const NEXT_DISPLAY = '_parity::extensionWarning::nextDisplay';
|
||||
// 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig';
|
||||
const EXTENSION_PAGE = 'https://chrome.google.com/webstore/detail/himekenlppkgeaoeddcliojfddemadig';
|
||||
|
||||
let instance;
|
||||
|
||||
export default class Store {
|
||||
@observable hasExtension = false;
|
||||
@observable isInstalling = false;
|
||||
@observable nextDisplay = 0;
|
||||
@observable shouldInstall = false;
|
||||
@@ -43,6 +46,10 @@ export default class Store {
|
||||
return !this.isInstalling && this.shouldInstall && (Date.now() > this.nextDisplay);
|
||||
}
|
||||
|
||||
@action setExtensionActive = () => {
|
||||
this.hasExtension = true;
|
||||
}
|
||||
|
||||
@action setInstalling = (isInstalling) => {
|
||||
this.isInstalling = isInstalling;
|
||||
}
|
||||
@@ -61,6 +68,7 @@ export default class Store {
|
||||
const ua = browser.analyze(navigator.userAgent || '');
|
||||
|
||||
if (hasExtension) {
|
||||
this.setExtensionActive();
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -97,4 +105,12 @@ export default class Store {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static get () {
|
||||
if (!instance) {
|
||||
instance = new Store();
|
||||
}
|
||||
|
||||
return instance;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.toolbar {
|
||||
background: none !important;
|
||||
height: 72px !important;
|
||||
@@ -53,7 +54,7 @@
|
||||
|
||||
.tabLink,
|
||||
.settings,
|
||||
.logo,
|
||||
.first,
|
||||
.last {
|
||||
background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
|
||||
}
|
||||
@@ -73,27 +74,17 @@
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 0 0 -24px;
|
||||
padding: 20px 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 28px;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.logo div {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
line-height: 32px;
|
||||
vertical-align: top;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.first,
|
||||
.last {
|
||||
margin: 0 -24px 0 0;
|
||||
margin: 0;
|
||||
padding: 36px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.first {
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-right: -24px;
|
||||
}
|
||||
|
||||
@@ -20,13 +20,16 @@ import { Link } from 'react-router';
|
||||
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
|
||||
import { Tooltip } from '~/ui';
|
||||
|
||||
import Tab from './Tab';
|
||||
import styles from './tabBar.css';
|
||||
|
||||
class TabBar extends Component {
|
||||
static contextTypes = {
|
||||
router: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
isTest: PropTypes.bool,
|
||||
netChain: PropTypes.string,
|
||||
@@ -41,72 +44,48 @@ class TabBar extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Toolbar className={ styles.toolbar }>
|
||||
{ this.renderLogo() }
|
||||
{ this.renderTabs() }
|
||||
{ this.renderLast() }
|
||||
<ToolbarGroup className={ styles.first }>
|
||||
<div />
|
||||
</ToolbarGroup>
|
||||
<div className={ styles.tabs }>
|
||||
{ this.renderTabItems() }
|
||||
</div>
|
||||
<ToolbarGroup className={ styles.last }>
|
||||
<div />
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
|
||||
renderLogo () {
|
||||
return (
|
||||
<ToolbarGroup>
|
||||
<div className={ styles.logo }>
|
||||
<img
|
||||
height={ 28 }
|
||||
src={ imagesEthcoreBlock }
|
||||
/>
|
||||
</div>
|
||||
</ToolbarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
renderLast () {
|
||||
return (
|
||||
<ToolbarGroup>
|
||||
<div className={ styles.last }>
|
||||
<div />
|
||||
</div>
|
||||
</ToolbarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
renderTabs () {
|
||||
renderTabItems () {
|
||||
const { views, pending } = this.props;
|
||||
|
||||
const items = views
|
||||
.map((view, index) => {
|
||||
const body = (view.id === 'accounts')
|
||||
? (
|
||||
<Tooltip
|
||||
className={ styles.tabbarTooltip }
|
||||
text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view'
|
||||
/>
|
||||
)
|
||||
: null;
|
||||
return views.map((view, index) => {
|
||||
const body = (view.id === 'accounts')
|
||||
? (
|
||||
<Tooltip
|
||||
className={ styles.tabbarTooltip }
|
||||
text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view'
|
||||
/>
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Link
|
||||
activeClassName={ styles.tabactive }
|
||||
className={ styles.tabLink }
|
||||
key={ view.id }
|
||||
to={ view.route }
|
||||
return (
|
||||
<Link
|
||||
activeClassName={ styles.tabactive }
|
||||
className={ styles.tabLink }
|
||||
key={ view.id }
|
||||
to={ view.route }
|
||||
>
|
||||
<Tab
|
||||
pendings={ pending.length }
|
||||
view={ view }
|
||||
>
|
||||
<Tab
|
||||
pendings={ pending.length }
|
||||
view={ view }
|
||||
>
|
||||
{ body }
|
||||
</Tab>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={ styles.tabs }>
|
||||
{ items }
|
||||
</div>
|
||||
);
|
||||
{ body }
|
||||
</Tab>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user