Skip to content

Commit

Permalink
HACK: PoC to improve the draggable indicator
Browse files Browse the repository at this point in the history
This tweaks the dashicon viewBox to render a not too embarrasing
draggable indicator. This needs fixing.
  • Loading branch information
oandregal committed Aug 10, 2018
1 parent cac8b4d commit a9dc4ae
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 4 deletions.
5 changes: 3 additions & 2 deletions packages/components/src/dashicon/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ export default class Dashicon extends Component {
return (
this.props.icon !== nextProps.icon ||
this.props.size !== nextProps.size ||
this.props.viewBox !== nextProps.viewBox ||
this.props.className !== nextProps.className
);
}

render() {
const { icon, className, size = 20 } = this.props;
const { icon, className, size = 20, viewBox = 20 } = this.props;
let path;

switch ( icon ) {
Expand Down Expand Up @@ -887,7 +888,7 @@ export default class Dashicon extends Component {
xmlns="http://www.w3.org/2000/svg"
width={ size }
height={ size }
viewBox="0 0 20 20"
viewBox={ '0 0 ' + viewBox + ' ' + viewBox } // TODO: if we like this approach, remove this hack and implement upstream
>
<path d={ path } />
</svg>
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/components/block-list/breadcrumb.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import { Toolbar } from '@wordpress/components';
import { Dashicon, Toolbar } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';

Expand Down Expand Up @@ -53,7 +53,7 @@ export class BlockBreadcrumb extends Component {
return (
<div className={ 'editor-block-list__breadcrumb' }>
<Toolbar>
<div>:::&nbsp;&nbsp;</div>
<div className="editor-block-list__breadcrumb-drag-handle"><Dashicon icon="editor-justify" size={ 10 } viewBox={ 14 } /></div>
{ rootClientId && (
<Fragment>
<BlockTitle clientId={ rootClientId } />
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -944,6 +944,10 @@
.editor-block-list__block:hover & {
@include fade_in(0.1s);
}

.editor-block-list__breadcrumb-drag-handle {
margin-right: 2px;
}
}
}

Expand Down

0 comments on commit a9dc4ae

Please sign in to comment.