Skip to content

Commit

Permalink
Add clickable title to columns block to easily select columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@avoinea
avoinea committed Mar 25, 2021
1 parent 282b8b1 commit 3768609
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 118 deletions.
186 changes: 100 additions & 86 deletions src/ColumnsBlock/ColumnsBlockEdit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,94 +328,108 @@ class ColumnsBlockEdit extends React.Component {
}}
/>
) : (
<Grid columns={gridSize} className="column-grid" stackable>
{columnList.map(([colId, column], index) => (
<Grid.Column
className="block-column"
key={colId}
{...(gridSizes[gridCols[index]] || gridCols[index])}
{...getStyle(data?.data?.blocks?.[colId]?.settings || {})}
>
<div className="column-header"></div>
<BlocksForm
<>
<div
className="columns-header"
onClick={() => {
this.setState({
showSidebar: true,
colSelections: {},
});
this.props.setSidebarTab(1);
}}
aria-hidden="true"
>
{data.title || 'Columns'}
</div>
<Grid columns={gridSize} className="column-grid" stackable>
{columnList.map(([colId, column], index) => (
<Grid.Column
className="block-column"
key={colId}
title={data?.placeholder}
description={data?.instructions?.data}
manage={manage}
allowedBlocks={data?.allowedBlocks}
metadata={metadata}
properties={isEmpty(column) ? emptyBlocksForm() : column}
selectedBlock={
selected ? this.state.colSelections[colId] : null
}
onSelectBlock={(id, selected, e) => {
const isMultipleSelection = e
? e.shiftKey || e.ctrlKey || e.metaKey
: false;
this.onSelectBlock(
id,
colId,
selectedColData,
selectedBlock,
selectedCol !== colId || selectedBlock === id
? false
: isMultipleSelection,
e,
);
}}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: newFormData,
},
},
});
}}
onChangeField={(id, value) =>
this.onChangeColumnData(id, value, colId)
}
pathname={pathname}
{...(gridSizes[gridCols[index]] || gridCols[index])}
{...getStyle(data?.data?.blocks?.[colId]?.settings || {})}
>
{({ draginfo }, editBlock, blockProps) => (
<EditBlockWrapper
draginfo={draginfo}
blockProps={blockProps}
extraControls={
<>
{!data?.readOnlySettings && (
<Button
icon
basic
title="Go to Column settings"
onClick={() => {
this.setState({
showSidebar: true,
activeColumn: colId,
colSelections: {},
});
this.props.setSidebarTab(1);
}}
>
<Icon name={tuneSVG} className="" size="19px" />
</Button>
)}
</>
}
multiSelected={this.state.multiSelected.includes(
blockProps.block,
)}
>
{editBlock}
</EditBlockWrapper>
)}
</BlocksForm>
</Grid.Column>
))}
</Grid>
<BlocksForm
key={colId}
title={data?.placeholder}
description={data?.instructions?.data}
manage={manage}
allowedBlocks={data?.allowedBlocks}
metadata={metadata}
properties={isEmpty(column) ? emptyBlocksForm() : column}
selectedBlock={
selected ? this.state.colSelections[colId] : null
}
onSelectBlock={(id, selected, e) => {
const isMultipleSelection = e
? e.shiftKey || e.ctrlKey || e.metaKey
: false;
this.onSelectBlock(
id,
colId,
selectedColData,
selectedBlock,
selectedCol !== colId || selectedBlock === id
? false
: isMultipleSelection,
e,
);
}}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
data: {
...coldata,
blocks: {
...coldata.blocks,
[colId]: newFormData,
},
},
});
}}
onChangeField={(id, value) =>
this.onChangeColumnData(id, value, colId)
}
pathname={pathname}
>
{({ draginfo }, editBlock, blockProps) => (
<EditBlockWrapper
draginfo={draginfo}
blockProps={blockProps}
extraControls={
<>
{!data?.readOnlySettings && (
<Button
icon
basic
title="Go to Column settings"
onClick={() => {
this.setState({
showSidebar: true,
activeColumn: colId,
colSelections: {},
});
this.props.setSidebarTab(1);
}}
>
<Icon name={tuneSVG} className="" size="19px" />
</Button>
)}
</>
}
multiSelected={this.state.multiSelected.includes(
blockProps.block,
)}
>
{editBlock}
</EditBlockWrapper>
)}
</BlocksForm>
</Grid.Column>
))}
</Grid>
</>
)}

