feat: add floating action button

This commit is contained in:
Maël Gangloff 2024-12-24 18:02:33 +01:00
parent efc1cc9a45
commit aa15dd3db6
No known key found for this signature in database
GPG Key ID: 11FDC81C24A7F629
2 changed files with 38 additions and 9 deletions

View File

@ -1,4 +1,4 @@
import {Button, ConfigProvider, Layout, Space, theme, Typography} from "antd"; import {Button, ConfigProvider, FloatButton, Layout, Space, theme, Tooltip, Typography} from "antd";
import {Link, Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom"; import {Link, Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom";
import TextPage from "./pages/TextPage"; import TextPage from "./pages/TextPage";
import DomainSearchPage from "./pages/search/DomainSearchPage"; import DomainSearchPage from "./pages/search/DomainSearchPage";
@ -16,9 +16,13 @@ import NotFoundPage from "./pages/NotFoundPage";
import useBreakpoint from "./hooks/useBreakpoint"; import useBreakpoint from "./hooks/useBreakpoint";
import {Sider} from "./components/Sider"; import {Sider} from "./components/Sider";
import {jt, t} from "ttag"; import {jt, t} from "ttag";
import {BugOutlined, InfoCircleOutlined, MergeOutlined} from '@ant-design/icons'
const ProjectLink = <Link to='https://github.com/maelgangloff/domain-watchdog'>Domain Watchdog</Link> const PROJECT_LINK = 'https://github.com/maelgangloff/domain-watchdog'
const LicenseLink = <Link to='https://www.gnu.org/licenses/agpl-3.0.txt'>AGPL-3.0-or-later</Link> const LICENSE_LINK = 'https://www.gnu.org/licenses/agpl-3.0.txt'
const ProjectLink = <Typography.Link target='_blank' href={PROJECT_LINK}>Domain Watchdog</Typography.Link>
const LicenseLink = <Typography.Link target='_blank' href={LICENSE_LINK}>AGPL-3.0-or-later</Typography.Link>
export default function App() { export default function App() {
@ -116,7 +120,8 @@ export default function App() {
<Link to='/tos'><Button type='text'>{t`TOS`}</Button></Link> <Link to='/tos'><Button type='text'>{t`TOS`}</Button></Link>
<Link to='/privacy'><Button type='text'>{t`Privacy Policy`}</Button></Link> <Link to='/privacy'><Button type='text'>{t`Privacy Policy`}</Button></Link>
<Link to='/faq'><Button type='text'>{t`FAQ`}</Button></Link> <Link to='/faq'><Button type='text'>{t`FAQ`}</Button></Link>
<Typography.Link href='https://github.com/maelgangloff/domain-watchdog/wiki'><Button <Typography.Link target='_blank'
href='https://github.com/maelgangloff/domain-watchdog/wiki'><Button
type='text'>{t`Documentation`}</Button></Typography.Link> type='text'>{t`Documentation`}</Button></Typography.Link>
</Space> </Space>
<Typography.Paragraph style={{marginTop: '1em'}}> <Typography.Paragraph style={{marginTop: '1em'}}>
@ -124,6 +129,22 @@ export default function App() {
</Typography.Paragraph> </Typography.Paragraph>
</Layout.Footer> </Layout.Footer>
</Layout> </Layout>
<FloatButton.Group
trigger='hover'
style={{
position: 'fixed',
insetInlineEnd: (100 - 40) / 2,
bottom: 100 - 40 / 2,
}}
icon={<InfoCircleOutlined/>}
>
<Tooltip title={t`Official git repository`} placement='left'>
<FloatButton icon={<MergeOutlined/>} target='_blank' href={PROJECT_LINK}/>
</Tooltip>
<Tooltip title={t`Submit an issue`} placement='left'>
<FloatButton icon={<BugOutlined/>} target='_blank' href={PROJECT_LINK + '/issues'}/>
</Tooltip>
</FloatButton.Group>
</Layout> </Layout>
</AuthenticatedContext.Provider> </AuthenticatedContext.Provider>
</ConfigProvider> </ConfigProvider>

View File

@ -3,29 +3,37 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n" "Content-Type: text/plain; charset=utf-8\n"
"Plural-Forms: nplurals=2; plural=(n!=1);\n" "Plural-Forms: nplurals=2; plural=(n!=1);\n"
#: assets/App.tsx:116 #: assets/App.tsx:120
msgid "TOS" msgid "TOS"
msgstr "" msgstr ""
#: assets/App.tsx:117 #: assets/App.tsx:121
msgid "Privacy Policy" msgid "Privacy Policy"
msgstr "" msgstr ""
#: assets/App.tsx:118 #: assets/App.tsx:122
msgid "FAQ" msgid "FAQ"
msgstr "" msgstr ""
#: assets/App.tsx:120 #: assets/App.tsx:125
msgid "Documentation" msgid "Documentation"
msgstr "" msgstr ""
#: assets/App.tsx:123 #: assets/App.tsx:128
#, javascript-format #, javascript-format
msgid "" msgid ""
"${ ProjectLink } is an open source project distributed under the ${ " "${ ProjectLink } is an open source project distributed under the ${ "
"LicenseLink } license." "LicenseLink } license."
msgstr "" msgstr ""
#: assets/App.tsx:141
msgid "Official git repository"
msgstr ""
#: assets/App.tsx:144
msgid "Submit an issue"
msgstr ""
#: assets/components/LoginForm.tsx:52 #: assets/components/LoginForm.tsx:52
#: assets/components/RegisterForm.tsx:39 #: assets/components/RegisterForm.tsx:39
msgid "Email address" msgid "Email address"