From 096e43ad7cdd9b9580edcf85ae941eb0b941a9cc Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Wed, 14 Feb 2024 12:06:48 -0600 Subject: [PATCH] Add custom styles for details-based dropdowns (#5545) Adds interaction styles and spacing to the details summary as well as spacing to the contents. An example of how this effects on a details usage on hover at `/language/isolates#complete-example`: Hovering over the summary of a details dropdown Contributes to https://github.com/dart-lang/site-www/issues/5382 which will use `
` as a replacement in some cases. --- src/_sass/core/_base.scss | 26 +++++++ src/content/codelabs/dart-cheatsheet.md | 91 +++++++++++-------------- src/content/language/isolates.md | 85 +++++++++++------------ 3 files changed, 109 insertions(+), 93 deletions(-) diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss index 4780c065e6..a2d061fc10 100644 --- a/src/_sass/core/_base.scss +++ b/src/_sass/core/_base.scss @@ -84,3 +84,29 @@ blockquote { margin: 20px; padding: 10px 20px 0 20px; } + +details { + margin-bottom: 0.75rem; + + > summary { + font-weight: 500; + user-select: none; + + &:hover { + color: $brand-primary; + } + } + + &[open] { + margin-bottom: unset; + + > summary { + margin-bottom: 0.75rem; + } + } + + > :not(:first-child) { + margin-left: 0.75rem; + margin-right: 0.75rem; + } +} diff --git a/src/content/codelabs/dart-cheatsheet.md b/src/content/codelabs/dart-cheatsheet.md index d331c2977e..43dce9a88c 100644 --- a/src/content/codelabs/dart-cheatsheet.md +++ b/src/content/codelabs/dart-cheatsheet.md @@ -67,9 +67,7 @@ void main() { ```
- - Solution for string interpolation example - + Solution for string interpolation example Both `x` and `y` are simple values, and Dart's string interpolation will handle @@ -82,6 +80,7 @@ void main() { return '$x $y'; } ``` +
@@ -149,9 +148,7 @@ void main() { ```
- - Solution for nullable variables example - + Solution for nullable variables example Declare the two variables as `String` followed by `?`. Then, assign `'Jane'` to `name` @@ -161,6 +158,7 @@ void main() { String? name = 'Jane'; String? address; ``` +
@@ -233,9 +231,7 @@ void main() { ```
- - Solution for null-aware operators example - + Solution for null-aware operators example All you need to do in this exercise is replace the `TODO` comments with either `??` or `??=`. @@ -251,6 +247,7 @@ void main() { bar ??= 'a string'; } ``` +
@@ -324,9 +321,7 @@ void main() { ```
- - Solution for conditional property access example - + Solution for conditional property access example If this exercise wanted you to conditionally lowercase a string, you could do it like this: `str?.toLowerCase()`. Use the equivalent @@ -337,6 +332,7 @@ void main() { return str?.toUpperCase(); } ``` +
## Collection literals @@ -455,9 +451,7 @@ void main() { ```
- - Solution for collection literals example - + Solution for collection literals example Add a list, set, or map literal after each equals sign. Remember to specify the types for the empty declarations, @@ -482,6 +476,7 @@ void main() { // Assign this an empty Map of double to int: final anEmptyMapOfDoublesToInts = {}; ``` +
## Arrow syntax @@ -576,9 +571,7 @@ void main() { ```
- - Solution for arrow syntax example - + Solution for arrow syntax example For the product, you can use `*` to multiply the three values together. For `incrementValue1`, you can use the increment operator (`++`). @@ -729,9 +722,7 @@ void main() { ```
- - Solution for cascades example - + Solution for cascades example The best solution for this exercise starts with `obj..` and has four assignment operations chained together. @@ -874,9 +865,8 @@ void main() { ```
- - Solution for getters and setters example - + Solution for getters and setters example + Two functions are handy for this exercise. One is `fold`, which can reduce a list to a single value (use it to calculate the total). @@ -897,6 +887,7 @@ void main() { _prices = value; } ``` +
@@ -1020,9 +1011,8 @@ void main() { ```
- - Solution for positional parameters example - + Solution for positional parameters example + The `b`, `c`, `d`, and `e` parameters are null if they aren't provided by the caller. The important thing, then, is to check whether those arguments are `null` before you add them to the final string. @@ -1037,6 +1027,7 @@ void main() { return total; } ``` +
@@ -1165,9 +1156,8 @@ void main() { ```
- - Solution for named parameters example - + Solution for named parameters example + The `copyWith` method shows up in a lot of classes and libraries. Yours should do a few things: use optional named parameters, @@ -1387,9 +1377,8 @@ void main() { ```
- - Solution for exceptions example - + Solution for exceptions example + This exercise looks tricky, but it's really one big `try` statement. Call `untrustworthy` inside the `try`, and then use `on`, `catch`, and `finally` to catch exceptions and @@ -1408,6 +1397,7 @@ void main() { } } ``` +
@@ -1504,9 +1494,8 @@ void main() { ```
- - Solution for `this` example - + Solution for `this` example + This exercise has a one-line solution. Declare the constructor with `this.anInt`, `this.aString`, and `this.aDouble` @@ -1515,6 +1504,7 @@ void main() { ```dart MyClass(this.anInt, this.aString, this.aDouble); ``` +
{% comment %} @@ -1628,9 +1618,8 @@ void main() { ```
- - Solution for initializer lists example - + Solution for initializer lists example + Two assignments need to happen: `letterOne` should be assigned `word[0]`, and `letterTwo` should be assigned `word[1]`. @@ -1726,9 +1715,8 @@ void main() { ```
- - Solution for named constructors example - + Solution for named constructors example + The declaration for your constructor should begin with `Color.black(): `. In the initializer list (after the colon), set `red`, `green`, and `blue` to `0`. @@ -1738,6 +1726,7 @@ void main() { green = 0, blue = 0; ``` +
## Factory constructors @@ -1893,9 +1882,8 @@ void main() { ```
- - Solution for factory constructors example - + Solution for factory constructors example + Inside the factory constructor, check the length of the list, then create and return an `IntegerSingle`, `IntegerDouble`, or `IntegerTriple` as appropriate. @@ -1913,6 +1901,7 @@ void main() { } } ``` +
## Redirecting constructors @@ -1993,14 +1982,14 @@ void main() { ```
- - Solution for redirecting constructors example - + Solution for redirecting constructors example + Your constructor should redirect to `this(0, 0, 0)`. ```dart Color.black() : this(0, 0, 0); ``` +
## Const constructors @@ -2077,9 +2066,8 @@ void main() { ```
- - Solution for const constructors example - + Solution for const constructors example + To make the constructor const, you'll need to make all the properties final. ```dart @@ -2091,6 +2079,7 @@ void main() { const Recipe(this.ingredients, this.calories, this.milligramsOfSodium); } ``` +
## What's next? diff --git a/src/content/language/isolates.md b/src/content/language/isolates.md index cb25fef4b5..0dc9d294aa 100644 --- a/src/content/language/isolates.md +++ b/src/content/language/isolates.md @@ -456,57 +456,58 @@ Future parseJson(String message) async { #### Complete example
-Expand to see the complete example + Expand to see the complete example + + + ```dart + import 'dart:async'; + import 'dart:convert'; + import 'dart:isolate'; + + void main() async { + final worker = Worker(); + await worker.spawn(); + await worker.parseJson('{"key":"value"}'); + } - -```dart -import 'dart:async'; -import 'dart:convert'; -import 'dart:isolate'; + class Worker { + late SendPort _sendPort; + final Completer _isolateReady = Completer.sync(); -void main() async { - final worker = Worker(); - await worker.spawn(); - await worker.parseJson('{"key":"value"}'); -} + Future spawn() async { + final receivePort = ReceivePort(); + receivePort.listen(_handleResponsesFromIsolate); + await Isolate.spawn(_startRemoteIsolate, receivePort.sendPort); + } -class Worker { - late SendPort _sendPort; - final Completer _isolateReady = Completer.sync(); + void _handleResponsesFromIsolate(dynamic message) { + if (message is SendPort) { + _sendPort = message; + _isolateReady.complete(); + } else if (message is Map) { + print(message); + } + } - Future spawn() async { - final receivePort = ReceivePort(); - receivePort.listen(_handleResponsesFromIsolate); - await Isolate.spawn(_startRemoteIsolate, receivePort.sendPort); - } + static void _startRemoteIsolate(SendPort port) { + final receivePort = ReceivePort(); + port.send(receivePort.sendPort); - void _handleResponsesFromIsolate(dynamic message) { - if (message is SendPort) { - _sendPort = message; - _isolateReady.complete(); - } else if (message is Map) { - print(message); + receivePort.listen((dynamic message) async { + if (message is String) { + final transformed = jsonDecode(message); + port.send(transformed); + } + }); } - } - static void _startRemoteIsolate(SendPort port) { - final receivePort = ReceivePort(); - port.send(receivePort.sendPort); - - receivePort.listen((dynamic message) async { - if (message is String) { - final transformed = jsonDecode(message); - port.send(transformed); - } - }); + Future parseJson(String message) async { + await _isolateReady.future; + _sendPort.send(message); + } } + ``` - Future parseJson(String message) async { - await _isolateReady.future; - _sendPort.send(message); - } -} -```
### Robust ports example