From 7dfec0b3ed31d2c820bb23defa296ca34fb8f974 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Sat, 30 Sep 2023 21:15:23 +0200 Subject: [PATCH 1/2] fix cms shortcodes --- static/admin/shortcodes/audio.js | 4 +- static/admin/shortcodes/card.js | 4 +- static/admin/shortcodes/components/card.js | 2 +- static/admin/shortcodes/components/image.js | 13 +++-- .../admin/shortcodes/components/text-field.js | 8 +-- static/admin/shortcodes/download.js | 50 +++++++++++++++---- static/admin/shortcodes/gallery.js | 7 ++- static/admin/shortcodes/slider.js | 7 ++- static/admin/shortcodes/youtube.js | 6 ++- 9 files changed, 71 insertions(+), 30 deletions(-) diff --git a/static/admin/shortcodes/audio.js b/static/admin/shortcodes/audio.js index 42c5420f..3aa0449e 100644 --- a/static/admin/shortcodes/audio.js +++ b/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" ) diff --git a/static/admin/shortcodes/card.js b/static/admin/shortcodes/card.js index 096eb544..f8771dc5 100644 --- a/static/admin/shortcodes/card.js +++ b/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({ diff --git a/static/admin/shortcodes/components/card.js b/static/admin/shortcodes/components/card.js index 90252619..87468dbd 100644 --- a/static/admin/shortcodes/components/card.js +++ b/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 diff --git a/static/admin/shortcodes/components/image.js b/static/admin/shortcodes/components/image.js index 889a96e6..91995b32 100644 --- a/static/admin/shortcodes/components/image.js +++ b/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" ) diff --git a/static/admin/shortcodes/components/text-field.js b/static/admin/shortcodes/components/text-field.js index 56e01179..be227327 100644 --- a/static/admin/shortcodes/components/text-field.js +++ b/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, }) diff --git a/static/admin/shortcodes/download.js b/static/admin/shortcodes/download.js index 388f5f05..b8527936 100644 --- a/static/admin/shortcodes/download.js +++ b/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 }) => { diff --git a/static/admin/shortcodes/gallery.js b/static/admin/shortcodes/gallery.js index a8117793..f4708bba 100644 --- a/static/admin/shortcodes/gallery.js +++ b/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" ) diff --git a/static/admin/shortcodes/slider.js b/static/admin/shortcodes/slider.js index 2b4045a0..b55ca762 100644 --- a/static/admin/shortcodes/slider.js +++ b/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" ) diff --git a/static/admin/shortcodes/youtube.js b/static/admin/shortcodes/youtube.js index 15cef635..2ac57c1e 100644 --- a/static/admin/shortcodes/youtube.js +++ b/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", + }, }, "" ), From 7646c83f599058554b362c1cbec207e9ffd61e74 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Sun, 1 Oct 2023 15:24:00 +0200 Subject: [PATCH 2/2] fix styles, icons --- static/admin/config/collections/author.js | 2 +- static/admin/config/collections/blog.js | 23 +++++++------------ .../config/collections/settings-collection.js | 16 +++---------- static/admin/config/collections/widgets.js | 15 ++++++++++++ static/admin/icons.js | 6 +---- .../field-previews/boolean-preview.js | 1 + .../previews/field-previews/draft-preview.js | 2 +- 7 files changed, 30 insertions(+), 35 deletions(-) diff --git a/static/admin/config/collections/author.js b/static/admin/config/collections/author.js index 969b709a..1442df4e 100644 --- a/static/admin/config/collections/author.js +++ b/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, diff --git a/static/admin/config/collections/blog.js b/static/admin/config/collections/blog.js index b4256584..1405e936 100644 --- a/static/admin/config/collections/blog.js +++ b/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", diff --git a/static/admin/config/collections/settings-collection.js b/static/admin/config/collections/settings-collection.js index 9ddb24a8..0ea83e79 100644 --- a/static/admin/config/collections/settings-collection.js +++ b/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", diff --git a/static/admin/config/collections/widgets.js b/static/admin/config/collections/widgets.js index 2c20bf05..289f2132 100644 --- a/static/admin/config/collections/widgets.js +++ b/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, }; diff --git a/static/admin/icons.js b/static/admin/icons.js index 5a413453..d143b871 100644 --- a/static/admin/icons.js +++ b/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" } }) }); } diff --git a/static/admin/previews/field-previews/boolean-preview.js b/static/admin/previews/field-previews/boolean-preview.js index 7734cb85..231aba0b 100644 --- a/static/admin/previews/field-previews/boolean-preview.js +++ b/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; diff --git a/static/admin/previews/field-previews/draft-preview.js b/static/admin/previews/field-previews/draft-preview.js index 55b51276..20f0d8e9 100644 --- a/static/admin/previews/field-previews/draft-preview.js +++ b/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",