Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/392077 )
Change subject: Chore: extract Thumbnail to separate component
......................................................................
Chore: extract Thumbnail to separate component
Thumbnail is currently used by the summary endpoint and soon to be used
by the image File pages. Extract the component to a distinct file so it
can be reused.
Bug: T179829
Change-Id: I65cf8246f4285828f1b0070c1fb8c0d85266d962
---
M package.json
M src/common/components/page-summary/page-summary.css
M src/common/components/page-summary/page-summary.tsx
A src/common/components/thumbnail/thumbnail.css
A src/common/components/thumbnail/thumbnail.tsx
5 files changed, 96 insertions(+), 76 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/77/392077/1
diff --git a/package.json b/package.json
index 1d5d82c..72e1e48 100644
--- a/package.json
+++ b/package.json
@@ -127,7 +127,7 @@
},
{
"path": "dist/public/pages/summary.*.js",
- "maxSize": "2.9KB"
+ "maxSize": "3KB"
},
{
"path": "dist/public/pages/wiki.*.js",
diff --git a/src/common/components/page-summary/page-summary.css
b/src/common/components/page-summary/page-summary.css
index 5f77601..a1a3894 100644
--- a/src/common/components/page-summary/page-summary.css
+++ b/src/common/components/page-summary/page-summary.css
@@ -15,54 +15,5 @@
visibility: hidden;
}
-.PageSummary-thumbnail {
- background: var(--wmui-color-base0);
-
- /* Center the image within the container. */
- text-align: center;
-
- /* Set the container to occupy the full-width. */
- display: inline-block;
- width: 100%;
-
- /* Since the image is below the extract, set a top margin. */
- margin-top: var(--space);
-}
-/* TODO: use CSS variable. */
-@media (min-width: 1024px) {
- .PageSummary-thumbnail {
- /* Wrap the container to the width of the image and left-align it. Floating
- takes precedence over display. */
- width: unset;
- float: left;
-
- /* Since the image is both side-by-side and below the extract, set a right
- margin too. Since the side-by-side text may wrap around, set a bottom
- margin. */
- margin-right: var(--space);
- margin-bottom: var(--space);
- }
-}
-.PageSummary-thumbnail-image {
- /* Don't pad the linked image with text descender space. */
- vertical-align: top;
-}
-.PageSummary-thumbnail-image-landscape {
- /* Stretch the image to occupy the available width and proprotionally scale
- the height. */
- width: 100%;
- height: auto;
-}
-/* TODO: use CSS variable. */
-@media (min-width: 1024px) {
- .PageSummary-thumbnail-image-landscape {
- /* The screen is too large to maximize the image. Use the image's native
- width and height. */
- width: unset;
- height: unset;
- }
-}
-.PageSummary-thumbnail-image-portrait {}
-
.PageSummary-extract-lead {}
.PageSummary-extract-body {}
diff --git a/src/common/components/page-summary/page-summary.tsx
b/src/common/components/page-summary/page-summary.tsx
index cd13a9a..93839c5 100644
--- a/src/common/components/page-summary/page-summary.tsx
+++ b/src/common/components/page-summary/page-summary.tsx
@@ -2,6 +2,7 @@
import "./page-summary.css";
import { PageSummary as PageSummaryModel } from "../../models/page/summary";
import Content from "../content/content";
+import { Thumbnail } from "../thumbnail/thumbnail";
export interface Props {
summary: PageSummaryModel;
@@ -15,36 +16,17 @@
class="PageSummary-extract-lead"
dangerouslySetInnerHTML={{ __html: lead }}
/>
- <Thumbnail summary={summary} />
+ {summary.thumbnail && (
+ <Thumbnail
+ class="PageSummary-thumbnail"
+ image={summary.thumbnail}
+ url={summary.image && summary.image.url}
+ />
+ )}
<div
class="PageSummary-extract-body"
dangerouslySetInnerHTML={{ __html: body.join("") }}
/>
</div>
- );
-};
-
-const Thumbnail = ({ summary }: Props) => {
- if (!summary.thumbnail || !summary.image) {
- return null;
- }
-
- const landscape = summary.image.landscape;
- const imageOrientationClass = `PageSummary-thumbnail-image-${landscape
- ? "landscape"
- : "portrait"}`;
- return (
- // todo: replace anchor with Link.
- <span class="PageSummary-thumbnail">
- <a href={summary.image.url}>
- <img
- key={summary.thumbnail.url}
- class={`PageSummary-thumbnail-image ${imageOrientationClass}`}
- src={summary.thumbnail.url}
- width={summary.thumbnail.width}
- height={summary.thumbnail.height}
- />
- </a>
- </span>
);
};
diff --git a/src/common/components/thumbnail/thumbnail.css
b/src/common/components/thumbnail/thumbnail.css
new file mode 100644
index 0000000..e872aac
--- /dev/null
+++ b/src/common/components/thumbnail/thumbnail.css
@@ -0,0 +1,54 @@
+
+.Thumbnail {
+ background: var(--wmui-color-base0);
+
+ /* Center the image within the container. */
+ text-align: center;
+
+ /* Set the container to occupy the full-width. */
+ display: inline-block;
+ width: 100%;
+
+ /* Since the image is below the extract, set a top margin. */
+ margin-top: var(--space);
+}
+
+/* TODO: use CSS variable. */
+@media (min-width: 1024px) {
+ .Thumbnail {
+ /* Wrap the container to the width of the image and left-align it. Floating
+ takes precedence over display. */
+ width: unset;
+ float: left;
+
+ /* Since the image is both side-by-side and below the extract, set a right
+ margin too. Since the side-by-side text may wrap around, set a bottom
+ margin. */
+ margin-right: var(--space);
+ margin-bottom: var(--space);
+ }
+}
+
+.Thumbnail-image {
+ /* Don't pad the linked image with text descender space. */
+ vertical-align: top;
+}
+
+.Thumbnail-image-landscape {
+ /* Stretch the image to occupy the available width and proprotionally scale
+ the height. */
+ width: 100%;
+ height: auto;
+}
+
+/* TODO: use CSS variable. */
+@media (min-width: 1024px) {
+ .Thumbnail-image-landscape {
+ /* The screen is too large to maximize the image. Use the image's native
+ width and height. */
+ width: unset;
+ height: unset;
+ }
+}
+
+.Thumbnail-image-portrait {}
diff --git a/src/common/components/thumbnail/thumbnail.tsx
b/src/common/components/thumbnail/thumbnail.tsx
new file mode 100644
index 0000000..7b0de4b
--- /dev/null
+++ b/src/common/components/thumbnail/thumbnail.tsx
@@ -0,0 +1,33 @@
+import { h } from "preact";
+import { ChildrenProps, ClassProps, classOf } from "../preact-utils";
+import Link from "../link";
+import { PageImage } from "../../models/page/image";
+import "./thumbnail.css";
+
+export interface Props {
+ image: PageImage;
+ url?: string;
+}
+
+function LinkIfUrl({ href, children }: { href?: string } & ChildrenProps) {
+ return href ? <Link href={href}>{children}</Link> : <span>{children}</span>;
+}
+
+export function Thumbnail({ image, url, ...props }: Props & ClassProps) {
+ const imageOrientationClass = `Thumbnail-image-${image.landscape
+ ? "landscape"
+ : "portrait"}`;
+ return (
+ <span class={classOf("Thumbnail", props.class)}>
+ <LinkIfUrl href={url}>
+ <img
+ key={image.url}
+ class={`Thumbnail-image ${imageOrientationClass}`}
+ src={image.url}
+ width={image.width}
+ height={image.height}
+ />
+ </LinkIfUrl>
+ </span>
+ );
+}
--
To view, visit https://gerrit.wikimedia.org/r/392077
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I65cf8246f4285828f1b0070c1fb8c0d85266d962
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
