nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1746026 - Adding ArticleList component r=thecount

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D136520
This commit is contained in:
Gavin Lazar Suntop 2022-01-21 22:35:03 +00:00
parent 4aedde443a
commit c1dfce3115
9 changed files with 185 additions and 19 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

2
browser/components/pocket/content/panels/css/main.compiled.css
View file

File diff suppressed because one or more lines are too long

2
browser/components/pocket/content/panels/css/main.compiled.css.map
View file

File diff suppressed because one or more lines are too long

3
browser/components/pocket/content/panels/css/main.scss
View file

@ -5,4 +5,7 @@
@import "./home";
@import "./styleguide";
// Components
@import "../js/components/ArticleList/ArticleList";
@import "../js/components/Header/Header";

5
browser/components/pocket/content/panels/css/styleguide.scss
View file

@ -7,4 +7,9 @@
.stp_superheader {
margin: 0;
}
.stp_styleguide_h4 {
border-bottom: 1px solid #ccc;
margin: 20px 0;
}
}

31
browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx Normal file
View file

@ -0,0 +1,31 @@
/* 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/. */
import React from "react";
function ArticleList(props) {
return (
<ul className="stp_article_list">
{props.articles.map(article => (
<li className="stp_article_list_item">
<a className="stp_article_list_link" href={article.url}>
<img
className="stp_article_list_thumb"
src={article.thumbnail}
alt={article.alt}
/>
<div className="stp_article_list_meta">
<header className="stp_article_list_header">
{article.title}
</header>
<p className="stp_article_list_publisher">{article.publisher}</p>
</div>
</a>
</li>
))}
</ul>
);
}
export default ArticleList;

40
browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss Normal file
View file

@ -0,0 +1,40 @@
.stp_article_list {
padding: 0;
list-style: none;
.stp_article_list_link {
display: flex;
border-radius: 4px;
padding: 8px;
&:hover {
text-decoration: none;
background-color: #ECECEE;
}
}
.stp_article_list_thumb {
width: 40px;
height: 40px;
border-radius: 4px;
margin-inline-end: 8px;
}
.stp_article_list_header {
font-style: normal;
font-weight: 600;
font-size: 0.85em;
line-height: 1.27em;
color: #15141A;
margin: 4px 0px;
}
.stp_article_list_publisher {
font-style: normal;
font-weight: normal;
font-size: 0.85em;
line-height: 1.27em;
color: #52525E;
margin: 4px 0px;
}
}

61
browser/components/pocket/content/panels/js/main.bundle.js
View file

@ -2,7 +2,7 @@
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 672:
/***/ 318:
/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
@ -920,17 +920,48 @@ SavedOverlay.prototype = {
};
/* harmony default export */ const saved_overlay = (SavedOverlay);
;// CONCATENATED MODULE: ./content/panels/js/components/ArticleList/ArticleList.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,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
function ArticleList(props) {
return /*#__PURE__*/react.createElement("ul", {
className: "stp_article_list"
}, props.articles.map(article => /*#__PURE__*/react.createElement("li", {
className: "stp_article_list_item"
}, /*#__PURE__*/react.createElement("a", {
className: "stp_article_list_link",
href: article.url
}, /*#__PURE__*/react.createElement("img", {
className: "stp_article_list_thumb",
src: article.thumbnail,
alt: article.alt
}), /*#__PURE__*/react.createElement("div", {
className: "stp_article_list_meta"
}, /*#__PURE__*/react.createElement("header", {
className: "stp_article_list_header"
}, article.title), /*#__PURE__*/react.createElement("p", {
className: "stp_article_list_publisher"
}, article.publisher))))));
}
/* harmony default export */ const ArticleList_ArticleList = (ArticleList);
;// CONCATENATED MODULE: ./content/panels/js/style-guide/overlay.js
var StyleGuideOverlay = function (options) {};
StyleGuideOverlay.prototype = {
create() {
// TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
react_dom.render( /*#__PURE__*/react.createElement(PopularTopics_PopularTopics, {
react_dom.render( /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("h3", null, "JSX Components:"), /*#__PURE__*/react.createElement("h4", {
className: "stp_styleguide_h4"
}, "PopularTopics"), /*#__PURE__*/react.createElement(PopularTopics_PopularTopics, {
pockethost: `getpocket.com`,
utmsource: `styleguide`,
topics: [{
@ -946,7 +977,29 @@ StyleGuideOverlay.prototype = {
title: "Science",
topic: "science"
}]
}), document.querySelector(`#stp_style_guide_components`));
}), /*#__PURE__*/react.createElement("h4", {
className: "stp_styleguide_h4"
}, "ArticleList"), /*#__PURE__*/react.createElement(ArticleList_ArticleList, {
articles: [{
title: "Article Title",
publisher: "Publisher",
thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text"
}, {
title: "Article Title",
publisher: "Publisher",
thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text"
}, {
title: "Article Title",
publisher: "Publisher",
thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text"
}]
})), document.querySelector(`#stp_style_guide_components`));
}
};
@ -1198,7 +1251,7 @@ window.pktPanelMessaging = messages;
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(672)))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(318)))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()

