align templates with other elements

This commit is contained in:
HF 2024-02-05 12:20:04 +01:00
parent 9474688e8a
commit c2cd76f54d

View File

@ -96,85 +96,83 @@ const TemplateSettings = () => {
<div className="modaldivider" /> <div className="modaldivider" />
</div> </div>
<div className="content"> {list.map(({
{list.map(({ enabled, imageId, canvasId, title, x, y, width, height,
enabled, imageId, canvasId, title, x, y, width, height, }, index) => (editingIndices.includes(index) ? (
}, index) => (editingIndices.includes(index) ? ( <TemplateItemEdit
<TemplateItemEdit enabled={enabled}
enabled={enabled} key={index}
key={index} title={title}
title={title} imageId={imageId}
imageId={imageId} canvasId={canvasId}
canvasId={canvasId} x={x}
x={x} y={y}
y={y} stopEditing={toggleEditing}
stopEditing={toggleEditing} />
/> ) : (
) : ( <TemplateItem
<TemplateItem enabled={enabled}
enabled={enabled} key={index}
key={index} title={title}
title={title} imageId={imageId}
imageId={imageId} canvasId={canvasId}
canvasId={canvasId} x={x}
x={x} y={y}
y={y} width={width}
width={width} height={height}
height={height} startEditing={toggleEditing}
startEditing={toggleEditing} />
/> )))}
)))} {showAdd && <TemplateItemEdit stopEditing={close} />}
{showAdd && <TemplateItemEdit stopEditing={close} />} {(showAdd) ? (
{(showAdd) ? (
<span
role="button"
tabIndex={-1}
className="modallink"
onClick={() => close()}
> {t`Cancel adding Template`}</span>
) : (
<span
role="button"
tabIndex={-1}
className="modallink"
onClick={() => setShowAdd(true)}
> {t`Add Template`}</span>
)}
{(list.some((z) => z.enabled)) && (
<React.Fragment key="exps">
&nbsp;|&nbsp;
<span
role="button"
tabIndex={-1}
className="modallink"
onClick={async () => {
const data = await templateLoader.exportEnabledTemplates();
if (data) {
fileDownload(
JSON.stringify(data), 'PixelplanetTemplates.json',
);
}
}}
>{t`Export enabled templates`}</span>
</React.Fragment>
)}
&nbsp;|&nbsp;
<span <span
role="button" role="button"
tabIndex={-1} tabIndex={-1}
className="modallink" className="modallink"
onClick={async () => importRef.current?.click()} onClick={() => close()}
>{t`Import templates`}</span> > {t`Cancel adding Template`}</span>
<input ) : (
type="file" <span
key="impin" role="button"
ref={importRef} tabIndex={-1}
style={{ display: 'none' }} className="modallink"
onChange={(evt) => { onClick={() => setShowAdd(true)}
templateLoader.importTemplates(evt.target.files?.[0]); > {t`Add Template`}</span>
}} )}
/> {(list.some((z) => z.enabled)) && (
</div> <React.Fragment key="exps">
&nbsp;|&nbsp;
<span
role="button"
tabIndex={-1}
className="modallink"
onClick={async () => {
const data = await templateLoader.exportEnabledTemplates();
if (data) {
fileDownload(
JSON.stringify(data), 'PixelplanetTemplates.json',
);
}
}}
>{t`Export enabled templates`}</span>
</React.Fragment>
)}
&nbsp;|&nbsp;
<span
role="button"
tabIndex={-1}
className="modallink"
onClick={async () => importRef.current?.click()}
>{t`Import templates`}</span>
<input
type="file"
key="impin"
ref={importRef}
style={{ display: 'none' }}
onChange={(evt) => {
templateLoader.importTemplates(evt.target.files?.[0]);
}}
/>
</> </>
); );
}; };