Skip to content

Commit

Permalink
Style improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@kreafox
kreafox committed Oct 2, 2020
1 parent c65d822 commit 7b3abba
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 103 deletions.
126 changes: 62 additions & 64 deletions src/ColumnsBlock/ColumnsBlockEdit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,72 +180,70 @@ class ColumnsBlockEdit extends React.Component {
className="block-column"
key={colId}
{...(gridSizes[gridCols[index]] || gridCols[index])}
style={getStyle(
data?.coldata?.columns?.[colId]?.settings || {},
)}
>
<div
style={getStyle(
data?.coldata?.columns?.[colId]?.settings || {},
)}
>
<div className="column-header"></div>
<BlocksForm
key={colId}
properties={isEmpty(column) ? emptyBlocksForm() : column}
selectedBlock={
selected ? this.state.colSelections[colId] : null
}
onSelectBlock={(id) =>
this.setState({
colSelections: {
// this invalidates selection in all other columns
[colId]: id,
},
})
}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
coldata: {
...coldata,
columns: {
...coldata.columns,
[colId]: newFormData,
},
<div className="column-header"></div>
<BlocksForm
key={colId}
properties={isEmpty(column) ? emptyBlocksForm() : column}
selectedBlock={
selected ? this.state.colSelections[colId] : null
}
onSelectBlock={(id) =>
this.setState({
colSelections: {
// this invalidates selection in all other columns
[colId]: id,
},
})
}
onChangeFormData={(newFormData) => {
onChangeBlock(block, {
...data,
coldata: {
...coldata,
columns: {
...coldata.columns,
[colId]: newFormData,
},
});
}}
onChangeField={(id, value) =>
this.onChangeColumnData(id, value, colId)
}
pathname={pathname}
>
{({ draginfo }, editBlock, blockProps) => (
<EditBlockWrapper
draginfo={draginfo}
blockProps={blockProps}
extraControls={
<>
<Button
icon
basic
onClick={() => {
this.setState({
showSidebar: true,
activeColumn: colId,
colSelections: {},
});
this.props.setSidebarTab(1);
}}
>
<Icon name={tuneSVG} className="" size="18px" />
</Button>
</>
}
>
{editBlock}
</EditBlockWrapper>
)}
</BlocksForm>
</div>
},
});
}}
onChangeField={(id, value) =>
this.onChangeColumnData(id, value, colId)
}
pathname={pathname}
>
{({ draginfo }, editBlock, blockProps) => (
<EditBlockWrapper
draginfo={draginfo}
blockProps={blockProps}
extraControls={
<>
<Button
icon
basic
title="Edit column"
onClick={() => {
this.setState({
showSidebar: true,
activeColumn: colId,
colSelections: {},
});
this.props.setSidebarTab(1);
}}
>
<Icon name={tuneSVG} className="" size="19px" />
</Button>
</>
}
>
{editBlock}
</EditBlockWrapper>
)}
</BlocksForm>
</Grid.Column>
))}
</Grid>
Expand Down
11 changes: 4 additions & 7 deletions src/ColumnsBlock/ColumnsBlockView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,11 @@ const ColumnsBlockView = (props) => {
className="columns-block-column"
key={id}
{...(gridSizes[gridCols[index]] || gridCols[index])}
className="column-blocks-wrapper"
style={getStyle(column.settings || {})}
>
<div
className="column-blocks-wrapper"
style={getStyle(column.settings || {})}
>
{/* <h4>{`Column ${index}`}</h4> */}
<RenderBlocks {...props} content={column} />
</div>
{/* <h4>{`Column ${index}`}</h4> */}
<RenderBlocks {...props} content={column} />
</Grid.Column>
);
})}
Expand Down
10 changes: 6 additions & 4 deletions src/ColumnsBlock/EditBlockWrapper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ class EditBlockWrapper extends React.Component {
{...draginfo.dragHandleProps}
className="drag handle wrapper-column-block"
>
<Button icon basic>
<Icon name={dragSVG} size="18px" />
<Button icon basic title="Drag and drop">
<Icon name={dragSVG} size="19px" />
</Button>
</div>

Expand All @@ -114,25 +114,27 @@ class EditBlockWrapper extends React.Component {
<Button
icon
basic
title="Add block"
onClick={() => {
this.setState({
addNewBlockOpened: !this.state.addNewBlockOpened,
});
}}
className="column-block-add-button"
>
<Icon name={addSVG} className="" size="18px" />
<Icon name={addSVG} className="" size="19px" />
</Button>
)}
{!required && (
<Button
icon
basic
title="Remove block"
onClick={() => onDeleteBlock(block)}
className="delete-button-column-block"
aria-label={intl.formatMessage(messages.delete)}
>
<Icon name={trashSVG} size="18px" />
<Icon name={trashSVG} size="19px" />
</Button>
)}
{this.state.addNewBlockOpened && (
Expand Down
80 changes: 52 additions & 28 deletions src/ColumnsBlock/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,19 @@
// }
}

.column-grid {
margin-left: -0.2rem!important;
margin-right: -0.2rem!important;
.column:first-child {
padding-left: 0.2rem!important;
}
.column:last-child {
padding-right: 0.2rem!important;
}
}

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

// .column-header {
// width: 100%;
Expand All @@ -20,16 +31,30 @@
padding: 0.8rem !important;
}

.block {
margin-bottom: 1.5em;
.block.selected::before,
.block.selected:hover::before {
z-index: 9;
}
}

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

.block {
.block-add-button {
display: none;
}
}
}

a.ui.card,
.ui.cards a.card,
.ui.link.cards .card,
a.ui.card,
.ui.link.card {
box-shadow: none;
border: 1px solid #edf2f3;
Expand Down Expand Up @@ -61,52 +86,51 @@
}
}

.column-blocks-wrapper {
padding: 1rem;
}

.columns-view {
.ui.grid.column-block-grid {
display: initial !important;
display: initial!important;
}
.column-blocks-wrapper {
padding: 0rem;
}

.columns-block-column {
// overflow: auto;
padding-top: 0.5em!important;
padding-bottom: 0.5em!important;
}
}

.ui.grid.column-grid {
margin-left: -0.5rem;
margin-right: -0.5rem;
margin-top: 0px;
margin-bottom: 0px;

.column:not(.row),
> .row > .column {
padding: 0.5rem;
}
margin-top: 0.8rem;
margin-bottom: 0.8rem;
}

.block-toolbar {
background-color: #d9edf4;
display: flex;
padding: 3px;
// margin-top: -10px;
display: inline-block;
border: none;
background-color: #8dd7ef;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-bottom: 8px;
position: absolute;
margin-top: -36px;
margin-top: -34px;
z-index: 10;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
right: 0px;

.ui.basic.button {
&:hover {
background-color: transparent!important;
}
svg {
color: #134448;
}
}

.drag.handle.wrapper-column-block {
position: initial;
left: initial;
margin-left: initial !important;
margin-left: initial!important;
font-size: 1rem;
min-height: 1em;
vertical-align: baseline;
line-height: 1em;
}
}

Expand Down
1 change: 1 addition & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default function install(config) {
// '#1273DE',
// '#004DCF',
// '#5300EB',
'#EFEFEF',
'#EB9694',
'#FAD0C3',
'#FEF3BD',
Expand Down

0 comments on commit 7b3abba

Please sign in to comment.