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

Inserter: add tabs. #1582

Merged
merged 5 commits into from
Jun 29, 2017
Merged

Inserter: add tabs. #1582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
62a7b69
Inserter: add tabs.
mtias Jun 29, 2017
d9eb488
Add bottom border to search item.
mtias Jun 29, 2017
d8e8e55
Polish the inserter tabs.
jasmussen Jun 29, 2017
7d31729
Relax paddings and margins.
jasmussen Jun 29, 2017
04932b1
Fix neutral grays.
mtias Jun 29, 2017
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
2 changes: 1 addition & 1 deletion components/popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
right: 0;

@include break-medium {
width: 280px;
width: 300px;
left: -122px;
right: auto;
height: auto;
Expand Down
2 changes: 2 additions & 0 deletions editor/assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ $z-layers: (
'.editor-visual-editor__block-controls': 1,
'.components-form-toggle__input': 1,
'.editor-format-list__menu': 1,
'.editor-inserter__tabs': 1,
'.editor-inserter__tab.is-active': 1,
'.editor-sidebar': 19,
'.editor-header': 20,
'.editor-post-visibility__dialog': 30,
Expand Down
111 changes: 85 additions & 26 deletions editor/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ class InserterMenu extends Component {
this.state = {
filterValue: '',
currentFocus: 'search',
tab: 'recent',
};
this.filter = this.filter.bind( this );
this.isShownBlock = this.isShownBlock.bind( this );
Expand Down Expand Up @@ -224,6 +225,28 @@ class InserterMenu extends Component {
this.changeMenuSelection( 'search' );
}

getBlockItem( block ) {
return (
<button
role="menuitem"
key={ block.name }
className="editor-inserter__block"
onClick={ this.selectBlock( block.name ) }
ref={ this.bindReferenceNode( block.name ) }
tabIndex="-1"
onMouseEnter={ this.props.showInsertionPoint }
onMouseLeave={ this.props.hideInsertionPoint }
>
<Dashicon icon={ block.icon } />
{ block.title }
</button>
);
}

switchTab( tab ) {
this.setState( { tab: tab } );
}

render() {
const { position, instanceId } = this.props;
const visibleBlocksByCategory = this.getVisibleBlocksByCategory( getBlockTypes() );
Expand All @@ -246,42 +269,78 @@ class InserterMenu extends Component {
tabIndex="-1"
/>
<div role="menu" className="editor-inserter__content">
{ getCategories()
.map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && (
<div key={ category.slug }>
<div
className="editor-inserter__separator"
id={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
aria-hidden="true"
>
{ category.title }
{ this.state.tab === 'recent' &&
<div className="editor-inserter__recent">
{ getCategories()
.map( ( category ) => category.slug === 'common' && !! visibleBlocksByCategory[ category.slug ] && (
<div
className="editor-inserter__category-blocks"
role="menu"
tabIndex="0"
aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
>
{ visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
</div>
) )
}
</div>
}
{ this.state.tab === 'blocks' &&
getCategories()
.map( ( category ) => category.slug !== 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
<div key={ category.slug }>
<div
className="editor-inserter__separator"
id={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
aria-hidden="true"
>
{ category.title }
</div>
<div
className="editor-inserter__category-blocks"
role="menu"
tabIndex="0"
aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
>
{ visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
</div>
</div>
) )
}
{ this.state.tab === 'embeds' &&
getCategories()
.map( ( category ) => category.slug === 'embed' && !! visibleBlocksByCategory[ category.slug ] && (
<div
className="editor-inserter__category-blocks"
role="menu"
tabIndex="0"
aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ instanceId }` }
>
{ visibleBlocksByCategory[ category.slug ].map( ( block ) => (
<button
role="menuitem"
key={ block.name }
className="editor-inserter__block"
onClick={ this.selectBlock( block.name ) }
ref={ this.bindReferenceNode( block.name ) }
tabIndex="-1"
onMouseEnter={ this.props.showInsertionPoint }
onMouseLeave={ this.props.hideInsertionPoint }
>
<Dashicon icon={ block.icon } />
{ block.title }
</button>
) ) }
{ visibleBlocksByCategory[ category.slug ].map( ( block ) => this.getBlockItem( block ) ) }
</div>
</div>
) )
) )
}
</div>
<div className="editor-inserter__tabs is-recent">
<button
className={ `editor-inserter__tab ${ this.state.tab === 'recent' ? 'is-active' : '' }` }
onClick={ () => this.switchTab( 'recent' ) }
>
{ __( 'Recent' ) }
</button>
<button
className={ `editor-inserter__tab ${ this.state.tab === 'blocks' ? 'is-active' : '' }` }
onClick={ () => this.switchTab( 'blocks' ) }
>
{ __( 'Blocks' ) }
</button>
<button
className={ `editor-inserter__tab ${ this.state.tab === 'embeds' ? 'is-active' : '' }` }
onClick={ () => this.switchTab( 'embeds' ) }
>
{ __( 'Embeds' ) }
</button>
</div>
</Popover>
);
/* eslint-enable jsx-a11y/no-autofocus */
Expand Down
52 changes: 40 additions & 12 deletions editor/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@
height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } );

@include break-medium {
height: auto;
max-height: 50vh;
height: 240px;
}

overflow: auto;
Expand All @@ -54,7 +53,7 @@ input[type="search"].editor-inserter__search {
margin: 0;
box-shadow: none;
border: 1px solid transparent;
border-top: 1px solid $light-gray-500;
border-bottom: 1px solid $light-gray-500;
padding: 8px 11px;
font-size: 13px;
position: relative;
Expand All @@ -69,11 +68,11 @@ input[type="search"].editor-inserter__search {
.editor-inserter__category-blocks {
display: flex;
flex-flow: row wrap;
padding: 4px;
padding: 8px;
}

.editor-inserter__menu.is-bottom:after {
border-bottom-color: $light-gray-100;
border-bottom-color: $white;
}

.editor-inserter__block {
Expand All @@ -82,7 +81,7 @@ input[type="search"].editor-inserter__search {
font-size: 12px;
color: $dark-gray-500;
margin: 0;
padding: 8px;
padding: 12px 6px;
align-items: center;
cursor: pointer;
border: none;
Expand Down Expand Up @@ -111,11 +110,40 @@ input[type="search"].editor-inserter__search {
.editor-inserter__separator {
display: block;
margin: 0;
padding: 4px 12px;
font-size: 11px;
padding: 12px 14px 0 14px;
font-size: $default-font-size;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
background: $light-gray-100;
border-bottom: 1px solid $light-gray-500;
}

.editor-inserter__tabs {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: z-index( '.editor-inserter__tabs' );
}

.editor-inserter__tab {
background: $light-gray-300;
border: none;
border-bottom: 2px solid transparent;
border-top: 2px solid transparent;
box-shadow: 0 0 0 1px $light-gray-500;
font-size: $default-font;
padding: 8px 8px;
width: 100%;
margin: 0;
color: $dark-gray-500;

&.is-active {
background: $white;
border-bottom-color: $blue-medium-500;
position: relative;
z-index: z-index( '.editor-inserter__tab.is-active' );
}

&:focus {
box-shadow: $button-focus-style;
outline: none;
}
}