sallbet/pixelplanet-fork
1
Fork 1
forked from ppfun/pixelplanet
Code Pull Requests Activity

align templates with other elements

Browse Source
This commit is contained in:
HF 2024-02-05 12:20:04 +01:00
parent 9474688e8a
commit c2cd76f54d
1 changed files with 73 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/TemplateSettings.jsx
View File

@ -96,85 +96,83 @@ const TemplateSettings = () => {
<div className="modaldivider" />
</div>
<div className="content">
{list.map(({
enabled, imageId, canvasId, title, x, y, width, height,
}, index) => (editingIndices.includes(index) ? (
<TemplateItemEdit
enabled={enabled}
key={index}
title={title}
imageId={imageId}
canvasId={canvasId}
x={x}
y={y}
stopEditing={toggleEditing}
/>
) : (
<TemplateItem
enabled={enabled}
key={index}
title={title}
imageId={imageId}
canvasId={canvasId}
x={x}
y={y}
width={width}
height={height}
startEditing={toggleEditing}
/>
)))}
{showAdd && <TemplateItemEdit stopEditing={close} />}
{(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;
{list.map(({
enabled, imageId, canvasId, title, x, y, width, height,
}, index) => (editingIndices.includes(index) ? (
<TemplateItemEdit
enabled={enabled}
key={index}
title={title}
imageId={imageId}
canvasId={canvasId}
x={x}
y={y}
stopEditing={toggleEditing}
/>
) : (
<TemplateItem
enabled={enabled}
key={index}
title={title}
imageId={imageId}
canvasId={canvasId}
x={x}
y={y}
width={width}
height={height}
startEditing={toggleEditing}
/>
)))}
{showAdd && <TemplateItemEdit stopEditing={close} />}
{(showAdd) ? (
<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]);
}}
/>
</div>
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
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]);
}}
/>
</>
);
};