Userguide (#87)

* very basic cards vis

* better trend and bar chart in kanban overview

* now is better

* fix delete bug

* better-looking tray

* setting up userguide

* UserGuide

* better card UI

* add sortby in overview

* add a basic tutorial

* add demo data

* set min-height for List.Cards

* add scrollbar for the overview page

* better sorting

* fix test issue

* refine UI detail

README.md

@@ -74,7 +74,9 @@ To download, go to [release page](https://github.com/rem2016/PomodoroLogger/rele
 
 # Development
 
-To build the project, issue the following commands
+You need to install node.js and node-gyp to build this project.
+
+After installing yarn, issue the following commands
 
 ```
 yarn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pomodoro-logger",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "pomodoro project-time-logger",
   "main": "./dist/main.js",
   "scripts": {

src/lang/en.ts

@@ -0,0 +1,14 @@
+export const lang = {
+    demoCardContent:
+        'This is a demo Card 🎈. \n' +
+        '## Usage \n\n' +
+        '- **Draggable**\n' +
+        '- Support **Markdown**\n' +
+        '- Click to edit content\n' +
+        '- Ctrl+F to search card\n' +
+        '\n### Try it yourself!\n\n' +
+        '[ ] Drag this card to In Progress\n' +
+        '[ ] Edit me in Markdown\n' +
+        '[ ] Set estimated time',
+    welcome: 'Welcome✨'
+};

src/main/main.ts

@@ -23,18 +23,18 @@ if (process.platform === 'win32') {
 let win: BrowserWindow | undefined;
 const installExtensions = async () => {
     const installer = require('electron-devtools-installer');
-    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
+    // const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
+    const forceDownload = true;
+    console.log('forcedownload', forceDownload);
     const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
+    console.log('react', installer[extensions[0]]);
+    console.log('redux', installer[extensions[1]]);
     return Promise.all(
         extensions.map(name => installer.default(installer[name], forceDownload))
     ).catch(console.log);
 };
 
 const createWindow = async () => {
-    if (process.env.NODE_ENV !== 'production') {
-        await installExtensions();
-    }
-
     win = new BrowserWindow({
         width: 1080,
         height: 800,
@@ -47,6 +47,12 @@ const createWindow = async () => {
         }
     });
 
+    console.log('create window');
+    if (process.env.NODE_ENV !== 'production') {
+        await installExtensions();
+    }
+    console.log('installed extensions');
+
     if (process.env.NODE_ENV === 'production') {
         win.removeMenu();
     }
@@ -65,6 +71,7 @@ const createWindow = async () => {
         );
     }
 
+    console.log('loaded url');
     win.on('close', (event: Event) => {
         if (win) {
             win.hide();

src/renderer/components/Analyser/Analyser.tsx

@@ -5,6 +5,7 @@ import { Button, Card, Col, Progress, Row, Statistic } from 'antd';
 import { RootState } from '../../reducers';
 import { HistoryActionCreatorTypes } from '../History/action';
 import { workers } from '../../workers';
+import { Bar } from '../Visualization/Bar';
 
 const Container = styled.div`
     position: relative;
@@ -61,6 +62,9 @@ export const Analyser: React.FC<Props> = (props: Props) => {
                 Train
             </Button>
             <Progress percent={progress} size="small" />
+            <div style={{height: 50, width: 280}}>
+                <Bar values={[5, 10, 100, 20, 30]} names={['123', '123', '22', '22', '123']}/>
+            </div>
         </Container>
     );
 };

src/renderer/components/Application.tsx

@@ -15,6 +15,7 @@ import { RootState } from '../reducers';
 import Kanban from './Kanban';
 import styled from 'styled-components';
 import Timer from './Timer';
+import { UserGuide } from './UserGuide/UserGuide';
 
 const Main = styled.div`
     .ant-tabs-bar {
@@ -59,7 +60,7 @@ const Application = (props: Props) => {
                             Kanban
                         </span>
                     }
-                    key="project"
+                    key="kanban"
                 >
                     <Kanban />
                 </TabPane>
@@ -103,6 +104,7 @@ const Application = (props: Props) => {
                     undefined
                 )}
             </Tabs>
+            <UserGuide />
         </Main>
     );
 };

src/renderer/components/Kanban/Board/Board.tsx

@@ -9,6 +9,19 @@ const Container = styled.div`
     height: 100%;
     width: 100%;
     overflow-x: auto;
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+        background-color: #f5f5f5;
+    }
+    ::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        background-color: rgba(50, 50, 50, 0.3);
+    }
+    ::-webkit-scrollbar-track {
+        border-radius: 8px;
+        background-color: rgba(200, 200, 200, 0.5);
+    }
 `;
 
 const ListContainer = styled.div`