-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
469 additions
and
248 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| .app-content { | ||
| display: grid; | ||
| align-content: flex-start; | ||
|
|
||
| grid-template-columns: 1fr 1fr 81fr 1fr; | ||
| } | ||
|
|
||
| .left-body-container { | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| padding: 3px 0px; | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| .left-body-container.expanded { | ||
| min-width: 7%; | ||
| } | ||
|
|
||
| .left-body-container .toggle-button { | ||
| background: transparent; | ||
| border: none; | ||
| color: white; | ||
| text-align: left; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .left-body-container.expanded .toggle-button { | ||
| text-align: right; | ||
| } | ||
|
|
||
| .status-panel { | ||
| background: white; | ||
| border-width: 1px 0 1px 1px; | ||
| border-style: solid; | ||
| border-color: var(--color-border-primary) var(--color-border-seconary) var(--color-border-primary) var(--color-border-primary); | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| main { | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| justify-content: space-between; | ||
| border: 1px solid var(--color-border-primary); | ||
| background-color: white; | ||
| } | ||
|
|
||
| .help-panel { | ||
| background: white; | ||
| border-width: 1px 1px 1px 0; | ||
| border-style: solid; | ||
| border-color: var(--color-border-primary) var(--color-border-primary) var(--color-border-primary) var(--color-border-seconary); | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| /* Grid */ | ||
|
|
||
| /* 1. Help expanded */ | ||
| .app-content.help-expanded { | ||
| grid-template-columns: 1fr 1fr 70fr 12fr; | ||
| } | ||
|
|
||
| /* 2. Status expanded */ | ||
| .app-content.status-expanded { | ||
| grid-template-columns: 1fr 12fr 70fr 1fr; | ||
| } | ||
|
|
||
| /* 3. Status and help expanded */ | ||
| .app-content.status-expanded.help-expanded { | ||
| grid-template-columns: 1fr 12fr 59fr 12fr; | ||
| } | ||
|
|
||
| /* 4. Only menu expanded */ | ||
| .app-content.menu-expanded { | ||
| grid-template-columns: 6fr 1fr 76fr 1fr; | ||
| } | ||
|
|
||
| /* 5. Menu and help expanded */ | ||
| .app-content.menu-expanded.help-expanded { | ||
| grid-template-columns: 6fr 1fr 65fr 12fr; | ||
| } | ||
|
|
||
| /* 6. Menu and status expanded */ | ||
| .app-content.menu-expanded.status-expanded { | ||
| grid-template-columns: 6fr 12fr 65fr 1fr; | ||
| } | ||
|
|
||
| /* 7. Everything expanded expanded */ | ||
| .app-content.menu-expanded.status-expanded.help-expanded { | ||
| grid-template-columns: 6fr 12fr 54fr 12fr; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React from 'react'; | ||
| import { Route } from 'react-router-dom'; | ||
| import { bindActionCreators } from 'redux'; | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import { dashboard_menu } from './pages/dashboard'; | ||
| import { addresses_menu } from './pages/addresses'; | ||
| import { explore_menu } from './pages/explore'; | ||
| import { indicies_menu } from './pages/indicies'; | ||
| import { signatures_menu } from './pages/signatures'; | ||
| import { caches_menu } from './pages/caches'; | ||
| import { other_menu } from './pages/other'; | ||
| import { settings_menu } from './pages/settings'; | ||
| import { support_menu } from './pages/support'; | ||
|
|
||
| import { | ||
| STATUS_TOGGLE, | ||
| HELP_TOGGLE | ||
| } from './components/panels/side-panel-actions'; | ||
| import { MAIN_MENU_TOGGLE } from './components/menus/main-menu/reducer'; | ||
| import { | ||
| MainMenu, | ||
| StatusPanel, | ||
| HelpPanel, | ||
| PageHelp | ||
| } from './components'; | ||
| import Routes from './routes'; | ||
| import './Content.css'; | ||
|
|
||
| const mainMenu = [ | ||
| dashboard_menu, | ||
| addresses_menu, | ||
| explore_menu, | ||
| indicies_menu, | ||
| signatures_menu, | ||
| caches_menu, | ||
| other_menu, | ||
| settings_menu, | ||
| support_menu, | ||
| ]; | ||
|
|
||
| const toggleStatus = () => ({ type: STATUS_TOGGLE }); | ||
| const toggleHelp = () => ({ type: HELP_TOGGLE }); | ||
| const toggleMainMenu = () => ({ type: MAIN_MENU_TOGGLE }); | ||
|
|
||
| export function Content(props) { | ||
| const { | ||
| isStatusExpanded, | ||
| isHelpExpanded, | ||
| isMainMenuExpanded, | ||
| toggleStatus, | ||
| toggleHelp, | ||
| toggleMainMenu | ||
| } = props; | ||
|
|
||
| const classNames = [ | ||
| 'app-content', | ||
| isMainMenuExpanded ? 'menu-expanded' : '', | ||
| isStatusExpanded ? 'status-expanded' : '', | ||
| isHelpExpanded ? 'help-expanded': '' | ||
| ].join(' '); | ||
|
|
||
| return ( | ||
| <div className={classNames}> | ||
| <MainMenu mainMenu={mainMenu} isExpanded={isMainMenuExpanded} toggle={toggleMainMenu} /> | ||
| <StatusPanel isExpanded={isStatusExpanded} toggle={toggleStatus} /> | ||
| <main> | ||
| {Routes.map((route, index) => ( | ||
| <Route | ||
| key={index} | ||
| render={route.component} | ||
| exact={route.exact} | ||
| path={route.path} /> | ||
| ))} | ||
| </main> | ||
| <HelpPanel isExpanded={isHelpExpanded} toggle={toggleHelp}> | ||
| <PageHelp /> | ||
| </HelpPanel> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const mapStateToProps = ({ reducer_SidePanels, reducer_MainMenu }) => ({ | ||
| isStatusExpanded: reducer_SidePanels.isStatusExpanded, | ||
| isHelpExpanded: reducer_SidePanels.isHelpExpanded, | ||
| isMainMenuExpanded: reducer_MainMenu.isMainMenuExpanded | ||
| }); | ||
|
|
||
| const mapDispatchToProps = (dispatch) => | ||
| bindActionCreators( | ||
| { | ||
| toggleStatus, | ||
| toggleHelp, | ||
| toggleMainMenu | ||
| }, | ||
| dispatch | ||
| ); | ||
|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| mapDispatchToProps | ||
| )(Content); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import { Icon } from './'; | ||
|
|
||
| const chevronDirectionByShrinkTo = new Map([ | ||
| ['left', { shrink: 'chevron_left', expand: 'chevron_right' }], | ||
| ['right', { shrink: 'chevron_right', expand: 'chevron_left' }] | ||
| ]); | ||
|
|
||
| const getIconsNames = (shrinkTo) => chevronDirectionByShrinkTo.get(shrinkTo); | ||
|
|
||
| export default function ExpandShrinkIcon({ shrinkTo, isExpanded, toggleIcon, onClick }) { | ||
| const iconName = toggleIcon || getIconsNames(shrinkTo)[isExpanded ? 'shrink' : 'expand']; | ||
|
|
||
| return ( | ||
| <Icon icon={iconName} onClick={onClick} /> | ||
| ); | ||
| } |
Oops, something went wrong.