Add light theme

thomasnordquist · Apr 3, 2019 · 6853066 · 6853066
1 parent acbaced
commit 6853066
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 93 deletions.
diff --git 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 ;}
+ 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:https://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) {

diff --git 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))
diff --git 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,
+})
+
diff --git 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 {

diff --git 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) => {

diff --git 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',
  },

diff --git 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"
+}
diff --git 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,

diff --git 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}"`}>
- <DeviceHubOutlined className={classes[health]} />
+ <div className={classes.icon}>
+ <DeviceHubOutlined className={classes[health]} />
+ </div>
  </Tooltip>
  )
  }

diff --git 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>
+ )
+}
diff --git 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)