Skip to content
This repository was archived by the owner on Dec 16, 2025. It is now read-only.

Commit 5169ec9

Browse files
DragonRider0o0DragonRider0o0
authored
Add translation markers to codelab elements. (#538)
* Add translation markers to google_codelab.soy. * Add translation markers to google_codelab_index.soy. * Add translation markers to google_codelab_step.soy. * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update BUILD.bazel * Update google_codelab.soy * Update google_codelab_index.soy
1 parent 58af023 commit 5169ec9

File tree

5 files changed

+121
-29
lines changed

5 files changed

+121
-29
lines changed

‎codelab-elements/google-codelab-index/BUILD.bazel‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,5 @@ sass_binary(
7979

8080
closure_js_template_library(
8181
name = "google_codelab_index_soy",
82-
srcs = ["google_codelab_index.soy"]
82+
srcs = ["google_codelab_index.soy"],
8383
)

‎codelab-elements/google-codelab-index/google_codelab_index.soy‎

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,24 @@
2626
{@param duration: number}
2727
{@param updated: string}
2828
{@param authors: string}
29+
2930
<div class="card-header {$category}-bg">
3031
<span class="category-icon {$category}-icon"></span>
3132
<span class="card-duration">
3233
{if $duration}
3334
<img src="//codelabs.developers.google.com/images/schedule.svg">
34-
{$duration} min
35+
36+
{if $duration == 1}
37+
{msg desc="Label indicating expected time remaining (1 minute) for user to complete
38+
codelab."}
39+
{$duration} min remaining
40+
{/msg}
41+
{else}
42+
{msg desc="Label indicating expected time remaining in minutes for user to complete
43+
codelab."}
44+
{$duration} mins remaining
45+
{/msg}
46+
{/if}
3547
{/if}
3648
</span>
3749
</div>
@@ -41,26 +53,55 @@
4153
<div class="card-footer {$category}-footer">
4254
<span class="card-start {$category}-start">Start</span>
4355
<span class="card-updated">
44-
{if $authors}<div>{$authors}</div>{/if}
45-
{if $updated}<div>Updated {$updated}</div>{/if}
56+
{if $authors}
57+
<div>
58+
{$authors}
59+
</div>
60+
{/if}
61+
{if $updated}
62+
<div>
63+
{msg desc="Time when codelab was last updated."}
64+
Updated {$updated}
65+
{/msg}
66+
</div>
67+
{/if}
4668
</span>
4769
</div>
4870
{/template}
4971

50-
5172
{template .sortby}
5273
{@param sort: string}
5374
{@param categories: list<string>}
75+
5476
<div id="sort-by-tabs" class="sort-by-inner">
55-
<a href="#" sort="alpha" {if $sort == 'alpha'}selected{/if}>A-Z</a>
56-
<a href="#" sort="recent" {if $sort == 'recent'}selected{/if}>Recent</a>
57-
<a href="#" sort="duration" {if $sort == 'duration'}selected{/if}>Duration</a>
77+
<a href="#" sort="alpha" {if $sort == 'alpha'}selected{/if}>
78+
{msg desc="Label for button to sort codelabs alphabetically by title."}
79+
A-Z
80+
{/msg}
81+
</a>
82+
<a href="#" sort="recent" {if $sort == 'recent'}selected{/if}>
83+
{msg desc="Label for button to sort codelabs by recency."}
84+
Recent
85+
{/msg}
86+
</a>
87+
<a href="#" sort="duration" {if $sort == 'duration'}selected{/if}>
88+
{msg desc="Label for button to sort codelabs by duration."}
89+
Duration
90+
{/msg}
91+
</a>
5892
</div>
5993
<div class="sort-by-inner">
6094
<select id="codelab-categories">
61-
<option value="">Category</option>
95+
<option value="">
96+
97+
{msg desc="Label for dropdown menu used to filter codelabs by category."}
98+
Category
99+
{/msg}
100+
</option>
62101
{for $i in range(length($categories))}
63-
<option value="{$categories[$i]}">{$categories[$i]}</option>
102+
<option value="{$categories[$i]}">
103+
{$categories[$i]}
104+
</option>
64105
{/for}
65106
</select>
66107
</div>

‎codelab-elements/google-codelab-step/google_codelab_step.soy‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,10 @@
2323
{template .title}
2424
{@param step: string}
2525
{@param label: string}
26-
<h2 is-upgraded class="step-title">{$step}. {$label}</h2>
26+
27+
<h2 is-upgraded class="step-title">
28+
{msg desc="Codelab title composed from step number and label."}
29+
{$step}. {$label}
30+
{/msg}
31+
</h2>
2732
{/template}

‎codelab-elements/google-codelab/BUILD.bazel‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,5 @@ sass_binary(
6767

6868
closure_js_template_library(
6969
name = "google_codelab_soy",
70-
srcs = ["google_codelab.soy"]
70+
srcs = ["google_codelab.soy"],
7171
)

‎codelab-elements/google-codelab/google_codelab.soy‎

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
*/
2323
{template .structure}
2424
{@param homeUrl: string}
25-
<div id="drawer">Drawer</div>
25+
26+
<div id="drawer"></div>
2627
<div id="codelab-title">
2728
<div id="codelab-nav-buttons">
2829
<a href="{$homeUrl}" id="arrow-back"><i class="material-icons">close</i></a>
@@ -35,58 +36,103 @@
3536
<div id="steps"></div>
3637
<div id="controls">
3738
<div id="fabs">
38-
<a href="#" id="previous-step" title="Previous step">Back</a>
39+
<a href="#"
40+
id="previous-step"
41+
title=
42+
"{msg desc="Tooltip for button that takes user back to the previous step of the
43+
codelab."}
44+
Previous step
45+
{/msg}">
46+
{msg desc="Button that takes user back to the previous step of the codelab."}
47+
Back
48+
{/msg}
49+
</a>
3950
<div class="spacer"></div>
40-
<a href="#" id="next-step" title="Next step">Next</a>
41-
<a href="{$homeUrl}" id="done" hidden title="Codelab complete">Done</a>
51+
<a href="#"
52+
id="next-step"
53+
title=
54+
"{msg desc="Tooltip for button that takes user to the next step of the codelab."}
55+
Next step
56+
{/msg}">
57+
{msg desc="Button that takes user to the next step of the codelab."}
58+
Next
59+
{/msg}
60+
</a>
61+
<a href="{$homeUrl}"
62+
id="done"
63+
hidden
64+
title=
65+
"{msg desc="Tooltip for button that indicates the codelab user has completed the
66+
codelab."}
67+
Codelab complete
68+
{/msg}">
69+
{msg desc="Button that indicates the codelab user has completed the codelab."}
70+
Done
71+
{/msg}
72+
</a>
4273
</div>
4374
</div>
4475
</div>
4576
{/template}
4677

47-
4878
/**
4979
* Renders the title
5080
*/
5181
{template .title}
5282
{@param title: string}
53-
<h1 is-upgraded class="title">{$title}</h1>
54-
{/template}
5583

84+
<h1 is-upgraded class="title">
85+
{$title}
86+
</h1>
87+
{/template}
5688

5789
/**
5890
* Renders the time remaining
5991
*/
6092
{template .timeRemaining}
6193
{@param time: number}
62-
<div class="time-remaining" title="Time remaining">
63-
<i class="material-icons">access_time</i>
64-
{if $time == 1}
65-
{$time} min remaining
66-
{else}
67-
{$time} mins remaining
68-
{/if}
94+
95+
<div class="time-remaining"
96+
title=
97+
"{msg desc="Label indicating expected time remaining for user to complete codelab."}
98+
Time remaining
99+
{/msg}">
100+
<i class="material-icons">access_time</i>
101+
{if $time == 1}
102+
{msg desc="Label indicating expected time remaining (1 minute) for user to complete codelab."}
103+
{$time} min remaining
104+
{/msg}
105+
{else}
106+
{msg desc="Label indicating expected time remaining in minutes for user to complete codelab."}
107+
{$time} mins remaining
108+
{/msg}
109+
{/if}
69110
</div>
70111
{/template}
71112

72-
73113
/**
74114
* Renders the drawer
75115
*/
76116
{template .drawer}
77117
{@param steps: list<string>}
78118
{@param? feedback: string}
119+
79120
<div class="codelab-time-container"></div>
80121
<div class="steps">
81122
<ol>
82123
{for $step in $steps}
83-
<li><a href="#{index($step)}"><span class="step"><span>{$step}</span></span></a></li>
124+
<li>
125+
<a href="#{index($step)}"><span class="step"><span>{$step}</span></span></a>
126+
</li>
84127
{/for}
85128
</ol>
86129
</div>
87130
<div class="metadata">
88131
<a {if $feedback}target="_blank" href="{$feedback}"{else}href="#" id="codelab-feedback"{/if}>
89-
<i class="material-icons">bug_report</i> Report a mistake
132+
<i class="material-icons">bug_report</i> {msg desc="Button that the user can click to report
133+
an bug or error."}
134+
Report a mistake
135+
{/msg}
90136
</a>
91137
</div>
92138
{/template}

0 commit comments

Comments
 (0)