feat: [WIP] Nextcloud save modal

client/src/assets/scss/editor.scss

@@ -3,9 +3,8 @@ $height: 40px;
 
 tldraw-editor {
   div.sharing-container {
-    pointer-events: all;
-    z-index: 2;
     position: absolute;
+    z-index: 2;
     left: 110px;
     display: flex;
     box-shadow: var(--shadows-panel);
@@ -14,6 +13,7 @@ tldraw-editor {
     background-color: var(--colors-panel);
     border: 1px solid var(--colors-panelContrast);
     border-top: 0px;
+    pointer-events: all;
 
     div {
       display: flex;

client/src/assets/scss/nextcloudModal.scss

@@ -0,0 +1,98 @@
+$height: 150px;
+
+tldraw-editor {
+  div.modal-background {
+    position: absolute;
+    z-index: 99998;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.15);
+    pointer-events: all;
+
+    div.modal {
+      display: flex;
+      flex-direction: column;
+      font-family: var(--fonts-ui);
+      border: 1px solid var(--colors-panelContrast);
+      box-shadow: var(--shadows-panel);
+      background-color: var(--colors-panel);
+      border-radius: var(--radii-3);
+      padding: var(--space-3);
+
+      p.modal-title {
+        margin-bottom: 20px;
+        color: var(--colors-text);
+        font-size: var(--fontSizes-2);
+        line-height: 1.5;
+        text-align: center;
+        max-width: 62%;
+        min-width: 0px;
+        align-self: center;
+      }
+
+      div.modal-body {
+        display: flex;
+        flex-direction: column;
+
+        div.choice-container {
+          display: flex;
+          flex-direction: row;
+
+          button.choice-item {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: $height;
+            height: $height;
+            border: none;
+            border-radius: var(--radii-2);
+            background: none;
+            color: var(--colors-text);
+            word-break: break-word;
+
+            svg {
+              margin-bottom: var(--space-3);
+            }
+          }
+
+          button.choice-item:not(:last-child) {
+            margin-right: var(--space-3);
+          }
+
+          button.choice-item:hover,
+          button.choice-item:focus {
+            background-color: var(--colors-hover);
+          }
+        }
+      }
+
+      div.modal-footer {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--space-3);
+
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: var(--fontSizes-1);
+          line-height: 1;
+          color: var(--colors-text);
+          cursor: pointer;
+          border-radius: var(--radii-2);
+          padding: 0px 15px;
+          font-weight: normal;
+          height: 36px;
+          min-width: 48px;
+          border: none;
+          background: none;
+        }
+      }
+    }
+  }
+}

client/src/components/NextcloudModal.tsx

@@ -0,0 +1,41 @@
+import { faCloud, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "../assets/scss/nextcloudModal.scss";
+import { useTranslation } from "react-i18next";
+
+type Settings = {
+  onNextcloud: () => void;
+  onDownload: () => void;
+  onCancel: () => void;
+};
+
+function NextcloudModal({ onNextcloud, onDownload, onCancel }: Settings) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="modal-background">
+      <div className="modal">
+        <p className="modal-title">{t("nextcloud.modal.title")}</p>
+        <div className="modal-body">
+          <div className="choice-container">
+            <button type="button" className="choice-item" onClick={onNextcloud}>
+              <FontAwesomeIcon icon={faCloud} size="3x" />
+              {t("nextcloud.modal.save")}
+            </button>
+            <button type="button" className="choice-item" onClick={onDownload}>
+              <FontAwesomeIcon icon={faDownload} size="3x" />
+              {t("nextcloud.modal.download")}
+            </button>
+          </div>
+        </div>
+        <div className="modal-footer">
+          <button type="button" onClick={onCancel}>
+            {t("nextcloud.modal.cancel")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NextcloudModal;

client/src/locales/en.json

@@ -20,6 +20,12 @@
       "unknown": "Unknown error occurred",
       "unconfigured": "Nextcloud is unconfigured",
       "guest": "Your cas session has expired"
+    },
+    "modal": {
+      "title": "What did you want to do?",
+      "save": "Save on Nextcloud",
+      "download": "Download",
+      "cancel": "Cancel"
     }
   }
 }

client/src/locales/fr.json

@@ -20,6 +20,12 @@
       "unknown": "Une erreur inconnue est survenue",
       "unconfigured": "Nextcloud n'est pas configuré",
       "guest": "Votre session cas a expirée"
+    },
+    "modal": {
+      "title": "Que voulez-vous faire ?",
+      "save": "Sauvegarder sur Nextcloud",
+      "download": "Télécharger",
+      "cancel": "Annuler"
     }
   }
 }