feat: PreviewCard component

ZenUml · Oct 28, 2023 · 3fd5e72 · 3fd5e72
1 parent aefe183
commit 3fd5e72
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 25 deletions.
diff --git a/src/components/PreviewCard.jsx b/src/components/PreviewCard.jsx
@@ -0,0 +1,26 @@
+import PropTypes from "prop-types";
+
+export function PreviewCard({ title, description, image }) {
+	return (
+		<div className="preview-card">
+			<div className="preview-card__content">
+				<div className="preview-card__title">
+					<img src="https://zenuml.cn/favicon.ico" />
+					<span>{title}</span>
+				</div>
+				<div className="preview-card__description">
+					<span>{description}</span>
+				</div>
+			</div>
+			<div className="preview-card__image">
+				<img src={image} />
+			</div>
+		</div>
+	);
+}
+
+PreviewCard.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	image: PropTypes.string.isRequired,
+};
diff --git a/src/components/SharePanel.jsx b/src/components/SharePanel.jsx
@@ -1,6 +1,7 @@
 
 import { Component } from 'preact';
 import PropTypes from 'prop-types';
+import { PreviewCard } from './PreviewCard';
 
 
 export class SharePanel extends Component {
@@ -19,7 +20,7 @@ export class SharePanel extends Component {
 				isLoading: false,
 				link: 'https://sequencediagram.zenuml.com/preview/1234',
 			})
-		}, 300);
+		}, 3000);
 	}
 
 	handleCopyLink = () => {
@@ -34,33 +35,35 @@ export class SharePanel extends Component {
 		return (
 			<div className="share-panel">
 				<h3 style={{ marginTop: '4px' }}>Share the Diagram on Confluence<sup>*</sup></h3>
-				{isLoading ?
-					<div className='loader'>
+				<>
+					<div>
+						<p>Paste the link on Confluence and select "Display as a Card"</p>
+						<img width={200} height={100} style="background: #acacac" />
 					</div>
-					: <>
-						<div>
-							<p>Paste the link on Confluence and select "Display as a Card"</p>
-							<img width={200} height={100} style="background: #acacac" />
-						</div>
-						<br />
-						<div>
-							<p>Preview</p>
-							<div className="preview" >
-								<img height={100} style="background: #acacac; width: 100%;" />
-								<button
-									aria-label="Copy link"
-									className="button icon-button copy-button" title={link}
-									onClick={this.handleCopyLink}
-								>
+					<br />
+					<div>
+						<h4 style="margin-bottom: 8px;">Preview</h4>
+						<div className="preview" >
+							<PreviewCard
+								title="ZenUML Sequence"
+								description="ZenUML Sequence"
+								image="https://zenuml.cn/storage/diagrams/3/79.png"
+							/>
+							<button
+								aria-label="Copy link"
+								className="button icon-button copy-button" title={link}
+								onClick={this.handleCopyLink}
+							>
+								{isLoading ? <div className="loader" /> :
 									<span className="material-symbols-outlined">
 										link
-									</span>
-									<span>Copy link</span>
-								</button>
-							</div>
+									</span>}
+								<span>Copy link</span>
+							</button>
 						</div>
-						<span className="footnote">* Anyone with the link can view the diagram. The view is optimised for Confluence.</span>
-					</>}
+					</div>
+					<span className="footnote">* Anyone with the link can view the diagram. The view is optimised for Confluence.</span>
+				</>
 			</div>
 		);
 	}
@@ -69,4 +72,6 @@ export class SharePanel extends Component {
 SharePanel.propTypes = {
 	id: PropTypes.string,
 	dsl: PropTypes.string,
+	email: PropTypes.string,
+	image: PropTypes.string,
 };
diff --git a/src/style.css b/src/style.css
@@ -2038,8 +2038,10 @@ ol.editor-nav li {
 }
 
 .share-panel .copy-button {
+	display: flex;
+	gap: 4px;
 	margin: 0;
-	padding: 8px 20px;
+	padding: 8px 20px 8px 16px;
 	border: 1px solid #414bb2;
 	background-color: transparent;
 	border-radius: 4px;
@@ -2054,8 +2056,62 @@ ol.editor-nav li {
 .share-panel .copy-button .material-symbols-outlined {
 	transform: rotate(315deg);
 }
+
 .share-panel .footnote {
 	margin-top: 8px;
 	color: #acacac;
 	font-size: 12px;
 }
+
+.preview-card {
+	position: relative;
+	display: flex;
+	width: 100%;
+	padding: 12px;
+	border: 1px solid #414bb2;
+	border-radius: 4px;
+	justify-content: space-between;
+	box-sizing: border-box;
+	border: 1px solid #dfe1e6;
+	margin-bottom: 8px;
+}
+
+.preview-card__content {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.preview-card__title {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	font-size: 14px;
+	color: #0052cc;
+	font-weight: 500;
+}
+
+.preview-card__title img {
+	width: 16px;
+	height: 16px;
+}
+
+.preview-card__description {
+	font-size: 12px;
+}
+
+.preview-card__image {
+	position: absolute;
+	width: 30%;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	overflow: hidden;
+}
+
+.preview-card__image img {
+	object-fit: cover;
+	object-position: left top;
+	width: 200%;
+	height: 200%;
+}