diff --git a/src/mqueryfront/src/App.css b/src/mqueryfront/src/App.css index a9c85d7c..b97b9141 100644 --- a/src/mqueryfront/src/App.css +++ b/src/mqueryfront/src/App.css @@ -10,6 +10,23 @@ .mquery-scroll-matches td { word-break: break-all; + font-family: "monospace" +} + +.mquery-scroll-matches td i { + visibility: hidden; +} + +.mquery-scroll-matches td:hover i { + visibility: visible; +} + +.mquery-scroll-matches td i:hover { + color: var(--blue); +} + +.copyable-item { + cursor: pointer; } .is-collapsed { diff --git a/src/mqueryfront/src/QueryResultsStatus.js b/src/mqueryfront/src/QueryResultsStatus.js index 85ec701e..8ec24702 100644 --- a/src/mqueryfront/src/QueryResultsStatus.js +++ b/src/mqueryfront/src/QueryResultsStatus.js @@ -8,6 +8,17 @@ import { CopyToClipboard } from "react-copy-to-clipboard"; import ActionCancel from "./components/ActionCancel"; function MatchItem(props) { + const download_url = + API_URL + + "/download?job_id=" + + encodeURIComponent(props.qhash) + + "&ordinal=" + + encodeURIComponent(props.ordinal) + + "&file_path=" + + encodeURIComponent(props.file); + + const path = require("path"); + const metadata = Object.values(props.meta) .filter((v) => !v.hidden) .map((v) => ( @@ -19,20 +30,6 @@ function MatchItem(props) { )); - let hashes = Object.values(props.meta) - .filter((v) => v.hidden) - .map((v) => ( - -
- {v.display_text} -
-
- )); - let matches = ; if (props.matches) { matches = Object.values(props.matches).map((v) => ( @@ -44,35 +41,54 @@ function MatchItem(props) { )); } - const download_url = - API_URL + - "/download?job_id=" + - encodeURIComponent(props.qhash) + - "&ordinal=" + - encodeURIComponent(props.ordinal) + - "&file_path=" + - encodeURIComponent(props.file); - - const path = require("path"); - return (
- +
+ {props.meta.sha256.display_text} + + + + + + + + + + +
+ {path.basename(props.file)} - + + + + + + + {matches} + {metadata}
- {matches} - {metadata}
- {props.collapsed ? {hashes} : null} ); } @@ -219,11 +235,6 @@ class QueryResultsStatus extends Component { Matches - {this.props.collapsed && ( - - SHA256 - - )} {matches}