зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1746026 - Adding ArticleList component r=thecount
Differential Revision: https://phabricator.services.mozilla.com/D136520
This commit is contained in:
Родитель
4aedde443a
Коммит
c1dfce3115
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
@ -5,4 +5,7 @@
|
|||
@import "./home";
|
||||
@import "./styleguide";
|
||||
|
||||
// Components
|
||||
|
||||
@import "../js/components/ArticleList/ArticleList";
|
||||
@import "../js/components/Header/Header";
|
||||
|
|
|
@ -7,4 +7,9 @@
|
|||
.stp_superheader {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stp_styleguide_h4 {
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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__);
|
||||
/******/
|
||||
/******/ })()
|
||||
|
|
|
@ -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`)
|
||||
);
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
Загрузка…
Ссылка в новой задаче