OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 | 2 |
3 <link rel="import" href="chrome://resources/html/util.html"> | 3 <link rel="import" href="chrome://resources/html/util.html"> |
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button-light.html"> |
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spi
nner.html"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spi
nner.html"> |
6 <link rel="import" href="../icons.html"> | 6 <link rel="import" href="../icons.html"> |
7 <link rel="import" href="../settings_shared_css.html"> | 7 <link rel="import" href="../settings_shared_css.html"> |
8 | 8 |
9 <dom-module id="settings-camera"> | 9 <dom-module id="settings-camera"> |
10 <template> | 10 <template> |
11 <style include="settings-shared"> | 11 <style include="settings-shared"> |
12 #perspectiveBox { | 12 #perspectiveBox { |
13 height: 228px; | 13 height: 228px; |
14 perspective: 600px; | 14 perspective: 600px; |
(...skipping 28 matching lines...) Expand all Loading... |
43 } | 43 } |
44 | 44 |
45 #cameraControls { | 45 #cameraControls { |
46 background-color: var(--paper-grey-800); | 46 background-color: var(--paper-grey-800); |
47 border-bottom-left-radius: 2px; | 47 border-bottom-left-radius: 2px; |
48 border-bottom-right-radius: 2px; | 48 border-bottom-right-radius: 2px; |
49 padding: 8px; | 49 padding: 8px; |
50 } | 50 } |
51 | 51 |
52 #flipPhoto { | 52 #flipPhoto { |
53 --iron-icon-fill-color: white; | |
54 float: right; | 53 float: right; |
55 } | 54 } |
56 | 55 |
57 :host-context([dir=rtl]) #flipPhoto { | 56 :host-context([dir=rtl]) #flipPhoto { |
58 float: left; | 57 float: left; |
59 } | 58 } |
60 | 59 |
61 #takePhoto { | 60 #takePhoto { |
62 --iron-icon-fill-color: white; | |
63 background-color: var(--paper-green-500); | 61 background-color: var(--paper-green-500); |
64 border-radius: 50%; | 62 border-radius: 50%; |
65 display: block; | 63 display: block; |
66 margin: 0 auto 0 auto; | 64 margin: 0 auto 0 auto; |
67 } | 65 } |
68 </style> | 66 </style> |
69 <div hidden="[[!cameraActive]]"> | 67 <div hidden="[[!cameraActive]]"> |
70 <div id="perspectiveBox"> | 68 <div id="perspectiveBox"> |
71 <div id="userImageStreamCrop"> | 69 <div id="userImageStreamCrop"> |
72 <video id="cameraVideo" autoplay hidden="[[!cameraOnline_]]"></video> | 70 <video id="cameraVideo" autoplay hidden="[[!cameraOnline_]]"></video> |
73 <paper-spinner active="[[!cameraOnline_]]"></paper-spinner> | 71 <paper-spinner active="[[!cameraOnline_]]"></paper-spinner> |
74 </div> | 72 </div> |
75 </div> | 73 </div> |
76 <div id="cameraControls"> | 74 <div id="cameraControls"> |
77 <paper-icon-button id="flipPhoto" tabindex="2" | 75 <button is="paper-icon-button-light" id="flipPhoto" tabindex="2" |
78 icon="settings:flip" title="$i18n{flipPhoto}" | 76 title="$i18n{flipPhoto}" on-tap="onTapFlipPhoto_" |
79 on-tap="onTapFlipPhoto_" disabled="[[!cameraOnline_]]"> | 77 disabled="[[!cameraOnline_]]" class="icon-flip"> |
80 </paper-icon-button> | 78 </button> |
81 <paper-icon-button id="takePhoto" tabindex="1" | 79 <button is="paper-icon-button-light" id="takePhoto" tabindex="1" |
82 icon="settings:camera-alt" title="$i18n{takePhoto}" | 80 title="$i18n{takePhoto}" on-tap="takePhoto" |
83 on-tap="takePhoto" disabled="[[!cameraOnline_]]"> | 81 disabled="[[!cameraOnline_]]" class="icon-camera-alt"> |
84 </paper-icon-button> | 82 </button> |
85 </div> | 83 </div> |
86 </div> | 84 </div> |
87 </template> | 85 </template> |
88 <script src="camera.js"></script> | 86 <script src="camera.js"></script> |
89 </dom-module> | 87 </dom-module> |
OLD | NEW |