Add Edge side panel support

MicrosoftEdge · Feb 5, 2024 · 577d644 · 577d644
1 parent 0d32eba
commit 577d644
Show file tree

Hide file tree

Showing 15 changed files with 295 additions and 85 deletions.
diff --git a/slow-calendar/public/app.css b/slow-calendar/public/app.css
@@ -50,6 +50,14 @@ button:active {
   background-color: var(--background-color);
 }
 
+#app.in-side-panel {
+  grid-template-rows: 1fr;
+}
+
+#app[data-mode="day"] {
+  grid-template-columns: 1fr;
+}
+
 @media (max-width: 400px) {
   #app {
     grid-template-columns: 1fr;
@@ -71,6 +79,10 @@ button:active {
   grid-column: span 2;
 }
 
+#app[data-mode="day"] #toolbar {
+  grid-column: span 1;
+}
+
 #toolbar #month-year {
   margin: 0 auto;
   font-weight: bold;
@@ -86,9 +98,12 @@ button:active {
   border-radius: .5rem;
   overflow: hidden;
 }
+#app:not([data-mode="month"]) #month-grid {
+  display: none;
+}
 
 #week-grid {
-  display: none;
+  display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: 1fr;
   gap: 1px;
@@ -97,6 +112,23 @@ button:active {
   border-radius: .5rem;
   overflow: hidden;
 }
+#app:not([data-mode="week"]) #week-grid {
+  display: none;
+}
+
+#day-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  gap: 1px;
+  border: 1px solid var(--border-color);
+  background: var(--border-color);
+  border-radius: .5rem;
+  overflow: hidden;
+}
+#app:not([data-mode="day"]) #day-grid {
+  display: none;
+}
 
 #sidebar {
   padding: 1rem;
@@ -105,6 +137,9 @@ button:active {
   border-radius: .5rem;
   overflow-y: auto;
 }
+#app[data-mode="day"] #sidebar {
+  display: none;
+}
 
 #sidebar h2 {
   margin: 0;

diff --git a/slow-calendar/public/bundle.js b/slow-calendar/public/bundle.js
diff --git a/slow-calendar/public/data.json b/slow-calendar/public/data.json
@@ -10,7 +10,7 @@
       "title": "Stand-up meeting",
       "color": "#a2e1ef",
       "startDate": "2023-01-01",
-      "endDate": "2024-01-01",
+      "endDate": "2025-01-01",
       "startTime": "09:00",
       "duration": 30,
       "repeat": "daily",
@@ -55,7 +55,7 @@
     },
     {
       "id": "qmcv98y34vssde",
-      "title": "1:1",
+      "title": "1:1 with my manager",
       "color": "#ace3ac",
       "startDate": "2023-01-02",
       "startTime": "11:30",
@@ -65,6 +65,30 @@
       "description": "Weekly one to one with my manager",
       "rsvp": true
     },
