From 62a7b699dba157a516b50b315836ec4464b17c54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 29 Jun 2017 12:56:25 +0200 Subject: [PATCH 1/5] Inserter: add tabs. - Recent, blocks, and embeds. - Displays different sets of blocks. Don't show category header for single category display. --- editor/inserter/menu.js | 111 ++++++++++++++++++++++++++++--------- editor/inserter/style.scss | 21 +++++++ 2 files changed, 106 insertions(+), 26 deletions(-) diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js index 7a75ee4e07b64..22b91ba459b25 100644 --- a/editor/inserter/menu.js +++ b/editor/inserter/menu.js @@ -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 ); @@ -224,6 +225,28 @@ class InserterMenu extends Component { this.changeMenuSelection( 'search' ); } + getBlockItem( block ) { + return ( + + ); + } + + switchTab( tab ) { + this.setState( { tab: tab } ); + } + render() { const { position, instanceId } = this.props; const visibleBlocksByCategory = this.getVisibleBlocksByCategory( getBlockTypes() ); @@ -246,42 +269,78 @@ class InserterMenu extends Component { tabIndex="-1" />
- { getCategories() - .map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && ( -
- - ) ) + ) ) }
+
+ + + +
); /* eslint-enable jsx-a11y/no-autofocus */ diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index 4596d96815f0f..0a7d32aca729c 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -119,3 +119,24 @@ input[type="search"].editor-inserter__search { background: $light-gray-100; border-bottom: 1px solid $light-gray-500; } + +.editor-inserter__tabs { + width: 100%; + display: flex; + justify-content: space-between; +} + +.editor-inserter__tab { + background: #eee; + border: none; + border-bottom: 2px solid transparent; + border-top: 2px solid transparent; + box-shadow: 0 0 0 1px #ddd; + font-size: $default-font; + padding: 8px 8px; + width: 100%; + + &.is-active { + border-bottom: 2px solid #f00; + } +} From d9eb488753d3653920c7578c289e469af27660e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 29 Jun 2017 13:05:27 +0200 Subject: [PATCH 2/5] Add bottom border to search item. --- editor/inserter/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index 0a7d32aca729c..036b66c02c328 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -54,7 +54,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; From d8e8e5531fca71e8472ca040404ca9094d634918 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 29 Jun 2017 13:47:48 +0200 Subject: [PATCH 3/5] Polish the inserter tabs. Address feedback. --- editor/assets/stylesheets/_z-index.scss | 2 ++ editor/inserter/style.scss | 19 +++++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index 4f33cb775ce62..50c4b1896453d 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -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, diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index 036b66c02c328..f84d64e08bc9b 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -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; @@ -73,7 +72,7 @@ input[type="search"].editor-inserter__search { } .editor-inserter__menu.is-bottom:after { - border-bottom-color: $light-gray-100; + border-bottom-color: $white; } .editor-inserter__block { @@ -124,6 +123,8 @@ input[type="search"].editor-inserter__search { width: 100%; display: flex; justify-content: space-between; + position: relative; + z-index: z-index( '.editor-inserter__tabs' ); } .editor-inserter__tab { @@ -135,8 +136,18 @@ input[type="search"].editor-inserter__search { font-size: $default-font; padding: 8px 8px; width: 100%; + margin: 0; + color: $dark-gray-500; &.is-active { - border-bottom: 2px solid #f00; + 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; } } From 7d3172900009ee9bedd8617a55814a00c05f2c88 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 29 Jun 2017 15:16:06 +0200 Subject: [PATCH 4/5] Relax paddings and margins. Also restyle the separator heading. --- components/popover/style.scss | 2 +- editor/inserter/style.scss | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/components/popover/style.scss b/components/popover/style.scss index 3c01adcbf2637..51537e03dcae6 100644 --- a/components/popover/style.scss +++ b/components/popover/style.scss @@ -8,7 +8,7 @@ right: 0; @include break-medium { - width: 280px; + width: 300px; left: -122px; right: auto; height: auto; diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index f84d64e08bc9b..be2dbe7d3c77e 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -68,7 +68,7 @@ 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 { @@ -81,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; @@ -110,13 +110,9 @@ 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 { From 04932b1758a23292fd1e4ffe30222995f0cb8481 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 29 Jun 2017 15:33:10 +0200 Subject: [PATCH 5/5] Fix neutral grays. --- editor/inserter/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss index be2dbe7d3c77e..70a719f257122 100644 --- a/editor/inserter/style.scss +++ b/editor/inserter/style.scss @@ -124,11 +124,11 @@ input[type="search"].editor-inserter__search { } .editor-inserter__tab { - background: #eee; + background: $light-gray-300; border: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; - box-shadow: 0 0 0 1px #ddd; + box-shadow: 0 0 0 1px $light-gray-500; font-size: $default-font; padding: 8px 8px; width: 100%;