Update layout with new theme
This commit is contained in:
Anthony Laibe
Pascal Precht
parent
36602c30b6
commit
0e872c99e6
|
|
@ -4,6 +4,48 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@coreui/coreui": {
|
||||
"version": "2.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-2.0.15.tgz",
|
||||
"integrity": "sha512-hCXFnwNxfMlD/z6hhdvgUgDb2ySqGKEjhvNqqXE7jIhhNHJ5UDKT5AdvIJaZIenCSL4W6og6Q0rK1RkuLQOlYg==",
|
||||
"requires": {
|
||||
"@coreui/coreui-plugin-npm-postinstall": "^1.0.2",
|
||||
"bootstrap": "^4.1.3"
|
||||
}
|
||||
},
|
||||
"@coreui/coreui-plugin-npm-postinstall": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/coreui-plugin-npm-postinstall/-/coreui-plugin-npm-postinstall-1.0.2.tgz",
|
||||
"integrity": "sha512-yeeoWp+bNS84nP1977Y8UCiQ9pssO+f4QuVj3i0/gYZFjjvOgxx0dnyWhtowD5sLYnCRMPlPpqyjwXze3SlkYg=="
|
||||
},
|
||||
"@coreui/icons": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-0.3.0.tgz",
|
||||
"integrity": "sha512-RbBi5K5hUA8LUI9mM/i1BTaLjlyoS6kHwKbxWsH62+/j9L9WF8gAiJUhrNjMt1br8TY9RLeolyQys0E9480fIg=="
|
||||
},
|
||||
"@coreui/react": {
|
||||
"version": "2.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-2.0.9.tgz",
|
||||
"integrity": "sha512-vNURaDHxoc4RyuAMZYPoXHQ7iS4piyTJjyJeAVIHfn7sbqdLjoD5AuKiESnigWDsTteWNbLbVIL3BoxvM0l+Kw==",
|
||||
"requires": {
|
||||
"@coreui/icons": "0.3.0",
|
||||
"classnames": "^2.2.6",
|
||||
"core-js": "^2.5.7",
|
||||
"element-closest": "^2.0.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-onclickout": "^2.0.8",
|
||||
"react-perfect-scrollbar": "^1.2.2",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"reactstrap": "^6.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.5.7",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
|
||||
"integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"abab": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
|
||||
|
|
@ -1432,6 +1474,11 @@
|
|||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
|
||||
"integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
|
||||
},
|
||||
"bowser": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
|
||||
|
|
@ -2922,6 +2969,11 @@
|
|||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz",
|
||||
"integrity": "sha1-0tnxJwuko7lnuDHEDvcftNmrXOA="
|
||||
},
|
||||
"element-closest": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
|
||||
"integrity": "sha1-cqdAoQdFM4LijfnOXbtajfD5Zuw="
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
|
||||
|
|
@ -3968,6 +4020,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"font-awesome": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
|
||||
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
|
|
@ -6652,6 +6709,16 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
|
||||
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
|
||||
},
|
||||
"lodash.isfunction": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
|
||||
"integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw=="
|
||||
},
|
||||
"lodash.isobject": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
|
||||
"integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
|
||||
},
|
||||
"lodash.keys": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
|
||||
|
|
@ -6684,6 +6751,11 @@
|
|||
"lodash._reinterpolate": "~3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.tonumber": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
|
||||
"integrity": "sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk="
|
||||
},
|
||||
"lodash.uniq": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
|
||||
|
|
@ -7546,6 +7618,11 @@
|
|||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"perfect-scrollbar": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
|
||||
"integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
|
||||
},
|
||||
"performance-now": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
|
|
@ -9101,6 +9178,20 @@
|
|||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-onclickout": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/react-onclickout/-/react-onclickout-2.0.8.tgz",
|
||||
"integrity": "sha1-0XixP7h6SBNWdhtFSqYN9wabLaQ="
|
||||
},
|
||||
"react-perfect-scrollbar": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.2.2.tgz",
|
||||
"integrity": "sha512-G+gRBZUXU5wORhtHd3rGH3zlMMejiHbNmYwGwxT1GedjCImEW5w2IJqrZS8JofNdiazYW7a5wA1niui1U6KDxA==",
|
||||
"requires": {
|
||||
"perfect-scrollbar": "^1.3.0",
|
||||
"prop-types": "^15.6.1"
|
||||
}
|
||||
},
|
||||
"react-popper": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
|
||||
|
|
@ -9204,6 +9295,32 @@
|
|||
"velocity-react": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"reactstrap": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-6.5.0.tgz",
|
||||
"integrity": "sha512-dWb3fB/wBAiQloteKlf+j9Nl2VLe6BMZgTEt6hpeTt0t9TwtkeU+2v2NBYONZaF4FZATfMiIKozhWpc2HmLW1g==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.3",
|
||||
"lodash.isfunction": "^3.0.9",
|
||||
"lodash.isobject": "^3.0.2",
|
||||
"lodash.tonumber": "^4.0.3",
|
||||
"prop-types": "^15.5.8",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-popper": "^0.10.4",
|
||||
"react-transition-group": "^2.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-popper": {
|
||||
"version": "0.10.4",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.10.4.tgz",
|
||||
"integrity": "sha1-rypBXqIike3VBGeNev2opu4ylao=",
|
||||
"requires": {
|
||||
"popper.js": "^1.14.1",
|
||||
"prop-types": "^15.6.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@coreui/coreui": "^2.0.15",
|
||||
"@coreui/react": "^2.0.9",
|
||||
"ansi-to-html": "^0.6.6",
|
||||
"autoprefixer": "7.1.6",
|
||||
"autoscroll-react": "^3.2.0",
|
||||
|
|
@ -30,6 +32,7 @@
|
|||
"ethereumjs-units": "0.2.0",
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"file-loader": "1.1.5",
|
||||
"font-awesome": "^4.7.0",
|
||||
"fs-extra": "3.0.1",
|
||||
"history": "^4.7.2",
|
||||
"html-webpack-plugin": "2.29.0",
|
||||
|
|
|
|||
|
|
@ -1,63 +1,86 @@
|
|||
import React from 'react';
|
||||
import {NavLink} from "react-router-dom";
|
||||
import {Site, Nav, Button, Container} from "tabler-react";
|
||||
import PropTypes from 'prop-types';
|
||||
import { DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
|
||||
|
||||
import {
|
||||
AppAside,
|
||||
AppFooter,
|
||||
AppHeader,
|
||||
AppSidebar,
|
||||
AppSidebarFooter,
|
||||
AppSidebarForm,
|
||||
AppSidebarHeader,
|
||||
AppSidebarMinimizer,
|
||||
AppSidebarNav,
|
||||
AppSidebarToggler,
|
||||
AppNavbarBrand,
|
||||
AppHeaderDropdown
|
||||
} from '@coreui/react';
|
||||
|
||||
import logo from '../images/logo.png';
|
||||
|
||||
const navBarItems = (tabs) => {
|
||||
const homeTab = {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink};
|
||||
const sidebarNavItems = {items: [
|
||||
{name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
|
||||
{name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
|
||||
{name: "Explorer", url: "/embark/explorer/accounts", icon: "fa fa-signal", children: [
|
||||
{url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
|
||||
{url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
|
||||
{url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"},
|
||||
{url: "/embark/explorer/communication", icon: "fa fa-phone", name: "Communication"},
|
||||
{url: "/embark/explorer/ens", icon: "fa fa-circle", name: "ENS"}
|
||||
]},
|
||||
{name: "Fiddle", url: "/embark/fiddle", icon: "fa fa-codepen"},
|
||||
{name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
|
||||
{name: "Utils", url: "/embark/utilities/converter", icon: "fa fa-cog", children: [
|
||||
{url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"}
|
||||
]},
|
||||
]};
|
||||
|
||||
const generatedTabs = tabs.map(tab => (
|
||||
{LinkComponent: NavLink, ...tab}
|
||||
));
|
||||
|
||||
return [homeTab, ...generatedTabs];
|
||||
}
|
||||
|
||||
const Layout = ({children, logout, credentials, tabs}) => (
|
||||
<Site.Wrapper
|
||||
headerProps={{
|
||||
href: "/embark",
|
||||
alt: "Embark",
|
||||
imageURL: logo,
|
||||
navItems: (
|
||||
<React.Fragment>
|
||||
<Nav.Item type="div" className="d-none d-md-flex">
|
||||
<Button
|
||||
href="https://github.com/embark-framework/embark"
|
||||
target="_blank"
|
||||
outline
|
||||
size="sm"
|
||||
RootComponent="a"
|
||||
color="primary"
|
||||
>
|
||||
Source code
|
||||
</Button>
|
||||
</Nav.Item>
|
||||
{credentials.authenticated &&
|
||||
<Nav.Item type="div" className="d-none d-md-flex">
|
||||
Connected on {credentials.host}
|
||||
</Nav.Item>
|
||||
}
|
||||
<Nav.Item type="div" className="d-none d-md-flex">
|
||||
<Button
|
||||
outline
|
||||
onClick={logout}
|
||||
size="sm"
|
||||
color="danger">
|
||||
Logout
|
||||
</Button>
|
||||
</Nav.Item>
|
||||
</React.Fragment>
|
||||
)
|
||||
}}
|
||||
navProps={{itemsObjects: navBarItems(tabs)}}
|
||||
>
|
||||
<Container>
|
||||
{children}
|
||||
</Container>
|
||||
</Site.Wrapper>
|
||||
const Layout = ({children, logout, credentials, location}) => (
|
||||
<div className="app">
|
||||
<AppHeader fixed>
|
||||
<AppSidebarToggler className="d-lg-none" display="md" mobile />
|
||||
<AppNavbarBrand
|
||||
full={{ src: logo, width: 50, height: 50, alt: 'Embark Logo' }}
|
||||
minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
|
||||
/>
|
||||
<AppSidebarToggler className="d-md-down-none" display="lg" />
|
||||
<Nav className="ml-auto" navbar>
|
||||
<AppHeaderDropdown direction="down">
|
||||
<DropdownToggle nav>
|
||||
<i className="fa fa-user fa-3x" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right style={{ right: 'auto' }}>
|
||||
<DropdownItem><button className="btn btn-link" onClick={logout}><i className="fa fa-lock"></i> Logout</button></DropdownItem>
|
||||
</DropdownMenu>
|
||||
</AppHeaderDropdown>
|
||||
</Nav>
|
||||
</AppHeader>
|
||||
<div className="app-body">
|
||||
<AppSidebar fixed display="lg">
|
||||
<AppSidebarHeader />
|
||||
<AppSidebarForm />
|
||||
<AppSidebarNav navConfig={sidebarNavItems} location={location} />
|
||||
<AppSidebarFooter />
|
||||
<AppSidebarMinimizer />
|
||||
</AppSidebar>
|
||||
<main className="main">
|
||||
<Container fluid>
|
||||
{children}
|
||||
</Container>
|
||||
</main>
|
||||
<AppAside fixed>
|
||||
</AppAside>
|
||||
</div>
|
||||
<AppFooter>
|
||||
<span className="ml-auto">
|
||||
Embark
|
||||
<a href="https://embark.status.im" title="Documentation" rel="noopener noreferrer" target="_blank">Documentation</a>
|
||||
|
|
||||
<a href="https://github.com/embark-framework" title="Github" rel="noopener noreferrer" target="_blank">Github</a>
|
||||
</span>
|
||||
</AppFooter>
|
||||
</div>
|
||||
);
|
||||
|
||||
Layout.propTypes = {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
plugins as pluginsAction
|
||||
} from '../actions';
|
||||
|
||||
import { getTabs, getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors';
|
||||
import { getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors';
|
||||
|
||||
const qs = require('qs');
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ class AppContainer extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Layout logout={this.props.logout} credentials={this.props.credentials} tabs={this.props.tabs}>
|
||||
<Layout location ={this.props.location} logout={this.props.logout} credentials={this.props.credentials}>
|
||||
{this.shouldRenderUnauthenticated() ? <Unauthenticated credentials={this.props.credentials}
|
||||
authenticate={this.props.authenticate}
|
||||
error={this.props.authenticationError} /> : <React.Fragment>{routes}</React.Fragment>}
|
||||
|
|
@ -73,7 +73,6 @@ class AppContainer extends Component {
|
|||
|
||||
AppContainer.propTypes = {
|
||||
credentials: PropTypes.object,
|
||||
tabs: PropTypes.arrayOf(PropTypes.object),
|
||||
initialized: PropTypes.bool,
|
||||
authenticationError: PropTypes.string,
|
||||
authenticate: PropTypes.func,
|
||||
|
|
@ -90,7 +89,6 @@ function mapStateToProps(state) {
|
|||
return {
|
||||
initialized: getVersions(state).length > 0,
|
||||
credentials: getCredentials(state),
|
||||
tabs: getTabs(state),
|
||||
authenticationError: getAuthenticationError(state)
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import {Provider} from 'react-redux';
|
||||
|
||||
import "tabler-react/dist/Tabler.css";
|
||||
import "./general.css";
|
||||
import "./slider.css";
|
||||
import 'font-awesome/css/font-awesome.min.css';
|
||||
import '@coreui/coreui/dist/css/coreui.min.css';
|
||||
|
||||
import AppContainer from './containers/AppContainer';
|
||||
import history from "./history";
|
||||
|
|
|
|||
|
|
@ -191,28 +191,6 @@ function baseEther(state = '1', action) {
|
|||
return state;
|
||||
}
|
||||
|
||||
const DEFAULT_TABS = [
|
||||
{value: "Contracts", to: "/embark/contracts", icon: "box", base: '/embark/contracts'},
|
||||
{value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", base: '/embark/explorer'},
|
||||
{value: "Fiddle", to: "/embark/fiddle", icon: "codepen", base: '/embark/fiddle'},
|
||||
{value: "Documentation", to: "/embark/documentation", icon: "file-text", base: '/embark/documentation'},
|
||||
{value: "Utils", to: "/embark/utilities/converter", icon: "settings", base: '/embark/utilities'}
|
||||
];
|
||||
|
||||
function tabs(state = DEFAULT_TABS, action) {
|
||||
if (action.type === '@@router/LOCATION_CHANGE'){
|
||||
const newState = [...state];
|
||||
const activeTab = newState.find(tab => action.payload.location.pathname.startsWith(tab.base));
|
||||
if (activeTab) {
|
||||
activeTab.to = action.payload.location.pathname;
|
||||
return newState;
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
entities,
|
||||
loading,
|
||||
|
|
@ -220,8 +198,7 @@ const rootReducer = combineReducers({
|
|||
errorMessage,
|
||||
errorEntities,
|
||||
credentials,
|
||||
baseEther,
|
||||
tabs
|
||||
baseEther
|
||||
});
|
||||
|
||||
export default rootReducer;
|
||||
|
|
|
|||
|
|
@ -159,8 +159,4 @@ export function getCurrentFile(state) {
|
|||
|
||||
export function getBaseEther(state) {
|
||||
return state.baseEther;
|
||||
}
|
||||
|
||||
export function getTabs(state) {
|
||||
return state.tabs;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue