Merge pull request 'CMS-Reparaturen' (#242) from fix/cms-ui into master

Reviewed-on: #242

static/admin/config/collections/author.js

@@ -6,7 +6,7 @@ const AuthorCollection = {
   label: "Autoren",
   label_singular: "Autor",
   description:
-    "Autoren können einem Blogartikel zugewiesen werden. Wir unterscheiden in aktive und inaktive sowie vereinfachte Autoren, welche nur mit dem Namen angezeigt werden, und erweiterte Autoren, für die eine Übersichtsseite angelegt wird.Autoren können einem Blogartikel zugewiesen werden.",
+    "Autoren können einem Blogartikel zugewiesen werden. Wir unterscheiden in aktive und inaktive sowie vereinfachte Autoren, welche nur mit dem Namen angezeigt werden, und erweiterte Autoren, für die eine Übersichtsseite angelegt wird.",
   icon: "user",
   folder: "content/author",
   create: true,

static/admin/config/collections/blog.js

@@ -1,5 +1,10 @@
 import { DateFormat, MarkdownProps } from "../props.js";
-import { DescriptionText, DraftBoolean, Title } from "./widgets.js";
+import {
+  AuthorRelation,
+  DescriptionText,
+  DraftBoolean,
+  Title,
+} from "./widgets.js";
 
 const BlogCollection = {
   name: "blog",
@@ -52,19 +57,7 @@ const BlogCollection = {
       required: true,
       default: "/media/image.webp",
     },
-    {
-      name: "author",
-      label: "Autor(en)",
-      hint: "Verwaltet im Autoren-Bereich. Mehrere Autoren werden in alphabetischer Reihenfolge aufgelistet.",
-      widget: "relation",
-      collection: "author",
-      value_field: "{{slug}}",
-      search_fields: ["title"],
-      display_fields: ["{{title}}"],
-      multiple: true,
-      required: true,
-      options_length: 10000,
-    },
+    AuthorRelation,
     {
       name: "categories",
       label: "Kategorien",
@@ -98,7 +91,7 @@ const BlogCollection = {
       label: "Tags",
       widget: "list",
       delimiter: ",",
-      required: false
+      required: false,
     },
     {
       name: "type",

static/admin/config/collections/settings-collection.js

@@ -12,6 +12,7 @@ import {
   PreviewNumber,
   DescriptionText,
   DisableBoolean,
+  AuthorRelation,
 } from "./widgets.js";
 
 const SettingsCollection = {
@@ -355,18 +356,7 @@ const SettingsCollection = {
       fields: [
         EnableBoolean,
         Title(false),
-        {
-          name: "author",
-          label: "Autor",
-          hint: "Verwaltet im Autoren-Bereich",
-          widget: "relation",
-          collection: "author",
-          value_field: "{{slug}}",
-          search_fields: ["{{title}}"],
-          display_fields: ["{{title}}"],
-          multiple: true,
-          required: true,
-        },
+        AuthorRelation,
         {
           name: "image",
           label: "Titelbild",
@@ -664,7 +654,7 @@ const SettingsCollection = {
                   name: "name",
                   label: "Bezeichnung",
                   widget: "string",
-                  required: true
+                  required: true,
                 },
                 {
                   name: "weight",

static/admin/config/collections/widgets.js

@@ -76,6 +76,20 @@ const ButtonObject = {
   ],
 };
 
+const AuthorRelation = {
+  name: "author",
+  label: "Autor(en)",
+  hint: "Verwaltet im Autoren-Bereich. Mehrere Autoren werden in alphabetischer Reihenfolge aufgelistet.",
+  widget: "relation",
+  collection: "author",
+  value_field: "{{slug}}",
+  search_fields: ["title"],
+  display_fields: ["{{title}}"],
+  multiple: true,
+  required: true,
+  options_length: 10000,
+};
+
 export {
   EnableBoolean,
   DisableBoolean,
@@ -85,4 +99,5 @@ export {
   IconList,
   PreviewNumber,
   ButtonObject,
+  AuthorRelation,
 };

static/admin/icons.js

@@ -25,11 +25,7 @@ for (let [name, icon] of Object.entries(IconNames)) {
   Icons.push({
     name,
     icon: () =>
-      h(
-        "div",
-        { className: "flex items-center" },
-        h("i", { className: icon, style: { fontSize: "1.5rem" } })
-      ),
+      h("i", { className: "CMS_Icon_root cms-icon " + icon, style: { fontSize: "1.5rem" } })
   });
 }
 

static/admin/previews/field-previews/boolean-preview.js

@@ -1,6 +1,7 @@
 const BooleanPreview = ({ value }) =>
   h("i", {
     className: value ? "mdi mdi-check" : "mdi mdi-close",
+    style: { color: value ? "#00ff99" : "#ff0000", "font-size": "1.5rem" },
   });
 
 export default BooleanPreview;

static/admin/previews/field-previews/draft-preview.js

@@ -6,7 +6,7 @@ const DraftPreview = ({ value }) =>
         backgroundColor: value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
         color: "white",
         border: "none",
-        padding: "2px 6px",
+        padding: "0 5px",
         textAlign: "center",
         textDecoration: "none",
         display: "inline-block",

static/admin/shortcodes/audio.js

@@ -42,13 +42,13 @@ const AudioShortcode = {
       }),
       h(
         "span",
-        { key: "audio-button", className: "flex gap-2 pt-2 px-2" },
+        { key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "wählen"
         )

static/admin/shortcodes/card.js

@@ -17,7 +17,7 @@ const CardShortcode = {
       for (let arg of args.slice(linkIndex)) {
         link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
       }
-      return { title: title.trim(), link: link.trim() };
+      return { title: title.trimStart(), link: link.trim() };
     }
 
     return { title: "", link: "" };
@@ -31,7 +31,7 @@ const CardShortcode = {
         label: "Titel",
         value: title,
         onChange: (event) => {
-          onChange({ title: event.target.value, link });
+          onChange({ title: event.target.value.trimStart(), link });
         },
       }),
       TextField({

static/admin/shortcodes/components/card.js

@@ -3,7 +3,7 @@ const Card = (child, opts = { vertical: false }) =>
     "span",
     {
       className:
-        "relative flex border border-slate-400 focus-within:border-blue-800 dark:focus-within:border-blue-100 focus-within:bg-slate-100 dark:focus-within:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 pb-3 cursor-text group/active top-3 bottom-3" +
+        "CMS_Card_root CMS_Field_root CMS_WidgetString_root CMS_WidgetString_required CMS_Field_cursor-text CMS_WidgetMarkdown_Paragraph_root" +
         (opts.vertical ? " flex-col" : ""),
     },
     child

static/admin/shortcodes/components/image.js

@@ -1,36 +1,35 @@
 const Image = ({ label, assetSource, handleOpenMediaLibrary }) =>
   h(
     "span",
-    { className: "flex flex-col w-full" },
+    { className: "CMS_Field_wrapper" },
     h(
       "label",
       {
-        className:
-          "w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
+        className: "CMS_Label_root CMS_Label_cursor-pointer",
       },
       label
     ),
     h(
       "span",
-      { className: "flex flex-col gap-2 px-3 pt-2" },
+      { className: "CMS_WidgetFileImage_content" },
       h(
         "span",
         {},
         h("img", {
           role: "presentation",
           src: assetSource,
-          className: "object-cover max-w-full overflow-hidden",
+          className: "CMS_Image_root",
         })
       ),
       h(
         "span",
-        { className: "flex gap-2" },
+        { className: "CMS_WidgetFileImage_actions" },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "Bild auswählen"
         )

static/admin/shortcodes/components/text-field.js

@@ -1,18 +1,18 @@
 const TextField = ({ label, value, onChange }) =>
   h(
     "span",
-    { key: "text-" + label, className: "flex flex-col w-full" },
+    { key: "text-" + label, className: "CMS_Field_wrapper" },
     h(
       "label",
       {
-        className:
-          "w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
+        className: "CMS_Label_root CMS_TextField_cursor-default",
       },
       label
     ),
     h("input", {
       className:
-        "MuiInout-Input w-full h-6 px-3 bg-transparent outline-none text-sm font-medium text-gray-900 dark:text-gray-100 cursor-default",
+        "MuiInput-input CMS_TextField_input CMS_WidgetString_input CMS_TextField_borderless CMS_Label_cursor-text",
+      type: "text",
       value,
       onChange,
     })

static/admin/shortcodes/download.js

@@ -17,7 +17,7 @@ const DownloadShortcode = {
       for (let arg of args.slice(linkIndex)) {
         link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
       }
-      return { title: title.trim(), link: link.trim() };
+      return { title: title.trimStart(), link: link.trim() };
     }
 
     return { title: "", link: "" };
@@ -25,22 +25,54 @@ const DownloadShortcode = {
   toArgs: ({ title, link }) => {
     return [`title=\"${title}\"`, `link=\"${link}\"`];
   },
-  control: ({ title, link, onChange }) => {
+  control: ({ title, link, onChange, controlProps }) => {
+    const { collection, field } = controlProps;
+
+    const handleChange = ({ path }) => {
+      onChange({ title: title, link: path });
+    };
+
+    const handleOpenMediaLibrary = useMediaInsert(
+      link,
+      { collection, field },
+      handleChange
+    );
+
     return Card([
       TextField({
         label: "Titel",
         value: title,
         onChange: (event) => {
-          onChange({ title: event.target.value, link });
+          onChange({ title: event.target.value.trimStart(), link });
         },
       }),
-      TextField({
-        label: "Download-Link",
-        value: link,
-        onChange: (event) => {
-          onChange({ title, link: event.target.value });
+      h(
+        "span",
+        {
+          style: {
+            display: "flex",
+            "flex-direction": "row",
+            "align-items": "end",
+          },
         },
-      }),
+        TextField({
+          label: "Download-Link",
+          value: link,
+          onChange: (event) => {
+            onChange({ title, link: event.target.value });
+          },
+        }),
+        h(
+          "button",
+          {
+            type: "button",
+            onClick: handleOpenMediaLibrary,
+            className: "CMS_Button_root CMS_Button_outlined-primary",
+            style: { "margin-left": "0.75rem", "margin-right": "0.75rem" },
+          },
+          "wählen"
+        )
+      ),
     ]);
   },
   preview: ({ title, link }) => {

static/admin/shortcodes/gallery.js

@@ -43,13 +43,16 @@ const GalleryShortcode = {
       }),
       h(
         "span",
-        { key: "gallery-button", className: "flex gap-2 pt-2 px-2" },
+        {
+          key: "gallery-button",
+          className: "CMS_WidgetDateTime_NowButton_root",
+        },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "wählen"
         )

static/admin/shortcodes/slider.js

@@ -43,13 +43,16 @@ const SliderShortcode = {
       }),
       h(
         "span",
-        { key: "slider-button", className: "flex gap-2 pt-2 px-2" },
+        {
+          key: "slider-button",
+          className: "CMS_WidgetDateTime_NowButton_root",
+        },
         h(
           "button",
           {
             type: "button",
             onClick: handleOpenMediaLibrary,
-            className: "btn btn-contained-primary",
+            className: "CMS_Button_root CMS_Button_outlined-primary",
           },
           "wählen"
         )

static/admin/shortcodes/youtube.js

@@ -31,7 +31,11 @@ const YoutubeShortcode = {
             width: "100%",
             height: "360",
             src: `https://piped.kavin.rocks/embed/${src}`,
-            className: "px-3 pt-3",
+            style: {
+              paddingLeft: "0.75rem",
+              paddingRight: "0.75rem",
+              paddingTop: "0.75rem",
+            },
           },
           ""
         ),