1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<style include="cr-shared-style settings-shared">
/* Override the default padding of a cr-row to 0. The template inside has
left and right padding. */
.cr-row-with-template {
padding: 0;
}
/* Ensure the toggle button stretches the width of its container despite
removing its parent's padding. */
#liveCaptionToggleButton {
width: 100%;
}
.language-dropdown {
margin-inline-start: auto;
}
.subsection-group {
padding-bottom: 10px;
}
/* Ensure the toggle button stretches the width of its container despite
removing its parent's padding. */
#liveTranslateToggleButton {
width: 100%;
}
</style>
<div class="cr-row cr-row-with-template">
<settings-toggle-button id="liveTranslateToggleButton"
pref="{{prefs.accessibility.captions.live_translate_enabled}}"
on-change="onLiveTranslateEnabledChange_"
label="$i18n{captionsEnableLiveTranslateTitle}"
sub-label="$i18n{captionsEnableLiveTranslateSubtitle}">
</settings-toggle-button>
</div>
<cr-collapse
opened="[[prefs.accessibility.captions.live_translate_enabled.value]]">
<div class="cr-row continuation subsection-group">
<div class="start cr-padded-text" aria-hidden="true">
$i18n{captionsLiveTranslateTargetLanguage}
<div class="secondary">
$i18n{captionsLiveTranslateTargetLanguageSubtitle}
</div>
</div>
<settings-dropdown-menu id="targetLanguageDropdown"
class="language-dropdown"
pref="{{prefs.accessibility.captions.live_translate_target_language}}"
menu-options="[[translatableLanguages_]]">
</settings-dropdown-menu>
</div>
</cr-collapse>
|
