Merge pull request #13001 from overleaf/td-history-version-hover-style

History migration: Use green selected style when hovering over selected version

GitOrigin-RevId: 7771ce64d719c3d0e5264dfd2fbbf52f5b519213
This commit is contained in:
Alf Eaton 2023-05-09 15:45:37 +01:00 committed by Copybot
parent 4e6749966e
commit 0ffa75979f
3 changed files with 22 additions and 9 deletions

View file

@ -42,7 +42,7 @@ function HistoryVersion({ update, faded }: HistoryEntryProps) {
fromVTimestamp={update.meta.end_ts}
toVTimestamp={update.meta.end_ts}
selected={selected}
selectable={!faded}
selectable={!faded && (selection.comparing || !selected)}
>
<div className="history-version-main-details">
<time className="history-version-metadata-time">

View file

@ -9,6 +9,7 @@ import { useUserContext } from '../../../../shared/context/user-context'
import { isVersionSelected } from '../../utils/history-details'
import { getVersionWithLabels, isPseudoLabel } from '../../utils/label'
import { formatTime, isoToUnix } from '../../../utils/format-date'
import { Version } from '../../services/types/update'
function LabelsList() {
const { t } = useTranslation()
@ -20,10 +21,18 @@ function LabelsList() {
[labels]
)
const selectedVersions = new Set<Version>(
Array.from(versionWithLabels.values(), value => value.version).filter(
version => isVersionSelected(selection, version)
)
)
const singleVersionSelected = selectedVersions.size === 1
return (
<>
{versionWithLabels.map(({ version, labels }) => {
const selected = isVersionSelected(selection, version)
const selected = selectedVersions.has(version)
// first label
const fromVTimestamp = isoToUnix(labels[labels.length - 1].created_at)
@ -38,7 +47,7 @@ function LabelsList() {
fromVTimestamp={fromVTimestamp}
toVTimestamp={toVTimestamp}
selected={selected}
selectable
selectable={!(singleVersionSelected && selected)}
>
<div className="history-version-main-details">
{labels.map(label => (

View file

@ -99,15 +99,19 @@ history-root {
padding-top: 8px;
padding-bottom: 8px;
&.history-version-selectable:hover {
&.history-version-selectable {
cursor: pointer;
&:hover {
background-color: @neutral-10;
}
}
.history-version-selected {
&.history-version-selected,
&.history-version-selected.history-version-selectable:hover {
background-color: @green-10;
}
}
.history-version-metadata-time {
display: block;