Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added simple view for single fields #26

Closed
wants to merge 5 commits into from
Closed

Added simple view for single fields #26

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ebe4412
Added simple view for single fields
steezieV May 8, 2024
539a385
Added changes for simple View
steezieV May 8, 2024
7772690
Yarn Build
steezieV May 8, 2024
205ccc9
Replaced tab with spaces
steezieV Jun 3, 2024
b18cfbd
Update Resources/Private/Backend/RepeatableField/src/View/Repeatable.js
vcg-development Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added changes for simple View
  • Loading branch information
@steezieV
steezieV committed May 8, 2024
commit 539a385df12803063c9722b52068fe5df70bf8c2
69 changes: 47 additions & 22 deletions Resources/Private/Backend/RepeatableField/src/View/Repeatable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,34 +292,59 @@ export default class Repeatable extends PureComponent {
createElement = (idx) => {
const { options } = this.props;
const { allowRemove, currentValue } = this.state;
const isPredefined = options.predefinedProperties && options.predefinedProperties[idx]?true:false;
const isPredefined = options.predefinedProperties && options.predefinedProperties[idx] ? true : false;
const DragHandle = SortableHandle(() => (
<span type="button" className={style.move}>
<Icon icon="sort" />
</span>
));

return (
<div className={style.wrapper}>
<div class={style.buttons}>
{!isPredefined && options.controls.move && currentValue.length > 1 ? (
<DragHandle />
) : (
""
)}
{!isPredefined && options.controls.remove && allowRemove ? (
<IconButton
onClick={() => this.handleRemove(idx)}
className={style.delete}
icon="trash"
/>
) : (
""
)}
const propertiesCount = Object.keys(options.properties).length;
if (propertiesCount === 1) {
return (
<div className={style.simpleWrapper}>
{this.getProperties(idx)}
<div class={style.simpleButtons}>
{!isPredefined && options.controls.remove && allowRemove ? (
<IconButton
onClick={() => this.handleRemove(idx)}
className={style.delete}
icon="trash"
/>
) : (
""
)}
{!isPredefined && options.controls.move && currentValue.length > 1 ? (
<DragHandle />
) : (
""
)}
</div>
</div>
{this.getProperties(idx)}
</div>
);
);
} else {
return (
<div className={style.wrapper}>
<div class={style.buttons}>
{!isPredefined && options.controls.move && currentValue.length > 1 ? (
<DragHandle />
) : (
""
)}
{!isPredefined && options.controls.remove && allowRemove ? (
<IconButton
onClick={() => this.handleRemove(idx)}
className={style.delete}
icon="trash"
/>
) : (
""
)}
</div>
{this.getProperties(idx)}
</div>
);
}
};

getProperties = (idx) => {
Expand Down Expand Up @@ -374,7 +399,7 @@ export default class Repeatable extends PureComponent {
editorOptions.dataSourceAdditionalData["repeatableValue"] = this.getValue();
}
return (
<div className={style.property} hidden={propertyDefinition.hidden}>
<div className={Object.keys(this.props.options.properties).length > 1 ? style.property : ""} hidden={propertyDefinition.hidden}>
<Envelope
identifier={`repeatable-${idx}-${property}`}
// label={propertyDefinition.label?propertyDefinition.label:''}
Expand Down
38 changes: 38 additions & 0 deletions Resources/Private/Backend/RepeatableField/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,41 @@
background-color: #3f3f3f;
}
}

.simpleWrapper {
display: flex;
position: relative;
}

.simpleWrapper span label span {
display: none;
}

.group {
flex: 1;
margin-bottom: 10px;
}

.simpleButtons {
margin-top: 6px;
margin-left: 2px;
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
color: #fff;
font-size: 14px;
gap: 2px;

& > * {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
min-width: 40px;
background-color: #323232;
}

&:empty {
display: none
}
}