From 6c743cb1033a2da695c8648ac46119e1b84df189 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 17 Dec 2020 17:25:15 +0000 Subject: [PATCH 1/7] i1 --- .../header/document-actions/style.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index 97ff4d1ea5b661..c8124f88b1975f 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -20,9 +20,16 @@ // See comment above about min-width min-width: 0; - // Since part of the dropdown button width is blank space, visually, - // it looks off-center. This offsets that blank space. - margin-left: 12px; + .components-dropdown { + display: inline-flex; + + .components-button { + width: 24px; + height: 24px; + min-width: 24px; + padding: 0; + } + } } .edit-site-document-actions__title-wrapper > h1 { @@ -48,6 +55,7 @@ overflow: hidden; text-overflow: ellipsis; text-align: center; + color: $gray-700; @include reduce-motion(transition); } @@ -55,12 +63,12 @@ transform: translateY(10px); .edit-site-document-actions__title-wrapper { - transform: translateY(-12px); + transform: translateY(-10px); } .edit-site-document-actions__secondary-item { opacity: 1; - transform: translateY(-16px); + transform: translateY(-12px); } } } From 45d225140e7dba7304a92572c7a403a1a8d31b58 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 21 Dec 2020 13:27:20 +0000 Subject: [PATCH 2/7] i2 --- .../header/document-actions/index.js | 48 +++++++------ .../header/document-actions/style.scss | 68 ++++++++++++++----- 2 files changed, 78 insertions(+), 38 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 6a57b32cf952f9..584b4e68d4b240 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -90,21 +90,35 @@ export default function DocumentActions( { ref={ titleRef } className="edit-site-document-actions__title-wrapper" > -

- - { sprintf( - /* translators: %s: the entity being edited, like "template"*/ - __( 'Edit %s:' ), - entityLabel - ) } + + + { __( 'Editing ' ) } - - { entityTitle } - -

+ { sprintf( + /* translators: %s: the entity being edited, like "template"*/ + __( '%s:' ), + entityLabel + ) } + + + + { entityTitle } + + + + { label ?? '' } + + { dropdownContent && ( ) } - - { label ?? '' } - ); } diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index c8124f88b1975f..82994325849250 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -14,8 +14,6 @@ flex-direction: row; justify-content: center; align-items: center; - transition: transform 0.2s; - @include reduce-motion(transition); // See comment above about min-width min-width: 0; @@ -24,17 +22,13 @@ display: inline-flex; .components-button { - width: 24px; - height: 24px; - min-width: 24px; + min-width: 0; padding: 0; } } } .edit-site-document-actions__title-wrapper > h1 { - display: flex; - justify-content: center; margin: 0; // See comment above about min-width @@ -45,30 +39,68 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: 100px; + + @include break-medium() { + max-width: 75px; + } + + @include break-xlarge() { + max-width: 160px; + } } .edit-site-document-actions__secondary-item { - opacity: 0; - transform: translateY(0); - transition: transform 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - text-align: center; - color: $gray-700; + max-width: 100px; + width: 0; + transform: translateX(8px); + opacity: 0; + transition: all ease 0.2s; @include reduce-motion(transition); - } - &.has-secondary-label { - transform: translateY(10px); + @include break-medium() { + max-width: 75px; + } - .edit-site-document-actions__title-wrapper { - transform: translateY(-10px); + @include break-xlarge() { + max-width: 160px; } + &::before { + content: "/" /*rtl:"\"*/; + color: $gray-700; + padding: 0 $grid-unit-05; + } + } + + .edit-site-document-actions__title-prefix { + color: $gray-700; + margin-right: $grid-unit-05; + text-transform: capitalize; + } + + &.has-secondary-label { .edit-site-document-actions__secondary-item { + width: auto; opacity: 1; - transform: translateY(-12px); + transform: translateX(0); + + &::before { + color: $gray-700; + } + } + + .edit-site-document-actions__title-prefix { + @include break-medium() { + display: none; + } + + @include break-xlarge() { + display: block; + } } } } From 063807145f62b0292043180f7b82786c2ddf17df Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 23 Dec 2020 14:36:51 +0000 Subject: [PATCH 3/7] Visually hide "Template" label --- .../header/document-actions/index.js | 12 +++++----- .../header/document-actions/style.scss | 24 ++++--------------- 2 files changed, 10 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 584b4e68d4b240..3b457d6d2f9e38 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -95,13 +95,13 @@ export default function DocumentActions( { className="edit-site-document-actions__title-prefix" > - { __( 'Editing ' ) } + { sprintf( + /* translators: %s: the entity being edited, like "template"*/ + __( 'Editing %s:' ), + entityLabel + ) } - { sprintf( - /* translators: %s: the entity being edited, like "template"*/ - __( '%s:' ), - entityLabel - ) } + Date: Wed, 23 Dec 2020 14:37:01 +0000 Subject: [PATCH 4/7] formatting --- .../edit-site/src/components/header/document-actions/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 3b457d6d2f9e38..62ab02f2440dd0 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -101,7 +101,6 @@ export default function DocumentActions( { entityLabel ) } - Date: Mon, 11 Jan 2021 12:58:47 +0000 Subject: [PATCH 5/7] Try a lighter template part name and tweak spacing --- .../src/components/header/document-actions/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index 37ecfe09902e9f..ead0c67d9b07ed 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -20,6 +20,7 @@ .components-dropdown { display: inline-flex; + margin-left: $grid-unit-05; .components-button { min-width: 0; @@ -59,6 +60,7 @@ transform: translateX(8px); opacity: 0; transition: all ease 0.2s; + color: $gray-700; @include reduce-motion(transition); @include break-medium() { @@ -72,7 +74,7 @@ &::before { content: "/" /*rtl:"\"*/; color: $gray-700; - padding: 0 $grid-unit-05; + padding: 0 $grid-unit-10; } } From d158026a2c25f87b5ed7bdf5137552f01b3eb017 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 11 Jan 2021 16:24:37 -0500 Subject: [PATCH 6/7] Transitioning the max-width. And maybe trying out a different design treatment. --- .../header/document-actions/style.scss | 31 +++++-------------- 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index ead0c67d9b07ed..ec7ad567b190c9 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -55,38 +55,21 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 120px; - width: 0; - transform: translateX(8px); + max-width: 0; opacity: 0; + padding: 0; transition: all ease 0.2s; - color: $gray-700; + background: $gray-200; + border-radius: 2px; @include reduce-motion(transition); - - @include break-medium() { - max-width: 75px; - } - - @include break-xlarge() { - max-width: 180px; - } - - &::before { - content: "/" /*rtl:"\"*/; - color: $gray-700; - padding: 0 $grid-unit-10; - } } &.has-secondary-label { .edit-site-document-actions__secondary-item { - width: auto; opacity: 1; - transform: translateX(0); - - &::before { - color: $gray-700; - } + padding: 0 4px; + max-width: 180px; + margin-left: 6px; } } } From 6ce226d128c623b0272fdf7602ed4be5650a94a0 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 13 Jan 2021 16:53:34 -0500 Subject: [PATCH 7/7] Perhaps fixing the failing test? --- .../e2e-tests/specs/experiments/multi-entity-editing.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js index d96b30bf9bb1a7..d3a7bd2851cd7d 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js @@ -204,7 +204,7 @@ describe( 'Multi-entity editor states', () => { // Our custom template shows up in the " templates > all" menu; let's use it. await clickTemplateItem( [ 'Templates', 'All' ], templateName ); await page.waitForXPath( - `//p[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]` + `//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]` ); removeErrorMocks();