Polish calendar theme and refactor (#97)

actionbutton/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/actionbutton/index.html",
     "widgetId": "@gristlabs/widget-actionbutton",
     "published": true,
-    "accessLevel": "full"
+    "accessLevel": "full",
+    "renderAfterReady": true
   }
 }

calendar/package.json

@@ -12,7 +12,8 @@
       "url": "https://gristlabs.github.io/grist-widget/calendar/index.html",
       "widgetId": "@gristlabs/widget-calendar",
       "published": true,
-      "accessLevel": "full"
+      "accessLevel": "full",
+      "renderAfterReady": true
     }
 
   ]

calendar/page.js

@@ -330,14 +330,6 @@ class CalendarHandler {
     }
     this.previousIds = currentIds;
   }
-
-  setTheme(gristThemeConfiguration) {
-    this._gristTheme = gristThemeConfiguration;
-    const options = this._getCalendarOptions();
-    this.calendar.setTheme(options.theme);
-    this.calendar.setCalendars(options.calendars);
-    this.calendar.render();
-  }
 }
 
 // when a document is ready, register the calendar and subscribe to grist events
@@ -437,7 +429,6 @@ let onGristSettingsChanged = function(options, settings) {
   const view = options?.calendarViewPerspective ?? 'week';
   changeCalendarView(view);
   colTypesFetcher.setAccessLevel(settings.accessLevel);
-  calendarHandler.setTheme(settings.theme);
 };
 
 function changeCalendarView(view) {
@@ -571,6 +562,9 @@ function buildCalendarEventObject(record, colTypes) {
     isAllday,
     category: 'time',
     state: 'Free',
+    color: this._textColor,
+    backgroundColor: this._mainColor,
+    dragBackgroundColor: 'var(--grist-theme-hover)',
   };
 }
 

calendar/screen.css

@@ -304,7 +304,8 @@ body {
 .tui-timepicker-select {
   border: 1px solid var(--grist-theme-input-border);
   padding: 0px;
-  background: unset;
+  color: var(--grist-theme-select-button-fg);
+  background: var(--grist-theme-select-button-bg);
 }
 
 .tui-datepicker .tui-is-selectable.tui-is-selected,
@@ -466,6 +467,25 @@ input:checked + label {
   background: var(--grist-theme-menu-border);
 }
 
+.toastui-calendar-popup-date-dash {
+  color: var(--grist-theme-input-border);
+}
+
+.toastui-calendar-grid-selection-label {
+  color: var(--grist-theme-text);
+}
+
+.toastui-calendar-see-more {
+  border: unset !important;
+  background-color: var(--grist-theme-popup-bg) !important;
+  box-shadow: 0 2px 20px 0 var(--grist-theme-menu-shadow, rgba(38, 38, 51, 0.6)) !important;
+}
+
+.toastui-calendar-more-title-date,
+.toastui-calendar-more-title-day {
+  color: var(--grist-theme-text);
+}
+
 @media (max-width: 575.98px) {
   /* CSS hacks to make days of week more responsive in week view. */
   .toastui-calendar-week-view .toastui-calendar-day-name__date,

clipboard/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/clipboard/index.html",
     "widgetId": "@gristlabs/widget-clipboard",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

dropbox-embed/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/dropbox-embed/index.html",
     "widgetId": "@gristlabs/dropbox-embed",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

exoplanet/package.json

@@ -7,6 +7,7 @@
     "name": "Exoplanet",
     "url": "https://gristlabs.github.io/grist-widget/exoplanet",
     "widgetId": "@gristlabs/widget-exoplanet",
-    "published": false
+    "published": false,
+    "renderAfterReady": true
   }
 }

flashcards/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/flashcards/index.html",
     "widgetId": "@gristlabs/flashcards",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

inspect/package.json

@@ -9,31 +9,36 @@
       "url": "https://gristlabs.github.io/grist-widget/inspect/onRecord.html",
       "widgetId": "@gristlabs/widget-inspect#onRecord",
       "published": true,
-      "accessLevel": "read table"
+      "accessLevel": "read table",
+      "renderAfterReady": true
     },
     {
       "name": "Inspect Table",
       "url": "https://gristlabs.github.io/grist-widget/inspect/onRecords.html",
       "widgetId": "@gristlabs/widget-inspect#onRecords",
       "published": true,
-      "accessLevel": "read table"
+      "accessLevel": "read table",
+      "renderAfterReady": true
     },
     {
       "name": "Inspect Options",
       "url": "https://gristlabs.github.io/grist-widget/inspect/onOptions.html",
       "widgetId": "@gristlabs/widget-inspect#onOptions",
-      "published": true
+      "published": true,
+      "renderAfterReady": true
     },
     {
       "name": "Inspect Columns",
       "url": "https://gristlabs.github.io/grist-widget/inspect/columns.html",
-      "widgetId": "@gristlabs/widget-inspect#columns"
+      "widgetId": "@gristlabs/widget-inspect#columns",
+      "renderAfterReady": true
     }, 
     {
       "name": "Inspect API",
       "url": "https://gristlabs.github.io/grist-widget/inspect/api.html",
       "widgetId": "@gristlabs/widget-inspect#api",
-      "published": true
+      "published": true,
+      "renderAfterReady": true
     }
   ]
 }

invoices/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/invoices",
     "widgetId": "@gristlabs/widget-invoices",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

map/package.json

@@ -9,7 +9,8 @@
       "url": "https://gristlabs.github.io/grist-widget/map/index.html",
       "widgetId": "@gristlabs/widget-map#map",
       "published": true,
-      "accessLevel": "read table"
+      "accessLevel": "read table",
+      "renderAfterReady": true
     }
   ]
 }

markdown/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/markdown",
     "widgetId": "@gristlabs/widget-markdown",
     "published": true,