54
browser/components/pocket/content/panels/js/style-guide/overlay.js
View file

@ -1,5 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";
import ArticleList from "../components/ArticleList/ArticleList";
import PopularTopics from "../components/PopularTopics/PopularTopics";
var StyleGuideOverlay = function(options) {};
@ -8,16 +9,49 @@ StyleGuideOverlay.prototype = {
create() {
// TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
ReactDOM.render(
<PopularTopics
pockethost={`getpocket.com`}
utmsource={`styleguide`}
topics={[
{ title: "Self Improvement", topic: "self-improvement" },
{ title: "Food", topic: "food" },
{ title: "Entertainment", topic: "entertainment" },
{ title: "Science", topic: "science" },
]}
/>,
<div>
<h3>JSX Components:</h3>
<h4 className="stp_styleguide_h4">PopularTopics</h4>
<PopularTopics
pockethost={`getpocket.com`}
utmsource={`styleguide`}
topics={[
{ title: "Self Improvement", topic: "self-improvement" },
{ title: "Food", topic: "food" },
{ title: "Entertainment", topic: "entertainment" },
{ title: "Science", topic: "science" },
]}
/>
<h4 className="stp_styleguide_h4">ArticleList</h4>
<ArticleList
articles={[
{
title: "Article Title",
publisher: "Publisher",
thumbnail:
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text",
},
{
title: "Article Title",
publisher: "Publisher",
thumbnail:
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text",
},
{
title: "Article Title",
publisher: "Publisher",
thumbnail:
"https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
url: "https://example.org",
alt: "Alt Text",
},
]}
/>
</div>,
document.querySelector(`#stp_style_guide_components`)
);
},

6
browser/components/pocket/content/panels/style-guide.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'" />
<meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'; img-src https://img-getpocket.cdn.mozilla.net;" />
<base href="chrome://pocket/content/panels/">
<link rel="localization" href="browser/branding/brandings.ftl" />
<link rel="localization" href="browser/aboutPocket.ftl" />
@ -13,12 +13,12 @@
<script src="js/vendor/jquery-2.1.1.min.js"></script>
<script src="js/vendor/handlebars.runtime.js"></script>
<script src="js/tmpl.js"></script>
<script src="js/vendor.bundle.js"></script>
<script src="js/main.bundle.js"></script>
<script src="js/style-guide/entry.js"></script>
<div id="stp_style_guide">
<p class="stp_superheader"><strong>Save To Pocket</strong></p>
<h1>Style Guide</h1>
<h1>Save To Pocket:<br/> Style Guide</h1>
<div id="stp_style_guide_components"></div>
</div>
</body>