Small fixes (#245)

* Doc info rendering deferred. Doc info does not need realtime rendering.
* Small tweaks

src/gui/app/app.js

@@ -28,6 +28,7 @@ import {
   Inform,
   ListItemText,
   Typography,
+  DeferredRender,
 } from "../common/factory";
 
 import { OpenFolderButton, HeadInfo, WordInfo, CharInfo, WordsToday } from "../common/components";
@@ -291,16 +292,16 @@ function WithDoc({setCommand, doc, updateDoc, recent}) {
     <Separator />
     <ViewSelectButtons selected={doc.ui.view.selected} setSelected={setSelected}/>
     <Separator/>
+    {/* No need for real time rendering */}
+    <DeferredRender>
     <HeadInfo head={head} updateDoc={updateDoc}/>
     <Separator />
     <Filler />
 
     <Separator/>
-    <WordsToday text={text} last={doc.head.last}/>
+    <WordInfo text={text} missing={missing} chars={chars} last={doc.head.last}/>
     <Separator/>
-    <WordInfo text={text} missing={missing}/>
-    <Separator/>
-    <CharInfo chars={chars}/>
+    </DeferredRender>
     {/* <CloseButton setCommand={setCommand}/> */}
 
     <Separator />

src/gui/common/components.js

@@ -16,6 +16,7 @@ import {
   TextField,
   Label,
   Accordion, AccordionSummary, AccordionDetails,
+  Separator,
 } from "../common/factory";
 
 import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
@@ -254,31 +255,38 @@ export class HeadInfo extends React.PureComponent {
   }
 }
 
-export class WordsToday extends React.PureComponent {
+export class WordInfo extends React.PureComponent {
   render() {
-    const {text, last} = this.props;
-    if(!last) return null;
+    const {text, missing, last, chars} = this.props;
 
-    const delta = text - last.text
-    return <Label>Today: {delta >= 0 ? "+" : ""}{delta}</Label>
+    const detail = missing ? `-${missing}` : ""
+
+    return <>
+      Words:&nbsp;<span style={{color: "green"}}>{text}</span>
+      <Separator/>
+      <WordsToday text={text} last={last}/>
+      <Separator/>
+      Target: {text + missing}&nbsp;<span style={{color: "firebrick"}}>{detail}</span>
+      <Separator/>
+      <CharInfo chars={chars}/>
+    </>
   }
 }
 
-export class WordInfo extends React.PureComponent {
+class CharInfo extends React.PureComponent {
   render() {
-    const {text, missing} = this.props;
-
-    const total  = `Words: ${text + missing}`
-    const detail = missing ? ` (${text} / ${missing})` : ""
+    const {chars} = this.props;
 
-    return <Label>{total}{detail}</Label>
+    return <Label>Chars: {chars}</Label>
   }
 }
 
-export class CharInfo extends React.PureComponent {
+class WordsToday extends React.PureComponent {
   render() {
-    const {chars} = this.props;
+    const {text, last} = this.props;
+    if(!last) return null;
 
-    return <Label>Chars: {chars}</Label>
+    const delta = text - last.text
+    return <Label>Today: {delta >= 0 ? "+" : ""}{delta}</Label>
   }
 }