Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add show solution button to Codelab UI #1819

Merged
merged 2 commits into from
Apr 15, 2021
Merged

Add show solution button to Codelab UI #1819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb85d56
add codelabs.html to allowed files in main.py
johnpryan Apr 14, 2021
5dfcf73
Add show solution button
johnpryan Apr 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 34 additions & 3 deletions lib/codelab.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import 'editing/editor_codemirror.dart';
import 'elements/button.dart';
import 'elements/console.dart';
import 'elements/counter.dart';
import 'elements/dialog.dart';
import 'elements/elements.dart';
import 'elements/material_tab_controller.dart';
import 'modules/codemirror_module.dart';
Expand Down Expand Up @@ -47,8 +48,10 @@ class CodelabUi {
DElement nextStepButton;
Console _console;
MDCButton runButton;
MDCButton showSolutionButton;
MaterialTabController consolePanelTabController;
Counter unreadConsoleCounter;
Dialog dialog;

CodelabUi() {
_init();
Expand All @@ -65,6 +68,7 @@ class CodelabUi {
IFrameElement get _frame => querySelector('#frame') as IFrameElement;

Future<void> _init() async {
_initDialogs();
await _loadCodelab();
_initHeader();
_updateInstructions();
Expand All @@ -90,6 +94,10 @@ class CodelabUi {
await modules.start();
}

void _initDialogs() {
dialog = Dialog();
}

void _initEditor() {
// Set up CodeMirror
editor = (editorFactory as CodeMirrorFactory)
Expand Down Expand Up @@ -165,6 +173,7 @@ class CodelabUi {
_updateInstructions();
_updateStepButtons();
_updateCode();
_updateSolutionButton();
});
}

Expand All @@ -176,9 +185,20 @@ class CodelabUi {

void _initButtons() {
runButton = MDCButton(querySelector('#run-button') as ButtonElement)
..onClick.listen((_) {
_handleRun();
});
..onClick.listen((_) => _handleRun());

showSolutionButton =
MDCButton(querySelector('#show-solution-btn') as ButtonElement)
..onClick.listen((_) => _handleShowSolution());
}

void _updateSolutionButton() {
if (_codelabState.currentStep.solution == null) {
showSolutionButton.element.style.visibility = 'hidden';
} else {
showSolutionButton.element.style.visibility = null;
}
showSolutionButton.disabled = false;
}

void _updateCode() {
Expand Down Expand Up @@ -327,6 +347,17 @@ class CodelabUi {
var snackbar = MDCSnackbar(div)..labelText = message;
snackbar.open();
}

Future<void> _handleShowSolution() async {
var result = await dialog.showOkCancel(
'Show solution',
'Are you sure you want to show the solution? Your changes for this '
'step will be lost.');
if (result == DialogResult.ok) {
editor.document.updateValue(_codelabState.currentStep.solution);
showSolutionButton.disabled = true;
}
}
}

class CodelabState {
Expand Down
25 changes: 16 additions & 9 deletions web/codelabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,22 @@
<div class="panels">
<div id="steps-panel">
<div id="markdown-content"></div>
<div id="step-button-container">
<button id="previous-step-btn"
class="mdc-icon-button material-icons">
keyboard_arrow_left
</button>
<div id="steps-label">Step 1</div>
<button id="next-step-btn"
class="mdc-icon-button material-icons">
keyboard_arrow_right
<div id="steps-row">
<div id="step-button-container">
<button id="previous-step-btn"
class="mdc-icon-button material-icons">
keyboard_arrow_left
</button>
<div id="steps-label">Step 1</div>
<button id="next-step-btn"
class="mdc-icon-button material-icons">
keyboard_arrow_right
</button>
</div>

<button type="button" id="show-solution-btn"
class="mdc-button mdc-button--raised mdc-button--dense">
Show Solution
</button>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions web/main.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
# Files that the server is allowed to serve. Additional static files are
# served via directives in app.yaml.
VALID_FILES = [
'codelabs.html',
'dark_mode.js',
'dart-192.png',
'embed-dart.html',
Expand Down
13 changes: 13 additions & 0 deletions web/styles/codelabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,17 @@ section.main-section {
}

// Steps panel
#steps-row {
@include layout-horizontal();
@include layout-center();
@include layout-relative();
width: 100%;
}

#show-solution-btn {
margin: 8px;
}

#steps-panel {
@include layout-vertical();
@include layout-center();
Expand All @@ -98,6 +109,8 @@ section.main-section {
#step-button-container {
@include layout-horizontal();
@include layout-center();
@include layout-flex();
@include layout-center-justified();
}

#steps-label {
Expand Down