Adding a click to copy feature in SystemInfo

This commit is contained in:
Eric van der Vlist 2023-03-11 19:08:52 +01:00
parent ef909b475b
commit 95cfa8c8d7
2 changed files with 61 additions and 17 deletions

View File

@ -0,0 +1,3 @@
.clickPrompt {
font-style: italic;
}

View File

@ -4,10 +4,19 @@ import {
ListItemIcon,
ListItemText,
} from '@suid/material';
import { Component, createEffect, createSignal, For, Show } from 'solid-js';
import {
Component,
createEffect,
createSignal,
For,
onMount,
Show,
} from 'solid-js';
import SystemSecurityUpdateWarningIcon from '@suid/icons-material/SystemSecurityUpdateWarning';
import Dialog from '../dialog';
import dispatch from '../../workers/dispatcher-main';
import { sleep } from '../../lib/async-wait';
import style from './SystemInfo.module.css';
const [error, setError] = createSignal<any[]>([]);
@ -63,6 +72,35 @@ const SystemInfo: Component<Props> = (props) => {
}
};
let content: any;
onMount(() => {
if (!!content) {
content.onclick = function () {
document.execCommand('copy');
};
content.addEventListener('copy', function (event: any) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData('text/plain', content.textContent);
console.log(event.clipboardData.getData('text'));
}
});
}
});
const clickHandler = async (event: any) => {
const range = document.createRange();
range.selectNode(content);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
document.execCommand('copy');
await sleep(300);
window.getSelection()?.removeAllRanges();
console.log({ caller: 'SystemInfo / clickHandler', event, range });
};
return (
<>
<ListItem>
@ -79,7 +117,9 @@ const SystemInfo: Component<Props> = (props) => {
closeHandler={() => setOpen(false)}
title='System info'
>
<div>
<div onclick={clickHandler}>
<div class={style.clickPrompt}>Click to copy to clipboard</div>
<div ref={content}>
<p>Platform: {window.Capacitor.platform}</p>
<p>User agent: {navigator.userAgent}</p>
<p>App release: {import.meta.env.VITE_GIT_COMMIT_HASH}</p>
@ -96,6 +136,7 @@ const SystemInfo: Component<Props> = (props) => {
</ul>
</div>
</Show>
</div>
</Dialog>
</Show>
</>