From 7271488baec08c70f2577e55f743b837a982d4f8 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 8 Jun 2022 02:12:03 +0200
Subject: [PATCH] Add work in progress element and perhaps more things?

---
 components/EventCreate.tsx                | 19 ++++++++++---------
 components/WorkInProgress.tsx             | 14 ++++++++++++++
 components/editable/EditableDateRange.tsx |  2 +-
 components/{ => form}/FormDateRange.tsx   |  0
 components/form/FormMonorow.tsx           | 14 ++++++++++++++
 components/view/ViewEvent.tsx             |  2 +-
 pages/events/[slug].tsx                   | 12 +++++-------
 public/locales/it-IT/common.json          |  3 ++-
 styles/color-schemes.css                  |  2 ++
 styles/components/form-monorow.css        |  8 +++++---
 styles/components/toolbar.css             |  2 +-
 styles/components/work-in-progress.css    | 11 +++++++++++
 styles/elements.css                       |  2 --
 styles/globals.css                        |  1 +
 14 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 components/WorkInProgress.tsx
 rename components/{ => form}/FormDateRange.tsx (100%)
 create mode 100644 components/form/FormMonorow.tsx
 create mode 100644 styles/components/work-in-progress.css

diff --git a/components/EventCreate.tsx b/components/EventCreate.tsx
index de63264..3c35397 100644
--- a/components/EventCreate.tsx
+++ b/components/EventCreate.tsx
@@ -4,8 +4,10 @@ import { useRouter } from "next/router"
 import { useState } from "react"
 import { useAxiosRequest } from "../hooks/useAxiosRequest"
 import { Loading } from "./Loading"
-import { useEffect } from "react"
 import { ErrorBlock } from "./errors/ErrorBlock"
