Skip to content

Commit

Permalink
Merge pull request #411 from Scrivito/improved_custom_widget_components
Browse files Browse the repository at this point in the history 
Improved custom widget components
  • Loading branch information
@apepper
apepper authored Jul 5, 2021
2 parents 541ec8e + d4abfda commit 456029b
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 166 deletions.
104 changes: 69 additions & 35 deletions src/Components/ScrivitoExtensions/ColumnsEditorTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,19 @@ class ColumnsEditorTab extends React.Component {
}

render() {
const readOnly = !Scrivito.canWrite();

return (
<div className="scrivito_detail_content">
<Alignment widget={this.props.widget} />
<Alignment
alignment={this.props.widget.get("alignment")}
setAlignment={(alignment) => {
if (Scrivito.canWrite()) {
this.props.widget.update({ alignment });
}
}}
readOnly={readOnly}
/>
<div className="scrivito_detail_label">
<span>Layout (desktop)</span>
</div>
Expand All @@ -30,6 +40,7 @@ class ColumnsEditorTab extends React.Component {
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="1 column"
grid={[12]}
/>
Expand All @@ -38,18 +49,21 @@ class ColumnsEditorTab extends React.Component {
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="2 columns"
grid={[6, 6]}
/>
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="2 columns"
grid={[3, 9]}
/>
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="2 columns"
grid={[9, 3]}
/>
Expand All @@ -58,24 +72,28 @@ class ColumnsEditorTab extends React.Component {
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="3 columns"
grid={[4, 4, 4]}
/>
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="3 columns"
grid={[2, 8, 2]}
/>
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="3 columns"
grid={[2, 5, 5]}
/>
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="3 columns"
grid={[5, 5, 2]}
/>
Expand All @@ -84,12 +102,14 @@ class ColumnsEditorTab extends React.Component {
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="4 columns"
grid={[3, 3, 3, 3]}
/>
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="4 columns"
grid={[2, 4, 4, 2]}
/>
Expand All @@ -98,6 +118,7 @@ class ColumnsEditorTab extends React.Component {
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="5 columns"
grid={[2, 2, 2, 2, 4]}
/>
Expand All @@ -106,6 +127,7 @@ class ColumnsEditorTab extends React.Component {
<PresetGrid
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
title="6 columns"
grid={[2, 2, 2, 2, 2, 2]}
/>
Expand All @@ -114,13 +136,17 @@ class ColumnsEditorTab extends React.Component {
<GridLayoutEditor
currentGrid={this.state.currentGrid}
adjustGrid={this.adjustGrid}
readOnly={readOnly}
/>
</div>
</div>
);
}

adjustGrid(newGrid) {
if (!Scrivito.canWrite()) {
return;
}
if (isEqual(this.state.currentGrid, newGrid)) {
return;
}
Expand All @@ -140,34 +166,37 @@ class ColumnsEditorTab extends React.Component {

Scrivito.registerComponent("ColumnsEditorTab", ColumnsEditorTab);

const PresetGrid = Scrivito.connect(
({ currentGrid, adjustGrid, title, grid }) => {
const classNames = ["gle-preview"];
if (isEqual(currentGrid, grid)) {
classNames.push("active");
}
function PresetGrid({ currentGrid, adjustGrid, title, grid, readOnly }) {
const classNames = readOnly ? ["gle-preview"] : ["gle-preview", "clickable"];

return (
<div
className={classNames.join(" ")}
title={title}
onClick={() => adjustGrid(grid)}
>
{grid.map((colSize, index) => (
<div className={`grid-col-${colSize}`} key={index} />
))}
</div>
);
if (isEqual(currentGrid, grid)) {
classNames.push("active");
}
);

const Alignment = Scrivito.connect(({ widget }) => {
const startAlignmentClasses = ["gle-preview"];
const centerAlignmentClasses = ["gle-preview"];
const endAlignmentClasses = ["gle-preview"];
const stretchAlignmentClasses = ["gle-preview"];
return (
<div
className={classNames.join(" ")}
title={title}
onClick={() => adjustGrid(grid)}
>
{grid.map((colSize, index) => (
<div className={`grid-col-${colSize}`} key={index} />
))}
</div>
);
}

switch (widget.get("alignment")) {
function Alignment({ alignment, setAlignment, readOnly }) {
const initialClasses = readOnly
? ["gle-preview"]
: ["gle-preview", "clickable"];

const startAlignmentClasses = [...initialClasses];
const centerAlignmentClasses = [...initialClasses];
const endAlignmentClasses = [...initialClasses];
const stretchAlignmentClasses = [...initialClasses];

switch (alignment) {
case "start":
startAlignmentClasses.push("active");
break;
Expand Down Expand Up @@ -196,7 +225,7 @@ const Alignment = Scrivito.connect(({ widget }) => {
<div
className={startAlignmentClasses.join(" ")}
title="Content top aligned"
onClick={() => widget.update({ alignment: "start" })}
onClick={() => setAlignment("start")}
>
<div className="grid-col-12">
<span className="alignment" />
Expand All @@ -206,7 +235,7 @@ const Alignment = Scrivito.connect(({ widget }) => {
<div
className={centerAlignmentClasses.join(" ")}
title="Content center aligned"
onClick={() => widget.update({ alignment: "center" })}
onClick={() => setAlignment("center")}
>
<div className="grid-col-12">
<span className="alignment center" />
Expand All @@ -216,7 +245,7 @@ const Alignment = Scrivito.connect(({ widget }) => {
<div
className={endAlignmentClasses.join(" ")}
title="Content bottom aligned"
onClick={() => widget.update({ alignment: "end" })}
onClick={() => setAlignment("end")}
>
<div className="grid-col-12">
<span className="alignment bottom" />
Expand All @@ -226,19 +255,19 @@ const Alignment = Scrivito.connect(({ widget }) => {
<div
className={stretchAlignmentClasses.join(" ")}
title="Content stretch (full height) aligned"
onClick={() => widget.update({ alignment: "stretch" })}
onClick={() => setAlignment("stretch")}
>
<div className="grid-col-12">
<span className="alignment fullHeight" />
</div>
</div>
</div>
</div>
<AlignmentDescription alignment={widget.get("alignment")} />
<AlignmentDescription alignment={alignment} />
</div>
</React.Fragment>
);
});
}

class GridLayoutEditor extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -316,6 +345,7 @@ class GridLayoutEditor extends React.Component {

innerContent.unshift(
<Draggable
disabled={this.props.readOnly}
key="grid-handle"
bounds={{
left: this.state.draggableGrid * leftBound,
Expand All @@ -331,10 +361,10 @@ class GridLayoutEditor extends React.Component {
})
}
>
<div className="grid-handle" />
<div className={this.props.readOnly ? "" : "grid-handle"} />
</Draggable>
);
} else if (colIndex < 5) {
} else if (colIndex < 5 && !this.props.readOnly) {
innerContent.unshift(
<div
key="grid-handle-plus"
Expand All @@ -347,7 +377,7 @@ class GridLayoutEditor extends React.Component {
);
}

if (this.props.currentGrid.length > 1) {
if (this.props.currentGrid.length > 1 && !this.props.readOnly) {
innerContent.push(
<div
key="grid-del"
Expand All @@ -370,14 +400,18 @@ class GridLayoutEditor extends React.Component {
);
});

const gridColumnsClass = this.props.readOnly
? "grid-columns"
: "grid-columns clickable";

return (
<div className="gle">
<div className="grid-ruler" ref={this.gridRulerRef}>
{times(12).map((index) => (
<div key={index} className="grid-col" />
))}
</div>
<div className="grid-columns">{gridColumns}</div>
<div className={gridColumnsClass}>{gridColumns}</div>
</div>
);
}
Expand Down
94 changes: 40 additions & 54 deletions src/Components/ScrivitoExtensions/IconEditorTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,65 +5,51 @@ import IconComponent from "../Icon";
import IconSearch from "./IconEditorTab/IconSearch";
import IconSearchResults from "./IconEditorTab/IconSearchResults";

class IconEditorTab extends React.Component {
constructor(props) {
super(props);

this.state = {
searchValue: "",
};

this.setSearchValue = this.setSearchValue.bind(this);
this.setWidgetIcon = this.setWidgetIcon.bind(this);
}

setSearchValue(event, searchValue) {
event.preventDefault();
event.stopPropagation();
function IconEditorTab({ widget }) {
const [searchValue, setSearchValue] = React.useState("");
const currentIcon = widget.get("icon");

return (
<div className="icon-editor-tab">
<div className="scrivito_detail_content">
<div className="scrivito_detail_label">
<span>Preview</span>
</div>
<div className="icon-editor-preview">
<IconComponent icon={currentIcon} />
</div>

if (this.state.searchValue !== searchValue) {
this.setState({ searchValue });
}
}
{Scrivito.canWrite() && (
<>
<IconSearch
searchValue={searchValue}
setSearchValue={(newSearchValue) => {
if (searchValue !== newSearchValue) {
setSearchValue(newSearchValue);
}
}}
/>
<IconSearchResults
currentIcon={currentIcon}
searchValue={searchValue}
setWidgetIcon={setWidgetIcon}
/>
<AllIcons
currentIcon={currentIcon}
hide={searchValue.length}
setWidgetIcon={setWidgetIcon}
/>
</>
)}
</div>
</div>
);

setWidgetIcon(event, icon) {
function setWidgetIcon(event, icon) {
event.preventDefault();
event.stopPropagation();

this.props.widget.update({ icon });
}

render() {
const { widget } = this.props;
const currentIcon = widget.get("icon");

return (
<div className="icon-editor-tab">
<div className="scrivito_detail_content">
<div className="scrivito_detail_label">
<span>Preview</span>
</div>
<div className="icon-editor-preview">
<IconComponent icon={widget.get("icon")} />
</div>

<IconSearch
searchValue={this.state.searchValue}
setSearchValue={this.setSearchValue}
/>
<IconSearchResults
currentIcon={currentIcon}
searchValue={this.state.searchValue}
setWidgetIcon={this.setWidgetIcon}
/>
<AllIcons
currentIcon={currentIcon}
hide={this.state.searchValue.length}
setWidgetIcon={this.setWidgetIcon}
/>
</div>
</div>
);
widget.update({ icon });
}
}

Expand Down
Loading

0 comments on commit 456029b

Please sign in to comment.