Skip to content

Commit ef0b4c4

Browse files
edwardhorsfordedwardhorsford
authored
Image reading v1 - WIP (#40)
* WIP dark mode styles * Add initial image reading pages * Set dark mode to off by default * Get workflow working with real participants * Add status utility functions * Add symptoms generation * Add mammogram diagrams from Louise * Show images requested on assessment tab
1 parent 2c7202a commit ef0b4c4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+3429
-347
lines changed

‎app/assets/images/mammogram-diagrams/lcc.png‎

59.1 KB
Loading

‎app/assets/images/mammogram-diagrams/lmlo.png‎

76.8 KB
Loading

‎app/assets/images/mammogram-diagrams/rcc.png‎

74.5 KB
Loading

‎app/assets/images/mammogram-diagrams/rmlo.png‎

79.5 KB
Loading

‎app/assets/sass/_misc.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
width: 75px;
44
height:100px;
55

6+
outline: 1px solid rgba(255, 255, 255, 0.2);
7+
68
p {
79
color: white;
810
margin-left: 5px;
@@ -18,3 +20,7 @@
1820
-webkit-transform: scaleX(-1);
1921
transform: scaleX(-1);
2022
}
23+
24+
.app-button-full-width {
25+
width: 100%;
26+
}

‎app/assets/sass/_typography.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ h3 {
1414
.app-text-grey {
1515
color: $nhsuk-secondary-text-color;
1616
}
17+
18+
.nhsuk-link--no-visited-state a {
19+
@extend .nhsuk-link--no-visited-state;
20+
}

‎app/assets/sass/components/_dark-mode.scss‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
$app-dark-mode-blue: #348de0;
2+
$app-dark-mode-background: #1C1C1C;
3+
$app-dark-mode-background-secondary: tint($app-dark-mode-background, 10%);
4+
$app-dark-mode-white: #E8E8E8;
5+
$app-dark-mode-text-colour: $app-dark-mode-white;
6+
$app-dark-mode-text-colour-secondary: shade($app-dark-mode-text-colour, 30%);
7+
8+
// Links
9+
$app-dark-mode-link-color: $app-dark-mode-blue;
10+
$app-dark-mode-link-hover-color: tint($color_nhsuk-dark-pink, 50%);
11+
$app-dark-mode-link-active-color: shade($app-dark-mode-link-color, 20%);
12+
$app-dark-mode-link-visited-color: tint($color_nhsuk-purple, 50%);
13+
14+
// Paul's colours
15+
$app-dark-mode-link-color: #348de0;
16+
$app-dark-mode-link-hover-color: #ffeb3b;
17+
$app-dark-mode-link-active-color: #000;
18+
$app-dark-mode-link-visited-color: #89b;
19+
20+
21+
@mixin app-dark-mode-focused-text {
22+
background-color: $nhsuk-focus-color;
23+
box-shadow:
24+
0 -2px $nhsuk-focus-color,
25+
0 $nhsuk-focus-width $nhsuk-focus-text-color;
26+
color: $nhsuk-focus-text-color;
27+
// When colours are overridden, for example when users have a dark mode,
28+
// backgrounds and box-shadows disappear, so we need to ensure there's a
29+
// transparent outline which will be set to a visible colour.
30+
outline: $nhsuk-focus-width solid transparent;
31+
// When link is focussed, hide the default underline since the
32+
// box shadow adds the "underline"
33+
text-decoration: none;
34+
}
35+
36+
@mixin app-dark-mode-link-style-default {
37+
color: $app-dark-mode-blue;
38+
39+
&:visited {
40+
color: $app-dark-mode-link-visited-color;
41+
}
42+
43+
&:hover {
44+
color: $app-dark-mode-link-hover-color;
45+
text-decoration: none;
46+
}
47+
48+
&:focus {
49+
@include nhsuk-focused-text();
50+
51+
&:hover {
52+
text-decoration: none;
53+
}
54+
55+
&:visited {
56+
color: $nhsuk-focus-text-color;
57+
}
58+
59+
.nhsuk-icon {
60+
fill: $nhsuk-focus-text-color;
61+
}
62+
}
63+
64+
&:active {
65+
color: $app-dark-mode-link-active-color;
66+
}
67+
}
68+
69+
.app-dark-mode {
70+
71+
background: $app-dark-mode-background;
72+
color: $app-dark-mode-text-colour;
73+
74+
// Text colour
75+
.nhsuk-fieldset__legend {
76+
color: $app-dark-mode-text-colour;
77+
}
78+
79+
// Secondary text colour
80+
.nhsuk-hint,
81+
.app-text-grey,
82+
.nhsuk-caption-l,
83+
.nhsuk-caption-m,
84+
.nhsuk-caption-s,
85+
.app-suppress-link-styles * {
86+
color: $app-dark-mode-text-colour-secondary;
87+
}
88+
89+
// Links and link type things
90+
a, .app-secondary-navigation__link {
91+
@include app-dark-mode-link-style-default;
92+
93+
&:focus {
94+
@include app-dark-mode-focused-text;
95+
}
96+
}
97+
98+
.app-secondary-navigation__link:link {
99+
color: $app-dark-mode-link-color;
100+
&:focus {
101+
@include app-dark-mode-focused-text;
102+
}
103+
}
104+
105+
.app-secondary-navigation__list-item--current {
106+
border-color: $app-dark-mode-white;
107+
}
108+
109+
.app-secondary-navigation__list-item--current .app-secondary-navigation__link:link,
110+
.app-secondary-navigation__list-item--current .app-secondary-navigation__link:visited {
111+
color: $app-dark-mode-text-colour;
112+
&:focus {
113+
@include app-dark-mode-focused-text;
114+
}
115+
}
116+
117+
.nhsuk-link--no-visited-state {
118+
color: $app-dark-mode-link-color;
119+
&:focus {
120+
@include app-dark-mode-focused-text;
121+
}
122+
}
123+
124+
125+
126+
.nhsuk-back-link {
127+
.nhsuk-icon__chevron-left {
128+
fill: $app-dark-mode-link-color;
129+
}
130+
}
131+
.nhsuk-back-link__link {
132+
133+
&:visited {
134+
color: $app-dark-mode-link-color;
135+
}
136+
137+
&:hover {
138+
color: $app-dark-mode-link-hover-color;
139+
text-decoration: underline;
140+
141+
.nhsuk-icon__chevron-left {
142+
fill: $app-dark-mode-link-hover-color;
143+
}
144+
}
145+
146+
&:focus {
147+
.nhsuk-icon__chevron-left {
148+
fill: $nhsuk-focus-text-color;
149+
}
150+
}
151+
}
152+
153+
.nhsuk-button {
154+
&:link, &:visited, &:active, &:hover {
155+
color: white;
156+
}
157+
}
158+
159+
.nhsuk-header {
160+
a {
161+
color: $app-dark-mode-text-colour;
162+
163+
&:visited {
164+
color: $app-dark-mode-text-colour;
165+
}
166+
&:focus {
167+
@include app-dark-mode-focused-text;
168+
}
169+
170+
}
171+
// background: $app-dark-mode-background-secondary;
172+
color: $app-dark-mode-text-colour;
173+
174+
.nhsuk-header__account, .nhsuk-header__account-item {
175+
// background: $app-dark-mode-background;
176+
outline: 1px solid rgba(255, 255, 255, 0.2);
177+
}
178+
}
179+
180+
.app-count {
181+
background: $app-dark-mode-background-secondary;
182+
color: $app-dark-mode-text-colour;
183+
}
184+
// Component overrides
185+
.nhsuk-card {
186+
background: $app-dark-mode-background-secondary;
187+
color: $app-dark-mode-text-colour;
188+
189+
.nhsuk-card__heading--feature {
190+
// background: $app-dark-mode-blue;
191+
color: $app-dark-mode-text-colour;
192+
}
193+
}
194+
195+
.nhsuk-footer, .nhsuk-footer-container {
196+
background: $app-dark-mode-background-secondary;
197+
color: $app-dark-mode-text-colour;
198+
199+
.nhsuk-footer__list-item-link, .nhsuk-footer__copyright {
200+
color: $app-dark-mode-text-colour-secondary;
201+
}
202+
}
203+
204+
.nhsuk-radios {
205+
.nhsuk-radios__input + .nhsuk-radios__label::before {
206+
border-color: $app-dark-mode-white;
207+
background-color: $app-dark-mode-background-secondary;
208+
}
209+
.nhsuk-radios__input + .nhsuk-radios__label::after {
210+
background: $app-dark-mode-white;
211+
border: 10px solid $app-dark-mode-white;
212+
}
213+
}
214+
215+
.nhsuk-checkboxes {
216+
.nhsuk-checkboxes__input + .nhsuk-checkboxes__label::before {
217+
// border-color: $app-dark-mode-white;
218+
// background-color: $app-dark-mode-background-secondary;
219+
background: $app-dark-mode-background-secondary;
220+
border-color: $app-dark-mode-text-colour-secondary;
221+
}
222+
.nhsuk-checkboxes__input + .nhsuk-checkboxes__label::after {
223+
// background: $app-dark-mode-white;
224+
// border: 10px solid $app-dark-mode-white;
225+
}
226+
}
227+
228+
.nhsuk-checkboxes__conditional {
229+
border-left-color: $app-dark-mode-text-colour-secondary;
230+
}
231+
232+
.app-notification-banner__content {
233+
color: $app-dark-mode-text-colour;
234+
background: $app-dark-mode-background-secondary;
235+
}
236+
}
237+
238+
html:has(.app-dark-mode) {
239+
background-color: $app-dark-mode-background-secondary;
240+
background: $app-dark-mode-background-secondary;
241+
color: $app-dark-mode-text-colour;
242+
}

‎app/assets/sass/components/_reading.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// app/assets/sass/components/_reading.scss
2+
3+
.app-reading-status {
4+
background-color: shade($color_nhsuk-blue, 40%);
5+
color: $color_nhsuk-white;
6+
a {
7+
color: $color_nhsuk-white;
8+
}
9+
padding: 10px;
10+
}
11+
12+
.app-reading-status {
13+
background-color: shade($color_nhsuk-blue, 40%);
14+
color: $color_nhsuk-white;
15+
padding: 8px 0;
16+
border-bottom: 1px solid #d8dde0;
17+
18+
&__row {
19+
display: flex;
20+
flex-wrap: wrap;
21+
gap: 32px;
22+
align-items: center;
23+
24+
& + & {
25+
margin-top: 8px;
26+
padding-top: 8px;
27+
border-top: 1px solid rgba(255, 255, 255, 0.2);
28+
}
29+
}
30+
31+
&__col {
32+
display: flex;
33+
gap: 8px;
34+
align-items: center;
35+
}
36+
37+
&__participant {
38+
display: flex;
39+
flex-wrap: wrap;
40+
gap: 24px;
41+
width: 100%;
42+
}
43+
44+
&__detail {
45+
display: flex;
46+
gap: 8px;
47+
align-items: center;
48+
49+
strong {
50+
font-weight: 600;
51+
opacity: 0.9;
52+
}
53+
}
54+
}

‎app/assets/sass/main.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import 'node_modules/nhsuk-frontend/packages/nhsuk';
33

44
// Components that are not in the NHS.UK frontend library
5+
@import 'components/dark-mode';
56
@import 'components/list-border';
67
@import 'components/related-nav';
78
@import 'components/header';
@@ -10,6 +11,7 @@
1011
@import 'components/count';
1112
@import 'components/notification-banner';
1213
@import 'components/status';
14+
@import 'components/reading';
1315

1416
@import 'components/overrides';
1517

‎app/data/session-data-defaults.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ try {
5252
}
5353

5454
module.exports = {
55+
darkMode: 'false',
56+
confirmNormalResults: 'false',
5557
users,
5658
currentUser: users[0],
5759
breastScreeningUnits,

0 commit comments

Comments
 (0)