From 4116526e92539579953991641baf06186ebc39ac Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 18 Apr 2018 11:26:45 +0200 Subject: [PATCH] Fix regressions in link UI (#6217) * Polish link UI. The link UI was a bit of a mess, this cleans it up a bit, and fixes some visual glitches as part of the recent input style tweaks. * Fix Button block URL Further optimizes and cleans up the CSS. * Remove z-index Turns out it worked unexpectedly, and the issue is fixed isn't necessarily important to address. --- blocks/library/button/editor.scss | 24 +++++----- blocks/library/image/editor.scss | 10 ----- blocks/rich-text/format-toolbar/style.scss | 32 ++------------ blocks/url-input/style.scss | 44 ++++++++++--------- .../assets/stylesheets/_admin-schemes.scss | 6 +++ edit-post/assets/stylesheets/_z-index.scss | 1 + 6 files changed, 46 insertions(+), 71 deletions(-) diff --git a/blocks/library/button/editor.scss b/blocks/library/button/editor.scss index b6510b3a10c4c..2522496515dc5 100644 --- a/blocks/library/button/editor.scss +++ b/blocks/library/button/editor.scss @@ -13,17 +13,6 @@ margin-bottom: 0; position: relative; - .blocks-format-toolbar__link-modal { - z-index: 2; - top: calc( 100% + 2px ); - left: 50%; - transform: translateX( -50% ); - } - - .blocks-link-url__suggestions { - right: -35px; - } - .blocks-rich-text__tinymce { cursor: text; } @@ -31,7 +20,6 @@ .blocks-button__inline-link { background: #fff; - width: 280px; display: flex; flex-wrap: wrap; align-items: center; @@ -39,10 +27,22 @@ font-size: $default-font-size; line-height: $default-line-height; + $blocks-button__link-input-width: 280px; + width: $blocks-button__link-input-width; + .blocks-url-input { width: auto; } + .blocks-url-input__suggestions { + width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size; + z-index: z-index( '.blocks-button__inline-link .blocks-url-input__suggestions' ); + } + + > .dashicon { + width: $icon-button-size; + } + .dashicon { color: $dark-gray-100; } diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss index 826b1c103d827..1c12f4f85e754 100644 --- a/blocks/library/image/editor.scss +++ b/blocks/library/image/editor.scss @@ -59,16 +59,6 @@ } /*!rtl:end:ignore*/ -.editor-block-list__block[data-type="core/image"] { - .blocks-format-toolbar__link-modal { - top: 0; - left: 0; - position: absolute; - border: none; - width: 100%; - } -} - .wp-core-ui .wp-block-audio__upload-button.button, .wp-core-ui .wp-block-image__upload-button.button, .wp-core-ui .wp-block-video__upload-button.button { diff --git a/blocks/rich-text/format-toolbar/style.scss b/blocks/rich-text/format-toolbar/style.scss index 1a150ffc21db8..3a4d83bc271ef 100644 --- a/blocks/rich-text/format-toolbar/style.scss +++ b/blocks/rich-text/format-toolbar/style.scss @@ -17,10 +17,6 @@ } .blocks-format-toolbar__link-modal-line { - $button-size: 36px; - $input-padding: 10px; - $input-size: 230px; - display: flex; flex-direction: row; flex-grow: 1; @@ -30,30 +26,8 @@ .components-button { flex-shrink: 0; - width: $button-size; - height: $button-size; - } - - .blocks-url-input { - width: $input-size; - - input { - padding: $input-padding; - margin: 0; - } - } - - .blocks-url-input__suggestions { - border-top: 1px solid $light-gray-500; - box-shadow: none; - padding: 4px 0; - position: relative; - width: $input-size + $button-size * 2; - } - - .blocks-url-input__suggestion { - color: $dark-gray-100; - padding: 4px ( $button-size + $input-padding ); + width: $icon-button-size; + height: $icon-button-size; } } @@ -62,7 +36,7 @@ } .blocks-format-toolbar__link-value { - margin: 10px; + margin: $item-spacing - 1px; // subtract border flex-grow: 1; flex-shrink: 1; overflow: hidden; diff --git a/blocks/url-input/style.scss b/blocks/url-input/style.scss index 4037d4273ee36..73f5840b05af4 100644 --- a/blocks/url-input/style.scss +++ b/blocks/url-input/style.scss @@ -1,27 +1,24 @@ // Link input -.blocks-url-input { +$input-padding: 10px; +$input-size: 230px; + +.editor-block-list__block .blocks-url-input { width: 100%; flex-grow: 1; position: relative; + width: $input-size; input[type=text] { - padding: 10px; - font-size: $default-font-size; width: 100%; + padding: $input-padding; border: none; - outline: none; - box-shadow: none; + margin: 0; + &::-ms-clear { display: none; } } - &:focus { - border: none; - box-shadow: none; - outline: none; - } - .spinner { position: absolute; right: 0; @@ -30,35 +27,42 @@ } } +// Suggestions .blocks-url-input__suggestions { position: absolute; - top: 100%; - left: 0; - right: -64px; // to match the link modal borders 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; - box-shadow: 0 3px 20px rgba( 18, 24, 30, .1 ), 0 1px 3px rgba( 18, 24, 30, .1 ); - z-index: z-index( '.blocks-url-input__suggestions' ) + margin: 0 -1px; + padding: 4px 0; + width: $input-size + $icon-button-size * 2 + 2px; // add borders } .blocks-url-input__suggestion { - color: $dark-gray-500; + padding: 4px #{ $icon-button-size + $input-padding } 4px $input-padding; + color: $dark-gray-300; // lightest we can use for contrast display: block; font-size: $default-font-size; - padding: 4px 8px; cursor: pointer; background: $white; width: 100%; border: none; text-align: left; + @include menu-style__neutral(); + + &:hover { + background: $light-gray-500; + } + &:focus, &.is-selected { - background: $blue-dark-900; + background: darken( $blue-medium-500, 15 ); // is overridden in _admin-schemes.scss to be theme dependant color: $white; + outline: none; } } diff --git a/edit-post/assets/stylesheets/_admin-schemes.scss b/edit-post/assets/stylesheets/_admin-schemes.scss index c58e2f261dfc2..f1025fb68f051 100644 --- a/edit-post/assets/stylesheets/_admin-schemes.scss +++ b/edit-post/assets/stylesheets/_admin-schemes.scss @@ -64,5 +64,11 @@ $scheme-sunrise__spot-color: #de823f; .react-datepicker__day--selected { background-color: $spot-color; } + + // URL suggestions + .blocks-url-input__suggestion:focus, + .blocks-url-input__suggestion.is-selected { + background: darken( $spot-color, 15 ); + } } } diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index 80b4c68cacf05..513fa6e6a5dbc 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -26,6 +26,7 @@ $z-layers: ( '.editor-block-settings-menu__popover': 21, // Below the header, but above the block toolbar '.blocks-url-input__suggestions': 30, '.edit-post-header': 30, + '.blocks-button__inline-link .blocks-url-input__suggestions': 6, // URL suggestions for button block above sibling inserter '.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter // Should have lower index than anything else positioned inside the block containers