diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 6af033f66..4386308c8 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -5,6 +5,7 @@ Version History v6.3.0 ------ +* Extend size of individual log message display ``_ * Add RA, Dec and Rotator parameters to the ATDome component ``_ v6.2.0 diff --git a/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.jsx b/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.jsx index 5c5d94b97..3932e076b 100644 --- a/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.jsx +++ b/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.jsx @@ -17,15 +17,42 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import React, { useState, memo } from 'react'; +import React, { useState, useEffect, memo } from 'react'; import PropTypes from 'prop-types'; -import DebugIcon from '../../icons/CSCExpanded/DebugIcon/DebugIcon'; -import InfoIcon from '../../icons/CSCExpanded/InfoIcon/InfoIcon'; -import WarningIcon from '../../icons/CSCExpanded/WarningIcon/WarningIcon'; -import ErrorIcon from '../../icons/CSCExpanded/ErrorIcon/ErrorIcon'; -import Button from '../../GeneralPurpose/Button/Button'; +import Button from 'components/GeneralPurpose/Button/Button'; +import DebugIcon from 'components/icons/CSCExpanded/DebugIcon/DebugIcon'; +import InfoIcon from 'components/icons/CSCExpanded/InfoIcon/InfoIcon'; +import WarningIcon from 'components/icons/CSCExpanded/WarningIcon/WarningIcon'; +import ErrorIcon from 'components/icons/CSCExpanded/ErrorIcon/ErrorIcon'; +import CopyIcon from 'components/icons/CopyIcon/CopyIcon'; import styles from './LogMessageDisplay.module.css'; -import { formatTimestamp } from '../../../Utils'; +import { formatTimestamp, copyToClipboard } from 'Utils'; + +function CopyToClipboard({ text }) { + const [copied, setCopied] = useState(false); + + useEffect(() => { + let timeout; + if (copied) { + timeout = setTimeout(() => { + setCopied(false); + }, 2000); + } + return () => clearTimeout(timeout); + }, [copied]); + + const handleCopyToClipboard = () => { + copyToClipboard(text); + setCopied(true); + }; + + return ( +
+ {copied && Copied to clipboard} + +
+ ); +} function LogMessageDisplay({ logMessageData, clearCSCLogMessages }) { const [messageFilters, setMessageFilters] = useState({ @@ -40,6 +67,7 @@ function LogMessageDisplay({ logMessageData, clearCSCLogMessages }) { filters[key].value = value; setMessageFilters({ ...filters }); }; + return (
@@ -77,6 +105,9 @@ function LogMessageDisplay({ logMessageData, clearCSCLogMessages }) { if (msg.level.value === 20) icon = ; if (msg.level.value === 30) icon = ; if (msg.level.value === 40) icon = ; + + const copyToClipboardText = + msg.message?.value + (msg.traceback?.value ? '\n\n' + msg.traceback?.value : ''); return (
{icon}
@@ -86,6 +117,7 @@ function LogMessageDisplay({ logMessageData, clearCSCLogMessages }) {
{msg.ScriptID &&
Script {msg.ScriptID?.value}
} +
{msg.message?.value}
{msg.traceback.value}
diff --git a/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.module.css b/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.module.css index 33492f654..6b637829e 100644 --- a/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.module.css +++ b/love/src/components/GeneralPurpose/LogMessageDisplay/LogMessageDisplay.module.css @@ -20,7 +20,6 @@ this program. If not, see . .log { background: var(--second-tertiary-background-color); border-radius: 5px; - overflow-y: scroll; } .logContainerTopBar { @@ -73,6 +72,7 @@ this program. If not, see . } .messageText { + position: relative; max-width: 50vw; padding-bottom: 0.5em; } @@ -101,3 +101,23 @@ this program. If not, see . .preText { white-space: pre-wrap; } + +.copyToClipboardBtn { + display: flex; + align-items: center; + gap: var(--small-padding); + position: absolute; + top: 0; + right: 0; +} + +.copyToClipboardBtn > svg { + cursor: pointer; + width: 1em; + height: 1em; +} + +.copyToClipboardBtn:hover > svg { + fill: var(--default-active-background-color); + stroke: var(--default-active-background-color); +}