blob: 1dc7a5d0d4240ab0bb0e5ac9668e6094c6f36f74 (
plain)
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_list.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_types.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="change_picture_browser_proxy.html">
<dom-module id="settings-change-picture">
<template>
<style>
:host {
--cr-toolbar-height: 56px;
/* #headerLine height + padding */
--cr-settings-header-height: calc(62px + 1.34em);
--title-height: 2em;
--title-padding: 16px;
display: block;
min-height: 328px;
}
#title {
height: var(--title-height);
margin-inline-start: 20px;
padding-top: var(--title-padding);
}
#container {
align-items: flex-start;
display: flex;
margin-inline-start: 20px;
position: absolute;
top: calc(var(--cr-settings-header-height) +
var(--title-padding) +
var(--title-height));
user-select: none;
}
#picturePane {
--cr-picture-image-size: 192px;
flex-shrink: 0;
height: 288px;
margin-inline-end: 24px;
margin-top: 6px;
position: relative;
width: 288px;
}
#authorCredit {
color: var(--paper-grey-500);
display: flex;
flex-direction: column;
margin-top: 20px;
}
#pictureList {
/* TODO(reveman): Find a way to have height align to viewport
without using fixed position. */
height: calc(100vh -
var(--cr-toolbar-height) -
var(--cr-settings-header-height) -
var(--title-padding) -
var(--title-height));
margin-inline-end: 16px;
margin-top: 0;
min-height: 332px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
</style>
<div id="title">$i18n{changePicturePageDescription}</div>
<div id="container">
<div>
<cr-picture-pane id="picturePane"
camera-present="[[cameraPresent_]]",
image-src="[[getImageSrc_(selectedItem_)]]"
image-type="[[getImageType_(selectedItem_)]]"
discard-image-label="$i18n{discardPhoto}"
preview-alt-text="$i18n{previewAltText}"
take-photo-label="$i18n{takePhoto}"
capture-video-label="$i18n{captureVideo}"
switch-mode-to-camera-label="$i18n{switchModeToCamera}"
switch-mode-to-video-label="$i18n{switchModeToVideo}"
camera-video-mode-enabled="[[cameraVideoModeEnabled_]]"
on-keys-pressed="onCameraPaneKeysPressed_">
</cr-picture-pane>
<div id="authorCredit"
hidden="[[!isAuthorCreditShown_(selectedItem_)]]">
[[getAuthorCredit_(selectedItem_, defaultImages_)]]
<a href="[[getAuthorWebsite_(selectedItem_, defaultImages_)]]"
target="_blank">
[[getAuthorWebsite_(selectedItem_, defaultImages_)]]
</a>
</div>
</div>
<cr-picture-list id="pictureList"
hidden="[[!defaultImages_]]"
camera-present="[[cameraPresent_]]"
default-images="[[getDefaultImages_(defaultImages_,
firstDefaultImageIndex_)]]"
selected-item="{{selectedItem_}}"
choose-file-label="$i18n{chooseFile}"
old-image-label="$i18n{oldPhoto}"
profile-image-label="$i18n{profilePhoto}"
take-photo-label="$i18n{takePhoto}"
capture-video-label="$i18n{captureVideo}">
</cr-picture-list>
</div>
</template>
<script src="change_picture.js"></script>
</dom-module>
|
