improving version banner

This commit is contained in:
orangecoding
2026-03-16 10:37:36 +01:00
parent 4878dc98e3
commit 2a30c89eb2
3 changed files with 94 additions and 27 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "fredy", "name": "fredy",
"version": "20.0.3", "version": "20.0.4",
"description": "[F]ind [R]eal [E]states [d]amn eas[y].", "description": "[F]ind [R]eal [E]states [d]amn eas[y].",
"scripts": { "scripts": {
"prepare": "husky", "prepare": "husky",

View File

@@ -3,36 +3,86 @@
* Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
*/ */
import { Collapse, Descriptions } from '@douyinfe/semi-ui-19'; import { useState } from 'react';
import { Banner, Button, Modal, Tag, Space, Typography, Descriptions, MarkdownRender } from '@douyinfe/semi-ui-19';
import { IconAlertCircle, IconArrowRight } from '@douyinfe/semi-icons';
import { useSelector } from '../../services/state/store.js'; import { useSelector } from '../../services/state/store.js';
import { MarkdownRender } from '@douyinfe/semi-ui-19';
import './VersionBanner.less'; import './VersionBanner.less';
const { Text } = Typography;
export default function VersionBanner() { export default function VersionBanner() {
const [modalVisible, setModalVisible] = useState(false);
const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate); const versionUpdate = useSelector((state) => state.versionUpdate.versionUpdate);
return ( return (
<Collapse> <>
<Collapse.Panel header="A new version of Fredy is available" itemKey="1" className="versionBanner"> <Banner
<div className="versionBanner__content"> className="versionBanner"
<p>A new version of Fredy is available. Update now to take advantage of the latest features and bug fixes.</p> type="warning"
<Descriptions row size="small"> bordered
<Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item> closeIcon={null}
<Descriptions.Item itemKey="Latest Version">{versionUpdate.version}</Descriptions.Item> description={
<Descriptions.Item itemKey="Github Release"> <div className="versionBanner__bar">
<a href={versionUpdate.url} target="_blank" rel="noreferrer"> <Space spacing={8} align="center">
{versionUpdate.url} <IconAlertCircle size="small" />
</a>{' '} <Text strong size="small">
</Descriptions.Item> New version available
</Descriptions> </Text>
<p> <Tag color="amber" size="small" shape="circle">
<b> {versionUpdate.version}
<small>Release Notes</small> </Tag>
</b> <Text type="tertiary" size="small">
</p> Current: {versionUpdate.localFredyVersion}
</Text>
</Space>
<Button
theme="borderless"
size="small"
icon={<IconArrowRight />}
iconPosition="right"
onClick={() => setModalVisible(true)}
>
Release notes
</Button>
</div>
}
/>
<Modal
title={
<Space spacing={8} align="center">
<Text strong>Fredy {versionUpdate.version}</Text>
<Tag color="amber" size="small">
New
</Tag>
</Space>
}
visible={modalVisible}
onCancel={() => setModalVisible(false)}
width={640}
footer={
<Space>
<Button onClick={() => setModalVisible(false)}>Close</Button>
<Button
type="primary"
icon={<IconArrowRight />}
iconPosition="right"
onClick={() => window.open(versionUpdate.url, '_blank')}
>
View on GitHub
</Button>
</Space>
}
>
<Descriptions row size="small" className="versionBanner__details">
<Descriptions.Item itemKey="Your Version">{versionUpdate.localFredyVersion}</Descriptions.Item>
<Descriptions.Item itemKey="Latest Version">{versionUpdate.version}</Descriptions.Item>
</Descriptions>
<div className="versionBanner__notes">
<MarkdownRender raw={versionUpdate.body} /> <MarkdownRender raw={versionUpdate.body} />
</div> </div>
</Collapse.Panel> </Modal>
</Collapse> </>
); );
} }

View File

@@ -1,7 +1,24 @@
.versionBanner { .versionBanner {
background: rgba(var(--semi-teal-1), 1); margin-bottom: 0 !important;
&__content { .semi-banner-body {
overflow: auto; padding: 6px 16px;
}
&__bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
&__details {
margin-bottom: 16px;
}
&__notes {
max-height: 400px;
overflow-y: auto;
padding-right: 4px;
} }
} }