[Timer] TaskControl view

Author: Dmitry Yadrikhinsky

.erb/configs/webpack.config.renderer.dev.babel.js

@@ -25,7 +25,10 @@ const requiredByDLLConfig = module.parent.filename.includes(
 /**
  * Warn if the DLL is not built
  */
-if (!requiredByDLLConfig && !(fs.existsSync(dllDir) && fs.existsSync(manifest))) {
+if (
+  !requiredByDLLConfig &&
+  !(fs.existsSync(dllDir) && fs.existsSync(manifest))
+) {
   console.log(
     chalk.black.bgYellow.bold(
       'The DLL files are missing. Sit back while we build them for you with "yarn build-dll"'
@@ -61,9 +64,7 @@ export default merge(baseConfig, {
           {
             loader: require.resolve('babel-loader'),
             options: {
-              plugins: [
-                require.resolve('react-refresh/babel'),
-              ].filter(Boolean),
+              plugins: [require.resolve('react-refresh/babel')].filter(Boolean),
             },
           },
         ],
@@ -152,6 +153,9 @@ export default merge(baseConfig, {
             loader: 'less-loader',
             options: {
               lessOptions: {
+                modifyVars: {
+                  'primary-color': 'purple',
+                },
                 javascriptEnabled: true,
               },
             },
@@ -226,7 +230,6 @@ export default merge(baseConfig, {
     ],
   },
   plugins: [
-
     requiredByDLLConfig
       ? null
       : new webpack.DllReferencePlugin({
@@ -287,13 +290,13 @@ export default merge(baseConfig, {
     },
     before() {
       console.log('Starting Main Process...');
-        spawn('npm', ['run', 'start:main'], {
-          shell: true,
-          env: process.env,
-          stdio: 'inherit',
-        })
-          .on('close', (code) => process.exit(code))
-          .on('error', (spawnError) => console.error(spawnError));
+      spawn('npm', ['run', 'start:main'], {
+        shell: true,
+        env: process.env,
+        stdio: 'inherit',
+      })
+        .on('close', (code) => process.exit(code))
+        .on('error', (spawnError) => console.error(spawnError));
     },
   },
 });

src/components/CircleButton/CircleButton.less

@@ -0,0 +1,10 @@
+.circle-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  width: 28px;
+  border-radius: 14px;
+  cursor: pointer;
+  background-color: black;
+}

src/components/CircleButton/CircleButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './CircleButton.less';
+
+export default function CircleButton({ children, onClick }) {
+  return (
+    <span className="circle-button" onClick={onClick}>
+      {children}
+    </span>
+  );
+}

src/components/HeaderMenu.less

@@ -0,0 +1,7 @@
+.header-menu {
+  padding: 0 20px;
+}
+
+.header-menu a {
+  color: white;
+}

src/components/HeaderMenu.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import './HeaderMenu.less';
+
+export default function HeaderMenu({ children }) {
+  return <span className="header-menu">{children}</span>;
+}

src/helpers/DateTime.ts

@@ -2,13 +2,16 @@ function timePad(time: number): string {
   return String(time).padStart(2, '0');
 }
 
-export function msToTime(s: number) {
+export function msToTime(s: number, showSeconds: boolean = true) {
   const ms = s % 1000;
   s = (s - ms) / 1000;
   const secs = s % 60;
   s = (s - secs) / 60;
   const mins = s % 60;
   const hrs = (s - mins) / 60;
 
-  return `${timePad(hrs)}:${timePad(mins)}:${timePad(secs)}`;
+  if (showSeconds) {
+    return `${timePad(hrs)}:${timePad(mins)}:${timePad(secs)}`;
+  }
+  return `${timePad(hrs)}:${timePad(mins)}`;
 }

src/hooks/TaskHooks.ts

@@ -18,7 +18,7 @@ export function useTaskDuration(model: TaskModel | undefined) {
     }
     const duration = model.duration;
     if (duration !== 0) {
-      setDuration(msToTime(duration));
+      setDuration(msToTime(duration, model.active));
     }
     if (model.active) {
       intervalRef.current = setInterval(() => {

src/screens/Main.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
 import { Route, Switch, Link } from 'react-router-dom';
-import { Layout, Menu } from 'antd';
+import { Layout } from 'antd';
 import { observer } from 'mobx-react';
+
 import Projects from './projects/Projects';
+import TaskControl from './projects/components/TaskControl/TaskControl';
+import HeaderMenu from '../components/HeaderMenu';
 
 const { Header } = Layout;
 
 export default observer(function Main() {
   return (
     <Layout className="layout">
       <Header>
-        <div className="logo" />
-        <Menu theme="dark" mode="horizontal">
-          <Menu.Item key="1">
+        <div>
+          <HeaderMenu>
             <Link to="/hours">Hours</Link>
-          </Menu.Item>
-          <Menu.Item key="2">
+          </HeaderMenu>
+          <HeaderMenu>
             <Link to="/projects">Projects</Link>
-          </Menu.Item>
-        </Menu>
+          </HeaderMenu>
+          <TaskControl />
+        </div>
       </Header>
       <Switch>
         <Route path="/hours">

src/screens/projects/components/TaskControl/TaskControl.less

@@ -1,4 +1,29 @@
 .task-control {
+  display: inline-flex;
+  align-items: center;
+  height: 44px;
+  margin-left: 20px;
+  padding: 8px;
+  border-radius: 5px;
+  line-height: 14px;
   color: white;
-  //line-height: ;
+  background-color: #713A91;
+}
+
+.task-control--info {
+  display: inline-flex;
+  flex: 1;
+  flex-direction: column;
+  margin-right: 8px;
+  width: 140px;
+}
+
+.task-control--info span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.task-control--duration {
+  margin-right: 8px;
 }

src/screens/projects/components/TaskControl/TaskControl.tsx

@@ -1,29 +1,36 @@
 import React, { useMemo } from 'react';
 import { observer } from 'mobx-react';
+import { PauseOutlined } from '@ant-design/icons';
 
 import './TaskControl.less';
 
 import rootStore from '../../../../services/RootStore';
 import { useTaskDuration } from '../../../../hooks/TaskHooks';
+import CircleButton from '../../../../components/CircleButton/CircleButton';
 
 const { tasksStore, projectStore } = rootStore;
 
 export default observer(function TaskControl() {
-  const activeTask = tasksStore.activeTask;
-  const duration = useTaskDuration(activeTask);
+  const task = tasksStore.activeTask;
+  const duration = useTaskDuration(task);
 
   const project = useMemo(() => {
-    return projectStore.get(activeTask?.projectId || '');
-  }, [activeTask]);
+    return projectStore.get(task?.projectId || '');
+  }, [task]);
 
-  if (activeTask) {
+  if (task) {
     return (
-      <div className="task-control">
-        <div>{project?.title}</div>
-        <div>{activeTask.title}</div>
-        {duration}
-      </div>
+      <span className="task-control">
+        <div className="task-control--info">
+          <span>{project?.title}</span>
+          <span>{task.title}</span>
+        </div>
+        <span className="task-control--duration">{duration}</span>
+        <CircleButton onClick={() => tasksStore.endTimer(task)}>
+          <PauseOutlined />
+        </CircleButton>
+      </span>
     );
   }
-  return <div className="task-control">No active tasks</div>;
+  return <span className="task-control">No active tasks</span>;
 });