Add light theme

2019-04-03 06:09:34 +02:00
parent acbaced1ec
commit 6853066a19
18 changed files with 166 additions and 93 deletions
--- a/app/index.html
+++ b/app/index.html
@@ -11,13 +11,20 @@
            padding: 0;
          }

-          @keyframes example {
+          @keyframes updateDark {
            0%   {background-color: none;}
            25%  {background-color: #3f51b5;}
            50%  {background-color: #3f51b5;}
            100% {background-color: none;}
          }

+          @keyframes updateLight {
+            0%   {background-color: none; color: inherit}
+            25%  {background-color: #bfc9c8; color: #000}
+            50%  {background-color: #bfc9c8; color: #000}
+            100% {background-color: none; color: inherit}
+          }
+
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
@@ -36,30 +43,6 @@
          }
        </style>
        <style>
-          #splash {
-            z-index: 1000000;
-            background-color: #303030;
-            display: block;
-            width: 100vw;
-            height: 100vh;
-            position: fixed;
-            opacity: 1;
-          }
-          #splash1 {
-            margin: 37vh auto 0 auto;
-            height: 25vh;
-            width: 25vh;
-            /* background-image:url('../rings.svg'); */
-            background-size: cover;
-          }
-          #splash2 {
-            margin: 0 auto;
-          }
-          @keyframes unsplash {
-            0%   {opacity: 1;}
-            100% {opacity: 0;}
-          }
-
          .Resizer {
              background: #eee;
              opacity: .2;
@@ -114,7 +97,6 @@
        <script src="http://localhost:35729/livereload.js"></script>
    </head>
    <body>
-        <div id="splash"><div id="splash1"></div></div>
        <div id="app" style="font:-webkit-control"></div>
        <script>
            function loadScript(path) {
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -15,6 +15,7 @@ import { globalActions, settingsActions } from './actions'
 import { Theme, withStyles } from '@material-ui/core/styles'

 const Settings = React.lazy(() => import('./components/Settings'))
+const ContentView = React.lazy(() => import('./components/ContentView'))

 interface Props {
  connectionId: string
@@ -23,6 +24,7 @@ interface Props {
  error?: string
  actions: typeof globalActions
  settingsActions: typeof settingsActions
+  launching: boolean
 }

 class App extends React.PureComponent<Props, {}> {
@@ -51,6 +53,10 @@ class App extends React.PureComponent<Props, {}> {
    const { settingsVisible } = this.props
    const { content, contentShift, centerContent, paneDefaults, heightProperty } = this.props.classes

+    if (this.props.launching) {
+      return null
+    }
+
    return (
      <div className={centerContent}>
        <CssBaseline />
@@ -63,26 +69,10 @@ class App extends React.PureComponent<Props, {}> {
            <div className={`${settingsVisible ? contentShift : content}`}>
                <TitleBar />
            </div>
-            <div>
-              <SplitPane
-                step={20}
-                primary="second"
-                className={`${settingsVisible ? contentShift : content} ${heightProperty}`}
-                split="vertical"
-                minSize={250}
-                defaultSize={500}
-                resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
-                allowResize={true}
-                style={{ position: 'relative' }}
-                pane1Style={{ overflow: 'hidden' }}
-              >
-                <div className={paneDefaults}>
-                  <Tree />
-                </div>
-                <div className={paneDefaults}>
-                  <Sidebar connectionId={this.props.connectionId} />
-                </div>
-              </SplitPane>
+            <div className={settingsVisible ? contentShift : content}>
+              <React.Suspense fallback={<div>Loading...</div>}>
+                <ContentView heightProperty={heightProperty} connectionId={this.props.connectionId} paneDefaults={paneDefaults} />
+              </React.Suspense>
            </div>
          </div>
          <UpdateNotifier />
@@ -93,15 +83,6 @@ class App extends React.PureComponent<Props, {}> {
  }
 }

-const mapStateToProps = (state: AppState) => {
-  return {
-    settingsVisible: state.settings.visible,
-    connectionId: state.connection.connectionId,
-    error: state.globalState.error,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
-  }
-}
-
 const styles = (theme: Theme) => {
  const drawerWidth = 300
  return {
@@ -151,4 +132,14 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

+const mapStateToProps = (state: AppState) => {
+  return {
+    settingsVisible: state.settings.visible,
+    connectionId: state.connection.connectionId,
+    error: state.globalState.error,
+    highlightTopicUpdates: state.settings.highlightTopicUpdates,
+    launching: state.globalState.launching,
+  }
+}
+
 export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(App))
--- a/app/src/actions/Global.ts
+++ b/app/src/actions/Global.ts
@@ -1,13 +1,12 @@
 import { ActionTypes, AppState, CustomAction } from '../reducers'
-import { Dispatch } from 'redux';
+import { Dispatch } from 'redux'

 export const showError = (error?: string) => ({
  error,
  type: ActionTypes.showError,
 })

-export const toggleTheme = () => (dispatch: Dispatch<CustomAction>, getState: () => AppState) => {
-  dispatch({
-    type: getState().globalState.theme === 'light' ? ActionTypes.setDarkTheme : ActionTypes.setLightTheme,
+export const didLaunch = () => ({
+  type: ActionTypes.didLaunch,
 })
-}
+
--- a/app/src/actions/Publish.ts
+++ b/app/src/actions/Publish.ts
@@ -1,8 +1,8 @@
 import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { Dispatch } from 'redux'
 import { makePublishEvent, rendererEvents } from '../../../events'
-import { Base64Message } from '../../../backend/src/Model/Base64Message';

 export const setTopic = (topic?: string): Action  => {
  return {
--- a/app/src/actions/Settings.ts
+++ b/app/src/actions/Settings.ts
@@ -11,9 +11,9 @@ import {
  ActionTypes,
  SettingsState,
  TopicOrder,
-  Action,
 } from '../reducers/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message';
+import { globalActions } from '.';

 const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
  id: 'Settings',
@@ -29,6 +29,7 @@ export const loadSettings = () => async (dispatch: Dispatch<any>, _getState: ()
  } catch (error) {
    dispatch(showError(error))
  }
+  dispatch(globalActions.didLaunch())
 }

 export const storeSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState)  => {
--- a/app/src/components/BrokerStatistics.tsx
+++ b/app/src/components/BrokerStatistics.tsx
@@ -6,6 +6,7 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { Base64Message } from '../../../backend/src/Model/Base64Message';
+import lime from '@material-ui/core/colors/teal'

 const abbreviate = require('number-abbreviate')

@@ -22,7 +23,7 @@ const styles: StyleRulesCallback = theme => ({
  container: {
    width: '100%',
    height: '224px',
-    backgroundColor: 'rebeccapurple',
+    backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
    marginBottom: 0,
    padding: '8px',
  },
--- a/app/src/components/CodeBlockColors.ts
+++ b/app/src/components/CodeBlockColors.ts
@@ -0,0 +1,8 @@
+export enum CodeBlockColors {
+  text = "#080808",
+  background = "#F9F9F9",
+  numeric = "#811F24",
+  boolean = "#811F24",
+  string = "#0B6125",
+  variable = "#234A97"
+}
--- a/app/src/components/CodeDiff.tsx
+++ b/app/src/components/CodeDiff.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Theme, withStyles } from '@material-ui/core'
 import 'prismjs/components/prism-json'
 import 'prismjs/themes/prism-tomorrow.css'
+import { CodeBlockColors } from './CodeBlockColors';

 interface Props {
  previous: string
@@ -44,7 +45,7 @@ class CodeDiff extends React.Component<Props, {}> {
    })

    return (
-      <div>
+      <div style={{ backgroundColor: '#ebebeb' }}>
        <pre className={`language-json ${this.props.classes.codeBlock}`}>
          {code}
        </pre>
@@ -99,6 +100,7 @@ const style = (theme: Theme) => {
  }
  const before = {
    margin: '0 2px 0 -9px',
+    color: CodeBlockColors.text,
  }
  return {
    additions: {
@@ -113,7 +115,29 @@ const style = (theme: Theme) => {
    codeBlock: {
      fontSize: '12px',
      maxHeight: '200px',
-      marginLeft: '-16px',
+      marginLeft: '33px !important',
+      backgroundColor: `${CodeBlockColors.background} !important`,
+      '& .token.number': {
+        color: CodeBlockColors.numeric,
+      },
+      '& .token.boolean': {
+        color: CodeBlockColors.numeric,
+      },
+      '& .token.property': {
+        color: CodeBlockColors.variable,
+      },
+      '& .token.string': {
+        color: CodeBlockColors.string,
+      },
+      '& .token': {
+        color: CodeBlockColors.text,
+      },
+      '& .token.operator': {
+        color: CodeBlockColors.text,
+      },
+      '& .token.punctuation': {
+        color: CodeBlockColors.text,
+      },
    },
    noChange: {
      ...baseStyle,
--- a/app/src/components/ConnectionHealthIndicator.tsx
+++ b/app/src/components/ConnectionHealthIndicator.tsx
@@ -12,11 +12,15 @@ const styles: StyleRulesCallback = theme => ({
    color: red[700],
  },
  online: {
-    color: green[500],
+    color: green[400],
  },
  connecting: {
    color: orange[600],
  },
+  icon: {
+    boxShadow: theme.shadows[10],
+    padding: '4px', borderRadius: '50%', backgroundColor: '#eee'
+  }
 })

 interface Props {
@@ -38,7 +42,9 @@ class ConnectionHealthIndicator extends React.Component<Props, {}> {

    return (
      <Tooltip title={`Connection health "${health}"`}>
+        <div className={classes.icon}>
          <DeviceHubOutlined className={classes[health]} />
+        </div>
      </Tooltip>
    )
  }
--- a/app/src/components/ContentView.tsx
+++ b/app/src/components/ContentView.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import SplitPane from 'react-split-pane'
+import { Sidebar } from './Sidebar'
+import Tree from './Tree/Tree';
+
+export default function ContentView(props: {heightProperty: any, paneDefaults: any, connectionId: any}) {
+  return (
+    <SplitPane
+      step={20}
+      primary="second"
+      className={props.heightProperty}
+      split="vertical"
+      minSize={250}
+      defaultSize={500}
+      resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
+      allowResize={true}
+      style={{ position: 'relative' }}
+      pane1Style={{ overflow: 'hidden' }}
+    >
+      <div className={props.paneDefaults}>
+        <Tree />
+      </div>
+      <div className={props.paneDefaults}>
+        <Sidebar connectionId={props.connectionId} />
+      </div>
+    </SplitPane>
+  )
+}
--- a/app/src/components/Sidebar/History.tsx
+++ b/app/src/components/Sidebar/History.tsx
@@ -14,6 +14,7 @@ interface Props {
  onClick?: (index: number, element: EventTarget) => void
  classes: any
  contentTypeIndicator?: JSX.Element
+  theme: Theme
 }

 interface State {
@@ -30,7 +31,7 @@ class MessageHistory extends React.Component<Props, State> {

  public renderHistory() {
    const style = (element: HistoryItem) => ({
-      backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)',
+      backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
      margin: '8px',
      padding: '8px 8px 0 8px',
      cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -53,7 +54,7 @@ class MessageHistory extends React.Component<Props, State> {
    const visible = this.props.items.length > 0 && this.state.collapsed

    return (
-      <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
+      <div className={this.props.classes.main}>
        <Typography
          component={'span'}
          onClick={this.toggle}
@@ -93,7 +94,11 @@ class MessageHistory extends React.Component<Props, State> {
 }

 const styles = (theme: Theme) => ({
+  main: {
+    backgroundColor: 'rgba(170, 170, 170, 0.2)',
+    marginTop: '16px',
+  },
  badge: { right:'-25px' },
 })

-export default withStyles(styles)(MessageHistory)
+export default withStyles(styles, { withTheme: true })(MessageHistory)
--- a/app/src/components/Sidebar/Publish/Publish.tsx
+++ b/app/src/components/Sidebar/Publish/Publish.tsx
@@ -3,6 +3,7 @@ import 'brace/mode/json'
 import 'brace/mode/text'
 import 'brace/mode/xml'
 import 'brace/theme/monokai'
+import 'brace/theme/dawn'

 import * as React from 'react'
 import * as q from '../../../../../backend/src/Model'
@@ -20,6 +21,8 @@ import {
  MenuItem,
  Tooltip,
  Fab,
+  Theme,
+  withTheme,
 } from '@material-ui/core'

 // tslint:disable-next-line
@@ -45,6 +48,7 @@ interface Props {
  retain: boolean
  editorMode: string
  qos: 0 | 1 | 2
+  theme: Theme
 }

 interface State {
@@ -310,7 +314,7 @@ class Publish extends React.Component<Props, State> {
    return (
      <AceEditor
        mode={this.props.editorMode}
-        theme="monokai"
+        theme={this.props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
        name="UNIQUE_ID_OF_DIV"
        width="100%"
        height="200px"
@@ -341,4 +345,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(Publish)
+export default withTheme(connect(mapStateToProps, mapDispatchToProps)(Publish))
--- a/app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
@@ -2,10 +2,10 @@ import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
 import CodeDiff from '../../CodeDiff'
 import { AppState } from '../../../reducers'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message';

 interface Props {
  message: q.Message
@@ -42,7 +42,6 @@ class ValueRenderer extends React.Component<Props, State> {
    if (renderMode === 'raw') {
      compareMessage = message
    }
-
    if (!message.value) {
      return null
    }
@@ -69,7 +68,7 @@ class ValueRenderer extends React.Component<Props, State> {
      const compare = this.messageToPrettyJson(compareStr) || compareStr
      const language = current && compare ? 'json' : undefined

-      return this.renderDiff(str, compareStr, language)
+      return this.renderDiff(current, compare, language)
    }
  }

--- a/app/src/components/TitleBar.tsx
+++ b/app/src/components/TitleBar.tsx
@@ -69,6 +69,10 @@ const styles: StyleRulesCallback = theme => ({
    marginLeft: -12,
    marginRight: 20,
  },
+  disconnect: {
+    margin: 'auto 8px auto auto',
+    color: theme.palette.primary.contrastText,
+  }
 })

 interface Props {
@@ -97,7 +101,7 @@ class TitleBar extends React.Component<Props, {}> {
          </IconButton>
          <Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography>
          {this.renderSearch()}
-          <Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}>
+          <Button className={classes.disconnect} onClick={actions.connection.disconnect}>
            Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
          </Button>
          <ConnectionHealthIndicator />
--- a/app/src/components/Tree/TreeNode.tsx
+++ b/app/src/components/Tree/TreeNode.tsx
@@ -32,10 +32,10 @@ const styles = (theme: Theme) => {
      marginLeft: theme.spacing(1.5),
    },
    selected: {
-      backgroundColor: 'rgba(170, 170, 170, 0.55)',
+      backgroundColor: theme.palette.type === 'dark' ? 'rgba(170, 170, 170, 0.55)' : 'rgba(170, 170, 170, 0.55)',
    },
    hover: {
-      backgroundColor: 'rgba(100, 100, 100, 0.55)',
+      backgroundColor: theme.palette.type === 'dark' ? 'rgba(100, 100, 100, 0.55)' : 'rgba(200, 200, 200, 0.55)',
    },
  }
 }
@@ -55,6 +55,7 @@ interface Props {
  didSelectTopic: any
  highlightTopicUpdates: boolean
  selectTopicWithMouseOver: boolean
+  theme: Theme
 }

 interface State {
@@ -184,7 +185,8 @@ class TreeNode extends React.Component<Props, State> {
    this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false

    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
-    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
+    const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
+    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {}
    this.animationDirty = shouldStartAnimation

    const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
@@ -269,4 +271,4 @@ class TreeNode extends React.Component<Props, State> {
  }
 }

-export default withStyles(styles)(TreeNode)
+export default withStyles(styles, { withTheme: true })(TreeNode)
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -9,6 +9,16 @@ import { batchDispatchMiddleware } from 'redux-batched-actions'
 import { createMuiTheme, MuiThemeProvider, Theme } from '@material-ui/core/styles'
 import { Provider, connect } from 'react-redux'
 import './tracking'
+import blue from '@material-ui/core/colors/blue'
+import red from '@material-ui/core/colors/red'
+import pink from '@material-ui/core/colors/pink'
+import orange from '@material-ui/core/colors/orange'
+import deepOrange from '@material-ui/core/colors/deepOrange'
+import indigo from '@material-ui/core/colors/indigo'
+import lime from '@material-ui/core/colors/lime'
+import green from '@material-ui/core/colors/green'
+import teal from '@material-ui/core/colors/teal'
+import amber from '@material-ui/core/colors/amber'

 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
@@ -21,14 +31,6 @@ const store = createStore(
  ),
 )

-setTimeout(() => {
-  const splash = document.getElementById('splash')
-  if (splash) {
-    splash.style.animation = 'unsplash 0.5s ease-in 0s 1 normal forwards'
-    setTimeout(() => splash.remove(), 600)
-  }
-}, 300)
-
 function createTheme(type: 'light' | 'dark') {
  if (type === 'dark') {
    return createMuiTheme({
@@ -40,6 +42,15 @@ function createTheme(type: 'light' | 'dark') {
    return createMuiTheme({
      palette: {
        type: 'light',
+        background: {
+          default: '#fafafa',
+        },
+        primary: teal,
+        secondary: amber,
+        // error: red,
+        action: {
+          disabledBackground: '#fafafa',
+        },
      },
    })
  }
--- a/app/src/reducers/Settings.ts
+++ b/app/src/reducers/Settings.ts
@@ -68,6 +68,7 @@ export const settingsReducer = createReducer(initialState, {

 export interface SetTheme {
  type: ActionTypes.SETTINGS_SET_THEME_LIGHT | ActionTypes.SETTINGS_SET_THEME_DARK
+  theme: 'light'
 }

 export interface DidLoadSettings {
--- a/app/src/reducers/index.ts
+++ b/app/src/reducers/index.ts
@@ -10,8 +10,7 @@ export enum ActionTypes {
  showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
  showUpdateDetails = 'SHOW_UPDATE_DETAILS',
  showError = 'SHOW_ERROR',
-  setDarkTheme = 'GLOBAL_SET_DARK_THEME',
-  setLightTheme = 'GLOBAL_SET_LIGHT_THEME',
+  didLaunch = 'DID_LAUNCH',
 }

 export interface CustomAction extends Action {
@@ -34,10 +33,12 @@ export interface GlobalState {
  showUpdateNotification?: boolean
  showUpdateDetails: boolean
  error?: string
+  launching: boolean
 }

 const initialGlobalState: GlobalState = {
  showUpdateDetails: false,
+  launching: true,
 }

 const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = initialGlobalState, action) => {
@@ -45,7 +46,7 @@ const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = ini
    throw Error('No initial state')
  }
  trackEvent(action.type)
-
+  console.log(action.type)
  switch (action.type) {
    case ActionTypes.showUpdateNotification:
      return {
@@ -59,6 +60,12 @@ const globalState: Reducer<GlobalState | undefined, CustomAction> = (state = ini
        error: action.error,
      }

+    case ActionTypes.didLaunch:
+      return {
+        ...state,
+        launching: false,
+      }
+
    case ActionTypes.showUpdateDetails:
      if (action.showUpdateDetails === undefined) {
        return state