From 5ab713a179a2078950d94155863c6b41b77d6c4c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 May 2018 12:23:12 +0100 Subject: [PATCH 1/5] URL Input: Use Popover instead of custom positionning and custom modals --- components/popover/index.js | 2 + components/popover/style.scss | 28 ++++-- core-blocks/image/editor.scss | 2 +- edit-post/assets/stylesheets/_z-index.scss | 2 - .../rich-text/format-toolbar/index.js | 91 +++++++++--------- .../rich-text/format-toolbar/style.scss | 26 +---- editor/components/url-input/button.js | 7 +- editor/components/url-input/index.js | 95 ++++++++++--------- editor/components/url-input/style.scss | 32 ++++--- 9 files changed, 146 insertions(+), 139 deletions(-) diff --git a/components/popover/index.js b/components/popover/index.js index f70a5c552970b..55167d806623e 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -190,6 +190,7 @@ class Popover extends Component { children, className, onClickOutside = onClose, + noArrow = false, // Disable reason: We generate the `...contentProps` rest as remainder // of props which aren't explicitly handled by this component. /* eslint-disable no-unused-vars */ @@ -219,6 +220,7 @@ class Popover extends Component { 'is-' + xAxis, { 'is-mobile': isMobile, + 'no-arrow': noArrow, } ); diff --git a/components/popover/style.scss b/components/popover/style.scss index 4988949a7b046..5e30b0932d757 100644 --- a/components/popover/style.scss +++ b/components/popover/style.scss @@ -1,3 +1,5 @@ +$arrow-size: 8px; + .components-popover { position: fixed; z-index: z-index( ".components-popover" ); @@ -10,15 +12,15 @@ bottom: 0; } - &:not(.is-mobile) { + &:not(.no-arrow):not(.is-mobile) { margin-left: 2px; &:before { - border: 8px solid $light-gray-500; + border: $arrow-size solid $light-gray-500; } &:after { - border: 8px solid $white; + border: $arrow-size solid $white; } &:before, @@ -34,11 +36,10 @@ } &.is-top { - bottom: 100%; - margin-top: -8px; + margin-top: - $arrow-size; &:before { - bottom: -8px; + bottom: - $arrow-size; } &:after { @@ -53,12 +54,10 @@ } &.is-bottom { - top: 100%; margin-top: 8px; - z-index: z-index( ".components-popover.is-bottom" ); &:before { - top: -8px; + top: -$arrow-size; } &:after { @@ -72,6 +71,17 @@ } } } + + &:not(.is-mobile) { + &.is-top { + bottom: 100%; + } + + &.is-bottom { + top: 100%; + z-index: z-index( ".components-popover.is-bottom" ); + } + } } .components-popover__content { diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss index fb3f16572c358..be7a784f71ee7 100644 --- a/core-blocks/image/editor.scss +++ b/core-blocks/image/editor.scss @@ -98,7 +98,7 @@ } } -.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-format-toolbar__link-modal { +.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-url-input__button-modal { position: absolute; left: 0; right: 0; diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index 3a974e299d9f0..e20891d9740e4 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -20,8 +20,6 @@ $z-layers: ( '.editor-block-switcher__menu': 5, '.components-popover__close': 5, '.editor-block-list__insertion-point': 5, - '.editor-format-toolbar__link-modal': 81, // should appear above block controls - '.editor-format-toolbar__link-container': 81, // link suggestions should also '.core-blocks-gallery-item__inline-menu': 20, '.editor-url-input__suggestions': 30, '.edit-post-header': 30, diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js index b3141db48e856..ba00704204876 100644 --- a/editor/components/rich-text/format-toolbar/index.js +++ b/editor/components/rich-text/format-toolbar/index.js @@ -9,6 +9,7 @@ import { ToggleControl, Toolbar, withSpokenMessages, + Popover, } from '@wordpress/components'; import { keycodes } from '@wordpress/utils'; import { prependHTTP } from '@wordpress/url'; @@ -208,58 +209,60 @@ class FormatToolbar extends Component { { ( isAddingLink || formats.link ) && (
- { isAddingLink && ( + + { isAddingLink && ( // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -
-
- - - -
- { linkSettings } -
+
+
+ + + +
+ { linkSettings } +
/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */ - ) } + ) } - { formats.link && ! isAddingLink && ( + { formats.link && ! isAddingLink && ( // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar /* eslint-disable jsx-a11y/no-static-element-interactions */ -
- /* eslint-enable jsx-a11y/no-static-element-interactions */ - ) } + ) } +
) } diff --git a/editor/components/rich-text/format-toolbar/style.scss b/editor/components/rich-text/format-toolbar/style.scss index 13f20e839f222..a971cbfe070d1 100644 --- a/editor/components/rich-text/format-toolbar/style.scss +++ b/editor/components/rich-text/format-toolbar/style.scss @@ -2,36 +2,14 @@ display: inline-flex; } -.editor-format-toolbar__link-modal { - position: relative; - box-shadow: $shadow-popover; - border: 1px solid $light-gray-500; - background: $white; - display: flex; - flex-direction: column; - font-family: $default-font; - font-size: $default-font-size; - line-height: $default-line-height; - z-index: z-index( '.editor-format-toolbar__link-modal' ); - - .edit-post-header-toolbar__block-toolbar & { - position: absolute; - left: 0; - right: 0; - } -} - .editor-format-toolbar__link-container { position: absolute; transform: translateX( -50% ); - z-index: z-index( '.editor-format-toolbar__link-container' ); } .editor-format-toolbar__link-modal-line { display: flex; flex-direction: row; - flex-grow: 1; - flex-shrink: 1; min-width: 0; align-items: flex-start; @@ -40,6 +18,10 @@ width: $icon-button-size; height: $icon-button-size; } + + .editor-url-input { + flex-grow: 1; + } } .editor-format-toolbar__link-settings-toggle .dashicon { diff --git a/editor/components/url-input/button.js b/editor/components/url-input/button.js index 0ebd3b835f867..f42120c8ec6a3 100644 --- a/editor/components/url-input/button.js +++ b/editor/components/url-input/button.js @@ -52,9 +52,10 @@ class UrlInputButton extends Component { /> { expanded &&
-
+ className="editor-url-input__button-modal" + onSubmit={ this.submitLink } + > +
- - - { ( loading ) && } + +
+ + + { ( loading ) && } +
{ showSuggestions && !! posts.length && -
- { posts.map( ( post, index ) => ( - - ) ) } -
+ +
+ { posts.map( ( post, index ) => ( + + ) ) } +
+ } -
+ ); /* eslint-enable jsx-a11y/no-autofocus */ } diff --git a/editor/components/url-input/style.scss b/editor/components/url-input/style.scss index ecef24b3941d9..66f271fe010b3 100644 --- a/editor/components/url-input/style.scss +++ b/editor/components/url-input/style.scss @@ -3,11 +3,10 @@ $input-padding: 10px; $input-size: 230px; .editor-block-list__block .editor-url-input, -.editor-block-toolbar .editor-url-input { +.editor-url-input { width: 100%; flex-grow: 1; position: relative; - width: $input-size; input[type=text] { width: 100%; @@ -30,17 +29,10 @@ $input-size: 230px; // Suggestions .editor-url-input__suggestions { - position: absolute; - background: $white; - box-shadow: $shadow-popover; - border: 1px solid $light-gray-500; max-height: 200px; - overflow-y: scroll; transition: all .15s ease-in-out; list-style: none; - margin: 0 -1px; padding: 4px 0; - width: $input-size + $icon-button-size * 2 + 2px; // add borders } // Hide suggestions on mobile until we @todo find a better way to show them @@ -96,7 +88,23 @@ $input-size: 230px; } } -.editor-url-input__button .editor-url-input__suggestions { - left: -40px; - right: -32px; +.editor-url-input__button-modal { + box-shadow: $shadow-popover; + border: 1px solid $light-gray-500; + background: $white; +} + +.editor-url-input__button-modal-line { + display: flex; + flex-direction: row; + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + align-items: flex-start; + + .components-button { + flex-shrink: 0; + width: $icon-button-size; + height: $icon-button-size; + } } From 491828dc0cbbf7f97a94383daab8aa5667fddd13 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 May 2018 13:35:28 +0100 Subject: [PATCH 2/5] Remove the link offset --- editor/components/rich-text/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js index 9542381355820..b65eb2eabe27f 100644 --- a/editor/components/rich-text/index.js +++ b/editor/components/rich-text/index.js @@ -446,11 +446,10 @@ export class RichText extends Component { getFocusPosition( position ) { // The container is relatively positioned. const containerPosition = this.containerRef.current.getBoundingClientRect(); - const toolbarOffset = { top: 10, left: 0 }; return { - top: position.top - containerPosition.top + ( position.height ) + toolbarOffset.top, - left: position.left - containerPosition.left + ( position.width / 2 ) + toolbarOffset.left, + top: position.top - containerPosition.top + position.height, + left: position.left - containerPosition.left + ( position.width / 2 ), }; } From 813bd2ec1439f48f11cfdd40e800708681bb6306 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 May 2018 16:47:55 +0100 Subject: [PATCH 3/5] Force popover rerender when we click on another link --- editor/components/rich-text/format-toolbar/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js index ba00704204876..3a18140716e56 100644 --- a/editor/components/rich-text/format-toolbar/index.js +++ b/editor/components/rich-text/format-toolbar/index.js @@ -63,6 +63,7 @@ class FormatToolbar extends Component { settingsVisible: false, opensInNewWindow: false, linkValue: '', + popoverId: 1, // Used to force popover render to force recomputing the anchor }; this.addLink = this.addLink.bind( this ); @@ -99,6 +100,7 @@ class FormatToolbar extends Component { settingsVisible: false, opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target, linkValue: '', + popoverId: this.state.popoverId + 1, } ); } } @@ -168,7 +170,7 @@ class FormatToolbar extends Component { render() { const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props; - const { linkValue, settingsVisible, opensInNewWindow } = this.state; + const { linkValue, settingsVisible, opensInNewWindow, popoverId } = this.state; const isAddingLink = formats.link && formats.link.isAdding; const toolbarControls = FORMATTING_CONTROLS.concat( customControls ) @@ -209,7 +211,7 @@ class FormatToolbar extends Component { { ( isAddingLink || formats.link ) && (
- + { isAddingLink && ( // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ From e483cf527f89c806bd2ea6f98934642af207fe06 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 May 2018 10:49:16 +0100 Subject: [PATCH 4/5] URL Input: Inheritwq focus style --- edit-post/assets/stylesheets/main.scss | 3 ++- editor/components/url-input/style.scss | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss index 606f0f0089d1b..663f6319c711c 100644 --- a/edit-post/assets/stylesheets/main.scss +++ b/edit-post/assets/stylesheets/main.scss @@ -121,7 +121,8 @@ body.gutenberg-editor-page { // @todo submit as upstream patch as well .edit-post-sidebar, .editor-post-publish-panel, -.editor-block-list__block { +.editor-block-list__block, +.components-popover { .input-control, // upstream name is .regular-text input[type=text], input[type=search], diff --git a/editor/components/url-input/style.scss b/editor/components/url-input/style.scss index 66f271fe010b3..3789f52fc5d6b 100644 --- a/editor/components/url-input/style.scss +++ b/editor/components/url-input/style.scss @@ -1,18 +1,19 @@ // Link input -$input-padding: 10px; +$input-padding: 8px; $input-size: 230px; .editor-block-list__block .editor-url-input, +.components-popover .editor-url-input, .editor-url-input { width: 100%; flex-grow: 1; position: relative; + padding: 1px; input[type=text] { width: 100%; padding: $input-padding; border: none; - margin: 0; &::-ms-clear { display: none; @@ -22,7 +23,7 @@ $input-size: 230px; .spinner { position: absolute; right: 0; - top: 10px; + top: $input-padding; margin: 0; } } From 569ec28b4acfe145e7498de14d18a4bb665cb922 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 May 2018 10:52:34 +0100 Subject: [PATCH 5/5] Use the selectedNodeId instead of another popoverId --- editor/components/rich-text/format-toolbar/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js index 3a18140716e56..97c651c64ecb7 100644 --- a/editor/components/rich-text/format-toolbar/index.js +++ b/editor/components/rich-text/format-toolbar/index.js @@ -63,7 +63,6 @@ class FormatToolbar extends Component { settingsVisible: false, opensInNewWindow: false, linkValue: '', - popoverId: 1, // Used to force popover render to force recomputing the anchor }; this.addLink = this.addLink.bind( this ); @@ -100,7 +99,6 @@ class FormatToolbar extends Component { settingsVisible: false, opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target, linkValue: '', - popoverId: this.state.popoverId + 1, } ); } } @@ -169,8 +167,8 @@ class FormatToolbar extends Component { } render() { - const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props; - const { linkValue, settingsVisible, opensInNewWindow, popoverId } = this.state; + const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props; + const { linkValue, settingsVisible, opensInNewWindow } = this.state; const isAddingLink = formats.link && formats.link.isAdding; const toolbarControls = FORMATTING_CONTROLS.concat( customControls ) @@ -211,7 +209,11 @@ class FormatToolbar extends Component { { ( isAddingLink || formats.link ) && (
- + { isAddingLink && ( // Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */