corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1685517 - Fix close button for customize menu to top of menu r=desktop-theme-reviewers,emilio

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D202727
This commit is contained in:
Nathan Barrett
2024-04-16 16:03:39 +00:00
parent d49ae8eccc
commit 001d03f8f7
6 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx
View File

@@ -55,12 +55,14 @@ export class _CustomizeMenu extends React.PureComponent {
role="dialog"
data-l10n-id="newtab-personalize-dialog-label"
>
<button
onClick={() => this.props.onClose()}
className="close-button"
data-l10n-id="newtab-custom-close-button"
ref={c => (this.closeButton = c)}
/>
<div className="close-button-wrapper">
<button
onClick={() => this.props.onClose()}
className="close-button"
data-l10n-id="newtab-custom-close-button"
ref={c => (this.closeButton = c)}
/>
</div>
<ContentSection
openPreferences={this.props.openPreferences}
setPref={this.props.setPref}

15
browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
View File

@@ -47,7 +47,8 @@
inset-block: 0;
inset-inline-end: 0;
z-index: 1001;
padding: 16px;
padding-block: 0 var(--space-large);
padding-inline: var(--space-large);
overflow: auto;
transform: translateX(435px);
visibility: hidden;
@@ -85,9 +86,17 @@
box-shadow: $shadow-large;
}
.close-button-wrapper {
position: sticky;
top: var(--space-large);
margin-block-end: var(--space-large);
background-color: var(--newtab-background-color-secondary);
z-index: 1;
}
.close-button {
margin-inline-start: auto;
margin-bottom: 28px;
margin-inline-end: var(--space-large);
white-space: nowrap;
display: block;
background-color: var(--newtab-element-secondary-color);
@@ -117,7 +126,7 @@
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
grid-row-gap: 32px;
padding: 0 16px;
padding: var(--space-large);
.wallpapers-section h2 {
font-size: inherit;

14
browser/components/newtab/css/activity-stream-linux.css
View File

@@ -1670,7 +1670,8 @@ main section {
inset-block: 0;
inset-inline-end: 0;
z-index: 1001;
padding: 16px;
padding-block: 0 var(--space-large);
padding-inline: var(--space-large);
overflow: auto;
transform: translateX(435px);
visibility: hidden;
@@ -1697,9 +1698,16 @@ main section {
.customize-menu.customize-animate-exit-active {
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
}
.customize-menu .close-button-wrapper {
position: sticky;
top: var(--space-large);
margin-block-end: var(--space-large);
background-color: var(--newtab-background-color-secondary);
z-index: 1;
}
.customize-menu .close-button {
margin-inline-start: auto;
margin-bottom: 28px;
margin-inline-end: var(--space-large);
white-space: nowrap;
display: block;
background-color: var(--newtab-element-secondary-color);
@@ -1726,7 +1734,7 @@ main section {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
grid-row-gap: 32px;
padding: 0 16px;
padding: var(--space-large);
}
.home-section .wallpapers-section h2 {
font-size: inherit;

14
browser/components/newtab/css/activity-stream-mac.css
View File

@@ -1674,7 +1674,8 @@ main section {
inset-block: 0;
inset-inline-end: 0;
z-index: 1001;
padding: 16px;
padding-block: 0 var(--space-large);
padding-inline: var(--space-large);
overflow: auto;
transform: translateX(435px);
visibility: hidden;
@@ -1701,9 +1702,16 @@ main section {
.customize-menu.customize-animate-exit-active {
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
}
.customize-menu .close-button-wrapper {
position: sticky;
top: var(--space-large);
margin-block-end: var(--space-large);
background-color: var(--newtab-background-color-secondary);
z-index: 1;
}
.customize-menu .close-button {
margin-inline-start: auto;
margin-bottom: 28px;
margin-inline-end: var(--space-large);
white-space: nowrap;
display: block;
background-color: var(--newtab-element-secondary-color);
@@ -1730,7 +1738,7 @@ main section {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
grid-row-gap: 32px;
padding: 0 16px;
padding: var(--space-large);
}
.home-section .wallpapers-section h2 {
font-size: inherit;

14
browser/components/newtab/css/activity-stream-windows.css
View File

@@ -1670,7 +1670,8 @@ main section {
inset-block: 0;
inset-inline-end: 0;
z-index: 1001;
padding: 16px;
padding-block: 0 var(--space-large);
padding-inline: var(--space-large);
overflow: auto;
transform: translateX(435px);
visibility: hidden;
@@ -1697,9 +1698,16 @@ main section {
.customize-menu.customize-animate-exit-active {
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
}
.customize-menu .close-button-wrapper {
position: sticky;
top: var(--space-large);
margin-block-end: var(--space-large);
background-color: var(--newtab-background-color-secondary);
z-index: 1;
}
.customize-menu .close-button {
margin-inline-start: auto;
margin-bottom: 28px;
margin-inline-end: var(--space-large);
white-space: nowrap;
display: block;
background-color: var(--newtab-element-secondary-color);
@@ -1726,7 +1734,7 @@ main section {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
grid-row-gap: 32px;
padding: 0 16px;
padding: var(--space-large);
}
.home-section .wallpapers-section h2 {
font-size: inherit;

4
browser/components/newtab/data/content/activity-stream.bundle.js
View File

@@ -9220,12 +9220,14 @@ class _CustomizeMenu extends (external_React_default()).PureComponent {
className: "customize-menu",
role: "dialog",
"data-l10n-id": "newtab-personalize-dialog-label"
}, /*#__PURE__*/external_React_default().createElement("div", {
className: "close-button-wrapper"
}, /*#__PURE__*/external_React_default().createElement("button", {
onClick: () => this.props.onClose(),
className: "close-button",
"data-l10n-id": "newtab-custom-close-button",
ref: c => this.closeButton = c
}), /*#__PURE__*/external_React_default().createElement(ContentSection, {
})), /*#__PURE__*/external_React_default().createElement(ContentSection, {
openPreferences: this.props.openPreferences,
setPref: this.props.setPref,
enabledSections: this.props.enabledSections,