зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1777539 - Pocket newtab remove load more button and last card features r=gvn
Differential Revision: https://phabricator.services.mozilla.com/D150789
This commit is contained in:
scott
Родитель
644b66ac98
Коммит
8e4c10f871
|
|
@ -1526,8 +1526,6 @@ pref("browser.newtabpage.activity-stream.discoverystream.hardcoded-basic-layout"
|
|||
pref("browser.newtabpage.activity-stream.discoverystream.hybridLayout.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.hideCardBackground.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.fourCardLayout.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.loadMore.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.lastCardMessage.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.newFooterSection.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.saveToPocketCard.enabled", false);
|
||||
pref("browser.newtabpage.activity-stream.discoverystream.hideDescriptions.enabled", false);
|
||||
|
|
|
|||
|
|
@ -225,8 +225,6 @@ export class _DiscoveryStreamBase extends React.PureComponent {
|
|||
essentialReadsHeader={component.properties.essentialReadsHeader}
|
||||
editorsPicksHeader={component.properties.editorsPicksHeader}
|
||||
readTime={component.properties.readTime}
|
||||
loadMore={component.loadMore}
|
||||
lastCardMessageEnabled={component.lastCardMessageEnabled}
|
||||
saveToPocketCard={component.saveToPocketCard}
|
||||
cta_variant={component.cta_variant}
|
||||
pocket_button_enabled={component.pocketButtonEnabled}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,7 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import {
|
||||
DSCard,
|
||||
PlaceholderDSCard,
|
||||
LastCardMessage,
|
||||
} from "../DSCard/DSCard.jsx";
|
||||
import { DSCard, PlaceholderDSCard } from "../DSCard/DSCard.jsx";
|
||||
import { DSEmptyState } from "../DSEmptyState/DSEmptyState.jsx";
|
||||
import { TopicsWidget } from "../TopicsWidget/TopicsWidget.jsx";
|
||||
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
|
||||
|
|
@ -181,45 +177,18 @@ export function RecentSavesContainer({
|
|||
}
|
||||
|
||||
export class _CardGrid extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { moreLoaded: false };
|
||||
this.loadMoreClicked = this.loadMoreClicked.bind(this);
|
||||
}
|
||||
|
||||
loadMoreClicked() {
|
||||
this.props.dispatch(
|
||||
ac.UserEvent({
|
||||
event: "CLICK",
|
||||
source: "DS_LOAD_MORE_BUTTON",
|
||||
})
|
||||
);
|
||||
this.setState({ moreLoaded: true });
|
||||
}
|
||||
|
||||
get showLoadMore() {
|
||||
const { loadMore, data, loadMoreThreshold } = this.props;
|
||||
return (
|
||||
loadMore &&
|
||||
data.recommendations.length > loadMoreThreshold &&
|
||||
!this.state.moreLoaded
|
||||
);
|
||||
}
|
||||
|
||||
renderCards() {
|
||||
let { items } = this.props;
|
||||
const { DiscoveryStream } = this.props;
|
||||
const prefs = this.props.Prefs.values;
|
||||
const { recentSavesEnabled } = DiscoveryStream;
|
||||
const showRecentSaves = prefs.showRecentSaves && recentSavesEnabled;
|
||||
const {
|
||||
items,
|
||||
hybridLayout,
|
||||
hideCardBackground,
|
||||
fourCardLayout,
|
||||
hideDescriptions,
|
||||
lastCardMessageEnabled,
|
||||
saveToPocketCard,
|
||||
loadMoreThreshold,
|
||||
compactGrid,
|
||||
compactImages,
|
||||
imageGradient,
|
||||
|
|
@ -231,12 +200,6 @@ export class _CardGrid extends React.PureComponent {
|
|||
editorsPicksHeader,
|
||||
widgets,
|
||||
} = this.props;
|
||||
let showLastCardMessage = lastCardMessageEnabled;
|
||||
if (this.showLoadMore) {
|
||||
items = loadMoreThreshold;
|
||||
// We don't want to show this until after load more has been clicked.
|
||||
showLastCardMessage = false;
|
||||
}
|
||||
|
||||
const recs = this.props.data.recommendations.slice(0, items);
|
||||
const cards = [];
|
||||
|
|
@ -291,15 +254,6 @@ export class _CardGrid extends React.PureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
// Replace last card with "you are all caught up card"
|
||||
if (showLastCardMessage) {
|
||||
cards.splice(
|
||||
cards.length - 1,
|
||||
1,
|
||||
<LastCardMessage key={`dscard-last-${cards.length - 1}`} />
|
||||
);
|
||||
}
|
||||
|
||||
if (widgets?.positions?.length && widgets?.data?.length) {
|
||||
let positionIndex = 0;
|
||||
const source = "CARDGRID_WIDGET";
|
||||
|
|
@ -444,13 +398,6 @@ export class _CardGrid extends React.PureComponent {
|
|||
) : (
|
||||
this.renderCards()
|
||||
)}
|
||||
{this.showLoadMore && (
|
||||
<button
|
||||
className="ASRouterButton primary ds-card-grid-load-more-button"
|
||||
onClick={this.loadMoreClicked}
|
||||
data-l10n-id="newtab-pocket-load-more-stories-button"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -460,9 +407,7 @@ _CardGrid.defaultProps = {
|
|||
border: `border`,
|
||||
items: 4, // Number of stories to display
|
||||
enable_video_playheads: false,
|
||||
lastCardMessageEnabled: false,
|
||||
saveToPocketCard: false,
|
||||
loadMoreThreshold: 12,
|
||||
};
|
||||
|
||||
export const CardGrid = connect(state => ({
|
||||
|
|
|
|||
|
|
@ -160,7 +160,6 @@ $col4-header-font-size: 14;
|
|||
}
|
||||
|
||||
.source,
|
||||
.ds-last-card-desc,
|
||||
.story-sponsored-label,
|
||||
.status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
|
|
@ -168,7 +167,6 @@ $col4-header-font-size: 14;
|
|||
}
|
||||
|
||||
.source,
|
||||
.ds-last-card-desc,
|
||||
.story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -271,12 +269,6 @@ $col4-header-font-size: 14;
|
|||
.img-wrapper .img img {
|
||||
border-radius: 8px;
|
||||
box-shadow: $shadow-card;
|
||||
|
||||
&.last-card-message-image {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
|
|
@ -311,12 +303,4 @@ $col4-header-font-size: 14;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-card-grid-load-more-button {
|
||||
display: block;
|
||||
margin: 32px auto 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -380,34 +380,6 @@ export class _DSCard extends React.PureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
if (this.props.lastCard) {
|
||||
return (
|
||||
<div className="ds-card last-card-message">
|
||||
<div className="img-wrapper">
|
||||
<picture className="ds-image img loaded">
|
||||
<img
|
||||
data-l10n-id="newtab-pocket-last-card-image"
|
||||
className="last-card-message-image"
|
||||
src="chrome://activity-stream/content/data/content/assets/caught-up-illustration.svg"
|
||||
alt="You’re all caught up"
|
||||
/>
|
||||
</picture>
|
||||
</div>
|
||||
<div className="meta">
|
||||
<div className="info-wrap">
|
||||
<header
|
||||
className="title clamp"
|
||||
data-l10n-id="newtab-pocket-last-card-title"
|
||||
/>
|
||||
<p
|
||||
className="ds-last-card-desc"
|
||||
data-l10n-id="newtab-pocket-last-card-desc"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const isButtonCTA = this.props.cta_variant === "button";
|
||||
|
||||
const {
|
||||
|
|
@ -585,4 +557,3 @@ export const DSCard = connect(state => ({
|
|||
}))(_DSCard);
|
||||
|
||||
export const PlaceholderDSCard = props => <DSCard placeholder={true} />;
|
||||
export const LastCardMessage = props => <DSCard lastCard={true} />;
|
||||
|
|
|
|||
|
|
@ -196,24 +196,6 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 1);
|
|||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&.last-card-message {
|
||||
.ds-last-card-desc {
|
||||
font-size: 13px;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
|
||||
.ds-last-card-desc,
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.last-card-message-image {
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2762,14 +2762,12 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2816,29 +2814,21 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2871,29 +2861,21 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2936,12 +2918,6 @@ main.has-snippet {
|
|||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image,
|
||||
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta,
|
||||
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta {
|
||||
padding: 12px 0 0;
|
||||
|
|
@ -2968,13 +2944,6 @@ main.has-snippet {
|
|||
.ds-layout .ds-sub-header .section-sub-link:active {
|
||||
color: var(--newtab-primary-element-active-color);
|
||||
}
|
||||
.ds-layout .ds-card-grid-load-more-button {
|
||||
display: block;
|
||||
margin: 32px auto 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button {
|
||||
margin: 15px 0 0;
|
||||
|
|
@ -3506,19 +3475,6 @@ main.has-snippet {
|
|||
.ds-card.video-card .meta {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.ds-card.last-card-message .ds-last-card-desc {
|
||||
font-size: 13px;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.ds-card.last-card-message .ds-last-card-desc,
|
||||
.ds-card.last-card-message .title {
|
||||
text-align: center;
|
||||
}
|
||||
.ds-card.last-card-message .last-card-message-image {
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ds-card .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2766,14 +2766,12 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2820,29 +2818,21 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2875,29 +2865,21 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2940,12 +2922,6 @@ main.has-snippet {
|
|||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image,
|
||||
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta,
|
||||
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta {
|
||||
padding: 12px 0 0;
|
||||
|
|
@ -2972,13 +2948,6 @@ main.has-snippet {
|
|||
.ds-layout .ds-sub-header .section-sub-link:active {
|
||||
color: var(--newtab-primary-element-active-color);
|
||||
}
|
||||
.ds-layout .ds-card-grid-load-more-button {
|
||||
display: block;
|
||||
margin: 32px auto 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button {
|
||||
margin: 15px 0 0;
|
||||
|
|
@ -3510,19 +3479,6 @@ main.has-snippet {
|
|||
.ds-card.video-card .meta {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.ds-card.last-card-message .ds-last-card-desc {
|
||||
font-size: 13px;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.ds-card.last-card-message .ds-last-card-desc,
|
||||
.ds-card.last-card-message .title {
|
||||
text-align: center;
|
||||
}
|
||||
.ds-card.last-card-message .last-card-message-image {
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ds-card .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2762,14 +2762,12 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc,
|
||||
.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2816,29 +2814,21 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2871,29 +2861,21 @@ main.has-snippet {
|
|||
margin-top: 8px;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
|
||||
color: var(--newtab-text-secondary-color);
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc,
|
||||
.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -2936,12 +2918,6 @@ main.has-snippet {
|
|||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image,
|
||||
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta,
|
||||
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta {
|
||||
padding: 12px 0 0;
|
||||
|
|
@ -2968,13 +2944,6 @@ main.has-snippet {
|
|||
.ds-layout .ds-sub-header .section-sub-link:active {
|
||||
color: var(--newtab-primary-element-active-color);
|
||||
}
|
||||
.ds-layout .ds-card-grid-load-more-button {
|
||||
display: block;
|
||||
margin: 32px auto 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button {
|
||||
margin: 15px 0 0;
|
||||
|
|
@ -3506,19 +3475,6 @@ main.has-snippet {
|
|||
.ds-card.video-card .meta {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.ds-card.last-card-message .ds-last-card-desc {
|
||||
font-size: 13px;
|
||||
color: var(--newtab-text-secondary-color);
|
||||
}
|
||||
.ds-card.last-card-message .ds-last-card-desc,
|
||||
.ds-card.last-card-message .title {
|
||||
text-align: center;
|
||||
}
|
||||
.ds-card.last-card-message .last-card-message-image {
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ds-card .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -7750,31 +7750,6 @@ class _DSCard extends (external_React_default()).PureComponent {
|
|||
});
|
||||
}
|
||||
|
||||
if (this.props.lastCard) {
|
||||
return /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "ds-card last-card-message"
|
||||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "img-wrapper"
|
||||
}, /*#__PURE__*/external_React_default().createElement("picture", {
|
||||
className: "ds-image img loaded"
|
||||
}, /*#__PURE__*/external_React_default().createElement("img", {
|
||||
"data-l10n-id": "newtab-pocket-last-card-image",
|
||||
className: "last-card-message-image",
|
||||
src: "chrome://activity-stream/content/data/content/assets/caught-up-illustration.svg",
|
||||
alt: "You\u2019re all caught up"
|
||||
}))), /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "meta"
|
||||
}, /*#__PURE__*/external_React_default().createElement("div", {
|
||||
className: "info-wrap"
|
||||
}, /*#__PURE__*/external_React_default().createElement("header", {
|
||||
className: "title clamp",
|
||||
"data-l10n-id": "newtab-pocket-last-card-title"
|
||||
}), /*#__PURE__*/external_React_default().createElement("p", {
|
||||
className: "ds-last-card-desc",
|
||||
"data-l10n-id": "newtab-pocket-last-card-desc"
|
||||
}))));
|
||||
}
|
||||
|
||||
const isButtonCTA = this.props.cta_variant === "button";
|
||||
const {
|
||||
is_video,
|
||||
|
|
@ -7919,9 +7894,6 @@ const DSCard = (0,external_ReactRedux_namespaceObject.connect)(state => ({
|
|||
const PlaceholderDSCard = props => /*#__PURE__*/external_React_default().createElement(DSCard, {
|
||||
placeholder: true
|
||||
});
|
||||
const LastCardMessage = props => /*#__PURE__*/external_React_default().createElement(DSCard, {
|
||||
lastCard: true
|
||||
});
|
||||
;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState.jsx
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
|
|
@ -8313,39 +8285,9 @@ function RecentSavesContainer({
|
|||
}, recentSavesCards));
|
||||
}
|
||||
class _CardGrid extends (external_React_default()).PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
moreLoaded: false
|
||||
};
|
||||
this.loadMoreClicked = this.loadMoreClicked.bind(this);
|
||||
}
|
||||
|
||||
loadMoreClicked() {
|
||||
this.props.dispatch(actionCreators.UserEvent({
|
||||
event: "CLICK",
|
||||
source: "DS_LOAD_MORE_BUTTON"
|
||||
}));
|
||||
this.setState({
|
||||
moreLoaded: true
|
||||
});
|
||||
}
|
||||
|
||||
get showLoadMore() {
|
||||
const {
|
||||
loadMore,
|
||||
data,
|
||||
loadMoreThreshold
|
||||
} = this.props;
|
||||
return loadMore && data.recommendations.length > loadMoreThreshold && !this.state.moreLoaded;
|
||||
}
|
||||
|
||||
renderCards() {
|
||||
var _widgets$positions, _widgets$data, _essentialReadsCards, _editorsPicksCards;
|
||||
|
||||
let {
|
||||
items
|
||||
} = this.props;
|
||||
const {
|
||||
DiscoveryStream
|
||||
} = this.props;
|
||||
|
|
@ -8355,13 +8297,12 @@ class _CardGrid extends (external_React_default()).PureComponent {
|
|||
} = DiscoveryStream;
|
||||
const showRecentSaves = prefs.showRecentSaves && recentSavesEnabled;
|
||||
const {
|
||||
items,
|
||||
hybridLayout,
|
||||
hideCardBackground,
|
||||
fourCardLayout,
|
||||
hideDescriptions,
|
||||
lastCardMessageEnabled,
|
||||
saveToPocketCard,
|
||||
loadMoreThreshold,
|
||||
compactGrid,
|
||||
compactImages,
|
||||
imageGradient,
|
||||
|
|
@ -8373,14 +8314,6 @@ class _CardGrid extends (external_React_default()).PureComponent {
|
|||
editorsPicksHeader,
|
||||
widgets
|
||||
} = this.props;
|
||||
let showLastCardMessage = lastCardMessageEnabled;
|
||||
|
||||
if (this.showLoadMore) {
|
||||
items = loadMoreThreshold; // We don't want to show this until after load more has been clicked.
|
||||
|
||||
showLastCardMessage = false;
|
||||
}
|
||||
|
||||
const recs = this.props.data.recommendations.slice(0, items);
|
||||
const cards = [];
|
||||
let essentialReadsCards = [];
|
||||
|
|
@ -8428,13 +8361,6 @@ class _CardGrid extends (external_React_default()).PureComponent {
|
|||
is_video: this.props.enable_video_playheads && rec.is_video,
|
||||
is_collection: this.props.is_collection
|
||||
}));
|
||||
} // Replace last card with "you are all caught up card"
|
||||
|
||||
|
||||
if (showLastCardMessage) {
|
||||
cards.splice(cards.length - 1, 1, /*#__PURE__*/external_React_default().createElement(LastCardMessage, {
|
||||
key: `dscard-last-${cards.length - 1}`
|
||||
}));
|
||||
}
|
||||
|
||||
if (widgets !== null && widgets !== void 0 && (_widgets$positions = widgets.positions) !== null && _widgets$positions !== void 0 && _widgets$positions.length && widgets !== null && widgets !== void 0 && (_widgets$data = widgets.data) !== null && _widgets$data !== void 0 && _widgets$data.length) {
|
||||
|
|
@ -8541,11 +8467,7 @@ class _CardGrid extends (external_React_default()).PureComponent {
|
|||
status: data.status,
|
||||
dispatch: this.props.dispatch,
|
||||
feed: this.props.feed
|
||||
})) : this.renderCards(), this.showLoadMore && /*#__PURE__*/external_React_default().createElement("button", {
|
||||
className: "ASRouterButton primary ds-card-grid-load-more-button",
|
||||
onClick: this.loadMoreClicked,
|
||||
"data-l10n-id": "newtab-pocket-load-more-stories-button"
|
||||
}));
|
||||
})) : this.renderCards());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -8554,9 +8476,7 @@ _CardGrid.defaultProps = {
|
|||
items: 4,
|
||||
// Number of stories to display
|
||||
enable_video_playheads: false,
|
||||
lastCardMessageEnabled: false,
|
||||
saveToPocketCard: false,
|
||||
loadMoreThreshold: 12
|
||||
saveToPocketCard: false
|
||||
};
|
||||
const CardGrid = (0,external_ReactRedux_namespaceObject.connect)(state => ({
|
||||
Prefs: state.Prefs,
|
||||
|
|
@ -13932,8 +13852,6 @@ class _DiscoveryStreamBase extends (external_React_default()).PureComponent {
|
|||
essentialReadsHeader: component.properties.essentialReadsHeader,
|
||||
editorsPicksHeader: component.properties.editorsPicksHeader,
|
||||
readTime: component.properties.readTime,
|
||||
loadMore: component.loadMore,
|
||||
lastCardMessageEnabled: component.lastCardMessageEnabled,
|
||||
saveToPocketCard: component.saveToPocketCard,
|
||||
cta_variant: component.cta_variant,
|
||||
pocket_button_enabled: component.pocketButtonEnabled,
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.3 100.9" xml:space="preserve">
|
||||
<path class="st0" d="M119 90.7C119 94 82.8 99 55.6 99S13.1 89 13.1 85.6s18.8-5.6 46-5.6 60 7.2 60 10.7z" fill="#FCB643"></path>
|
||||
<path class="st1" d="m73 14.5-51 11c-.2 0-.3.2-.2.4l13.8 67c0 .2.2.3.3.3l50.3-9.9c.1 0 .3-.2.2-.4l-13-68.1c0-.2-.2-.3-.4-.3z" fill="#fff"></path>
|
||||
<path d="M74.3 14.6a1.3 1.3 0 0 0-1.5-1l-51 11c-.7 0-1.2.8-1 1.5l13.8 67c.1.7.7 1.1 1.3 1.1h.3l50.2-10c.7 0 1.1-.7 1-1.5l-13-68.1zm11.9 68.7L36 93.2h-.1c-.1 0-.3-.1-.3-.3L21.8 26c0-.2 0-.4.2-.4l51-11c.2 0 .3 0 .4.3l13 68.1c0 .2 0 .4-.2.4z"></path>
|
||||
<path class="st1" d="m93.3 19.2-52-2.6c-.2 0-.4.1-.4.3l-4 68.3c0 .2 0 .4.3.4l51 3.5c.2 0 .3-.2.4-.3l5-69.3v-.2l-.3-.1z" fill="#fff"></path>
|
||||
<path d="m93.4 18.2-52.1-2.6c-.8 0-1.3.5-1.4 1.2l-4 68.4c0 .7.5 1.3 1.2 1.4L88 90h.1c.7 0 1.3-.5 1.4-1.2l5-69.3c0-.7-.5-1.4-1.2-1.4zm-5.2 70.9-51-3.5a.3.3 0 0 1-.3-.4l4-68.3c0-.2.2-.3.3-.3l52.1 2.6.3.1v.3l-5 69.2c0 .2-.2.3-.4.3z"></path>
|
||||
<path class="st1" d="M109 26.6 58 15.1c-.1 0-.3.1-.3.3L42 82c0 .2.1.4.3.4L92 94.6c.2 0 .3 0 .4-.3L109.2 27v-.3h-.3z" fill="#fff"></path>
|
||||
<path d="M91.8 95.6h.3c.6 0 1.1-.4 1.3-1l16.8-67.3c.1-.8-.3-1.5-1-1.7L58.3 14.2H58c-.6 0-1.1.4-1.3 1L41.1 81.8c-.2.7.2 1.4 1 1.6l49.7 12.2zm.3-1H92L42.3 82.4a.3.3 0 0 1-.3-.4l15.7-66.6c0-.2.2-.3.3-.3l51 11.5.1.2s.1.1 0 .2L92.5 94.4l-.3.2z"></path>
|
||||
<path class="st2" d="M101.7 31.5 62 22.7c-1-.2-2 .4-2.2 1.4l-3 12c-.2 1 .4 1.9 1.4 2.1L98 47.8c1 .2 2-.4 2.1-1.4l3-12.7c.2-1-.4-2-1.4-2.2zm-9.5 40.9-11.9-2.6a1 1 0 0 0-1.1.7L76 82c-.1.5.2 1 .7 1.1l12.2 3.3c.5.1 1-.2 1.2-.7l2.9-12a1 1 0 0 0-.8-1.2z" fill="#EF4056"></path>
|
||||
<path d="M97.3 52.3c-1.8-.4-3 .6-4 1.4-.8.7-1.3 1.1-2 1-.9-.3-1.2-.8-1.6-1.9-.5-1.1-1-2.5-2.9-3-1.8-.3-3 .6-3.9 1.4-.8.7-1.4 1.1-2.1 1-.8-.2-1.1-.8-1.5-1.8-.5-1.2-1.1-2.6-3-3s-2.9.6-3.8 1.4c-.9.7-1.4 1-2.2 1-.7-.3-1-.9-1.5-1.9-.5-1.1-1-2.5-2.9-3-1.7-.4-3 .6-3.9 1.4-.8.7-1.3 1.1-2.1 1-.8-.2-1-.8-1.5-1.9-.5-1-1-2.5-2.9-3a1 1 0 0 0-1.2.8c-.1.6.2 1.1.8 1.2.7.2 1 .8 1.5 1.8.4 1.2 1 2.6 2.8 3 1.8.4 3-.6 4-1.4.8-.7 1.3-1 2.1-.9s1 .8 1.5 1.8c.5 1.1 1 2.5 2.9 3 1.8.4 3-.6 3.9-1.4.8-.7 1.4-1.1 2.1-1s1 .8 1.5 1.9c.5 1 1.1 2.5 3 3 1.7.3 2.9-.7 3.8-1.4.9-.8 1.4-1.2 2.2-1 .7.2 1 .8 1.5 1.8.5 1.1 1 2.5 2.9 3h.8c1.3 0 2.3-.7 3-1.4 1-.7 1.4-1.1 2.2-1a1 1 0 1 0 .5-1.9zM95 61.7c-1.7-.4-3 .6-3.9 1.4-.8.7-1.3 1.1-2.1 1s-1-.8-1.5-1.9c-.5-1-1.1-2.5-2.9-3-1.8-.3-3 .7-3.9 1.4-.9.8-1.4 1.2-2.2 1-.7-.2-1-.8-1.5-1.8-.4-1.1-1-2.5-2.8-3-1.8-.4-3 .6-4 1.4-.8.7-1.3 1.1-2 1-.9-.3-1.1-.8-1.6-1.9-.5-1.1-1-2.5-2.9-3-1.8-.4-3 .6-3.9 1.4-.8.7-1.3 1.1-2.1 1s-1-.8-1.5-1.8c-.5-1.2-1.1-2.6-2.9-3a1 1 0 1 0-.4 2c.7.1 1 .7 1.5 1.8.4 1 1 2.5 2.8 3 1.8.3 3-.7 4-1.4.8-.8 1.3-1.2 2-1 .9.2 1.1.8 1.6 1.8.5 1.1 1 2.5 2.9 3 1.8.4 3-.6 3.9-1.4.8-.7 1.3-1.1 2.1-1 .8.3 1 .8 1.5 1.9.5 1.1 1.1 2.5 2.9 3 1.8.4 3-.6 3.9-1.4.8-.7 1.4-1.1 2.1-1s1.1.8 1.6 1.8c.4 1.2 1 2.6 2.8 3h.9c1.3 0 2.3-.7 3-1.4.9-.7 1.4-1.1 2.2-1 .5.2 1-.1 1.2-.7s-.2-1-.8-1.2zM76.3 71c-.7-.2-1-.8-1.5-1.8-.4-1.1-1-2.5-2.8-3-1.8-.4-3 .6-4 1.4-.8.7-1.3 1.1-2 1-.9-.2-1.1-.8-1.6-1.9-.5-1.1-1-2.5-2.9-3-1.8-.3-3 .6-3.9 1.4-.8.8-1.3 1.2-2.1 1-.8-.2-1-.8-1.5-1.8-.5-1.2-1.1-2.6-2.9-3a1 1 0 1 0-.4 2c.7.1 1 .7 1.5 1.8.4 1 1 2.5 2.8 3 1.8.3 3-.6 4-1.4.8-.8 1.3-1.2 2-1s1.1.8 1.6 1.8c.5 1.2 1 2.6 2.9 3 1.8.4 3-.6 3.9-1.4.8-.7 1.3-1.1 2.1-1s1 .9 1.5 1.9c.5 1.1 1.1 2.5 2.9 3h.2a1 1 0 0 0 .3-2zm-2.2 9.4c-.7-.2-1-.8-1.5-1.8-.4-1.1-1-2.5-2.8-3-1.8-.4-3 .6-4 1.4-.8.7-1.3 1.1-2 1-.9-.2-1.1-.8-1.6-1.9-.5-1.1-1-2.5-2.9-3-1.8-.3-3 .6-3.9 1.4-.8.8-1.3 1.2-2.1 1-.8-.2-1-.8-1.5-1.8-.5-1.2-1.1-2.6-2.9-3a1 1 0 0 0-1.2.8c-.1.5.2 1 .7 1.2.8.1 1.1.7 1.5 1.8.5 1 1.1 2.5 3 3 1.7.3 2.9-.6 3.8-1.4.9-.8 1.4-1.2 2.2-1s1 .8 1.5 1.8c.5 1.2 1 2.6 2.9 3 1.8.4 3-.6 3.9-1.4.8-.7 1.3-1.1 2.1-1 .8.3 1 .9 1.5 1.9.5 1.1 1.1 2.5 2.9 3h.2a1 1 0 0 0 .2-2z"></path>
|
||||
<path class="st3" fill="#1CB0A8" d="M176.8 13.9h5.8v5.8h-5.8zM1 28.4 3 23l5.4 2-2 5.4zM34.3 4.2l6.7-3 3 6.5-6.6 3.3z"></path>
|
||||
<path class="st2" d="M19.6 8a3 3 0 1 0 0 6.2 3 3 0 0 0 0-6.2zm47.5-4.6a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6z" fill="#EF4056"></path>
|
||||
<circle class="st2" cx="120.1" cy="31.3" r="2.2" fill="#EF4056"></circle>
|
||||
<path class="st0" fill="#FCB643" d="m14.3 51.3 1.6 3.8 1.7 3.8 2.5-3.4 2.4-3.3-4.1-.5zm98.1-41.8-3.5 1.5 3.1 2.3 3.1 2.3.4-3.9.4-3.8zm-7.5 64.2 4.3 3.2 4.4 3.2.6-5.4.6-5.4-5 2.2z"></path>
|
||||
<path class="st3" d="M46 22.7a2 2 0 0 0-2 1.7l-1 11.7c-.1.4 0 1 .3 1.3.4.4.8.6 1.4.7l6.5.6L54.9 23l-8.9-.3zm-1.3 21.8a2 2 0 0 0-2 1.7l-1 11.7c-.1.5 0 1 .3 1.3.4.4.8.6 1.4.7l2.8.3 3.6-15.5-5-.2zM44.5 67h-1.1a2 2 0 0 0-2 1.7l-1 11.6a1.8 1.8 0 0 0 .7 1.6v-.1L44.5 67z" fill="#1CB0A8"></path>
|
||||
<path d="M37.8 30.6c-1.8.4-2.4 1.8-3 2.9-.4 1-.7 1.6-1.5 1.8s-1.3-.3-2-1c-1-.9-2.1-1.9-4-1.5a1 1 0 0 0 .5 2c.7-.2 1.2.2 2 1 .9.7 1.8 1.5 3.2 1.5h.7c1.8-.4 2.5-1.8 3-3 .5-1 .8-1.6 1.5-1.7h.8l.1-2h-1.3zm-1 12.3c-.4 1-.7 1.6-1.5 1.8-.8.1-1.3-.3-2.1-1-1-.9-2.1-1.9-4-1.5a1 1 0 0 0 .5 2c.8-.2 1.3.2 2.1 1 .8.6 1.7 1.5 3.1 1.5h.8a4 4 0 0 0 2.6-2.3l.2-3.8c-.9.6-1.3 1.5-1.7 2.3z"></path>
|
||||
<path class="st0" d="M32.8 54c-.8.2-1.3 1-1.1 1.7l4.6 23 1.5-26-5 1.3zm6.6 33 1.6-.2-2.8-.2c.3.3.7.5 1.2.5z" fill="#FCB643"></path>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 5.3 KiB |
|
|
@ -682,25 +682,6 @@ This reports the user's interaction with those Pocket tiles.
|
|||
}
|
||||
```
|
||||
|
||||
### Load more button ping
|
||||
|
||||
```js
|
||||
{
|
||||
"event": "CLICK",
|
||||
"source": "DS_LOAD_MORE_BUTTON",
|
||||
|
||||
// Basic metadata
|
||||
"action": "activity_stream_event",
|
||||
"page": ["about:newtab" | "about:home" | "about:welcome" | "unknown"],
|
||||
"client_id": "26288a14-5cc4-d14f-ae0a-bb01ef45be9c",
|
||||
"session_id": "005deed0-e3e4-4c02-a041-17405fd703f6",
|
||||
"browser_session_id": "e7e52665-7db3-f348-9918-e93160eb2ef3",
|
||||
"addon_version": "20180710100040",
|
||||
"locale": "en-US",
|
||||
"user_prefs": 7
|
||||
}
|
||||
```
|
||||
|
||||
## Save to Pocket button pings
|
||||
|
||||
Right now the save to Pocket button, while technically outside of newtab, has some similarities with the newtab telemetry.
|
||||
|
|
|
|||
|
|
@ -572,8 +572,6 @@ class DiscoveryStreamFeed {
|
|||
hybridLayout: pocketConfig.hybridLayout,
|
||||
hideCardBackground: pocketConfig.hideCardBackground,
|
||||
fourCardLayout: pocketConfig.fourCardLayout,
|
||||
loadMore: pocketConfig.loadMore,
|
||||
lastCardMessageEnabled: pocketConfig.lastCardMessageEnabled,
|
||||
pocketButtonEnabled,
|
||||
saveToPocketCard: pocketButtonEnabled && pocketConfig.saveToPocketCard,
|
||||
newFooterSection: pocketConfig.newFooterSection,
|
||||
|
|
@ -1977,8 +1975,6 @@ class DiscoveryStreamFeed {
|
|||
`hybridLayout` Changes cards to smaller more compact cards only for specific breakpoints.
|
||||
`hideCardBackground` Removes Pocket card background and borders.
|
||||
`fourCardLayout` Enable four Pocket cards per row.
|
||||
`loadMore` Hide half the Pocket stories behind a load more button.
|
||||
`lastCardMessageEnabled` Shows a message card at the end of the feed.
|
||||
`newFooterSection` Changes the layout of the topics section.
|
||||
`pocketButtonEnabled` Removes Pocket context menu items from cards.
|
||||
`saveToPocketCard` Cards have a save to Pocket button over their thumbnail on hover.
|
||||
|
|
@ -2001,8 +1997,6 @@ getHardcodedLayout = ({
|
|||
hybridLayout = false,
|
||||
hideCardBackground = false,
|
||||
fourCardLayout = false,
|
||||
loadMore = false,
|
||||
lastCardMessageEnabled = false,
|
||||
newFooterSection = false,
|
||||
pocketButtonEnabled = false,
|
||||
saveToPocketCard = false,
|
||||
|
|
@ -2112,8 +2106,6 @@ getHardcodedLayout = ({
|
|||
}),
|
||||
data: widgetData,
|
||||
},
|
||||
loadMore,
|
||||
lastCardMessageEnabled,
|
||||
pocketButtonEnabled,
|
||||
saveToPocketCard,
|
||||
cta_variant: "link",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { Provider } from "react-redux";
|
|||
import {
|
||||
DSCard,
|
||||
PlaceholderDSCard,
|
||||
LastCardMessage,
|
||||
} from "content-src/components/DiscoveryStreamComponents/DSCard/DSCard";
|
||||
import { TopicsWidget } from "content-src/components/DiscoveryStreamComponents/TopicsWidget/TopicsWidget";
|
||||
import { actionCreators as ac, actionTypes as at } from "common/Actions.jsm";
|
||||
|
|
@ -128,56 +127,6 @@ describe("<CardGrid>", () => {
|
|||
assert.ok(!wrapper.find(".ds-card-grid-include-descriptions").exists());
|
||||
});
|
||||
|
||||
it("should show last card and more loaded state", () => {
|
||||
const dispatch = sinon.stub();
|
||||
wrapper.setProps({
|
||||
dispatch,
|
||||
compact: true,
|
||||
loadMore: true,
|
||||
lastCardMessageEnabled: true,
|
||||
loadMoreThreshold: 2,
|
||||
data: {
|
||||
recommendations: [{}, {}, {}],
|
||||
},
|
||||
});
|
||||
|
||||
const loadMoreButton = wrapper.find(".ds-card-grid-load-more-button");
|
||||
assert.ok(loadMoreButton.exists());
|
||||
|
||||
loadMoreButton.simulate("click", { preventDefault: () => {} });
|
||||
assert.calledOnce(dispatch);
|
||||
assert.calledWith(
|
||||
dispatch,
|
||||
ac.UserEvent({
|
||||
event: "CLICK",
|
||||
source: "DS_LOAD_MORE_BUTTON",
|
||||
})
|
||||
);
|
||||
|
||||
const lastCard = wrapper.find(LastCardMessage);
|
||||
assert.ok(lastCard.exists());
|
||||
});
|
||||
|
||||
it("should only show load more with more than threshold number of stories", () => {
|
||||
wrapper.setProps({
|
||||
loadMore: true,
|
||||
loadMoreThreshold: 2,
|
||||
data: {
|
||||
recommendations: [{}, {}, {}],
|
||||
},
|
||||
});
|
||||
|
||||
let loadMoreButton = wrapper.find(".ds-card-grid-load-more-button");
|
||||
assert.ok(loadMoreButton.exists());
|
||||
|
||||
wrapper.setProps({
|
||||
loadMoreThreshold: 3,
|
||||
});
|
||||
|
||||
loadMoreButton = wrapper.find(".ds-card-grid-load-more-button");
|
||||
assert.ok(!loadMoreButton.exists());
|
||||
});
|
||||
|
||||
it("should create a widget card", () => {
|
||||
wrapper.setProps({
|
||||
widgets: {
|
||||
|
|
|
|||
|
|
@ -240,17 +240,6 @@ newtab-pocket-pocket-firefox-family = { -pocket-brand-name } is part of the { -b
|
|||
newtab-pocket-save-to-pocket = Save to { -pocket-brand-name }
|
||||
newtab-pocket-saved-to-pocket = Saved to { -pocket-brand-name }
|
||||
|
||||
# This is a button shown at the bottom of the Pocket section that loads more stories when clicked.
|
||||
newtab-pocket-load-more-stories-button = Load more stories
|
||||
|
||||
## Pocket Final Card Section.
|
||||
## This is for the final card in the Pocket grid.
|
||||
|
||||
newtab-pocket-last-card-title = You’re all caught up!
|
||||
newtab-pocket-last-card-desc = Check back later for more.
|
||||
newtab-pocket-last-card-image =
|
||||
.alt = You’re all caught up
|
||||
|
||||
## Error Fallback Content.
|
||||
## This message and suggested action link are shown in each section of UI that fails to render.
|
||||
|
||||
|
|
|
|||
|
|
@ -261,17 +261,6 @@ pocketNewtab:
|
|||
type: boolean
|
||||
fallbackPref: browser.newtabpage.activity-stream.discoverystream.fourCardLayout.enabled
|
||||
description: Enable four Pocket cards per row.
|
||||
loadMore:
|
||||
type: boolean
|
||||
fallbackPref: browser.newtabpage.activity-stream.discoverystream.loadMore.enabled
|
||||
description: A button to load more stories at the bottom of the Pocket section.
|
||||
lastCardMessageEnabled:
|
||||
type: boolean
|
||||
fallbackPref: >-
|
||||
browser.newtabpage.activity-stream.discoverystream.lastCardMessage.enabled
|
||||
description: >-
|
||||
The last card in the Pocket section is a message that they are currently
|
||||
at the end of the list of stories.
|
||||
newFooterSection:
|
||||
type: boolean
|
||||
fallbackPref: >-
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче