Polish UI

This commit is contained in:
BorysLevytskyi
2023-05-14 09:21:23 +02:00
parent cbb2fff5e8
commit 636fbb677a
2 changed files with 7 additions and 4 deletions

View File

@@ -37,10 +37,11 @@ code { font-size: 1.2em; font-weight: bold; }
.result .content { padding-left: 10px}
.result .cur { margin-right: 5px; }
.input-string { margin-right: 5px;}
.hashLink { text-decoration: none; margin-left: 5px; visibility: hidden; margin-right: 0; padding: 0; text-decoration: none; }
.input-string { margin-right: 10px;}
.hashLink { text-decoration: none; margin-left: 8px; visibility: hidden; margin-right: 0; padding: 0; text-decoration: none; }
a.hashLink { font-size: 1.1em;}
.hashLink:hover { text-decoration: underline; margin-left: 5px; background: none; }
.hashLink .icon { margin: 0;}
.hashLink:hover { text-decoration: underline; background: none; }
.result:hover .hashLink { visibility: visible }
.expression .label { font-weight: bold; padding-right: 5px; text-align: right; }

View File

@@ -20,12 +20,13 @@ const DisplayResultView: React.FunctionComponent<DisplayResultProps> = (props) =
const appState = props.appState;
const link = window.location.origin + window.location.pathname + '#' + props.inputHash;
const [copied, setCopied] = useState(false);
const copiedText = copied ? 'copied' : '';
async function copyLink(e: any) {
try {
await navigator.clipboard.writeText(link);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
setTimeout(() => setCopied(false), 1000);
return false;
} catch (err) {
loglevel.debug(err);
@@ -40,6 +41,7 @@ const DisplayResultView: React.FunctionComponent<DisplayResultProps> = (props) =
<a className="hashLink" title="Copy link link for this expression" onClick={async (e) => {return await copyLink(e)}} href={link}>
<FontAwesomeIcon className="icon" icon={copied ? faCheck : faLink} size="xs" />
</a>
<span className='soft hashLink'>{copiedText}</span>
<button className="hashLink" title="Remove this result" onClick={() => appState.removeResult(props.resultIndex)}>
<FontAwesomeIcon className="icon" icon={faTrashAlt} size="xs" />
</button>