+import { FestaIcon } from "./extensions/FestaIcon"
+import { faPlus } from "@fortawesome/free-solid-svg-icons"
+import { FormMonorow } from "./form/FormMonorow"
 
 export function EventCreate() {
     const { t } = useTranslation()
@@ -27,8 +29,7 @@ export function EventCreate() {
     if (createEvent.data) return <Loading text={t("eventListCreateRedirecting")} />
 
     return <>
-        <form
-            className="form-monorow"
+        <FormMonorow
             onSubmit={e => { e.preventDefault(); createEvent.run() }}
             noValidate
         >
@@ -39,15 +40,15 @@ export function EventCreate() {
                 onChange={e => setName(e.target.value)}
                 required
             />
-            <input
-                type="submit"
+            <button
                 aria-label={t("eventListCreateSubmitLabel")}
-                className="positive square-40"
-                value="→"
+                className="positive"
                 onClick={e => createEvent.run()}
                 disabled={!name}
-            />
-        </form>
+            >
+                <FestaIcon icon={faPlus}/>
+            </button>
+        </FormMonorow>
         {createEvent.error ? <ErrorBlock error={createEvent.error} text={t("eventListCreateError")} /> : null}
     </>
 }
\ No newline at end of file
diff --git a/components/WorkInProgress.tsx b/components/WorkInProgress.tsx
new file mode 100644
index 0000000..d019fd2
--- /dev/null
+++ b/components/WorkInProgress.tsx
@@ -0,0 +1,14 @@
+import { faBrush } from "@fortawesome/free-solid-svg-icons"
+import { useTranslation } from "next-i18next"
+import { FestaIcon } from "./extensions/FestaIcon"
+
+
+export function WorkInProgress() {
+    const {t} = useTranslation()
+
+    return (
+        <div className="work-in-progress">
+            <FestaIcon icon={faBrush}/> {t("workInProgress")}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/components/editable/EditableDateRange.tsx b/components/editable/EditableDateRange.tsx
index b677303..e8b5d3e 100644
--- a/components/editable/EditableDateRange.tsx
+++ b/components/editable/EditableDateRange.tsx
@@ -3,7 +3,7 @@ import { HTMLProps } from "react"
 import { EditingContext } from "../../contexts/editing"
 import { useDefinedContext } from "../../utils/definedContext"
 import { FestaIcon } from "../extensions/FestaIcon"
-import { FormDateRange } from "../FormDateRange"
+import { FormDateRange } from "../form/FormDateRange"
 
 
 type EditableDateRangeProps = {
diff --git a/components/FormDateRange.tsx b/components/form/FormDateRange.tsx
similarity index 100%
rename from components/FormDateRange.tsx
rename to components/form/FormDateRange.tsx
diff --git a/components/form/FormMonorow.tsx b/components/form/FormMonorow.tsx
new file mode 100644
index 0000000..df3633a
--- /dev/null
+++ b/components/form/FormMonorow.tsx
@@ -0,0 +1,14 @@
+import classNames from "classnames"
+import { HTMLProps, ReactNode } from "react"
+
+type FormMonorowProps = {
+    children: ReactNode
+}
+
+export function FormMonorow(props: FormMonorowProps & HTMLProps<HTMLFormElement>) {
+    return (
+        <form {...props} className={classNames("form-monorow", props.className)}>
+            {props.children}
+        </form>
+    )
+}
\ No newline at end of file
diff --git a/components/view/ViewEvent.tsx b/components/view/ViewEvent.tsx
index 6d2424e..12781d5 100644
--- a/components/view/ViewEvent.tsx
+++ b/components/view/ViewEvent.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import { FormDateRange } from "../FormDateRange"
+import { FormDateRange } from "../form/FormDateRange"
 
 type ViewEventProps = {
     title: ReactNode,
diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
index 9877b63..4a5535b 100644
--- a/pages/events/[slug].tsx
+++ b/pages/events/[slug].tsx
@@ -3,21 +3,18 @@ import { NextPageContext } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
-import { ChangeEvent, FormEventHandler, useCallback, useState } from "react";
+import { ChangeEvent, useCallback, useState } from "react";
 import { ToolBar } from "../../components/tools/ToolBar";
 import { EditableMarkdown } from "../../components/editable/EditableMarkdown";
 import { EditableText } from "../../components/editable/EditableText";
 import { ToolToggleEditing } from "../../components/tools/ToolToggleEditing";
 import { EditingContext } from "../../contexts/editing";
 import { database } from "../../utils/prismaClient";
-import { Postcard } from "../../components/postcard/Postcard";
-import { ViewContent } from "../../components/view/ViewContent";
 import { EditablePostcard } from "../../components/editable/EditablePostcard";
 import { ViewEvent } from "../../components/view/ViewEvent";
-import { EditableDateTime } from "../../components/editable/EditableDateTime";
-import { FormDateRange } from "../../components/FormDateRange";
 import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
 import { EditableDateRange } from "../../components/editable/EditableDateRange";
+import { WorkInProgress } from "../../components/WorkInProgress";
 
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -76,6 +73,7 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
         <Head>
             <title key="title">{event.name} - {t("siteTitle")}</title>
         </Head>
+        <WorkInProgress/>
         <EditingContext.Provider value={editState}>
             <ToolBar vertical="vadapt" horizontal="right">
                 <ToolToggleEditing/>
@@ -96,14 +94,14 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
                         placeholder={t("eventDetailsPostcardPlaceholder")}
                     />
                 }
-                description={
+                description={<>
                     <EditableMarkdown 
                         value={description} 
                         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
                         rows={3}
                         placeholder={t("eventDetailsDescriptionPlaceholder")}
                     />
-                }
+                </>}
                 daterange={
                     <EditableDateRange
                         startProps={{
diff --git a/public/locales/it-IT/common.json b/public/locales/it-IT/common.json
index 09c5890..d3a29ce 100644
--- a/public/locales/it-IT/common.json
+++ b/public/locales/it-IT/common.json
@@ -30,5 +30,6 @@
     "eventDetailsToggleEditingView": "Visualizza anteprima",
     "eventDetailsTitlePlaceholder": "Titolo",
     "eventDetailsDescriptionPlaceholder": "Descrizione evento",
-    "eventDetailsPostcardPlaceholder": "Cartolina"
+    "eventDetailsPostcardPlaceholder": "Cartolina",
+    "workInProgress": "Questa pagina è ancora in sviluppo e potrebbe contenere errori o testo inaspettato."
 }
diff --git a/styles/color-schemes.css b/styles/color-schemes.css
index 6c008f6..d7a9923 100644
--- a/styles/color-schemes.css
+++ b/styles/color-schemes.css
@@ -12,6 +12,7 @@
         
         --positive: #88ff88;
         --negative: #ff8888;
+        --warning: #ffff88;
     }
 
     .postcard {
@@ -33,6 +34,7 @@
 
         --positive: #008800;
         --negative: #880000;
+        --warning: #666600;
     }
 
     .postcard {
diff --git a/styles/components/form-monorow.css b/styles/components/form-monorow.css
index e38238c..1d346a9 100644
--- a/styles/components/form-monorow.css
+++ b/styles/components/form-monorow.css
@@ -8,13 +8,15 @@
     flex-direction: row;
     gap: 4px;
     justify-content: center;
-    align-items: center;
+    align-items: stretch;
 }
 
-.form-monorow *:first-child {
+.form-monorow > input {
     flex-grow: 1;
 }
 
-.form-monorow *:last-child {
+.form-monorow > button, .form-monorow > input[type="submit"] {
     flex-grow: 0;
+    width: 40px;
+    height: 40px;
 }
diff --git a/styles/components/toolbar.css b/styles/components/toolbar.css
index f6914c2..b343a38 100644
--- a/styles/components/toolbar.css
+++ b/styles/components/toolbar.css
@@ -4,7 +4,7 @@
     justify-content: flex-start;
     align-content: flex-start;
 
-    position: absolute;
+    position: fixed;
 
     z-index: 2;
 
diff --git a/styles/components/work-in-progress.css b/styles/components/work-in-progress.css
new file mode 100644
index 0000000..2f4e5f3
--- /dev/null
+++ b/styles/components/work-in-progress.css
@@ -0,0 +1,11 @@
+.work-in-progress {
+    color: var(--warning);
+
+    /* TODO: Make this based on --warning. */
+    background-color: rgba(255, 255, 0, 0.1);
+
+    border-bottom-width: 1px;
+    box-shadow: 1px 1px 2px var(--warning);
+
+    padding: 4px 8px;
+}
\ No newline at end of file
diff --git a/styles/elements.css b/styles/elements.css
index bc578fc..5580279 100644
--- a/styles/elements.css
+++ b/styles/elements.css
@@ -13,8 +13,6 @@ body {
 
 main {
     padding: 8px;
-
-    min-height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
diff --git a/styles/globals.css b/styles/globals.css
index 7a1d4d1..031af1c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -16,6 +16,7 @@
 @import "components/form-monorow.css";
 @import "components/error.css";
 @import "components/form-daterange.css";
+@import "components/work-in-progress.css";
 
 
 * {