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

Update the layout of the title in the top bar while template editing #27845

Merged
merged 12 commits into from
Jan 13, 2021
Merged

Update the layout of the title in the top bar while template editing #27845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6c743cb
i1
jameskoster Dec 17, 2020
45d2251
i2
jameskoster Dec 21, 2020
3ab7a95
Merge branch 'master' into update/top-bar-template-title
jameskoster Dec 23, 2020
0638071
Visually hide "Template" label
jameskoster Dec 23, 2020
cd64da0
formatting
jameskoster Dec 23, 2020
577fe09
Merge branch 'master' into update/top-bar-template-title
jameskoster Jan 7, 2021
e3c138b
Merge branch 'master' into update/top-bar-template-title
jameskoster Jan 8, 2021
2415c47
Try a lighter template part name and tweak spacing
jameskoster Jan 11, 2021
d158026
Transitioning the max-width. And maybe trying out a different design …
shaunandrews Jan 11, 2021
b33b372
Merge branch 'master' into update/top-bar-template-title
jameskoster Jan 12, 2021
1dcc278
Merge branch 'master' into update/top-bar-template-title
jameskoster Jan 13, 2021
6ce226d
Perhaps fixing the failing test?
shaunandrews Jan 13, 2021
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
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
39 changes: 23 additions & 16 deletions packages/edit-site/src/components/header/document-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,21 +90,34 @@ export default function DocumentActions( {
ref={ titleRef }
className="edit-site-document-actions__title-wrapper"
>
<h1>
<VisuallyHidden>
<Text
variant="body.small"
className="edit-site-document-actions__title-prefix"
>
<VisuallyHidden as="span">
{ sprintf(
/* translators: %s: the entity being edited, like "template"*/
__( 'Edit %s:' ),
__( 'Editing %s:' ),
entityLabel
) }
</VisuallyHidden>
<Text
variant="subtitle.small"
className="edit-site-document-actions__title"
>
{ entityTitle }
</Text>
</h1>
</Text>

<Text
variant="body.small"
className="edit-site-document-actions__title"
as="h1"
>
{ entityTitle }
</Text>

<Text
variant="body.small"
className="edit-site-document-actions__secondary-item"
>
{ label ?? '' }
</Text>

{ dropdownContent && (
<Dropdown
popoverProps={ {
Expand All @@ -130,12 +143,6 @@ export default function DocumentActions( {
/>
) }
</div>
<Text
variant="body"
className="edit-site-document-actions__secondary-item"
>
{ label ?? '' }
</Text>
</div>
);
}
45 changes: 27 additions & 18 deletions packages/edit-site/src/components/header/document-actions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,22 @@
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;

// 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;
margin-left: $grid-unit-05;

.components-button {
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
Expand All @@ -38,29 +40,36 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;

@include break-medium() {
max-width: 75px;
}

@include break-xlarge() {
max-width: 180px;
}
}

.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;
max-width: 0;
opacity: 0;
padding: 0;
transition: all ease 0.2s;
background: $gray-200;
border-radius: 2px;
@include reduce-motion(transition);
}

&.has-secondary-label {
transform: translateY(10px);

.edit-site-document-actions__title-wrapper {
transform: translateY(-12px);
}

.edit-site-document-actions__secondary-item {
opacity: 1;
transform: translateY(-16px);
padding: 0 4px;
max-width: 180px;
margin-left: 6px;
}
}
}
Expand Down