CMS-Reparaturen #242

Merged
Denys Konovalov merged 3 commits from fix/cms-ui into master 2023-10-01 15:25:54 +02:00
9 changed files with 71 additions and 30 deletions
Showing only changes of commit 7dfec0b3ed - Show all commits

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

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

@ -3,7 +3,7 @@ const Card = (child, opts = { vertical: false }) =>
"span", "span",
{ {
className: 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" : ""), (opts.vertical ? " flex-col" : ""),
}, },
child child

@ -1,36 +1,35 @@
const Image = ({ label, assetSource, handleOpenMediaLibrary }) => const Image = ({ label, assetSource, handleOpenMediaLibrary }) =>
h( h(
"span", "span",
{ className: "flex flex-col w-full" }, { className: "CMS_Field_wrapper" },
h( h(
"label", "label",
{ {
className: className: "CMS_Label_root CMS_Label_cursor-pointer",
"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",
}, },
label label
), ),
h( h(
"span", "span",
{ className: "flex flex-col gap-2 px-3 pt-2" }, { className: "CMS_WidgetFileImage_content" },
h( h(
"span", "span",
{}, {},
h("img", { h("img", {
role: "presentation", role: "presentation",
src: assetSource, src: assetSource,
className: "object-cover max-w-full overflow-hidden", className: "CMS_Image_root",
}) })
), ),
h( h(
"span", "span",
{ className: "flex gap-2" }, { className: "CMS_WidgetFileImage_actions" },
h( h(
"button", "button",
{ {
type: "button", type: "button",
onClick: handleOpenMediaLibrary, onClick: handleOpenMediaLibrary,
className: "btn btn-contained-primary", className: "CMS_Button_root CMS_Button_outlined-primary",
}, },
"Bild auswählen" "Bild auswählen"
) )

@ -1,18 +1,18 @@
const TextField = ({ label, value, onChange }) => const TextField = ({ label, value, onChange }) =>
h( h(
"span", "span",
{ key: "text-" + label, className: "flex flex-col w-full" }, { key: "text-" + label, className: "CMS_Field_wrapper" },
h( h(
"label", "label",
{ {
className: className: "CMS_Label_root CMS_TextField_cursor-default",
"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",
}, },
label label
), ),
h("input", { h("input", {
className: 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, value,
onChange, onChange,
}) })

@ -17,7 +17,7 @@ const DownloadShortcode = {
for (let arg of args.slice(linkIndex)) { for (let arg of args.slice(linkIndex)) {
link += " " + arg.replaceAll("link=", "").replaceAll('"', ""); link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
} }
return { title: title.trim(), link: link.trim() }; return { title: title.trimStart(), link: link.trim() };
} }
return { title: "", link: "" }; return { title: "", link: "" };
@ -25,15 +25,36 @@ const DownloadShortcode = {
toArgs: ({ title, link }) => { toArgs: ({ title, link }) => {
return [`title=\"${title}\"`, `link=\"${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([ return Card([
TextField({ TextField({
label: "Titel", label: "Titel",
value: title, value: title,
onChange: (event) => { onChange: (event) => {
onChange({ title: event.target.value, link }); onChange({ title: event.target.value.trimStart(), link });
}, },
}), }),
h(
"span",
{
style: {
display: "flex",
"flex-direction": "row",
"align-items": "end",
},
},
TextField({ TextField({
label: "Download-Link", label: "Download-Link",
value: link, value: link,
@ -41,6 +62,17 @@ const DownloadShortcode = {
onChange({ title, link: event.target.value }); 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 }) => { preview: ({ title, link }) => {

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

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

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