mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 07:08:55 +02:00
feat(website): improve download button with icon and platform title
This commit is contained in:
parent
65dae511e5
commit
7a73af0299
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License https://docs.boxicons.com/free--><path d="M11 3v7H7l5 6 5-6h-4V3z"/><path d="M19 19H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2z"/></svg>
|
After Width: | Height: | Size: 253 B |
@ -6,4 +6,5 @@ a.button {
|
||||
color: var(--brand-foreground-color);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
@ -7,12 +7,13 @@ interface ButtonProps {
|
||||
iconSvg?: string;
|
||||
text: ComponentChildren;
|
||||
openExternally?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) {
|
||||
export default function Button({ href, iconSvg, openExternally, text, className }: ButtonProps) {
|
||||
return (
|
||||
<a
|
||||
className="button"
|
||||
className={`button ${className}`}
|
||||
href={href}
|
||||
target={openExternally ? "_blank" : undefined}
|
||||
>
|
||||
|
@ -1,10 +1,4 @@
|
||||
.download-button {
|
||||
text-decoration: none;
|
||||
background: var(--brand-1);
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -1,17 +1,24 @@
|
||||
import { getRecommendedDownload } from "../download-helper";
|
||||
import "./DownloadButton.css";
|
||||
import Button from "./Button";
|
||||
import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw";
|
||||
|
||||
interface DownloadButtonProps {
|
||||
big?: boolean;
|
||||
}
|
||||
|
||||
const { architecture, platform, url } = getRecommendedDownload();
|
||||
const { name, url } = getRecommendedDownload();
|
||||
|
||||
export default function DownloadButton({ big }: DownloadButtonProps) {
|
||||
return (
|
||||
<a className={`download-button ${big ? "big" : ""}`} href={url}>
|
||||
<Button
|
||||
className={`download-button ${big ? "big" : ""}`}
|
||||
href={url}
|
||||
iconSvg={downloadIcon}
|
||||
text={<>
|
||||
Download now{" "}
|
||||
<span class="platform">{platform} {architecture}</span>
|
||||
</a>
|
||||
<span class="platform">for {name}</span>
|
||||
</>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
@ -187,9 +187,13 @@ export function getRecommendedDownload() {
|
||||
const format = recommendedDownload?.[0];
|
||||
const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
|
||||
|
||||
const platformTitle = downloadMatrix.desktop[platform].title;
|
||||
const name = typeof platformTitle === "string" ? platformTitle : platformTitle[architecture];
|
||||
|
||||
return {
|
||||
architecture,
|
||||
platform,
|
||||
url
|
||||
url,
|
||||
name
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user