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);
|
color: var(--brand-foreground-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
@ -7,12 +7,13 @@ interface ButtonProps {
|
|||||||
iconSvg?: string;
|
iconSvg?: string;
|
||||||
text: ComponentChildren;
|
text: ComponentChildren;
|
||||||
openExternally?: boolean;
|
openExternally?: boolean;
|
||||||
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) {
|
export default function Button({ href, iconSvg, openExternally, text, className }: ButtonProps) {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
className="button"
|
className={`button ${className}`}
|
||||||
href={href}
|
href={href}
|
||||||
target={openExternally ? "_blank" : undefined}
|
target={openExternally ? "_blank" : undefined}
|
||||||
>
|
>
|
||||||
|
@ -1,10 +1,4 @@
|
|||||||
.download-button {
|
.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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,17 +1,24 @@
|
|||||||
import { getRecommendedDownload } from "../download-helper";
|
import { getRecommendedDownload } from "../download-helper";
|
||||||
import "./DownloadButton.css";
|
import "./DownloadButton.css";
|
||||||
|
import Button from "./Button";
|
||||||
|
import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw";
|
||||||
|
|
||||||
interface DownloadButtonProps {
|
interface DownloadButtonProps {
|
||||||
big?: boolean;
|
big?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { architecture, platform, url } = getRecommendedDownload();
|
const { name, url } = getRecommendedDownload();
|
||||||
|
|
||||||
export default function DownloadButton({ big }: DownloadButtonProps) {
|
export default function DownloadButton({ big }: DownloadButtonProps) {
|
||||||
return (
|
return (
|
||||||
<a className={`download-button ${big ? "big" : ""}`} href={url}>
|
<Button
|
||||||
Download now{" "}
|
className={`download-button ${big ? "big" : ""}`}
|
||||||
<span class="platform">{platform} {architecture}</span>
|
href={url}
|
||||||
</a>
|
iconSvg={downloadIcon}
|
||||||
|
text={<>
|
||||||
|
Download now{" "}
|
||||||
|
<span class="platform">for {name}</span>
|
||||||
|
</>}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -187,9 +187,13 @@ export function getRecommendedDownload() {
|
|||||||
const format = recommendedDownload?.[0];
|
const format = recommendedDownload?.[0];
|
||||||
const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
|
const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
|
||||||
|
|
||||||
|
const platformTitle = downloadMatrix.desktop[platform].title;
|
||||||
|
const name = typeof platformTitle === "string" ? platformTitle : platformTitle[architecture];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
architecture,
|
architecture,
|
||||||
platform,
|
platform,
|
||||||
url
|
url,
|
||||||
|
name
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user