Skip to content

Commit

Permalink
feat: Literature higlight in dark mode (#407) (#415)
Browse files Browse the repository at this point in the history
  • Loading branch information
gromdimon authored Jan 26, 2024
1 parent 57f6938 commit 2ec6845
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/GeneDetails/ConditionsCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ watch(

<template #default="{ items }">
<template v-for="item in items" :key="item.raw">
<v-sheet class="rounded-l bg-grey-lighten-2 px-3 py-2 mt-3">
<v-sheet class="rounded-l px-3 py-2 mt-3" color="background">
<div class="text-h6">
{{ item.raw.diseaseName }}
</div>
Expand Down Expand Up @@ -514,7 +514,7 @@ watch(

<template #default="{ items }">
<template v-for="item in items" :key="item.raw.panel.name">
<v-sheet class="rounded-l bg-grey-lighten-2 px-3 py-2 mt-3">
<v-sheet class="rounded-l px-3 py-2 mt-3" color="background">
<div class="text-h6">
{{ item.raw.panel.name }}
<small> (v{{ item.raw.panel.version }}) </small>
Expand Down
16 changes: 14 additions & 2 deletions frontend/src/components/GeneDetails/LiteratureCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,10 @@ const TYPE_TO_RAW_COLOR_DARK: { [key: string]: string } = {
}

/** Mapping from annotation type to raw CSS color. */
const TYPE_TO_RAW_COLOR =
theme.global.current.value.dark === true ? TYPE_TO_RAW_COLOR_DARK : TYPE_TO_RAW_COLOR_LIGHT
let TYPE_TO_RAW_COLOR =
theme.global.current.value.dark === true
? { ...TYPE_TO_RAW_COLOR_DARK }
: { ...TYPE_TO_RAW_COLOR_LIGHT }

/** Helper that returns `Annotation.text` if name is just a number or empty. */
const annotationName = (annotation: Annotation) => {
Expand Down Expand Up @@ -174,6 +176,16 @@ const highlight = (text: string, annotations: Annotation[], baseOffset: number):
onMounted(loadPubTator)
// Load information when the gene symbol changes.
watch(() => props.geneInfo?.hgnc?.symbol, loadPubTator)
// Reload template when theme changes.
watch(
() => theme.global.current.value,
() => {
TYPE_TO_RAW_COLOR =
theme.global.current.value.dark === true
? { ...TYPE_TO_RAW_COLOR_DARK }
: { ...TYPE_TO_RAW_COLOR_LIGHT }
}
)
</script>

<template>
Expand Down

0 comments on commit 2ec6845

Please sign in to comment.