+    {
+      "id": "q3mc1v98y34vssdfae42e",
+      "title": "1:1 with Danas",
+      "color": "#ace3ac",
+      "startDate": "2024-02-06",
+      "startTime": "15:00",
+      "duration": 25,
+      "repeat": "weekly",
+      "location": "Danas' office",
+      "description": "Weekly one to one with Danas",
+      "rsvp": true
+    },
+    {
+      "id": "q3mc1vgjse723sdfh82fae",
+      "title": "1:1 with Ahmad",
+      "color": "#ace3ac",
+      "startDate": "2024-02-06",
+      "startTime": "15:30",
+      "duration": 25,
+      "repeat": "weekly",
+      "location": "My office",
+      "description": "Weekly one to one with Ahmad",
+      "rsvp": true
+    },
     {
       "id": "dfgj79354unjbhvhsd",
       "title": "Christmas time off",

diff --git a/slow-calendar/public/icon-128.png b/slow-calendar/public/icon-128.png
diff --git a/slow-calendar/public/icon-256.png b/slow-calendar/public/icon-256.png
diff --git a/slow-calendar/public/icon-48.png b/slow-calendar/public/icon-48.png
diff --git a/slow-calendar/public/icon-64.png b/slow-calendar/public/icon-64.png
diff --git a/slow-calendar/public/icon.png b/slow-calendar/public/icon.png
diff --git a/slow-calendar/public/index.html b/slow-calendar/public/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <title>Slow Calendar</title>
-    <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
-    <link rel="stylesheet" href="app.css">
+  <meta charset="UTF-8">
+  <title>Slow Calendar</title>
+  <link rel="icon" type="image/png" href="icon-48.png">
+  <link rel="stylesheet" href="app.css">
+  <link rel="manifest" href="manifest.json" />
 </head>
+
 <body>
   <div id="app"></div>
   <script type="module" src="bundle.js"></script>
 </body>
+
 </html>
diff --git a/slow-calendar/public/manifest.json b/slow-calendar/public/manifest.json
@@ -0,0 +1,34 @@
+{
+  "name": "Slow Calendar",
+  "short_name": "slow-calendar",
+  "description": "A calendar app with a focus on simplicity and the ability to pin today's events to the browser's side panel",
+  "lang": "en-US",
+  "start_url": "./",
+  "scope": "./",
+  "theme_color": "white",
+  "background_color": "white",
+  "display": "standalone",
+  "edge_side_panel": {},
+  "icons": [
+    {
+      "src": "./icon.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "./icon-256.png",
+      "sizes": "256x256"
+    },
+    {
+      "src": "./icon-128.png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "./icon-64.png",
+      "sizes": "64x64"
+    },
+    {
+      "src": "./icon-48.png",
+      "sizes": "48x48"
+    }
+  ]
+}
diff --git a/slow-calendar/src/AppUI.ts b/slow-calendar/src/AppUI.ts
@@ -3,8 +3,9 @@ import { CalendarEvent } from "./CalendarEvent";
 import { MonthGrid } from "./MonthGrid";
 import { Toolbar } from "./Toolbar";
 import { Sidebar } from "./Sidebar";
-import { getEventsForDay } from "./utils";
+import { getEventsForDay, isInBrowserSidePanel } from "./utils";
 import { WeekGrid } from "./WeekGrid";
+import { DayGrid } from "./DayGrid";
 
 export class AppUI extends EventTarget {
   private rootEl: HTMLElement;
@@ -15,6 +16,9 @@ export class AppUI extends EventTarget {
   private weekGridEl: HTMLElement;
   public weekGrid: WeekGrid;
 
+  private dayGridEl: HTMLElement;
+  public dayGrid: DayGrid;
+
   private toolbarEl: HTMLElement;
   private toolbar: Toolbar;
 
@@ -40,58 +44,72 @@ export class AppUI extends EventTarget {
   render() {
     this.rootEl.innerHTML = '';
 
-    // Create an element for the toolbar.
-    this.toolbarEl = document.createElement('div');
-    this.toolbarEl.id = 'toolbar';
-    this.rootEl.appendChild(this.toolbarEl);
-
-    // Init the toolbar component in it.
-    this.toolbar = new Toolbar(this.toolbarEl, this._date, this.mode);
-
-    this.toolbar.addEventListener('prev', () => {
-      const newDate = this.mode === "month"
-        ? new Date(this._date.getFullYear(), this._date.getMonth() - 1, 1)
-        : new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate() - 7);
-      this.date = newDate;
-
-      // @ts-ignore
-      this.dispatchEvent(new CustomEvent('date-changed', {detail: this._date}));
-    });
-
-    this.toolbar.addEventListener('next', () => {
-      const newDate = this.mode === "month"
-        ? new Date(this._date.getFullYear(), this._date.getMonth() + 1, 1)
-        : new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate() + 7);
-      this.date = newDate;
-
-      // @ts-ignore
-      this.dispatchEvent(new CustomEvent('date-changed', {detail: this._date}));
-    });
-
-    this.toolbar.addEventListener('today', () => {
-      this.date = new Date();
-
-      // @ts-ignore
-      this.dispatchEvent(new CustomEvent('date-changed', {detail: this._date}));
-    });
-
-    this.toolbar.addEventListener('month-view', () => {
-      this.mode = "month";
-      this.monthGridEl.style.display = 'grid';
-      this.weekGridEl.style.display = 'none';
-
-      // @ts-ignore
-      this.dispatchEvent(new CustomEvent('mode-changed', {detail: this.mode}));
-    });
-
-    this.toolbar.addEventListener('week-view', () => {
-      this.mode = "week";
-      this.monthGridEl.style.display = 'none';
-      this.weekGridEl.style.display = 'grid';
-
-      // @ts-ignore
-      this.dispatchEvent(new CustomEvent('mode-changed', {detail: this.mode}));
-    });
+    if (!isInBrowserSidePanel()) {
+      // Create an element for the toolbar.
+      this.toolbarEl = document.createElement('div');
+      this.toolbarEl.id = 'toolbar';
+      this.rootEl.appendChild(this.toolbarEl);
+
+      // Init the toolbar component in it.
+      this.toolbar = new Toolbar(this.toolbarEl, this._date, this.mode);
+
+      this.toolbar.addEventListener('prev', () => {
+        if (this.mode === "month") {
+          this.date = new Date(this._date.getFullYear(), this._date.getMonth() - 1, 1);
+        } else if (this.mode === "week") {
+          this.date = new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate() - 7);
+        } else {
+          this.date = new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate() - 1);
+        }
+
+        // @ts-ignore
+        this.dispatchEvent(new CustomEvent('date-changed', { detail: this._date }));
+      });
+
+      this.toolbar.addEventListener('next', () => {
+        if (this.mode === "month") {
+          this.date = new Date(this._date.getFullYear(), this._date.getMonth() + 1, 1);
+        } else if (this.mode === "week") {
+          this.date = new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate() + 7);
+        } else {
+          this.date = new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate() + 1);
+        }
+
+        // @ts-ignore
+        this.dispatchEvent(new CustomEvent('date-changed', { detail: this._date }));
+      });
+
+      this.toolbar.addEventListener('today', () => {
+        this.date = new Date();
+
+        // @ts-ignore
+        this.dispatchEvent(new CustomEvent('date-changed', { detail: this._date }));
+      });
+
+      this.toolbar.addEventListener('month-view', () => {
+        this.mode = "month";
+        this.rootEl.setAttribute("data-mode", "month");
+
+        // @ts-ignore
+        this.dispatchEvent(new CustomEvent('mode-changed', { detail: this.mode }));
+      });
+
+      this.toolbar.addEventListener('week-view', () => {
+        this.mode = "week";
+        this.rootEl.setAttribute("data-mode", "week");
+
+        // @ts-ignore
+        this.dispatchEvent(new CustomEvent('mode-changed', { detail: this.mode }));
+      });
+
+      this.toolbar.addEventListener('day-view', () => {
+        this.mode = "day";
+        this.rootEl.setAttribute("data-mode", "day");
+
+        // @ts-ignore
+        this.dispatchEvent(new CustomEvent('mode-changed', { detail: this.mode }));
+      });
+    }
 
     // Create an element for the month grid.
     this.monthGridEl = document.createElement('div');