-    "accessLevel": "full"
+    "accessLevel": "full",
+    "renderAfterReady": true
   }
 }

notepad/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/notepad",
     "widgetId": "@gristlabs/widget-notepad",
     "published": true,
-    "accessLevel": "full"
+    "accessLevel": "full",
+    "renderAfterReady": true
   }
 }

pedigree/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/pedigree",
     "widgetId": "@gristlabs/widget-pedigree",
     "published": false,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

pivottable/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/pivottable/index.html",
     "widgetId": "@gristlabs/widget-pivottable",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

printlabels/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/printlabels/index.html",
     "widgetId": "@gristlabs/widget-printlabels",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

purchase-orders/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/purchase-orders",
     "widgetId": "@gristlabs/widget-purchase-orders",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

qrcode/package.json

@@ -9,7 +9,8 @@
       "url": "https://gristlabs.github.io/grist-widget/qrcode/index.html",
       "widgetId": "@gristlabs/widget-qrcode",
       "published": true,
-      "accessLevel": "read table"
+      "accessLevel": "read table",
+      "renderAfterReady": true
     }
   ]
 }

renderhtml/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/renderhtml/index.html",
     "widgetId": "@gristlabs/widget-renderhtml",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

rendervideo/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/rendervideo/index.html",
     "widgetId": "@gristlabs/widget-rendervideo",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }

test/calendar.ts

@@ -1,4 +1,4 @@
-import {assert, driver} from 'mocha-webdriver';
+import {Key, assert, driver} from 'mocha-webdriver';
 import {getGrist} from "./getGrist";
 
 //not a pretty way to get events from currently used calendar control. but it's working.
@@ -194,29 +194,26 @@ describe('calendar', function () {
 
     // Now try to add a record. It should fail.
     await clickDay(10);
-    await grist.waitForServer();
-    assert.equal(await eventsCount(), 0);
+    await assertNewEventPopupDisplayed(false);
 
-    // We don't have a good way of checking it. So we just check at the end that we have only one event..
+    // We don't have a good way of checking it. So we just check at the end that we have only one event.
 
     // Now with read access.
     await grist.setCustomWidgetAccess('read table');
     await grist.waitForServer();
     await grist.waitForFrame();
 
-    // Now try to add a record. It should fail.
+    // Try to add a record again. It should still fail.
     await clickDay(11);
-    await grist.waitForServer();
-    assert.equal(await eventsCount(), 0);
+    await assertNewEventPopupDisplayed(false);
 
     // Now with full access.
     await grist.setCustomWidgetAccess('full');
     await grist.waitForServer();
     await grist.waitForFrame();
 
-    await clickDay(12);
+    await createCalendarEvent(12, 'Test1');
     await grist.waitForServer();
-
     await grist.waitToPass(async () => {
       assert.equal(await eventsCount(), 1);
     });
@@ -237,10 +234,10 @@ describe('calendar', function () {
     ]);
 
     // Add 4 events in the calendar.
-    await clickDay(14);
-    await clickDay(15);
-    await clickDay(16);
-    await clickDay(17);
+    await createCalendarEvent(14, 'Test2');
+    await createCalendarEvent(15, 'Test3');
+    await createCalendarEvent(16, 'Test4');
+    await createCalendarEvent(17, 'Test5');
 
     // Now test if bi-directional mapping works.
     await grist.waitToPass(async () => {
@@ -252,7 +249,7 @@ describe('calendar', function () {
 
     assert.equal(await selectedRow(), 2);
 
-    // Calendar should be focues on 3rd event.
+    // Calendar should be focused on 3rd event.
     assert.isTrue(await getCalendarEvent(3).then(c => c.selected));
 
     // Click 4th row
@@ -292,18 +289,38 @@ describe('calendar', function () {
   //TODO: test adding new events and moving existing one on the calendar. ToastUI is not best optimized for drag and drop tests in mocha and i cannot yet make it working correctly.
 
   /**
-   * Clicks on a day in a month view.
+   * Clicks the cell for `day` in the calendar.
    */
-  async function clickDay(which: number) {
+  async function clickDay(day: number) {
     await grist.inCustomWidget(async () => {
       await driver.withActions(ac =>
-        ac.move({origin: driver.findContentWait(`.toastui-calendar-template-monthGridHeader`, String(which), 200)})
+        ac.move({origin: driver.findContentWait(`.toastui-calendar-template-monthGridHeader`, String(day), 200)})
           .press().pause(100).release()
       );
     });
+  }
+
+  /**
+   * Creates an event in the calendar with title `eventTitle` for the specified `day`.
+   */
+  async function createCalendarEvent(day: number, eventTitle: string) {
+    await grist.inCustomWidget(async () => {
+      await driver.withActions(ac =>
+        ac.move({origin: driver.findContentWait(`.toastui-calendar-template-monthGridHeader`, String(day), 200)})
+          .press().pause(100).release()
+      );
+      await driver.findWait('.toastui-calendar-popup-container', 1000);
+      await driver.sendKeys(eventTitle, Key.ENTER);
+    });
     await grist.waitForServer();
   }
 
+  async function assertNewEventPopupDisplayed(expected: boolean) {
+    await grist.inCustomWidget(async () => {
+      assert.equal(await driver.find('.toastui-calendar-popup-container').isPresent(), expected);
+    });
+  }
+
   function eventsCount() {
     return grist.inCustomWidget(async () => {
       // We see only summaries (like 1 more)

viewer/package.json

@@ -8,6 +8,7 @@
     "url": "https://gristlabs.github.io/grist-widget/viewer/index.html",
     "widgetId": "@gristlabs/widget-viewer",
     "published": true,
-    "accessLevel": "read table"
+    "accessLevel": "read table",
+    "renderAfterReady": true
   }
 }