Skip to content

Commit 2afdf91

Browse files
Nirajn2311Sembauke
Nirajn2311
and
Sembauke
authored
feat: customise html styles (#1567)
* chore: add collection package * feat: customise html styles * fix: simplify css mastcher Co-authored-by: Sem Bauke <[email protected]> --------- Co-authored-by: Sem Bauke <[email protected]>
1 parent c8a0f21 commit 2afdf91

File tree

13 files changed

+180
-115
lines changed

13 files changed

+180
-115
lines changed

‎mobile-app/lib/ui/views/learn/block/templates/dialogue/dialogue_view.dart‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:flutter_scroll_shadow/flutter_scroll_shadow.dart';
34
import 'package:freecodecamp/models/learn/curriculum_model.dart';
45
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
@@ -50,9 +51,13 @@ class BlockDialogueView extends StatelessWidget {
5051
children: [
5152
...parser.parse(
5253
'<p>${block.description.join(' ')}</p>',
53-
fontColor: FccColors.gray05,
54-
removeParagraphMargin: true,
5554
isSelectable: false,
55+
customStyles: {
56+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
57+
color: FccColors.gray05,
58+
),
59+
'p': Style(margin: Margins.zero),
60+
},
5661
),
5762
_buildToggleButton(context),
5863
_buildChallengeList(context, structure, dialogueHeaders),

‎mobile-app/lib/ui/views/learn/block/templates/grid/grid_view.dart‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:flutter_scroll_shadow/flutter_scroll_shadow.dart';
34
import 'package:freecodecamp/models/learn/curriculum_model.dart';
45
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
@@ -83,9 +84,13 @@ class BlockGridView extends StatelessWidget {
8384
),
8485
...parser.parse(
8586
'<p>${block.description.join(' ')}</p>',
86-
fontColor: FccColors.gray05,
87-
removeParagraphMargin: true,
8887
isSelectable: false,
88+
customStyles: {
89+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
90+
color: FccColors.gray05,
91+
),
92+
'p': Style(margin: Margins.zero),
93+
},
8994
),
9095
Row(
9196
children: [

‎mobile-app/lib/ui/views/learn/block/templates/link/link_view.dart‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:freecodecamp/models/learn/curriculum_model.dart';
34
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
45
import 'package:freecodecamp/ui/views/learn/block/block_template_viewmodel.dart';
@@ -55,9 +56,13 @@ class BlockLinkView extends StatelessWidget {
5556
),
5657
...parser.parse(
5758
'<p>${block.description.join(' ')}</p>',
58-
fontColor: FccColors.gray05,
59-
removeParagraphMargin: true,
6059
isSelectable: false,
60+
customStyles: {
61+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
62+
color: FccColors.gray05,
63+
),
64+
'p': Style(margin: Margins.zero),
65+
},
6166
),
6267
Row(
6368
children: [

‎mobile-app/lib/ui/views/learn/block/templates/list/list_view.dart‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:freecodecamp/models/learn/curriculum_model.dart';
34
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
45
import 'package:freecodecamp/ui/views/learn/block/block_template_viewmodel.dart';
@@ -77,9 +78,13 @@ class BlockListView extends StatelessWidget {
7778
),
7879
...parser.parse(
7980
'<p>${block.description.join(' ')}</p>',
80-
fontColor: FccColors.gray05,
81-
removeParagraphMargin: true,
8281
isSelectable: false,
82+
customStyles: {
83+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
84+
color: FccColors.gray05,
85+
),
86+
'p': Style(margin: Margins.zero),
87+
},
8388
),
8489
Row(
8590
children: [

‎mobile-app/lib/ui/views/learn/challenge/challenge_view.dart‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'dart:developer';
22

33
import 'package:flutter/material.dart';
4+
import 'package:flutter_html/flutter_html.dart';
45
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
56
import 'package:freecodecamp/enums/panel_type.dart';
67
import 'package:freecodecamp/models/learn/challenge_model.dart';
@@ -497,8 +498,12 @@ class ChallengeView extends StatelessWidget {
497498
final widgets = parser.parse(
498499
test.instruction,
499500
isSelectable: true,
500-
removeParagraphMargin: true,
501-
fontColor: FccColors.gray00,
501+
customStyles: {
502+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
503+
color: FccColors.gray00,
504+
),
505+
'p': Style(margin: Margins.zero),
506+
},
502507
);
503508
return ExpansionTile(
504509
backgroundColor: FccColors.gray90,

‎mobile-app/lib/ui/views/learn/challenge/templates/english/english_view.dart‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:freecodecamp/models/learn/challenge_model.dart';
34
import 'package:freecodecamp/models/learn/curriculum_model.dart';
45
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
@@ -45,11 +46,17 @@ class EnglishView extends StatelessWidget {
4546
children: [
4647
...parser.parse(
4748
challenge.instructions,
48-
fontColor: FccColors.gray05,
49+
customStyles: {
50+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
51+
Style(color: FccColors.gray05),
52+
},
4953
),
5054
...parser.parse(
5155
challenge.description,
52-
fontColor: FccColors.gray05,
56+
customStyles: {
57+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
58+
Style(color: FccColors.gray05),
59+
},
5360
),
5461
],
5562
),

‎mobile-app/lib/ui/views/learn/challenge/templates/quiz/quiz_view.dart‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:freecodecamp/extensions/i18n_extension.dart';
34
import 'package:freecodecamp/models/learn/challenge_model.dart';
45
import 'package:freecodecamp/models/learn/curriculum_model.dart';
@@ -85,11 +86,17 @@ class QuizView extends StatelessWidget {
8586
children: [
8687
...parser.parse(
8788
challenge.instructions,
88-
fontColor: FccColors.gray05,
89+
customStyles: {
90+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
91+
Style(color: FccColors.gray05),
92+
},
8993
),
9094
...parser.parse(
9195
challenge.description,
92-
fontColor: FccColors.gray05,
96+
customStyles: {
97+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
98+
Style(color: FccColors.gray05),
99+
},
93100
),
94101
],
95102
),

‎mobile-app/lib/ui/views/learn/challenge/templates/review/review_viewmodel.dart‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/widgets.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:freecodecamp/app/app.locator.dart';
34
import 'package:freecodecamp/models/learn/challenge_model.dart';
45
import 'package:freecodecamp/service/learn/learn_service.dart';
@@ -49,12 +50,20 @@ class ReviewViewmodel extends BaseViewModel {
4950

5051
setParsedInstructions = parser.parse(
5152
challenge.instructions,
52-
fontColor: FccColors.gray05,
53+
customStyles: {
54+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
55+
color: FccColors.gray05,
56+
),
57+
},
5358
);
5459

5560
setParsedDescription = parser.parse(
5661
challenge.description,
57-
fontColor: FccColors.gray05,
62+
customStyles: {
63+
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
64+
color: FccColors.gray05,
65+
),
66+
},
5867
);
5968
}
6069
}

‎mobile-app/lib/ui/views/learn/widgets/assignment_widget.dart‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
3+
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
24
import 'package:freecodecamp/ui/views/news/html_handler/html_handler.dart';
35

46
class Assignment extends StatelessWidget {
@@ -53,7 +55,11 @@ class Assignment extends StatelessWidget {
5355
children: parser.parse(
5456
label,
5557
isSelectable: false,
56-
fontColor: value ? const Color(0xDEFFFFFF) : null,
58+
customStyles: value
59+
? {
60+
'*': Style(color: FccColors.gray00),
61+
}
62+
: {},
5763
),
5864
),
5965
),

‎mobile-app/lib/ui/views/learn/widgets/quiz_widget.dart‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_html/flutter_html.dart';
23
import 'package:freecodecamp/models/learn/challenge_model.dart';
34
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
45
import 'package:freecodecamp/ui/views/learn/widgets/challenge_card.dart';
@@ -81,7 +82,9 @@ class _QuizWidgetState extends State<QuizWidget> {
8182
.map((a) => parser.parse(
8283
a.answer,
8384
isSelectable: false,
84-
removeParagraphMargin: true,
85+
customStyles: {
86+
'p': Style(margin: Margins.zero),
87+
},
8588
))
8689
.toList())
8790
.toList();
@@ -216,7 +219,11 @@ class _QuizWidgetState extends State<QuizWidget> {
216219
feedbackWidgets.addAll(
217220
parser.parse(
218221
feedback,
219-
fontColor: isCorrect == true ? FccColors.green40 : FccColors.red15,
222+
customStyles: {
223+
'*:not(pre):not(code)': Style(
224+
color: isCorrect == true ? FccColors.green40 : FccColors.red15,
225+
),
226+
},
220227
),
221228
);
222229
}

0 commit comments

Comments
 (0)