From d26b69fc93a8bb113bb79c4a3e9c56adef9fed67 Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Mon, 12 Dec 2022 20:38:32 +0800 Subject: [PATCH] feat: mobile app promotion page --- public/locales/en-US/application.json | 7 +- public/locales/zh-CN/application.json | 7 +- public/static/img/appstore.svg | 46 ++++++ src/component/Setting/AppPromotion.js | 208 ++++++++++++++++++++++++++ src/component/Setting/WebDAV.js | 6 +- 5 files changed, 271 insertions(+), 3 deletions(-) create mode 100644 public/static/img/appstore.svg create mode 100644 src/component/Setting/AppPromotion.js diff --git a/public/locales/en-US/application.json b/public/locales/en-US/application.json index b9f9bcc..70ed786 100644 --- a/public/locales/en-US/application.json +++ b/public/locales/en-US/application.json @@ -474,6 +474,11 @@ "shareDate": "Shared at", "downloadNumber": "Downloads", "viewNumber": "Views", - "language": "Language" + "language": "Language", + "iOSApp": "iOS App", + "connectByiOS": "Connect to <0>{{title}} through iOS devices.", + "downloadOurApp": "Download our iOS App:", + "fillInEndpoint": "Enter \"{{url}}\" as the \"Endpoint\";", + "loginApp": "Sign in using your Email and password." } } diff --git a/public/locales/zh-CN/application.json b/public/locales/zh-CN/application.json index e01b16e..439172b 100644 --- a/public/locales/zh-CN/application.json +++ b/public/locales/zh-CN/application.json @@ -474,6 +474,11 @@ "shareDate": "分享日期", "downloadNumber": "下载次数", "viewNumber": "浏览次数", - "language": "语言" + "language": "语言", + "iOSApp": "iOS 客户端", + "connectByiOS": "通过 iOS 设备连接到 <0>{{title}}", + "downloadOurApp": "下载并安装我们的 iOS 应用：", + "fillInEndpoint": "在 “站点地址” 中填入 “{{url}}”；", + "loginApp": "输入您的用户名及密码完成登录。" } } diff --git a/public/static/img/appstore.svg b/public/static/img/appstore.svg new file mode 100644 index 0000000..072b425 --- /dev/null +++ b/public/static/img/appstore.svg @@ -0,0 +1,46 @@ + + Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/component/Setting/AppPromotion.js b/src/component/Setting/AppPromotion.js new file mode 100644 index 0000000..7f44bcf --- /dev/null +++ b/src/component/Setting/AppPromotion.js @@ -0,0 +1,208 @@ +import React from "react"; +import { Grid, makeStyles, Typography } from "@material-ui/core"; +import { Trans, useTranslation } from "react-i18next"; +import { useTheme, fade } from "@material-ui/core/styles"; +import Box from "@material-ui/core/Box"; +import { useSelector } from "react-redux"; +import Link from "@material-ui/core/Link"; + +const PhoneSkeleton = () => { + const theme = useTheme(); + + return ( + + + + + + ); +}; + +const useStyles = makeStyles((theme) => ({ + phoneContainer: { + maxWidth: 450, + position: "relative", + marginX: "auto", + perspective: 1500, + transformStyle: "preserve-3d", + perspectiveOrigin: 0, + }, + phoneFrame: { + position: "relative", + borderRadius: "2.75rem", + boxShadow: 1, + width: "75% !important", + marginX: "auto", + transform: "rotateY(-35deg) rotateX(15deg) translateZ(0)", + }, + phoneImage: { + objectFit: "cover", + borderRadius: "2.5rem", + filter: theme.palette.type === "dark" ? "brightness(0.7)" : "none", + }, + highlight: { + background: `linear-gradient(180deg, transparent 82%, ${fade( + theme.palette.secondary.main, + 0.3 + )} 0%)`, + }, + bold: { + fontWeight: 700, + }, + frameContainer: { + verticalAlign: "middle", + }, + grid: { + padding: theme.spacing(2), + paddingTop: 0, + paddingBottom: theme.spacing(4), + }, + "@global": { + ol: { + paddingInlineStart: 24, + }, + "li::marker": { + fontSize: "1.25rem", + }, + li: { + marginBottom: theme.spacing(2), + }, + }, +})); + +export default function AppPromotion() { + const { t } = useTranslation("application", { keyPrefix: "setting" }); + const theme = useTheme(); + const title = useSelector((state) => state.siteConfig.title); + + const classes = useStyles(); + + return ( + + + + + + , + ]} + /> + + + +
    +
  1. + + {t("downloadOurApp")} + + + + + + +
    2. +
  2. + + {t("fillInEndpoint", { + url: window.location.origin, + })} + +
    3. +
  3. + + {t("loginApp")} + +
    4. +
+ + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/component/Setting/WebDAV.js b/src/component/Setting/WebDAV.js index 40664a8..fa3c0a4 100644 --- a/src/component/Setting/WebDAV.js +++ b/src/component/Setting/WebDAV.js @@ -1,6 +1,6 @@ import React, { useState, useCallback, useEffect } from "react"; import { makeStyles, Typography } from "@material-ui/core"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import Paper from "@material-ui/core/Paper"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; @@ -22,6 +22,7 @@ import Link from "@material-ui/core/Link"; import { toggleSnackbar } from "../../redux/explorer"; import Nothing from "../Placeholder/Nothing"; import { useTranslation } from "react-i18next"; +import AppPromotion from "./AppPromotion"; const useStyles = makeStyles((theme) => ({ layout: { @@ -59,6 +60,7 @@ export default function WebDAV() { const [create, setCreate] = useState(false); const [accounts, setAccounts] = useState([]); + const appPromotion = useSelector((state) => state.siteConfig.app_promotion); const dispatch = useDispatch(); const ToggleSnackbar = useCallback( (vertical, horizontal, msg, color) => @@ -154,6 +156,7 @@ export default function WebDAV() { aria-label="disabled tabs example" > + {appPromotion && }
{tab === 0 && ( @@ -255,6 +258,7 @@ export default function WebDAV() {
)} + {tab === 1 && }