mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 18:40:45 +00:00
ec157dc469
Summary: Adds initial implementation of dark mode. Preferences for dark mode are available on the account settings page. Dark mode is currently a beta feature as there are still some small bugs to squash and a few remaining UI elements to style. Test Plan: Browser tests. Reviewers: jarek Reviewed By: jarek Subscribers: paulfitz, jarek Differential Revision: https://phab.getgrist.com/D3587
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState';
|
|
import { theme } from 'app/client/ui2018/cssVars';
|
|
import { CellValue } from 'app/plugin/GristData';
|
|
import { dom, IDomArgs, Observable, styled } from 'grainjs';
|
|
|
|
/**
|
|
* Styling for a simple <A HREF> link.
|
|
*/
|
|
|
|
export const cssLink = styled('a', `
|
|
color: ${theme.link};
|
|
--icon-color: ${theme.link};
|
|
text-decoration: none;
|
|
&:hover, &:focus {
|
|
color: ${theme.linkHover};
|
|
--icon-color: ${theme.linkHover};
|
|
text-decoration: underline;
|
|
}
|
|
`);
|
|
|
|
export function gristLink(href: string|Observable<string>, ...args: IDomArgs<HTMLElement>) {
|
|
return dom("a",
|
|
dom.attr("href", href),
|
|
dom.attr("target", "_blank"),
|
|
dom.on("click", ev => onClickHyperLink(ev, typeof href === 'string' ? href : href.get())),
|
|
// stop propagation to prevent the grist custom context menu to show up and let the default one
|
|
// to show up instead.
|
|
dom.on("contextmenu", ev => ev.stopPropagation()),
|
|
// As per Google and Mozilla recommendations to prevent opened links
|
|
// from running on the same process as Grist:
|
|
// https://developers.google.com/web/tools/lighthouse/audits/noopener
|
|
dom.attr("rel", "noopener noreferrer"),
|
|
args
|
|
);
|
|
}
|
|
|
|
/**
|
|
* If possible (i.e. if `url` points to somewhere in the current document)
|
|
* use pushUrl to navigate without reloading or opening a new tab
|
|
*/
|
|
export async function onClickHyperLink(ev: MouseEvent, url: CellValue) {
|
|
// Only override plain-vanilla clicks.
|
|
if (ev.shiftKey || ev.metaKey || ev.ctrlKey || ev.altKey) { return; }
|
|
|
|
const newUrlState = sameDocumentUrlState(url);
|
|
if (!newUrlState) { return; }
|
|
|
|
ev.preventDefault();
|
|
await urlState().pushUrl(newUrlState);
|
|
}
|