From f0da46e898493bed7e945dade54858f18e870a85 Mon Sep 17 00:00:00 2001 From: srgooglo Date: Fri, 4 Nov 2022 14:49:57 +0000 Subject: [PATCH] improve app about --- .../app/src/components/AboutApp/index.jsx | 99 --------------- .../app/src/components/AboutApp/index.less | 118 ------------------ packages/app/src/components/index.js | 1 - packages/app/src/pages/about/index.jsx | 76 ++++++++++- packages/app/src/pages/about/index.less | 93 ++++++++++++++ 5 files changed, 166 insertions(+), 221 deletions(-) delete mode 100755 packages/app/src/components/AboutApp/index.jsx delete mode 100755 packages/app/src/components/AboutApp/index.less diff --git a/packages/app/src/components/AboutApp/index.jsx b/packages/app/src/components/AboutApp/index.jsx deleted file mode 100755 index 56be60cd..00000000 --- a/packages/app/src/components/AboutApp/index.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from "react" -import ReactDOM from "react-dom" -import * as antd from "antd" -import { Card as ACard, Mask as AMask } from "antd-mobile" - -import { Icons } from "components/Icons" - -import config from "config" - -import "./index.less" - -export const Card = (props) => { - const isProduction = import.meta.env.PROD - - const [serverManifest, setServerManifest] = React.useState(null) - - const checkServerVersion = async () => { - const serverManifest = await app.api.customRequest("main") - - setServerManifest(serverManifest.data) - } - - React.useEffect(() => { - checkServerVersion() - }, []) - - return -
-

{config.app.siteName}

- {config.author} - Licensed with {config.package?.license ?? "unlicensed"} -
-
- v{window.app.version ?? "experimental"} - - {isProduction ? : } - {String(import.meta.env.MODE)} - -
- - } - > -
-

Versions

-
- Linebridge {serverManifest?.LINEBRIDGE_SERVER_VERSION ?? "Unknown"} - React {React.version} - eVite v{window.app.__eviteVersion ?? "experimental"} -
-
- -
-

Server info

