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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<style include="settings-shared iron-flex iron-flex-alignment">
.subtitle {
color: var(--cros-text-color-secondary);
margin-top: 10px;
}
.instructions {
color: var(--cros-text-color-secondary);
margin-top: 4px;
}
.details {
margin: 40px;
}
.label {
margin-top: 15px;
}
iron-icon {
--iron-icon-fill-color: var(--cros-icon-color-primary);
--iron-icon-height: 18px;
--iron-icon-width: 18px;
background: var(--cros-bg-color-dropped-elevation-2);
border-radius: 2px;
margin: 5px;
padding: 4px;
}
#move {
align-items: center;
display: flex;
flex-direction: row;
}
#move > div {
color: var(--cros-text-color-secondary);
flex: 0 0 auto;
}
#move > div:not(:first-child) {
margin-inline-start: 8px;
}
#move > div:not(:last-child) {
margin-inline-end: 8px;
}
#move > div.shift {
background: var(--cros-bg-color-dropped-elevation-2);
border-radius: 2px;
color: var(--cros-text-color-primary);
font-size: 100%;
padding: 7px 8px;
}
</style>
<cr-dialog id="dialog" on-close="close"
close-text="$i18n{close}">
<div slot="title">$i18n{displayOverscanPageTitle}</div>
<div slot="body">
<div class="subtitle" >$i18n{displayOverscanSubtitle}</div>
<div class="details layout horizontal around-justified self-stretch">
<div class="layout vertical center">
<div class="layout horizontal">
<iron-icon icon="cr:expand-less"></iron-icon>
</div>
<div class="layout horizontal">
<iron-icon icon="os-settings:chevron-left"></iron-icon>
<iron-icon icon="cr:expand-more"></iron-icon>
<iron-icon icon="cr:chevron-right"></iron-icon>
</div>
<div class="label" >$i18n{displayOverscanResize}</div>
</div>
<div class="layout vertical center">
<div class="layout vertical center-justified flex">
<div id="move" class="layout horizontal">
<!-- TODO(stevenjb): Localize 'shift' for other keyboards -->
<!-- crbug.com/614827 -->
<div>(</div><div>+</div><div class="shift">shift</div><div>)</div>
</div>
</div>
<div class="label">$i18n{displayOverscanPosition}</div>
</div>
</div>
</div>
<div slot="button-container">
<cr-button id="reset" class="cancel-button" on-click="onResetClick_">
$i18n{displayOverscanReset}
</cr-button>
<cr-button class="action-button" on-click="onSaveClick_">
$i18n{ok}
</cr-button>
</div>
</cr-dialog>
|
