Show Remote Console button on mobile devices

Show Remote Console button on mobile devices. Make landscape view also scrollable.
KidA001 · Apr 8, 2019 · 19752d6 · 19752d6
1 parent e88822d
commit 19752d6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/src/app/components/App.js b/src/app/components/App.js
@@ -33,6 +33,7 @@ const Main = ({ isConnected, isMobileDevice, children, setView }) => {
 
 class App extends Component {
   // a crude, but simple way of seeing if the device is mobile
+  // should eventually be replaced with something more robust like react-device-detect
   isMobileDevice = typeof window.orientation !== "undefined" || navigator.userAgent.indexOf("IEMobile") !== -1
 
   state = {
@@ -100,6 +101,7 @@ class App extends Component {
                                 isConnected={isConnected}
                                 handleRemoteConsoleButtonClicked={this.toggleRemoteConsole}
                                 currentView={this.state.currentView}
+                                isMobileDevice={this.isMobileDevice}
                               />
                               <Main
                                 isConnected={isConnected}

diff --git a/src/app/components/Header/Header.js b/src/app/components/Header/Header.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react"
+import classnames from "classnames"
 
 import MqttSubscriptions from "../../mqtt/MqttSubscriptions"
 
@@ -7,16 +8,14 @@ import { VIEWS } from "../../utils/constants"
 import "./Header.scss"
 
 const Header = props => {
-  const { isConnected, showRemoteConsoleSetting, currentView, handleRemoteConsoleButtonClicked } = props
+  const { isConnected, showRemoteConsoleSetting, currentView, handleRemoteConsoleButtonClicked, isMobileDevice } = props
   return (
     <header>
       <img src={require("../../../images/icons/logo.png")} className="logo" />
       <div className="connection">
-        {/* <img src={require("../../../images/icons/connected.svg")} className="connection__icon" />
-        <p className="text text--small">{isConnected ? "Connected" : "Disconnected"}</p> */}
         {showRemoteConsoleSetting && (
           <button
-            className="remote-console-button text text--small"
+            className={classnames("remote-console-button", "text", "text--small", { "mobile-view": isMobileDevice })}
             onClick={handleRemoteConsoleButtonClicked}
             disabled={!isConnected}
           >
@@ -32,7 +31,7 @@ const Header = props => {
 // showRemoteConsoleSetting={topics.showRemoteConsoleSetting}
 class HeaderWithData extends Component {
   render() {
-    const { portalId, isConnected, currentView, handleRemoteConsoleButtonClicked } = this.props
+    const { portalId, isConnected, currentView, handleRemoteConsoleButtonClicked, isMobileDevice } = this.props
     return (
       <MqttSubscriptions
         topics={{ showRemoteConsoleSetting: `N/${portalId}/settings/0/Settings/SystemSetup/<placeholder>` }}
@@ -44,6 +43,7 @@ class HeaderWithData extends Component {
               isConnected={isConnected}
               handleRemoteConsoleButtonClicked={handleRemoteConsoleButtonClicked}
               currentView={currentView}
+              isMobileDevice={isMobileDevice}
             />
           )
         }}

diff --git a/src/app/components/Header/Header.scss b/src/app/components/Header/Header.scss
@@ -78,9 +78,10 @@ header {
   background-color: #2A3341;
   outline: none;
   cursor: pointer;
+}
 
+.remote-console-button:not(.mobile-view) {
   @media #{$hide-remote-console-breakpoint} {
     display: none;
   }
-
 }
diff --git a/src/app/components/Views/Metrics.js b/src/app/components/Views/Metrics.js
@@ -53,7 +53,7 @@ export default class Metrics extends Component {
   }
 
   componentDidUpdate() {
-    if (!this.isMobileDevice && this.metricsRef.current) {
+    if (!this.props.mobile && this.metricsRef.current) {
       const metrics = [...this.metricsRef.current.children]
       const cols = getRequiredCols(metrics)
       if (this.state.layoutCols !== cols) this.setState({ layoutCols: cols })
@@ -78,7 +78,9 @@ export default class Metrics extends Component {
   render() {
     const { portalId, inverterChargerDeviceId, isConnected, onChangeInverterChargerInputLimitClicked } = this.props
     const commonProps = { portalId, inverterChargerDeviceId, metricsRef: this.metricsRef }
-    const style = this.state.layoutCols === 2 ? { height: this.state.height } : {}
+
+    let style = this.state.layoutCols === 2 ? { height: this.state.height } : {}
+
     return (
       <div
         className={classnames("metrics-container", {

diff --git a/src/css/styles.scss b/src/css/styles.scss
@@ -79,8 +79,13 @@ main {
   @media #{$narrow-portrait} {
     flex-wrap: nowrap;
   }
+  @media (orientation: landscape) {
+    flex-direction: row;
+  }
 }
 
+
+
 .scrollable {
   flex: 1;
   align-items: start;