Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-11 16:32:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1787521 - Adjust button for newtab save to pocket action r=thecount,fluent-reviewers,flod

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D155995
This commit is contained in:
Gavin Suntop 2022-09-09 17:13:26 +00:00
parent 817aa443a5
commit 8e0b6c3824
8 changed files with 50 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -402,12 +402,12 @@ export class _DSCard extends React.PureComponent {
{this.props.context_type === "pocket" ? (
<>
<span className="story-badge-icon icon icon-pocket" />
<span data-l10n-id="newtab-pocket-saved-to-pocket" />
<span data-l10n-id="newtab-pocket-saved" />
</>
) : (
<>
<span className="story-badge-icon icon icon-pocket-save" />
<span data-l10n-id="newtab-pocket-save-to-pocket" />
<span data-l10n-id="newtab-pocket-save" />
</>
)}
</button>

27
browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
View File

@ -38,12 +38,10 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
.card-stp-button-position-wrapper {
position: absolute;
margin-top: -16px;
left: 0;
right: 0;
top: 50%;
inset-inline-end: 10px;
top: 10px;
display: flex;
justify-content: center;
justify-content: end;
align-items: center;
}
@ -53,15 +51,13 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
height: 15px;
width: 15px;
background-size: 15px;
}
.icon-pocket {
fill: $pocket-icon-fill;
fill: $white;
}
.context-menu-button {
position: static;
transition: none;
border-radius: 3px;
}
.context-menu-position-container {
@ -77,21 +73,16 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
.card-stp-button {
display: flex;
margin-inline-end: 12px;
margin-inline-end: 7px;
font-weight: 400;
font-size: 13px;
line-height: 16px;
background-color: var(--newtab-background-color-secondary);
background-color: $pocket-icon-fill;
border: 0;
border-radius: 4px;
padding: 8px;
padding: 6px;
white-space: nowrap;
&:hover {
.icon-pocket-save {
fill: $pocket-icon-fill;
}
}
color: $white;
}
button,

3
browser/components/newtab/content-src/styles/_icons.scss
View File

@ -102,7 +102,8 @@
}
&.icon-pocket-save {
background-image: url('chrome://global/skin/icons/pocket-outline.svg');
background-image: url('chrome://global/skin/icons/pocket.svg');
fill: $white;
}
&.icon-pocket-delete {

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

@ -170,7 +170,8 @@ body[lwt-newtab-brighttext] {
background-image: url("chrome://global/skin/icons/pocket.svg");
}
.icon.icon-pocket-save {
background-image: url("chrome://global/skin/icons/pocket-outline.svg");
background-image: url("chrome://global/skin/icons/pocket.svg");
fill: #FFF;
}
.icon.icon-pocket-delete {
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
@ -3292,12 +3293,10 @@ main.has-snippet {
}
.ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
position: absolute;
margin-top: -16px;
left: 0;
right: 0;
top: 50%;
inset-inline-end: 10px;
top: 10px;
display: flex;
justify-content: center;
justify-content: end;
align-items: center;
}
.ds-card .card-stp-button-hover-background .icon-pocket-save,
@ -3306,13 +3305,12 @@ main.has-snippet {
height: 15px;
width: 15px;
background-size: 15px;
}
.ds-card .card-stp-button-hover-background .icon-pocket {
fill: #EF4056;
fill: #FFF;
}
.ds-card .card-stp-button-hover-background .context-menu-button {
position: static;
transition: none;
border-radius: 3px;
}
.ds-card .card-stp-button-hover-background .context-menu-position-container {
position: relative;
@ -3325,18 +3323,16 @@ main.has-snippet {
}
.ds-card .card-stp-button-hover-background .card-stp-button {
display: flex;
margin-inline-end: 12px;
margin-inline-end: 7px;
font-weight: 400;
font-size: 13px;
line-height: 16px;
background-color: var(--newtab-background-color-secondary);
background-color: #EF4056;
border: 0;
border-radius: 4px;
padding: 8px;
padding: 6px;
white-space: nowrap;
}
.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save {
fill: #EF4056;
color: #FFF;
}
.ds-card .card-stp-button-hover-background button,
.ds-card .card-stp-button-hover-background .context-menu {

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

@ -174,7 +174,8 @@ body[lwt-newtab-brighttext] {
background-image: url("chrome://global/skin/icons/pocket.svg");
}
.icon.icon-pocket-save {
background-image: url("chrome://global/skin/icons/pocket-outline.svg");
background-image: url("chrome://global/skin/icons/pocket.svg");
fill: #FFF;
}
.icon.icon-pocket-delete {
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
@ -3296,12 +3297,10 @@ main.has-snippet {
}
.ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
position: absolute;
margin-top: -16px;
left: 0;
right: 0;
top: 50%;
inset-inline-end: 10px;
top: 10px;
display: flex;
justify-content: center;
justify-content: end;
align-items: center;
}
.ds-card .card-stp-button-hover-background .icon-pocket-save,
@ -3310,13 +3309,12 @@ main.has-snippet {
height: 15px;
width: 15px;
background-size: 15px;
}
.ds-card .card-stp-button-hover-background .icon-pocket {
fill: #EF4056;
fill: #FFF;
}
.ds-card .card-stp-button-hover-background .context-menu-button {
position: static;
transition: none;
border-radius: 3px;
}
.ds-card .card-stp-button-hover-background .context-menu-position-container {
position: relative;
@ -3329,18 +3327,16 @@ main.has-snippet {
}
.ds-card .card-stp-button-hover-background .card-stp-button {
display: flex;
margin-inline-end: 12px;
margin-inline-end: 7px;
font-weight: 400;
font-size: 13px;
line-height: 16px;
background-color: var(--newtab-background-color-secondary);
background-color: #EF4056;
border: 0;
border-radius: 4px;
padding: 8px;
padding: 6px;
white-space: nowrap;
}
.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save {
fill: #EF4056;
color: #FFF;
}
.ds-card .card-stp-button-hover-background button,
.ds-card .card-stp-button-hover-background .context-menu {

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

@ -170,7 +170,8 @@ body[lwt-newtab-brighttext] {
background-image: url("chrome://global/skin/icons/pocket.svg");
}
.icon.icon-pocket-save {
background-image: url("chrome://global/skin/icons/pocket-outline.svg");
background-image: url("chrome://global/skin/icons/pocket.svg");
fill: #FFF;
}
.icon.icon-pocket-delete {
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
@ -3292,12 +3293,10 @@ main.has-snippet {
}
.ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
position: absolute;
margin-top: -16px;
left: 0;
right: 0;
top: 50%;
inset-inline-end: 10px;
top: 10px;
display: flex;
justify-content: center;
justify-content: end;
align-items: center;
}
.ds-card .card-stp-button-hover-background .icon-pocket-save,
@ -3306,13 +3305,12 @@ main.has-snippet {
height: 15px;
width: 15px;
background-size: 15px;
}
.ds-card .card-stp-button-hover-background .icon-pocket {
fill: #EF4056;
fill: #FFF;
}
.ds-card .card-stp-button-hover-background .context-menu-button {
position: static;
transition: none;
border-radius: 3px;
}
.ds-card .card-stp-button-hover-background .context-menu-position-container {
position: relative;
@ -3325,18 +3323,16 @@ main.has-snippet {
}
.ds-card .card-stp-button-hover-background .card-stp-button {
display: flex;
margin-inline-end: 12px;
margin-inline-end: 7px;
font-weight: 400;
font-size: 13px;
line-height: 16px;
background-color: var(--newtab-background-color-secondary);
background-color: #EF4056;
border: 0;
border-radius: 4px;
padding: 8px;
padding: 6px;
white-space: nowrap;
}
.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save {
fill: #EF4056;
color: #FFF;
}
.ds-card .card-stp-button-hover-background button,
.ds-card .card-stp-button-hover-background .context-menu {

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

@ -7761,11 +7761,11 @@ class _DSCard extends (external_React_default()).PureComponent {
}, this.props.context_type === "pocket" ? /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("span", {
className: "story-badge-icon icon icon-pocket"
}), /*#__PURE__*/external_React_default().createElement("span", {
"data-l10n-id": "newtab-pocket-saved-to-pocket"
"data-l10n-id": "newtab-pocket-saved"
})) : /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("span", {
className: "story-badge-icon icon icon-pocket-save"
}), /*#__PURE__*/external_React_default().createElement("span", {
"data-l10n-id": "newtab-pocket-save-to-pocket"
"data-l10n-id": "newtab-pocket-save"
}))), /*#__PURE__*/external_React_default().createElement(DSLinkMenu, {
id: this.props.id,
index: this.props.pos,

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

@ -237,8 +237,8 @@ newtab-pocket-cta-text = Save the stories you love in { -pocket-brand-name }, an
newtab-pocket-pocket-firefox-family = { -pocket-brand-name } is part of the { -brand-product-name } family
# A save to Pocket button that shows over the card thumbnail on hover.
newtab-pocket-save-to-pocket = Save to { -pocket-brand-name }
newtab-pocket-saved-to-pocket = Saved to { -pocket-brand-name }
newtab-pocket-save = Save
newtab-pocket-saved = Saved
## Error Fallback Content.
## This message and suggested action link are shown in each section of UI that fails to render.