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

Jump to bottom

Polish mobile toolbar #7278

Merged
merged 6 commits into from
Jun 13, 2018
Merged

Polish mobile toolbar #7278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3740df
Add right border when block toolbar scrolls.
Jun 12, 2018
83ae1ea
Remove transformations from Block More menu.
Jun 12, 2018
32ae608
Polish mobile toolbar.
Jun 12, 2018
805e6b8
Don't show sibling inserter on mobile.
Jun 12, 2018
0462666
Address feedback and fix typo.
Jun 13, 2018
47374b1
Address feedback on comments.
Jun 13, 2018
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
3 changes: 2 additions & 1 deletion edit-post/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,12 @@ $sidebar-width: 280px;
$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.

// Block UI
$border-width: 1px;
$block-controls-height: 36px;
$icon-button-size: 36px;
$icon-button-size-small: 24px;
$inserter-tabs-height: 36px;
$block-toolbar-height: 37px;
$block-toolbar-height: $block-controls-height + $border-width;

// Blocks
$parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child
Expand Down
121 changes: 68 additions & 53 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
box-shadow: $shadow-popover;

@include break-small {
left: -$block-parent-side-ui-clearance - 1px;
right: -$block-parent-side-ui-clearance - 1px;
left: -$block-parent-side-ui-clearance - $border-width;
right: -$block-parent-side-ui-clearance - $border-width;

.editor-block-list__layout & {
left: -1px;
right: -1px;
left: -$border-width;
right: -$border-width;
}
}
}
Expand Down Expand Up @@ -113,17 +113,17 @@

// Don't add side padding for nested blocks, and compensate for block padding
.editor-block-list__block & {
// compensate for side UI
// Compensate for side UI.
padding-left: 0;
padding-right: 0;

// compensate for block padding horizontally
// Compensate for block padding horizontally.
margin-left: -$block-padding;
margin-right: -$block-padding;

// compensate for block padding and collapsing margins vertically
margin-top: -$block-padding + 1px;
margin-top: -$block-padding + 1px;
// Compensate for block padding and collapsing margins vertically.
margin-top: -$block-padding + $border-width;
margin-bottom: -$block-padding + $border-width;
}
}

Expand All @@ -138,9 +138,8 @@

@include break-small() {
// The block mover needs to stay inside the block to allow clicks when hovering the block
// subtract 1px for border width
padding-left: $block-padding + $block-side-ui-padding - 1px;
padding-right: $block-padding + $block-side-ui-padding - 1px;
padding-left: $block-padding + $block-side-ui-padding - $border-width;
padding-right: $block-padding + $block-side-ui-padding - $border-width;
}

// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
Expand Down Expand Up @@ -218,7 +217,7 @@
z-index: z-index( '.editor-block-list__block-edit:before' );
content: '';
position: absolute;
outline: 1px solid transparent;
outline: $border-width solid transparent;
transition: outline .1s linear;
pointer-events: none;

Expand All @@ -241,7 +240,7 @@
// Selected style
&.is-selected > .editor-block-list__block-edit:before {
// use opacity to work in various editor styles
outline: 1px solid $dark-opacity-light-500;
outline: $border-width solid $dark-opacity-light-500;
top: -$block-padding;
bottom: -$block-padding;

Expand All @@ -252,7 +251,7 @@

// Hover style
&.is-hovered > .editor-block-list__block-edit:before {
outline: 1px solid theme( outlines );
outline: $border-width solid theme( outlines );
}
}

