feat: css editor (#1542)

* feat: allow editing CSS from settings

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

refactor: style tweaks

apps/server/src/api-data/assets/assets.controller.ts

@@ -0,0 +1,41 @@
+import { defaultCss } from '../../user/styles/bundledCss.js';
+import type { Request, Response } from 'express';
+import { readCssFile, writeCssFile } from './assets.service.js';
+
+/**
+ * Exposes the contents of the cssOverride.css file
+ */
+export async function getCssOverride(_req: Request, res: Response) {
+  try {
+    const data = await readCssFile();
+    res.status(200).send(data);
+  } catch (error) {
+    res.status(500).send({ message: error });
+  }
+}
+
+/**
+ * Allows modifying the cssOverride.css file
+ */
+export async function postCssOverride(req: Request, res: Response) {
+  const { css } = req.body;
+
+  try {
+    await writeCssFile(css);
+    res.status(204).send();
+  } catch (error) {
+    res.status(500).send({ message: error });
+  }
+}
+
+/**
+ * Restores the default cssOverride.css file
+ */
+export async function restoreCss(_req: Request, res: Response) {
+  try {
+    await writeCssFile(defaultCss);
+    res.status(200).send(defaultCss);
+  } catch (error) {
+    res.status(500).send({ message: error });
+  }
+}

apps/server/src/api-data/assets/assets.router.ts

@@ -0,0 +1,10 @@
+import express from 'express';
+
+import { getCssOverride, postCssOverride, restoreCss } from './assets.controller.js';
+import { validatePostCss } from './assets.validation.js';
+
+export const router = express.Router();
+
+router.get('/css', getCssOverride);
+router.post('/css', validatePostCss, postCssOverride);
+router.post('/css/restore', restoreCss);

apps/server/src/api-data/assets/assets.service.ts

@@ -0,0 +1,33 @@
+import { publicFiles } from '../../setup/index.js';
+import { existsSync } from 'node:fs';
+import { readFile, writeFile } from 'node:fs/promises';
+import { defaultCss } from '../../user/styles/bundledCss.js';
+
+/**
+ * Reads the user's css file
+ * @returns css contents in the file
+ */
+export async function readCssFile(): Promise<string> {
+  const path = publicFiles.cssOverride;
+  if (!existsSync(path)) {
+    await writeFile(path, defaultCss, { encoding: 'utf8' });
+  }
+
+  const css = await readFile(path, { encoding: 'utf8' });
+
+  return css;
+}
+
+/**
+ * Writes the user's css file
+ * @param css the updated css to write to file
+ */
+export async function writeCssFile(css: string) {
+  const path = publicFiles.cssOverride;
+  if (!existsSync(path)) {
+    await writeFile(path, css, { encoding: 'utf8' });
+    return;
+  }
+
+  await writeFile(path, css, { encoding: 'utf8' });
+}

apps/server/src/api-data/assets/assets.validation.ts

@@ -0,0 +1,12 @@
+import { Request, Response, NextFunction } from 'express';
+import { body, validationResult } from 'express-validator';
+
+export const validatePostCss = [
+  body('css').exists().isString().trim(),
+
+  (req: Request, res: Response, next: NextFunction) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];

apps/server/src/api-data/index.ts

@@ -12,6 +12,7 @@ import { router as excelRouter } from './excel/excel.router.js';
 import { router as sessionRouter } from './session/session.router.js';
 import { router as viewSettingsRouter } from './view-settings/viewSettings.router.js';
 import { router as reportRouter } from './report/report.router.js';
+import { router as assetsRouter } from './assets/assets.router.js';
 
 export const appRouter = express.Router();
 
@@ -27,6 +28,7 @@ appRouter.use('/url-presets', urlPresetsRouter);
 appRouter.use('/session', sessionRouter);
 appRouter.use('/view-settings', viewSettingsRouter);
 appRouter.use('/report', reportRouter);
+appRouter.use('/assets', assetsRouter);
 
 //we don't want to redirect to react index when using api routes
 appRouter.all('/*', (_req, res) => {

apps/server/src/user/styles/bundledCss.ts

@@ -0,0 +1,79 @@
+export const defaultCss = `
+/** 
+ * This CSS file allows user customisation of the UI
+ * We expose some CSS properties to facilitate this (see below in :root)
+ * In the cases where this is missing, you can add your selectors here
+ */
+
+:root {
+  /** Background colour for the views */
+  --background-color-override: #ececec;
+
+  /** Main text colour for the views */
+  --color-override: #101010;
+
+  /** Text colour for the views */
+  --secondary-color-override: #404040;
+
+  /** Accent text colour, used on active elements */
+  --accent-color-override: #fa5656;
+
+  /** Label text colour, used on active elements */
+  --label-color-override: #6c6c6c;
+
+  /** Timer text colour */
+  --timer-color-override: #202020;
+  --timer-warning-color-override: #ffbc56;
+  --timer-danger-color-override: #e69000;
+  --timer-overtime-color-override: #fa5656;
+  --timer-pending-color-override: #578AF4;
+
+  /** Background for card elements on background */
+  --card-background-color-override: #fff;
+
+  /** Font used for all text in views */
+  --font-family-override: 'Open Sans';
+
+  /** Font used for clock in /minimal and /clock views */
+  --font-family-bold-override: 'Arial Black';
+
+  /** Colour used for external message and aux timer in /timer */
+  --external-color-override: #161616;
+
+  /** View specific features: /backstage */
+  /** ---- Background highlight for blink behaviour */
+  --card-background-color-blink-override: #339e4e;
+  /** ---- Colour used for progress bar background */
+  --timer-progress-bg-override: #fff;
+  /** ---- Colour used for progress bar progress */
+  --timer-progress-override: #202020;
+
+  /** View specific features: /op */
+  --operator-customfield-font-size-override: 1.25rem;
+  --operator-running-bg-override: #339e4e;
+
+  /** View specific features: /studio */
+  --studio-active: #101010;
+  --studio-idle: #cfcfcf;
+  --studio-active-label: #101010;
+  --studio-idle-label: #595959;
+  --studio-overtime: #101010;
+
+  /** View specific features: /lower */
+  --lowerThird-font-family-override: 'Courier New';
+  --lowerThird-top-font-weight-override: bold;
+  --lowerThird-bottom-font-weight-override: bold;
+  --lowerThird-top-font-style-override: normal;
+  --lowerThird-bottom-font-style-override: italic;
+  --lowerThird-line-height-override: 1vh;
+  --lowerThird-text-align-override: end;
+}
+
+/** 
+ * You can inspect the page in your browser and add the selectors here.
+ * In the below example, we change the colour of the overlay message in the stage-timer view.
+ */
+.stage-timer > .message-overlay--active > div {
+  color: red;
+}
+`;