@@ -109,6 +127,14 @@ export class AppUI extends EventTarget {
     // Init the week grid component in it.
     this.weekGrid = new WeekGrid(this.weekGridEl, this._date, this._events);
 
+    // Create an element for the day grid.
+    this.dayGridEl = document.createElement('div');
+    this.dayGridEl.id = 'day-grid';
+    this.rootEl.appendChild(this.dayGridEl);
+
+    // Init the day grid component in it.
+    this.dayGrid = new DayGrid(this.dayGridEl, this._date, this._events);
+
     // Create an element for the sidebar.
     this.sidebarEl = document.createElement('div');
     this.sidebarEl.id = 'sidebar';
@@ -136,28 +162,26 @@ export class AppUI extends EventTarget {
     this.sidebar.events = getEventsForDay(this._events, new Date());
 
     // Show/hide the right mode
-    if (this.mode === "week") {
-      this.monthGridEl.style.display = 'none';
-      this.weekGridEl.style.display = 'grid';
-    } else {
-      this.monthGridEl.style.display = 'grid';
-      this.weekGridEl.style.display = 'none';
-    }
+    this.rootEl.setAttribute("data-mode", this.mode);
   }
 
   set date(date: Date) {
     console.log("Setting date to", date);
     this._date = date;
     this.monthGrid.date = date;
     this.weekGrid.date = date;
-    this.toolbar.date = date;
+    this.dayGrid.date = date;
+    if (this.toolbar) {
+      this.toolbar.date = date;
+    }
     this.sidebar.events = getEventsForDay(this._events, this._date);
   }
 
   set events(events: CalendarEvent[]) {
     this._events = events;
     this.monthGrid.events = events;
     this.weekGrid.events = events;
+    this.dayGrid.events = events;
     this.sidebar.events = getEventsForDay(this._events, this._date);
   }
 }