From aed1004f39a277c3931a6bffad0cb28ab5d34228 Mon Sep 17 00:00:00 2001
From: email <imrealleonardo@gmail.com>
Date: Fri, 7 Jan 2022 21:36:49 +0800
Subject: [PATCH] feat: add star-history embed iframe;
---
web/src/components/AboutSiteDialog.tsx | 5 +++
web/src/components/StarHistoryDialog.tsx | 40 ++++++++++++++++++++++++
web/src/less/about-site-dialog.less | 11 +++++++
web/src/less/star-history-dialog.less | 18 +++++++++++
4 files changed, 74 insertions(+)
create mode 100644 web/src/components/StarHistoryDialog.tsx
create mode 100644 web/src/less/star-history-dialog.less
diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx
index 39d78875..37088b75 100644
--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@@ -1,4 +1,5 @@
import { showDialog } from "./Dialog";
+import showStarHistoryDialog from "./StarHistoryDialog";
import "../less/about-site-dialog.less";
interface Props extends DialogProps {}
@@ -28,6 +29,10 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
🏗 This project is working in progress, <br /> and very pleasure to welcome your{" "}
<a href="https://github.com/justmemos/memos/issues">issues</a> and <a href="https://github.com/justmemos/memos/pulls">PR</a>.
</p>
+ <br />
+ <span className="btn" onClick={showStarHistoryDialog}>
+ Star History
+ </span>
<hr />
<p className="normal-text">
Last updated on <span className="pre-text">2021/12/12 14:38:15</span> 🎉
diff --git a/web/src/components/StarHistoryDialog.tsx b/web/src/components/StarHistoryDialog.tsx
new file mode 100644
index 00000000..f4abd908
--- /dev/null
+++ b/web/src/components/StarHistoryDialog.tsx
@@ -0,0 +1,40 @@
+import { showDialog } from "./Dialog";
+import "../less/star-history-dialog.less";
+
+interface Props extends DialogProps {}
+
+const StarHistoryDialog: React.FC<Props> = ({ destroy }: Props) => {
+ const handleCloseBtnClick = () => {
+ destroy();
+ };
+
+ return (
+ <>
+ <div className="dialog-header-container">
+ <p className="title-text">
+ <span className="icon-text">⭐️</span>
+ <b>Star History</b>
+ </p>
+ <button className="btn close-btn" onClick={handleCloseBtnClick}>
+ <img className="icon-img" src="/icons/close.svg" />
+ </button>
+ </div>
+ <div className="dialog-content-container">
+ <iframe
+ style={{ width: "100%", height: "auto", minWidth: "600px", minHeight: "400px" }}
+ src="https://star-history.com/embed?secret=Z2hwX2Mxa1ZENmMwOXNyc3p3VlpGNm5ibWgxN3NyNUxkazNXTGlTMQ==#justmemos/memos&Date"
+ frameBorder="0"
+ ></iframe>
+ </div>
+ </>
+ );
+};
+
+export default function showStarHistoryDialog(): void {
+ showDialog(
+ {
+ className: "star-history-dialog",
+ },
+ StarHistoryDialog
+ );
+}
diff --git a/web/src/less/about-site-dialog.less b/web/src/less/about-site-dialog.less
index 9f40a37d..3908abb2 100644
--- a/web/src/less/about-site-dialog.less
+++ b/web/src/less/about-site-dialog.less
@@ -30,6 +30,17 @@
.pre-text {
.mono-font-family();
}
+
+ > .btn {
+ padding: 2px 8px;
+ background-color: @text-green;
+ color: white;
+ border-radius: 4px;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
}
}
}
diff --git a/web/src/less/star-history-dialog.less b/web/src/less/star-history-dialog.less
new file mode 100644
index 00000000..6e11cbe9
--- /dev/null
+++ b/web/src/less/star-history-dialog.less
@@ -0,0 +1,18 @@
+@import "./mixin.less";
+
+.star-history-dialog {
+ > .dialog-container {
+ width: auto;
+
+ > .dialog-content-container {
+ overflow-x: scroll;
+ }
+ }
+}
+
+@media only screen and (max-width: 875px) {
+ .dialog-wrapper.star-history-dialog {
+ padding: 24px 16px;
+ padding-top: 64px;
+ }
+}