Feat/mac (#109)

* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari

client/src/common/components/views/Paginator.jsx

@@ -1,33 +1,53 @@
 import React, { useEffect, useState } from 'react';
 import TodayItem from './TodayItem';
-import style from './Paginator.module.css';
 import { useInterval } from 'app/hooks/useInterval';
 import PropTypes from 'prop-types';
+import style from './Paginator.module.scss';
+import Empty from '../../state/Empty';
 
 export default function Paginator(props) {
-  const { events, selectedId, limit = 7, time = 10, isBackstage } = props;
+  const {
+    events,
+    selectedId,
+    limit = 8,
+    time = 10,
+    isBackstage,
+    setPageNumber,
+    setCurrentPage,
+  } = props;
   const LIMIT_PER_PAGE = limit;
-  const SCROLL_TIME = time * 1000 || 10000;
+  const SCROLL_TIME = time * 1000;
   const [numEvents, setNumEvents] = useState(0);
   const [page, setPage] = useState([]);
   const [pages, setPages] = useState(0);
   const [selPage, setSelPage] = useState(0);
 
+  // keep parent up to date
+  useEffect(() => {
+    if (setPageNumber) {
+      setPageNumber(pages);
+    }
+  }, [setPageNumber, pages]);
+
+  useEffect(() => {
+    if (setCurrentPage) {
+      setCurrentPage(selPage);
+    }
+  }, [setCurrentPage, selPage]);
+
   useEffect(() => {
     if (events == null) return;
     // how many events in list
-    let n = events.length;
+    const n = events.length;
     setNumEvents(n);
 
     // how many paginated views
-    let p = Math.ceil(n / LIMIT_PER_PAGE);
-    setPages(p);
+    setPages(Math.ceil(n / LIMIT_PER_PAGE));
 
     // divide events in parts of LIMIT_PER_PAGE
     const eventStart = LIMIT_PER_PAGE * selPage;
     const eventEnd = LIMIT_PER_PAGE * (selPage + 1);
-    let e = events.slice(eventStart, eventEnd);
-    setPage(e);
+    setPage(events.slice(eventStart, eventEnd));
 
     // if array is completely in past, show depending on SCROLL_PAST
   }, [events, selPage, LIMIT_PER_PAGE]);
@@ -42,14 +62,10 @@ export default function Paginator(props) {
 
   let selectedState = 0;
 
-  return (
-    <>
-      <div className={style.nav}>
-        {pages > 1 &&
-          [...Array(pages)].map((p, i) => (
-            <div key={i} className={i === selPage ? style.navItemSelected : style.navItem} />
-          ))}
-      </div>
+  if (events?.length < 1) {
+    return <Empty text='No events to show' />;
+  } else {
+    return (
       <div className={style.entries}>
         {page.map((e) => {
           if (e.id === selectedId) selectedState = 1;
@@ -67,8 +83,8 @@ export default function Paginator(props) {
           );
         })}
       </div>
-    </>
-  );
+    );
+  }
 }
 
 Paginator.propTypes = {
@@ -77,4 +93,6 @@ Paginator.propTypes = {
   limit: PropTypes.number,
   time: PropTypes.number,
   isBackstage: PropTypes.bool,
+  setPageNumber: PropTypes.func,
+  setCurrentPage: PropTypes.func,
 };

client/src/common/components/views/Paginator.module.css

@@ -1,87 +0,0 @@
-.entries {
-  display: flex;
-  flex-direction: column;
-}
-
-.navItem,
-.navItemSelected {
-  background-color: rgba(255, 255, 255, 0.39);
-  width: 0.7vw;
-  height: 0.7vw;
-  border-radius: 0.35vw;
-}
-
-.navItemSelected {
-  background-color: rgba(255, 255, 255, 0.79);
-}
-
-.nav {
-  align-self: center;
-  justify-content: flex-end;
-  display: flex;
-  margin-bottom: 2.5vh;
-}
-
-.nav > div {
-  margin-left: 0.5vw;
-}
-
-.entryTimes {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 1.4vw;
-
-  min-width: 10vw;
-  opacity: 0.9;
-  letter-spacing: 0.035em;
-}
-
-.entryTitle {
-  align-self: center;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.entryPast,
-.entryNow,
-.entryFuture {
-  display: flex;
-  font-size: 1.3vw;
-  padding: 0.2vh 1vw;
-  margin-bottom: 1.5vh;
-  border-radius: 3px;
-}
-
-.entryPast {
-  background-color: rgba(255, 255, 255, 0.01);
-  font-size: 1.2vw;
-}
-
-.entryPast > .entryTitle {
-  color: #999;
-}
-
-.entryFuture {
-  background-color: rgba(255, 255, 255, 0.03);
-  color: #ddd;
-}
-
-.entryNow {
-  color: #fff;
-  line-height: 5vh;
-  background-color: rgba(255, 255, 255, 0.07);
-  border-bottom: 0.5vh solid #ff7597aa;
-  margin-left: -0.5em;
-  padding-left: 0.5em;
-}
-
-.backstageInd {
-  color: #ff7597aa;
-  margin-left: auto;
-  margin-right: -0.5vw;
-}
-
-.backstageInd::before {
-  content: '*';
-}

client/src/common/components/views/Paginator.module.scss

@@ -0,0 +1,64 @@
+@use '../../../styles/main' as *;
+
+.entries {
+  width: 100%;
+}
+
+.entryTimes {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1.4vw;
+
+  min-width: 10vw;
+  opacity: 0.9;
+  letter-spacing: 0.035em;
+}
+
+.entryTitle {
+  align-self: center;
+  @include ellipsis;
+}
+
+.entryPast,
+.entryNow,
+.entryFuture {
+  display: flex;
+  font-size: 1.3vw;
+  padding: 0.2vh 1vw;
+  margin-bottom: 1.5vh;
+  border-radius: 3px;
+}
+
+.entryPast {
+  font-size: 1.2vw;
+}
+
+.entryPast > .entryTitle {
+  color: $text-gray-disabled;
+}
+
+.entryNow,
+.entryFuture {
+  color: $text-white;
+}
+
+.entryFuture {
+  background-color: $bg-gray-950;
+}
+
+.entryNow {
+  line-height: 5vh;
+  background-color: $bg-gray-900;
+  border-bottom: 0.5vh solid $ontime-pink;
+  margin-left: -0.5em;
+  padding-left: 0.5em;
+}
+
+.backstageInd {
+  color: $ontime-pink;
+  margin-left: auto;
+  margin-right: -0.5vw;
+}
+
+.backstageInd::before {
+  content: '*';
+}

client/src/common/components/views/TitleCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './TitleCard.module.css';
+import style from './TitleCard.module.scss';
 
 export default function TitleCard(props) {
   const { label, title, subtitle, presenter } = props;

client/src/common/components/views/TitleCard.module.scss

@@ -1,27 +1,24 @@
+@use '../../../styles/main' as *;
+
 .label {
-  font-size: 1.3vw;
-  color: #ff7597;
+  @include card-label;
 }
 
 .title,
 .subtitle,
 .presenter {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  @include ellipsis;
 }
 
 .title {
-  color: #ddd;
+  @include card-title;
   font-size: 2.5vw;
   flex: 1;
-  font-weight: 600;
-
 }
 
 .subtitle,
 .presenter {
-  color: #aaa;
+  color: $subtitle-gray;
 }
 
 .subtitle {

client/src/common/components/views/TitleSide.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './TitleSide.module.css';
+import style from './TitleSide.module.scss';
 
 export default function TitleSide(props) {
   const { type, label, title, subtitle, presenter } = props;

client/src/common/components/views/TitleSide.module.scss

@@ -1,19 +1,19 @@
+@use '../../../styles/main' as *;
+
 .label {
-  font-size: 1.3vw;
-  color: #ff7597;
+  @include card-label;
 }
 
 .nowTitle,
 .nextTitle {
-  color: #ddd;
-  font-weight: 600;
+  @include card-title;
 }
 
 .nowSubtitle,
 .nowPresenter,
 .nextSubtitle,
 .nextPresenter {
-  color: #aaa;
+  color: $subtitle-gray;
 }
 
 .nowTitle {

client/src/common/components/views/TodayItem.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { stringFromMillis } from 'ontime-utils/time';
-import style from './Paginator.module.css';
 import PropTypes from 'prop-types';
+import { stringFromMillis } from '../../utils/time';
+import style from './Paginator.module.scss';
 
 export default function TodayItem(props) {
   const { selected, timeStart, timeEnd, title, backstageEvent, colour } = props;
@@ -19,7 +19,7 @@ export default function TodayItem(props) {
   else if (selected === 2) selectStyle = style.entryFuture;
   return (
     <div className={selectStyle} style={{ borderLeft: `4px solid ${userColour}` }}>
-      <div className={`${style.entryTimes} ${backstageEvent ? style.backstage : undefined}`}>
+      <div className={`${style.entryTimes} ${backstageEvent ? style.backstage : ''}`}>
         {`${start} · ${end}`}
       </div>
       <div className={style.entryTitle}>{title}</div>
@@ -29,7 +29,7 @@ export default function TodayItem(props) {
 }
 
 TodayItem.propTypes = {
-  selected: PropTypes.bool,
+  selected: PropTypes.number,
   timeStart: PropTypes.number,
   timeEnd: PropTypes.number,
   title: PropTypes.string,