From 7dfec0b3ed31d2c820bb23defa296ca34fb8f974 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Sat, 30 Sep 2023 21:15:23 +0200 Subject: [PATCH] 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", + }, }, "" ),