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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<style include="cr-shared-style settings-shared">
#explanationText {
padding: 4px var(--cr-section-padding) 12px;
}
.outer-row {
align-items: center;
display: flex;
min-height: var(--cr-section-two-line-min-height);
width: 100%;
}
.topic-toggle-row:hover {
background-color: var(--cr-hover-background-color);
}
.topic-toggle-row {
--cr-icon-button-margin-end: 20px;
padding: 0 var(--cr-section-padding);
}
.icon {
margin-inline-end: var(--cr-icon-button-margin-end);
}
.label-wrapper {
padding: 16px 0;
margin-inline-end: 20px;
}
</style>
<div id="explanationText">
$i18n{manageTopicsPageDescription}
<span id="learnMoreLink" on-click="onLearnMoreClick_">
$i18nRaw{manageTopicsPageLearnMoreLink}
</span>
</div>
<template is="dom-repeat" items="[[firstLevelTopicsList_]]">
<div class="topic-toggle-row" on-click="onToggleRowClick_" actionable>
<div class="outer-row">
<span class="icon">
<cr-icon slot="icon"
icon="[[computeTopicIcon_(item.topic.topicId)]]">
</cr-icon>
</span>
<div class="flex label-wrapper">
<div class="label">[[item.topic.displayString]]</div>
<div class="cr-secondary-text sub-label">
<span class="sub-label-text">[[item.topic.description]]</span>
</div>
</div>
<cr-toggle id="toggle-[[item.topic.topicId]]"
on-change="onToggleChange_"
checked="[[!item.removed]]"
aria-label="[[item.topic.displayString]]"
aria-description="[[item.topic.description]]"></cr-toggle>
</div>
</div>
</template>
<template is="dom-if" if="[[shouldShowBlockTopicDialog_]]" restamp>
<settings-simple-confirmation-dialog id="blockTopicDialog"
title-text="[[blockTopicDialogTitle_]]"
body-text="[[blockTopicDialogBody_]]"
confirm-text="$i18n{topicsPageBlockTopic}"
on-close="onBlockTopicDialogClose_">
</settings-simple-confirmation-dialog>
</template>
|
