Skip to content

Commit 098e141

Browse files
PaulHaxPaulHax
committed
fix(theme): improve viewer chrome contrast
1 parent 5b96787 commit 098e141

16 files changed

Lines changed: 65 additions & 40 deletions

‎src/components/CineViewer.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@
77
@focusin="hover = true"
88
@focusout="hover = false"
99
>
10-
<div class="vtk-gutter mt-1">
11-
<v-btn dark icon size="medium" variant="text" @click="resetCamera">
12-
<v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
10+
<div class="vtk-gutter">
11+
<v-btn
12+
color="white"
13+
icon
14+
size="medium"
15+
variant="text"
16+
@click="resetCamera"
17+
>
18+
<v-icon size="medium" class="py-1 view-control-icon"
19+
>mdi-camera-flip-outline</v-icon
20+
>
1321
<v-tooltip
1422
location="right"
1523
activator="parent"

‎src/components/ControlButton.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<v-btn
33
variant="text"
44
:rounded="0"
5-
dark
65
:height="sizeV"
76
:width="sizeV"
87
:min-width="sizeV"

‎src/components/ControlsStrip.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,7 @@ const { count: msgCount, badgeColor: msgBadgeColor } = useMessageBubble();
9090
</script>
9191

9292
<template>
93-
<div
94-
id="tools-strip"
95-
class="bg-grey-darken-4 d-flex flex-column align-center"
96-
>
93+
<div id="tools-strip" class="bg-surface d-flex flex-column align-center">
9794
<control-button
9895
size="40"
9996
icon="mdi-folder-open"
@@ -175,14 +172,14 @@ const { count: msgCount, badgeColor: msgBadgeColor } = useMessageBubble();
175172
<style src="@/src/components/styles/utils.css"></style>
176173
<style scoped>
177174
#tools-strip {
178-
border-left: 1px solid #212121;
175+
border-left: 1px solid rgba(var(--v-theme-on-surface), 0.12);
179176
flex: 0 0 40px;
180177
}
181178
182179
.tool-separator {
183180
width: 75%;
184181
height: 1px;
185182
border: none;
186-
border-top: 1px solid rgb(112, 112, 112);
183+
border-top: 1px solid rgba(var(--v-theme-on-surface), 0.3);
187184
}
188185
</style>

‎src/components/ControlsStripTools.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,8 @@ export default defineComponent({
244244

245245
<style>
246246
.tool-btn-selected {
247-
background-color: rgb(var(--v-theme-selection-bg-color));
247+
background-color: rgb(var(--v-theme-primary-darken-1));
248+
color: rgb(var(--v-theme-on-primary-darken-1));
248249
}
249250
</style>
250251

@@ -258,7 +259,7 @@ export default defineComponent({
258259
width: 75%;
259260
height: 1px;
260261
border: none;
261-
border-top: 1px solid rgb(112, 112, 112);
262+
border-top: 1px solid rgba(var(--v-theme-on-surface), 0.3);
262263
}
263264
264265
.popup-menu {

‎src/components/DicomQuickInfoButton.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,21 @@ const dicomInfo = computed(() => {
4444
<v-menu
4545
open-on-hover
4646
location="bottom left"
47-
left
48-
nudge-left="10"
49-
dark
5047
v-if="dicomInfo !== null"
5148
max-width="300px"
5249
>
5350
<template v-slot:activator="{ props }">
5451
<v-icon
5552
v-bind="props"
56-
dark
53+
color="white"
5754
size="medium"
58-
class="pointer-events-all"
55+
class="pointer-events-all dicom-info-trigger"
5956
@click.stop
6057
>
6158
mdi-information
6259
</v-icon>
6360
</template>
64-
<v-list class="bg-grey-darken-3">
61+
<v-list class="dicom-info-menu">
6562
<v-list-item>
6663
<v-list-item-title class="font-weight-bold">
6764
PATIENT / CASE
@@ -92,3 +89,13 @@ const dicomInfo = computed(() => {
9289
</template>
9390

9491
<style scoped src="@/src/components/styles/utils.css"></style>
92+
<style scoped>
93+
.dicom-info-menu {
94+
border: 1px solid rgba(var(--v-theme-on-surface), 0.3);
95+
}
96+
97+
.dicom-info-trigger {
98+
text-shadow: none;
99+
letter-spacing: normal;
100+
}
101+
</style>

‎src/components/ImageListCard.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<v-hover v-slot="{ isHovering, props }">
33
<v-card
44
:disabled="disabled"
5+
class="image-list-card"
56
variant="outlined"
67
:ripple="!disabled"
78
:class="{
@@ -48,6 +49,10 @@
4849
</template>
4950

5051
<style scoped>
52+
.image-list-card {
53+
border-color: rgba(var(--v-theme-on-surface), 0.2);
54+
}
55+
5156
.image-list-card-active {
5257
background-color: rgb(var(--v-theme-selection-bg-color));
5358
border-color: rgb(var(--v-theme-selection-border-color));

‎src/components/ModulePanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export default defineComponent({
170170
flex: 0 2;
171171
/* roughly match vuetify's dark/light transition */
172172
transition: border-bottom 0.3s;
173-
border-bottom: 2px solid rgb(var(--v-theme-on-surface-variant));
173+
border-bottom: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
174174
}
175175
176176
#close-btn {

‎src/components/PatientStudyVolumeBrowser.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ export default defineComponent({
349349
.volume-card {
350350
padding: 8px;
351351
cursor: pointer;
352+
border-color: rgba(var(--v-theme-on-surface), 0.2);
352353
}
353354
354355
.volume-card-active {

‎src/components/SliceViewer.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@
77
@focusin="hover = true"
88
@focusout="hover = false"
99
>
10-
<div class="vtk-gutter mt-1">
11-
<v-btn dark icon size="medium" variant="text" @click="resetCamera">
12-
<v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
10+
<div class="vtk-gutter">
11+
<v-btn
12+
color="white"
13+
icon
14+
size="medium"
15+
variant="text"
16+
@click="resetCamera"
17+
>
18+
<v-icon size="medium" class="py-1 view-control-icon"
19+
>mdi-camera-flip-outline</v-icon
20+
>
1321
<v-tooltip
1422
location="right"
1523
activator="parent"

‎src/components/ViewTypeSwitcher.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function updateView(newViewName: string) {
4141
hide-details
4242
variant="solo"
4343
class="pointer-events-all view-type-select"
44+
aria-label="View type"
4445
></v-select>
4546
</template>
4647

@@ -49,6 +50,9 @@ function updateView(newViewName: string) {
4950
max-width: 90px;
5051
font-size: 0.8125rem;
5152
margin-left: auto;
53+
color: rgb(var(--v-theme-on-surface));
54+
text-shadow: none;
55+
letter-spacing: normal;
5256
}
5357
5458
.view-type-select :deep(.v-field__input) {

0 commit comments

Comments
 (0)