{selected && selectedColData ? (
Expand Down
11 changes: 7 additions & 4 deletions src/ColumnsBlock/ColumnsBlockView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,16 @@ import { getStyle } from '@eeacms/volto-columns-block/Styles';

const ColumnsBlockView = (props) => {
const { gridSizes } = config.blocks.blocksConfig[COLUMNSBLOCK];
const { data = {}, gridSize = 12, gridCols = [], block_title } = props.data;
const { data = {}, gridSize = 12, gridCols = [] } = props.data;
const metadata = props.metadata || props.properties;
const columnList = getColumns(data);
const customId = props.data?.title
?.toLowerCase()
?.replace(/[^a-zA-Z-\s]/gi, '')
?.trim()
?.replace(/\s+/gi, '-');
return (
<div className="columns-view">
{block_title ? <h3>{block_title}</h3> : ''}
<div className="columns-view" id={customId}>
<Grid columns={gridSize} className="column-grid">
{columnList.map(([id, column], index) => {
return (
Expand All @@ -24,7 +28,6 @@ const ColumnsBlockView = (props) => {
className="column-blocks-wrapper"
{...getStyle(column.settings || {})}
>
{/* <h4>{`Column ${index}`}</h4> */}
<RenderBlocks {...props} metadata={metadata} content={column} />
</Grid.Column>
);
Expand Down
6 changes: 6 additions & 0 deletions src/ColumnsBlock/ColumnsLayoutSchema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const Schema = {
id: 'default',
title: 'Default',
fields: [
'title',
'placeholder',
'instructions',
'allowedBlocks',
Expand All @@ -17,6 +18,11 @@ const Schema = {
},
],
properties: {
title: {
title: 'Title',
description: 'Columns block friendly name',
type: 'string',
},
allowedBlocks: {
title: 'Allowed blocks',
description: 'Allow only the following blocks types',
Expand Down
11 changes: 6 additions & 5 deletions src/ColumnsBlock/schema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ export const ColumnsBlockSchema = () => ({
{
id: 'default',
title: 'Default',
fields: ['data', 'gridCols'], // 'nrColumns', 'block_title'
fields: ['title', 'data', 'gridCols'],
},
],
properties: {
block_title: {
title: 'Block title',
default: 'Columns',
title: {
title: 'Title',
description: 'Columns block friendly name',
type: 'string',
},
data: {
title: 'Columns',
Expand All @@ -40,5 +41,5 @@ export const ColumnsBlockSchema = () => ({
choices: [],
},
},
required: ['title'],
required: [],
});
52 changes: 29 additions & 23 deletions src/ColumnsBlock/styles.less
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.columns-block {
& > .column {
// padding: 4px;
// & > .column {
// padding: 4px !important;
// }
}
@type: 'extra';
@element: 'custom';

@import (multiple, reference, optional) '../../theme.config';

@borderColor: rgba(120, 192, 215, 0.75);

.columns-block {
.block-column .ui.block.inner {
.block {
margin-bottom: 0;
Expand All @@ -23,18 +23,30 @@
.column:last-child {
padding-right: 0.2rem !important;
}

&:focus {
outline: none;
}
}

.columns-header {
position: absolute;
z-index: 3;
top: -1.3em;
left: 0;
width: fit-content;
padding: 0 1rem;
margin-right: auto;
margin-left: auto;
background-color: @pageBackground;
color: @borderColor;
cursor: pointer;
text-align: center;
}

.block-column {
padding: 0.3em !important;

// .column-header {
// width: 100%;
// text-align: center;
// border-bottom: 6px solid #eaeaea;
// margin: 0.3em auto 0.8em auto;
// }

.blocks-form {
padding: 0.8rem !important;
}
Expand All @@ -50,12 +62,6 @@
display: none;
}
}

// .block.selected {
// border: 1px solid #826A6A;
// padding: 0.3em 0.5em;
// border-radius: 2px;
// }
}

a.ui.card,
Expand Down Expand Up @@ -115,10 +121,10 @@
display: flex;
padding: 5px;
border: none;
border: 1px solid #78c0d7bf;
border-bottom: 1px solid #fff;
border: 1px solid @borderColor;
border-bottom: 1px solid @pageBackground;
margin-top: -45px;
background-color: #fff;
background-color: @pageBackground;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;

Expand Down

0 comments on commit 3768609

Please sign in to comment.