From a0ce4137eaecae4b0ac72d95bd52cec64dfd7281 Mon Sep 17 00:00:00 2001 From: Daniel Gonzalez Date: Mon, 15 Jun 2020 17:46:11 -0400 Subject: [PATCH] feat(updates): Added visual updates to menu header and footer --- src/components/admin-lte/admin-lte.css | 9 ++ src/components/admin-lte/index.js | 161 ++++++++++++++++++++----- src/components/footer/footer.css | 13 ++ src/components/footer/index.js | 15 +++ src/components/layout.js | 3 +- src/components/qr-scanner/modal.js | 34 +----- 6 files changed, 177 insertions(+), 58 deletions(-) create mode 100644 src/components/footer/footer.css create mode 100644 src/components/footer/index.js diff --git a/src/components/admin-lte/admin-lte.css b/src/components/admin-lte/admin-lte.css index c710c1b..299ad1f 100644 --- a/src/components/admin-lte/admin-lte.css +++ b/src/components/admin-lte/admin-lte.css @@ -30,3 +30,12 @@ #import-mnemonic{ text-transform: lowercase; } +.components-container{ + min-height: calc(100vh - 100px); +} + +.sidebar-toggle:hover{ + background-color: white!important; + color: var(--main-color)!important; + +} \ No newline at end of file diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js index 4237b6d..3dfe984 100644 --- a/src/components/admin-lte/index.js +++ b/src/components/admin-lte/index.js @@ -10,9 +10,12 @@ import ScannerModal from "../qr-scanner/modal" import Layout from "../layout" import "./admin-lte.css" -//import {BrowserRouter as Router} from 'react-router-dom'; +import { BrowserRouter as Router } from "react-router-dom" const { Item } = Sidebar +// Screen width to hide the side menu on click +const MENU_HIDE_WIDTH = 770 + let _this class AdminLTEPage extends React.Component { constructor(props) { @@ -20,15 +23,17 @@ class AdminLTEPage extends React.Component { _this = this this.state = { bchBalance: Math.random().toFixed(8), - showScannerModal: true, + showScannerModal: false, + section: "Settings", + menuIsHide: false, } } sidebar = [ - , - , - , - , + , + , + , + , @@ -36,19 +41,15 @@ class AdminLTEPage extends React.Component { , + , ] render() { return ( - - + <> + - +

BCH Balance

@@ -59,24 +60,128 @@ class AdminLTEPage extends React.Component { {_this.sidebar} - {/*
*/} - - {/*
*/} - - - - - + +
+ {_this.state.section === "Settings" && } + {_this.state.section === "Icons" && } + {_this.state.section === "Configure" && } + {_this.state.section === "Audit" && } +
+ - + + + + ) } + componentDidMount() { + _this.customMenuItems() + _this.dropDownBalance() + _this.addOnClickEventToScanner() + + _this.activeItemById("Settings") + } + + // Due to that it is not possible to add the "onClick" method + // directly to the component we do it using JS + customMenuItems() { + try { + // Ignore menu items without link to components + const ignoreItems = ["Balance", "Qr Scanner", "Link"] + + const menu = document.getElementsByClassName("sidebar-menu") + const ulElement = menu[0] + const childrens = ulElement.children + + if (childrens && childrens.length) { + for (let i = 0; i < childrens.length; i++) { + //const href = childrens[i].children[0].href + const textValue = childrens[i].children[0].children[1].textContent + childrens[i].id = textValue + const ignore = ignoreItems.find(val => textValue === val) + // Ignore menu items without link to components + if (!ignore) + childrens[i].onclick = () => this.changeSection(textValue) + } + } + } catch (error) { + console.error(error) + } + } + + // Displays the BCH balance by default + dropDownBalance() { + try { + const balanceEle = document.getElementById("Balance") + balanceEle.children[0].click() + } catch (error) { + console.error(error) + } + } + + // Section change, renders the corresponding component + // to the selected section. each menu item corresponds + // to a section. + changeSection(section) { + _this.activeItemById(section) + _this.setState({ + section: section, + }) + _this.hideMenu() + } + + // Adds a visual mark to the selected item on the menu + activeItemById(id) { + try { + const elementActived = document.getElementsByClassName("active") + elementActived[0].className = "" + const element = document.getElementById(id) + element.className = `${element.className} active` + } catch (error) { + console.error(error) + } + } + + // Hides the side menu when clicking on mobile devices + hideMenu() { + try { + const windowWidth = window.innerWidth + //console.log("Window Width : ",windowWidth) + if(windowWidth > MENU_HIDE_WIDTH) return + const toggleEle = document.getElementsByClassName("sidebar-toggle") + toggleEle[0].click() + } catch (error) { + console.error(error) + } + + } + + // Adds the "onClick" event to the QR scanner item + addOnClickEventToScanner() { + try { + const qrScannerEle = document.getElementById("Qr Scanner") + qrScannerEle.onclick = () => _this.toggleScannerModal() + } catch (error) { + console.error(error) + } + + } + + // Controller to show the QR scanner + toggleScannerModal() { + if (!_this.state.showScannerModal) { + _this.hideMenu() + } + _this.setState({ + showScannerModal: !_this.state.showScannerModal, + }) + } } export default AdminLTEPage diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css new file mode 100644 index 0000000..1175747 --- /dev/null +++ b/src/components/footer/footer.css @@ -0,0 +1,13 @@ +#footer{ + width: 100%; + max-height: 50px; + min-height: 50px; + background-color: var(--main-color); + display: flex; + justify-content: center; + align-items: center; +} +#footer a{ + color: white; + font-weight: 400; +} \ No newline at end of file diff --git a/src/components/footer/index.js b/src/components/footer/index.js new file mode 100644 index 0000000..e7a8c6f --- /dev/null +++ b/src/components/footer/index.js @@ -0,0 +1,15 @@ +import React from "react" +import "./footer.css" +class Footer extends React.Component { + render() { + return ( + + ) + } +} + +export default Footer diff --git a/src/components/layout.js b/src/components/layout.js index a432716..d97ee64 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -10,6 +10,7 @@ import PropTypes from "prop-types" //import { useStaticQuery, graphql } from "gatsby" //import Header from "./header" +import Footer from './footer' import "./app-colors.css" import "./layout.css" @@ -28,7 +29,7 @@ const Layout = ({ children }) => { <>
{children}
- +
) } diff --git a/src/components/qr-scanner/modal.js b/src/components/qr-scanner/modal.js index 25a3baa..50058c0 100644 --- a/src/components/qr-scanner/modal.js +++ b/src/components/qr-scanner/modal.js @@ -8,13 +8,12 @@ class ScannerModal extends Component { super(props) _this = this this.state = { - show: true, } } modalFooter = ( -