-
- Server Time: {serverManifest?.requestTime ?? "Unknown"} -
-
- Origin: {app.api.namespaces.main.origin ?? "Unknown"} -
-
- -} - -export const ModalCard = (props) => { - const [visible, setVisible] = React.useState(false) - - React.useEffect(() => { - setVisible(true) - }, []) - - const close = () => { - setVisible(false) - setTimeout(() => { - props.onClose() - }, 150) - } - - return close()}> -
- -
- -} - -export function openModal() { - const component = document.createElement("div") - document.body.appendChild(component) - - const onClose = () => { - ReactDOM.unmountComponentAtNode(component) - document.body.removeChild(component) - } - - ReactDOM.render(, component) -} \ No newline at end of file diff --git a/packages/app/src/components/AboutApp/index.less b/packages/app/src/components/AboutApp/index.less deleted file mode 100755 index 977132e5..00000000 --- a/packages/app/src/components/AboutApp/index.less +++ /dev/null @@ -1,118 +0,0 @@ -.adm-card { - background-color: var(--background-color-accent); - color: var(--text-color); - - h1, - h2, - h3, - h4, - h5, - h6, - span, - p { - color: var(--text-color); - } - - .ant-tag { - color: #1f1f1f; - - svg { - color: #1f1f1f; - } - } -} - -.adm-card-header:not(:last-child) { - border-bottom: 1px solid var(--border-color); -} - -.aboutApp_wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - width: 100vw; - height: 100vh; - - background-color: var(--background-color-primary); - color: var(--text-color); -} - -.aboutApp_card { - height: fit-content; - width: 80vw; - - h1, - h2, - h3, - h4, - h5, - h6, - span, - p { - color: var(--text-color); - } - - svg { - margin: 0; - } - - .ant-tag { - display: inline-flex; - align-items: center; - } - - .group { - width: 100%; - display: inline-flex; - flex-direction: column; - justify-content: center; - - >div { - display: inline-flex; - margin-left: 10px; - } - - margin-bottom: 10px; - } -} - -.aboutApp_card_header { - .adm-card-header-title { - width: 100%; - } - - .content { - width: 100%; - - display: inline-flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - - h1, - h2, - h3 { - margin: 0; - } - - .branding { - display: flex; - flex-direction: column; - - h1, - h2, - h3 { - height: fit-content; - line-height: 24px; - } - - span { - height: fit-content; - color: var(--background-color-contrast); - font-size: 10px; - } - } - } -} \ No newline at end of file diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js index ae27f27f..f016e84c 100755 --- a/packages/app/src/components/index.js +++ b/packages/app/src/components/index.js @@ -56,7 +56,6 @@ export { default as ConnectedFriends } from "./ConnectedFriends" // OTHERS export * as AdminTools from "./AdminTools" -export * as AboutApp from "./AboutApp" export * as Window from "./RenderWindow" export { Layout } \ No newline at end of file diff --git a/packages/app/src/pages/about/index.jsx b/packages/app/src/pages/about/index.jsx index 6c4f7739..a113c288 100755 --- a/packages/app/src/pages/about/index.jsx +++ b/packages/app/src/pages/about/index.jsx @@ -1,10 +1,80 @@ import React from "react" -import { AboutApp } from "components" +import * as antd from "antd" +import moment from "moment" + +import { Icons } from "components/Icons" + +import config from "config" import "./index.less" export default (props) => { - return
- + const isProduction = import.meta.env.PROD + + const [serverManifest, setServerManifest] = React.useState(null) + + const checkServerVersion = async () => { + const serverManifest = await app.api.customRequest("main") + + setServerManifest(serverManifest.data) + } + + React.useEffect(() => { + checkServerVersion() + }, []) + + return
+
+
+
+ Logo +
+
+

{config.app.siteName}

+ {config.author} + Licensed with {config.package?.license ?? "unlicensed"} +
+
+
+ v{window.app.version ?? "experimental"} + + {isProduction ? : } + {String(import.meta.env.MODE)} + +
+
+ +
+

Server info

+ +
+ Powered by Linebridge™ + +
+ v{serverManifest?.LINEBRIDGE_SERVER_VERSION ?? "Unknown"} +
+
+
+ + Origin address + + +
+ {app.api?.namespaces.main.origin ?? "Unknown"} +
+
+
+ + Server Time + + +
+ {moment(serverManifest?.requestTime).format("YYYY-MM-DD HH:mm:ss")} +
+
+
} \ No newline at end of file diff --git a/packages/app/src/pages/about/index.less b/packages/app/src/pages/about/index.less index e69de29b..3af67a79 100755 --- a/packages/app/src/pages/about/index.less +++ b/packages/app/src/pages/about/index.less @@ -0,0 +1,93 @@ +.about_app { + display: flex; + flex-direction: column; + + width: 100%; + + padding: 0 20px 20px 20px; + + background-color: var(--background-color-accent); + color: var(--text-color); + + border-radius: 12px; + + .header { + display: flex; + flex-direction: row; + + justify-content: space-between; + align-self: center; + + width: 100%; + + margin-bottom: 20px; + + padding: 20px 0; + border-bottom: 1px solid var(--border-color); + + .branding { + display: flex; + flex-direction: row; + + align-items: center; + + .logo { + width: 60px; + height: 100%; + + margin-right: 20px; + + img { + width: 100%; + height: 100%; + } + } + + .texts { + display: flex; + flex-direction: column; + + } + + h1, + h2, + h3 { + height: fit-content; + line-height: 24px; + } + + span { + height: fit-content; + color: var(--background-color-contrast); + font-size: 10px; + } + } + } + + .group { + display: inline-flex; + + flex-direction: column; + justify-content: center; + + margin-bottom: 10px; + + .field { + display: inline-flex; + flex-direction: column; + + margin-bottom: 10px; + + font-size: 0.9rem; + + .value { + font-size: 0.8rem; + + display: inline-flex; + flex-direction: row; + + margin-left: 10px; + } + } + } +} \ No newline at end of file