Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 19:04:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1719727 - Change "Personalize" on New Tab to gear icon. r=prathiksha,fluent-reviewers,Gijs,thecount

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D119657
This commit is contained in:
amy churchwell 2021-07-15 19:36:50 +00:00
parent 4ed207b4a1
commit 0c7d4a9357
9 changed files with 37 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,9 +38,9 @@ export class _CustomizeMenu extends React.PureComponent {
appear={true}
>
<button
className="personalize-button"
className="icon icon-settings personalize-button"
onClick={() => this.props.onOpen()}
data-l10n-id="newtab-personalize-button-label"
data-l10n-id="newtab-personalize-icon-label"
ref={c => (this.openButton = c)}
/>
</CSSTransition>

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

@ -17,14 +17,10 @@
}
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 0;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
color: var(--newtab-background-button-text-color);
padding: 3px 10px;
min-height: 32px;
background-color: transparent;
padding: 15px;
&:hover {
background-color: var(--newtab-background-button-hover-color);

4
browser/components/newtab/content-src/styles/_theme.scss
View File

@ -41,8 +41,6 @@ body {
@include textbox-focus($blue-60); // sass-lint:disable-line mixins-before-declarations
// Background buttons
--newtab-background-button-color: #{$newtab-background-button-default-color};
--newtab-background-button-text-color: #{$newtab-background-button-default-text-color};
--newtab-background-button-hover-color: #{$newtab-background-button-default-hover-color};
--newtab-background-button-active-color: #{$newtab-background-button-default-active-color};
@ -143,8 +141,6 @@ body {
@include textbox-focus($blue-40); // sass-lint:disable-line mixins-before-declarations
// Background buttons.
--newtab-background-button-color: #{$newtab-background-button-darktheme-color};
--newtab-background-button-text-color: #{$newtab-background-button-darktheme-text-color};
--newtab-background-button-hover-color: #{$newtab-background-button-darktheme-hover-color};
--newtab-background-button-active-color: #{$newtab-background-button-darktheme-active-color};

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

@ -52,8 +52,6 @@ body {
--newtab-textbox-border: rgba(12, 12, 13, 0.2);
--newtab-textbox-focus-color: #0060DF;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3);
--newtab-background-button-color: rgba(223, 223, 223, 0.5);
--newtab-background-button-text-color: #484848;
--newtab-background-button-hover-color: rgba(196, 196, 196, 0.5);
--newtab-background-button-active-color: rgba(151, 151, 151, 0.5);
--newtab-button-primary-color: #0060DF;
@ -132,8 +130,6 @@ body[lwt-newtab-brighttext] {
--newtab-textbox-border: rgba(249, 249, 250, 0.2);
--newtab-textbox-focus-color: #45A1FF;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
--newtab-background-button-color: rgba(80, 80, 80, 0.5);
--newtab-background-button-text-color: #CDCDD4;
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5);
--newtab-background-button-active-color: rgba(173, 173, 173, 0.5);
--newtab-feed-button-background: #38383D;
@ -2004,14 +2000,10 @@ main.has-snippet {
}
}
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 0;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
color: var(--newtab-background-button-text-color);
padding: 3px 10px;
min-height: 32px;
background-color: transparent;
padding: 15px;
}
.personalize-button:hover {
background-color: var(--newtab-background-button-hover-color);

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

@ -56,8 +56,6 @@ body {
--newtab-textbox-border: rgba(12, 12, 13, 0.2);
--newtab-textbox-focus-color: #0060DF;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3);
--newtab-background-button-color: rgba(223, 223, 223, 0.5);
--newtab-background-button-text-color: #484848;
--newtab-background-button-hover-color: rgba(196, 196, 196, 0.5);
--newtab-background-button-active-color: rgba(151, 151, 151, 0.5);
--newtab-button-primary-color: #0060DF;
@ -136,8 +134,6 @@ body[lwt-newtab-brighttext] {
--newtab-textbox-border: rgba(249, 249, 250, 0.2);
--newtab-textbox-focus-color: #45A1FF;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
--newtab-background-button-color: rgba(80, 80, 80, 0.5);
--newtab-background-button-text-color: #CDCDD4;
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5);
--newtab-background-button-active-color: rgba(173, 173, 173, 0.5);
--newtab-feed-button-background: #38383D;
@ -2008,14 +2004,10 @@ main.has-snippet {
}
}
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 0;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
color: var(--newtab-background-button-text-color);
padding: 3px 10px;
min-height: 32px;
background-color: transparent;
padding: 15px;
}
.personalize-button:hover {
background-color: var(--newtab-background-button-hover-color);

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

@ -52,8 +52,6 @@ body {
--newtab-textbox-border: rgba(12, 12, 13, 0.2);
--newtab-textbox-focus-color: #0060DF;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(0, 96, 223, 0.3);
--newtab-background-button-color: rgba(223, 223, 223, 0.5);
--newtab-background-button-text-color: #484848;
--newtab-background-button-hover-color: rgba(196, 196, 196, 0.5);
--newtab-background-button-active-color: rgba(151, 151, 151, 0.5);
--newtab-button-primary-color: #0060DF;
@ -132,8 +130,6 @@ body[lwt-newtab-brighttext] {
--newtab-textbox-border: rgba(249, 249, 250, 0.2);
--newtab-textbox-focus-color: #45A1FF;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3);
--newtab-background-button-color: rgba(80, 80, 80, 0.5);
--newtab-background-button-text-color: #CDCDD4;
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5);
--newtab-background-button-active-color: rgba(173, 173, 173, 0.5);
--newtab-feed-button-background: #38383D;
@ -2004,14 +2000,10 @@ main.has-snippet {
}
}
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 0;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
color: var(--newtab-background-button-text-color);
padding: 3px 10px;
min-height: 32px;
background-color: transparent;
padding: 15px;
}
.personalize-button:hover {
background-color: var(--newtab-background-button-hover-color);

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

@ -14760,9 +14760,9 @@ class CustomizeMenu_CustomizeMenu extends external_React_default.a.PureComponent
in: !this.props.showing,
appear: true
}, /*#__PURE__*/external_React_default.a.createElement("button", {
className: "personalize-button",
className: "icon icon-settings personalize-button",
onClick: () => this.props.onOpen(),
"data-l10n-id": "newtab-personalize-button-label",
"data-l10n-id": "newtab-personalize-icon-label",
ref: c => this.openButton = c
})), /*#__PURE__*/external_React_default.a.createElement(external_ReactTransitionGroup_["CSSTransition"], {
timeout: 250,

2
browser/locales/en-US/browser/newtab/newtab.ftl
View File

@ -7,7 +7,7 @@
newtab-page-title = New Tab
newtab-settings-button =
.title = Customize your New Tab page
newtab-personalize-button-label = Personalize
newtab-personalize-icon-label =
.title = Personalize new tab
.aria-label = Personalize new tab
newtab-personalize-dialog-label =

24
python/l10n/fluent_migrations/bug_1719727_newtab_personalize_icon.py Normal file
View File

@ -0,0 +1,24 @@
# coding=utf8
# Any copyright is dedicated to the Public Domain.
# http://creativecommons.org/publicdomain/zero/1.0/
from __future__ import absolute_import
from fluent.migrate.helpers import transforms_from
from fluent.migrate import COPY_PATTERN
def migrate(ctx):
"""Bug 1719727 - Change "Personalize" on New Tab to gear icon, part {index}"""
ctx.add_transforms(
"browser/browser/newtab/newtab.ftl",
"browser/browser/newtab/newtab.ftl",
transforms_from(
"""
newtab-personalize-icon-label =
.title = { COPY_PATTERN(from_path, "newtab-personalize-button-label.title") }
.aria-label = { COPY_PATTERN(from_path, "newtab-personalize-button-label.aria-label") }
""",
from_path="browser/browser/newtab/newtab.ftl",
),
)