Merge pull request #9 from cpvalente/feat/electron

Feat/electron

client/src/App.css

@@ -10,4 +10,7 @@ html,
   overflow: hidden;
   overflow: clip;
   height: 100vh;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-app-region: drag;
 }

client/src/common/components/buttons/ApplyIconBtn.jsx

@@ -1,16 +1,19 @@
 import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { FiChevronsDown } from 'react-icons/fi';
 
 export default function ApplyIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiChevronsDown />}
-      colorScheme='orange'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Apply delays'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiChevronsDown />}
+        colorScheme='orange'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/LockIconBtn.jsx

@@ -6,13 +6,13 @@ export default function LockIconBtn(props) {
   const { clickhandler, active, ref } = props;
   return (
     <Tooltip label='Lock cursor to current'>
-      <IconButton
+        <IconButton
         ref={ref}
         size={props.size || 'xs'}
         icon={<FiTarget />}
         color={active ? 'pink.100' : 'pink.300'}
         borderColor={active ? undefined : 'pink.300'}
-        backgroundColor={active ? 'pink.300' : undefined}
+        backgroundColor={active ? 'pink.400' : undefined}
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}

client/src/common/components/buttons/PublicIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiUsers } from 'react-icons/fi';
+
+export default function PublicIconBtn(props) {
+  const { actionHandler, active, ...rest } = props;
+  return (
+    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiUsers />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() =>
+          actionHandler('update', { field: 'isPublic', value: !active })
+        }
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/common/components/text/NumberedText.jsx

@@ -1,11 +0,0 @@
-import { Flex, Text } from '@chakra-ui/layout';
-import styles from './NumberedText.module.css';
-
-export default function NumberedText({ number = 1, text = '' }) {
-  return (
-    <Flex>
-      <div className={styles.stylednumber}>{number}</div>
-      <Text>{text}</Text>
-    </Flex>
-  );
-}

client/src/common/components/text/NumberedText.module.css

@@ -1,13 +0,0 @@
-.stylednumber {
-  display: inline;
-  text-align: center;
-  color: white;
-  font-weight: 600;
-
-  background-color: #ff5b7e;
-  border: 1px solid rgba(255,255,255,0.17);
-  width: 1.5em;
-  border-radius: 1em;
-
-  margin-right: 0.5em;
-}

client/src/common/input/EditableText.module.css

@@ -8,9 +8,12 @@
 
 .block {
   display: 'block';
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .inline {
   display: inline;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

client/src/features/editors/Editor.jsx

@@ -1,3 +1,4 @@
+
 import { lazy, useEffect } from 'react';
 import { Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
@@ -31,43 +32,28 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.editor}>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Event List
-          </Heading>
-          <NumberedText number={1} text={'Manage events'} />
+          <h1>Event List</h1>
           <div className={styles.content}>
             <EventListWrapper />
           </div>
         </Box>
 
         <Box className={styles.messages}>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Display Messages
-          </Heading>
-          <NumberedText
-            number={3}
-            text={'Show realtime messages on different screens'}
-          />
+          <h1>Display Messages</h1>
           <div className={styles.content}>
             <MessageControl />
           </div>
         </Box>
 
         <Box className={styles.playback}>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Time Control
-          </Heading>
-          <NumberedText number={2} text={'Control timers'} />
+          <h1>Timer Control</h1>
           <div className={styles.content}>
             <PlaybackControl />
           </div>
         </Box>
 
         <Box className={styles.info} borderRadius='0.5em' overflowX='auto'>
-          <Heading size='lg' paddingBottom={'0.25em'}>
-            Info
-          </Heading>
-          <NumberedText number={4} text={'Running Info'} />
+          <h1>Info</h1>
           <div className={styles.content}></div>
         </Box>
       </div>

client/src/features/editors/Editor.module.css

@@ -69,6 +69,12 @@
   }
 }
 
+h1 {
+  font-size: 2.5vh;
+  color: rgba(255, 255, 255, 0.63);
+  padding-bottom: 0.25em;
+}
+
 .mainContainer > div {
   border-radius: 0.5em;
   height: 100%;

client/src/features/editors/list/ActionButtons.jsx

@@ -1,6 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import { FiZap, FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
 
 export default function ActionButtons(props) {
   const { showAdd, showDelay, showBlock, actionHandler } = props;
@@ -16,7 +16,7 @@ export default function ActionButtons(props) {
         as={IconButton}
         aria-label='Options'
         size='xs'
-        icon={<FiZap />}
+        icon={<FiPlus />}
         _expanded={{ bg: 'orange.300', color: 'white' }}
         _focus={{ boxShadow: 'none' }}
         backgroundColor={'orange.200'}

client/src/features/editors/list/EventBlock.jsx

@@ -6,7 +6,7 @@ import EventTimes from 'common/components/eventTimes/EventTimes';
 import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical';
 import EditableText from 'common/input/EditableText';
 import ActionButtons from './ActionButtons';
-import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn';
+import PublicIconBtn from 'common/components/buttons/PublicIconBtn';
 import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from 'common/dateConfig';
 import style from './EventBlock.module.css';
@@ -93,7 +93,7 @@ const ExpandedBlock = (props) => {
         onClick={() => props.setCollapsed(true)}
       />
       <div className={style.actionOverlay}>
-        <VisibleIconBtn actionHandler={actionHandler} active={data.isPublic} />
+        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
         <ActionButtons
           showAdd
           showDelay
@@ -146,7 +146,7 @@ const CollapsedBlock = (props) => {
         onClick={() => props.setCollapsed(false)}
       />
       <div className={style.actionOverlay}>
-        <VisibleIconBtn actionHandler={actionHandler} active={data.isPublic} />
+        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
         <ActionButtons
           showAdd
           showDelay

client/src/features/editors/list/EventBlock.module.css

@@ -152,6 +152,8 @@
   font-size: 0.8em;
   float: right;
   padding-right: 1em;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 /* ================ MORE ================ */

client/src/features/menu/MenuActionButtons.jsx

@@ -1,12 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import {
-  FiTrash2,
-  FiZap,
-  FiPlus,
-  FiClock,
-  FiMinusCircle,
-} from 'react-icons/fi';
+import { FiTrash2, FiPlus, FiClock, FiMinusCircle } from 'react-icons/fi';
 import { Divider } from '@chakra-ui/layout';
 
 export default function MenuActionButtons(props) {
@@ -20,9 +14,9 @@ export default function MenuActionButtons(props) {
     <Menu isLazy lazyBehavior='unmount'>
       <MenuButton
         as={IconButton}
-        aria-label='Options'
+        aria-label='Create Menu'
         size={props.size || 'xs'}
-        icon={<FiZap />}
+        icon={<FiPlus />}
         _expanded={{ bg: 'orange.300', color: 'white' }}
         _focus={{ boxShadow: 'none' }}
         backgroundColor={'orange.200'}

client/src/features/menu/MenuBar.jsx

@@ -1,9 +1,5 @@
 import { useMutation, useQueryClient } from 'react-query';
-import {
-  downloadEvents,
-  uploadEvents,
-  uploadEventsWithPath,
-} from 'app/api/ontimeApi';
+import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
 import { EVENTS_TABLE } from 'app/api/apiConstants';
 import DownloadIconBtn from './buttons/DownloadIconBtn';
 import SettingsIconBtn from './buttons/SettingsIconBtn';
@@ -87,7 +83,6 @@ export default function MenuBar(props) {
         style={{ fontSize: '1.5em' }}
         size='lg'
         clickhandler={() => handleIPC('help')}
-        disabled
       />
       <SettingsIconBtn style={{ fontSize: '1.5em' }} size='lg' disabled />
       <div className={style.gap} />

server/electron/splash/splash.html

@@ -9,6 +9,10 @@
     <title>ontime</title>
     <style>
       body {
+        -webkit-user-select: none;
+        user-select: none;
+        -webkit-app-region: drag;
+        animation: fadein 0s;
         background-color: #0005;
       }
       h1 {
@@ -29,10 +33,10 @@
       }
       .lds-ellipsis div {
         position: absolute;
-        width: 13px;
-        height: 13px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
-        background: #fffa;
+        background: #ff7597aa;
         animation-timing-function: cubic-bezier(0, 1, 1, 0);
       }
       .lds-ellipsis div:nth-child(1) {
@@ -51,6 +55,14 @@
         left: 56px;
         animation: lds-ellipsis3 0.6s infinite;
       }
+      @keyframes fadein {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
       @keyframes lds-ellipsis1 {
         0% {
           transform: scale(0);
@@ -79,7 +91,7 @@
   </head>
   <body>
     <div class="container">
-      <img src="../../assets/images/logosbwa/LOGO-192.png" />
+      <img src="../../assets/logo.png" />
       <h1>ontime · event timers</h1>
       <div class="lds-ellipsis">
         <div></div>

server/main.js

@@ -41,10 +41,12 @@ const nodePath =
 // TODO: Icons appear pixelated
 const trayIcon = path.join(__dirname, './assets/images/logos/LOGO-512.png');
 const appIcon = path.join(__dirname, './assets/images/logos/LOGO-512.png');
+
 function showNotification(text) {
   new Notification({
     title: 'ontime',
     body: text,
+    silent: true,
   }).show();
 }
 
@@ -253,6 +255,6 @@ ipcMain.on('send-to-link', (event, arg) => {
 
   // send to help URL
   if (arg === 'help') {
-    shell.openExternal('http://blank');
+    shell.openExternal('https://cpvalente.gitbook.io/ontime/');
   }
 });

server/package.json

@@ -27,18 +27,20 @@
 
     "dist-win": "electron-builder --publish=never  --x64 --win",
     "dist-mac": "electron-builder --publish=never  --x64 --mac",
-
-    "startall": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
+    "dist-all": "electron-builder -mw"
   },
   "build": {
     "productName": "ontime",
     "appId": "no.lightdev.ontime",
     "asar": true,
     "dmg": {
+      "artifactName": "ontime-macOS.dmg",
+      "icon": "icon.icns"
 		},
     "mac": {
 			"target": "dmg",
-      "category": "no.lightdev.ontime"
+      "category": "public.app-category.productivity",
+      "icon": "icon.icns"
     },
     "win": {
       "target": "nsis"