(core) New look for site switcher in top-left corner, with support for per-org logos

Summary:
  - Site switcher will show initials (either from user's name or team name),
  - Anonymous users see a grist logo on personal site, but team logo (or initials) on team site,
  - Admin pages (and other pages without orgs) show grist logo,
  - Custom image can be switched on the billing page, common formats are supported up to 100KB.
  - Larger images are down-scaled (on the front-end)
  - SVG larger than 100KB are not accepted
  - Files are stored as data URL's in org prefs,

Test Plan: Added new tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D4341

app/client/lib/domUtils.ts

@@ -64,3 +64,25 @@ export function stopEvent(ev: Event) {
   ev.preventDefault();
   ev.stopImmediatePropagation();
 }
+
+/**
+ * Adds a handler for a custom event triggered by `domDispatch` function below.
+ */
+export function domOnCustom(name: string, handler: (args: any, event: Event, element: Element) => void) {
+  return (el: Element) => {
+    dom.onElem(el, name, (ev, target) => {
+      const cv = ev as CustomEvent;
+      handler(cv.detail, ev, target);
+    });
+  };
+}
+
+/**
+ * Triggers a custom event on an element.
+ */
+export function domDispatch(element: Element, name: string, args?: any) {
+  element.dispatchEvent(new CustomEvent(name, {
+    bubbles: true,
+    detail: args
+  }));
+}

app/client/lib/uploads.ts

@@ -48,13 +48,18 @@ export async function selectFiles(options: SelectFileOptions,
   if (typeof electronSelectFiles === 'function') {
     result = await electronSelectFiles(getElectronOptions(options));
   } else {
-    const files: File[] = await openFilePicker(getFileDialogOptions(options));
-    result = await uploadFiles(files, options, onProgress);
+    result = await uploadFiles(await selectPicker(options), options, onProgress);
   }
   onProgress(100);
   return result;
 }
 
+export async function selectPicker(options: SelectFileOptions) {
+  const files: File[] = await openFilePicker(getFileDialogOptions(options));
+  return files;
+}
+
+
 // Helper to convert SelectFileOptions to the browser's FileDialogOptions.
 function getFileDialogOptions(options: SelectFileOptions): FileDialogOptions {
   const resOptions: FileDialogOptions = {};