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

Refactor PostVisibility to use Popover component #1204

Merged
merged 2 commits into from
Jul 31, 2017
+128 −140
Merged

Refactor PostVisibility to use Popover component #1204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a7a34c
Refactor PostVisibility to use Popover component
aduth Jun 15, 2017
5a58688
Decrease inserter content height by tabs height
aduth Jul 31, 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
17 changes: 8 additions & 9 deletions components/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class Popover extends Component {
constructor() {
super( ...arguments );

this.bindNode = this.bindNode.bind( this );
this.bindContent = this.bindContent.bind( this );

this.state = {
forcedYAxis: null,
Expand Down Expand Up @@ -45,7 +45,7 @@ class Popover extends Component {
}

setForcedPositions() {
const rect = this.node.getBoundingClientRect();
const rect = this.content.getBoundingClientRect();

// Check exceeding top or bottom of viewport
if ( rect.top < 0 ) {
Expand All @@ -62,8 +62,8 @@ class Popover extends Component {
}
}

bindNode( node ) {
this.node = node;
bindContent( node ) {
this.content = node;
}

render() {
Expand All @@ -79,11 +79,10 @@ class Popover extends Component {
);

return (
<div
ref={ this.bindNode }
className={ classes }
tabIndex="0">
{ children }
<div className={ classes } tabIndex="0">
<div ref={ this.bindContent } className="components-popover__content">
{ children }
</div>
</div>
);
}
Expand Down
76 changes: 37 additions & 39 deletions components/popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,10 @@
.components-popover {
box-shadow: $shadow-popover;
border: 1px solid $light-gray-500;
position: absolute;
background: $white;
z-index: z-index( ".components-popover" );
left: 0;
right: 0;

@include break-medium {
width: 300px;
left: -122px;
right: auto;
height: auto;
}
left: 50%;

&:before {
border: 10px dashed $light-gray-500;
display: none;

@include break-medium {
display: block;
}
border: 10px solid $light-gray-500;
}

&:after {
Expand All @@ -31,7 +15,6 @@
&:after {
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
height: 0;
width: 0;
Expand All @@ -41,7 +24,8 @@
}

&.is-top {
bottom: 42px;
bottom: 100%;
margin-bottom: 10px;

&:before {
bottom: -10px;
Expand All @@ -59,11 +43,8 @@
}

&.is-bottom {
top: $admin-bar-height-big + $item-spacing -1px;

@include break-medium {
top: $admin-bar-height + $item-spacing;
}
top: 100%;
margin-top: 10px;

&:before {
top: -10px;
Expand All @@ -79,24 +60,41 @@
border-top: none;
}
}
}

&.is-right {
left: -32px;
.components-popover__content {
position: absolute;
box-shadow: $shadow-popover;
border: 1px solid $light-gray-500;
background: $white;
width: calc( 100vw - 20px );

&:before,
&:after {
left: 49px;
}
@include break-medium {
width: 300px;
}

&.is-left {
left: auto;
right: -42px;
.components-popover.is-top & {
bottom: 100%;
}

&:before,
&:after {
left: auto;
right: 49px;
}
.components-popover.is-bottom & {
top: 100%;
}

.components-popover.is-center & {
left: 50%;
transform: translateX( -50% );
}

.components-popover.is-right & {
position: absolute;
left: 100%;
margin-left: -24px;
}

.components-popover.is-left & {
position: absolute;
right: 100%;
margin-right: -24px;
}
}
1 change: 1 addition & 0 deletions editor/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ $big-font-size: 18px;
$item-spacing: 10px;
$panel-padding: 16px;
$header-height: 56px;
$inserter-tabs-height: 36px;
$sidebar-width: 280px;
$sidebar-panel-header-height: 50px;
$admin-bar-height: 32px;
Expand Down
1 change: 0 additions & 1 deletion editor/assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ $z-layers: (
'.components-panel__header': 1,
'.editor-block-mover': 10,
'.editor-header': 20,
'.editor-post-visibility__dialog': 30,
'.editor-post-schedule__dialog': 30,

// Show drop zone above most standard content, but below any overlays
Expand Down
18 changes: 18 additions & 0 deletions editor/header/tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,24 @@
}
}

@media ( max-width: $break-mobile ) {
.editor-tools .editor-inserter .components-popover {
margin-top: 0;

&:before,
&:after {
display: none;
}
}

.editor-tools .editor-inserter .components-popover__content {
width: 100vw;
left: 0;
right: 0;
margin: 0;
}
}

.editor-tools__tabs {
margin: 0 $item-spacing;
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion editor/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

.editor-inserter__content {
height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size } );
height: calc( 100vh - #{ $admin-bar-height-big + $header-height + $icon-button-size + $inserter-tabs-height } );

@include break-medium {
height: 240px;
Expand Down
111 changes: 56 additions & 55 deletions editor/sidebar/post-visibility/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { find } from 'lodash';
*/
import { __ } from 'i18n';
import { Component } from 'element';
import { PanelRow, withInstanceId } from 'components';
import { PanelRow, Popover, withInstanceId } from 'components';

/**
* Internal Dependencies
Expand Down Expand Up @@ -106,64 +106,65 @@ class PostVisibility extends Component {
return (
<PanelRow className="editor-post-visibility">
<span>{ __( 'Visibility' ) }</span>
<button
type="button"
aria-expanded={ this.state.opened }
className="editor-post-visibility__toggle button-link"
onClick={ this.toggleDialog }
>
{ getVisibilityLabel( visibility ) }
</button>

{ this.state.opened &&
<div className="editor-post-visibility__dialog">
<div className="editor-post-visibility__dialog-arrow" />
<fieldset>
<legend className="editor-post-visibility__dialog-legend">
{ __( 'Post Visibility' ) }
</legend>
{ visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => (
<div key={ value } className="editor-post-visibility__choice">
<input
type="radio"
name={ `editor-post-visibility__setting-${ instanceId }` }
value={ value }
onChange={ onSelect }
checked={ checked }
id={ `editor-post-${ value }-${ instanceId }` }
aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
className="editor-post-visibility__dialog-radio"
/>
<span className="editor-post-visibility__button-wrapper">
<button
type="button"
aria-expanded={ this.state.opened }
className="editor-post-visibility__toggle button-link"
onClick={ this.toggleDialog }
>
{ getVisibilityLabel( visibility ) }
</button>

{ this.state.opened &&
<Popover position="bottom left" className="editor-post-visibility__dialog">
<fieldset>
<legend className="editor-post-visibility__dialog-legend">
{ __( 'Post Visibility' ) }
</legend>
{ visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => (
<div key={ value } className="editor-post-visibility__choice">
<input
type="radio"
name={ `editor-post-visibility__setting-${ instanceId }` }
value={ value }
onChange={ onSelect }
checked={ checked }
id={ `editor-post-${ value }-${ instanceId }` }
aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
className="editor-post-visibility__dialog-radio"
/>
<label
htmlFor={ `editor-post-${ value }-${ instanceId }` }
className="editor-post-visibility__dialog-label"
>
{ label }
</label>
{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
</div>
) ) }
</fieldset>
{ this.state.hasPassword &&
<div className="editor-post-visibility__dialog-password">
<label
htmlFor={ `editor-post-${ value }-${ instanceId }` }
className="editor-post-visibility__dialog-label"
htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
className="screen-reader-text"
>
{ label }
{ __( 'Create password' ) }
</label>
{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
<input
className="editor-post-visibility__dialog-password-input"
id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
type="text"
onChange={ updatePassword }
value={ password }
placeholder={ __( 'Use a secure password' ) }
/>
</div>
) ) }
</fieldset>
{ this.state.hasPassword &&
<div className="editor-post-visibility__dialog-password">
<label
htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
className="screen-reader-text"
>
{ __( 'Create password' ) }
</label>
<input
className="editor-post-visibility__dialog-password-input"
id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
type="text"
onChange={ updatePassword }
value={ password }
placeholder={ __( 'Use a secure password' ) }
/>
</div>
}
</div>
}
}
</Popover>
}
</span>
</PanelRow>
);
/* eslint-enable jsx-a11y/label-has-for */
Expand Down
42 changes: 7 additions & 35 deletions editor/sidebar/post-visibility/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
.editor-post-visibility {
width: 100%;
}

.editor-post-visibility__button-wrapper {
position: relative;
}

Expand All @@ -16,43 +19,12 @@
}
}

.editor-post-visibility__dialog {
position: absolute;
top: 30px;
right: 0;
box-shadow: $shadow-popover;
border: 1px solid $light-gray-500;
background: $white;
.editor-post-visibility__dialog .components-popover__content {
padding: 10px;
min-width: 240px;
z-index: z-index( '.editor-post-visibility__dialog' );
}

.editor-post-visibility__dialog-arrow {
position: absolute;
border: 10px dashed $light-gray-500;
height: 0;
width: 0;
line-height: 0;
top: -10px;
right: 5px;
margin-left: -10px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;

&:before {
top: 2px;
border: 10px solid $white;
content: " ";
position: absolute;
left: 50%;
margin-left: -10px;
border-bottom-style: solid;
border-top: none;
border-left-color: transparent;
border-right-color: transparent;
@include break-medium {
// 279px (sidebar width) - 20px (padding) - 2px (horizontal borders)
width: 257px;
}
}

Expand Down