Expand Down Expand Up @@ -337,7 +336,7 @@
// Shared blocks
&.is-shared > .editor-block-list__block-edit:before {
// use opacity to work in various editor styles
outline: 1px dashed $dark-opacity-light-500;
outline: $border-width dashed $dark-opacity-light-500;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
Expand Down Expand Up @@ -391,7 +390,7 @@
// Mover and settings above
> .editor-block-mover,
> .editor-block-settings-menu {
top: -$block-side-ui-width - 1px; // move upwards the height of the button +1px for border
top: -$block-side-ui-width - $border-width; // This moves the menu up by the height of the button + border.
bottom: auto;
min-height: 0;
height: auto;
Expand Down Expand Up @@ -426,7 +425,7 @@

// Position hover label on the right
> .editor-block-list__breadcrumb {
right: -1px;
right: -$border-width;
}

// Hide mover until wide breakpoints, or it might be covered by toolbar
Expand All @@ -453,13 +452,13 @@

// Position hover label on the right
> .editor-block-list__breadcrumb {
right: -1px;
right: -$border-width;
}

// compensate for main container padding, subtract border
@include break-small() {
margin-left: -$block-side-ui-padding + 1px;
margin-right: -$block-side-ui-padding + 1px;
margin-left: -$block-side-ui-padding + $border-width;
margin-right: -$block-side-ui-padding + $border-width;
}

> .editor-block-list__block-edit {
Expand Down Expand Up @@ -581,17 +580,27 @@
}
}

// Show side UI inline below the block on mobile
// Show side UI inline below the block on mobile.
.editor-block-list__block-mobile-toolbar {
display: flex;
flex-direction: row;
margin-top: $item-spacing;
margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above.
margin-right: -$block-padding;
margin-bottom: -$block-padding - $border-width;
margin-left: -$block-padding;
border-top: $border-width solid $light-gray-500;

@include break-small() {
display: none;
}

// Movers, inserter, trash & ellipsis
// Show a shadow below the selected block to imply separation.
box-shadow: $shadow-below-only;
@include break-mobile() {
box-shadow: none;
}

// Movers, inserter, trash, and ellipsis.
.editor-inserter {
position: relative;
left: auto;
Expand Down Expand Up @@ -651,15 +660,20 @@

.editor-block-list__insertion-point-indicator {
position: absolute;
top: calc( 50% - 1px);
top: calc( 50% - $border-width );
height: 2px;
left: 0;
right: 0;
background: theme( primary );
}

.editor-block-list__insertion-point-inserter {
display: flex;
// Don't show on mobile.
display: none;
@include break-mobile() {
display: flex;
}

position: absolute;
top: 0;
bottom: auto;
Expand All @@ -686,7 +700,7 @@
// Show a line indicator when hovering, but this is unclickable
&:before {
position: absolute;
top: calc( 50% - 1px);
top: calc( 50% - #{ $border-width } );
height: 2px;
left: 0;
right: 0;
Expand All @@ -709,8 +723,8 @@
top: -$block-padding - $block-spacing / 2;
height: $block-padding * 2; // Matches the whole empty space between two blocks
bottom: auto;
left: -1px;
right: -1px;
left: -$border-width;
right: -$border-width;
}

&[data-align="full"] > .editor-block-list__insertion-point {
Expand Down Expand Up @@ -751,51 +765,48 @@
pointer-events: none;
height: $block-toolbar-height;

// Position toolbar below the block on mobile
// Position toolbar below the block on mobile.
position: absolute;
bottom: -$block-toolbar-height + 1px;
bottom: $block-toolbar-height;
left: $block-padding;
right: $block-padding;
box-shadow: $shadow-below-only;

// Position the contextual toolbar above the block, add 1px to each to stack borders
// Position the contextual toolbar above the block.
@include break-mobile() {
position: sticky;
bottom: auto;
left: auto;
right: auto;
box-shadow: none;
margin-top: -$block-toolbar-height - 1px;
margin-bottom: $block-padding + 1px;
margin-top: -$block-toolbar-height - $border-width;
margin-bottom: $block-padding + $border-width;
}

@include break-small() {
top: -1px; // stack borders
top: -$border-width;
}

// Floated items have special needs for the contextual toolbar position
// Floated items have special needs for the contextual toolbar position.
.editor-block-list__block[data-align="left"] &,
.editor-block-list__block[data-align="right"] & {
margin-bottom: 1px;
margin-top: -$block-toolbar-height - 1px;
margin-bottom: $border-width;
margin-top: -$block-toolbar-height - $border-width;
}

// put toolbar snugly to side edges on mobile
margin-left: -$block-padding - 1px; // stack borders
margin-right: -$block-padding - 1px;
// Make block toolbar full width on mobile.
margin-left: -$block-padding - $border-width;
margin-right: -$block-padding - $border-width;

@include break-small() {
// stack borders
margin-left: -$parent-block-padding - $block-side-ui-width - 1px;
margin-right: -$parent-block-padding - $block-side-ui-width - 1px;
margin-left: -$parent-block-padding - $block-side-ui-width - $border-width;
margin-right: -$parent-block-padding - $block-side-ui-width - $border-width;

// position toolbar for nested
// Position toolbar for nested contexts.
.editor-block-list__block & {
margin-left: -$block-padding - $block-side-ui-width - 1px;
margin-right: -$block-padding - $block-side-ui-padding - 1px;
margin-left: -$block-padding - $block-side-ui-width - $border-width;
margin-right: -$block-padding - $block-side-ui-padding - $border-width;
}

// except for wide elements, this causes a horizontal scrollbar
// Except for wide elements, this causes a horizontal scrollbar.
[data-align="full"] & {
margin-left: -$block-padding - $block-side-ui-width;
margin-right: -$block-padding - $block-side-ui-width;
Expand All @@ -812,10 +823,14 @@
.editor-block-contextual-toolbar .editor-block-toolbar {
width: 100%;
background: $white;
border: 1px solid $light-gray-500;
border-right: none;
border: $border-width solid $light-gray-500;

// Hide right border on desktop, where the .components-toolbar instead has a right border.
@include break-small() {
border-right: none;
}

// this prevents floats from messing up the position
// This prevents floats from messing up the position.
position: absolute;
left: 0;

Expand Down
2 changes: 0 additions & 2 deletions editor/components/block-settings-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import './style.scss';
import BlockModeToggle from './block-mode-toggle';
import BlockRemoveButton from './block-remove-button';
import BlockDuplicateButton from './block-duplicate-button';
import BlockTransformations from './block-transformations';
import SharedBlockSettings from './shared-block-settings';
import UnknownConverter from './unknown-converter';
import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
Expand Down Expand Up @@ -100,7 +99,6 @@ export class BlockSettingsMenu extends Component {
{ count === 1 && <UnknownConverter uid={ firstBlockUID } role="menuitem" /> }
<BlockDuplicateButton uids={ uids } rootUID={ rootUID } role="menuitem" />
{ count === 1 && <SharedBlockSettings uid={ firstBlockUID } onToggle={ onClose } itemsRole="menuitem" /> }
<BlockTransformations uids={ uids } onClick={ onClose } itemsRole="menuitem" />
</NavigableMenu>
) }
/>
Expand Down
8 changes: 4 additions & 4 deletions editor/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
flex-grow: 1;
width: 100%;
background: $white;
overflow: auto; // allow horizontal scrolling on mobile
overflow: auto; // Allow horizontal scrolling on mobile.
position: relative;

// allow overflow on desktop
// Allow overflow on desktop.
@include break-small() {
overflow: inherit;
}
Expand All @@ -15,10 +15,10 @@
border: none;

// Add a right border to show as separator in the block toolbar.
border-right: 1px solid $light-gray-500;
border-right: $border-width solid $light-gray-500;
}

// this should probably have its own class
// This should be refactored to have its own class to target.
> div {
display: flex;
}
Expand Down