Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(184)

Side by Side Diff: ui/file_manager/audio_player/elements/control_panel.html

Issue 1415953006: Fix accessibility issues in AudioPlayer and VideoPlayer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 -- Copyright 2015 The Chromium Authors. All rights reserved. 2 -- Copyright 2015 The Chromium Authors. All rights reserved.
3 -- Use of this source code is governed by a BSD-style license that can be 3 -- Use of this source code is governed by a BSD-style license that can be
4 -- found in the LICENSE file. 4 -- found in the LICENSE file.
5 --> 5 -->
6 6
7 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> 7 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
8 <link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html "> 8 <link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html ">
9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slid er.html"> 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slid er.html">
10 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/for eground/elements/files_ripple.html"> 10 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/for eground/elements/files_icon_button.html">
11 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/for eground/elements/files_toggle_ripple.html">
12 11
13 <dom-module id="control-panel"> 12 <dom-module id="control-panel">
14 <link rel="import" type="css" href="control_panel.css"> 13 <link rel="import" type="css" href="control_panel.css">
15 <template> 14 <template>
16 <div class="controls"> 15 <div class="controls">
17 <div class="control-row volume-controls" hidden="[[!volumeSliderShown]]"> 16 <div class="control-row volume-controls" hidden="[[!volumeSliderShown]]">
18 <paper-slider id="volumeSlider" value="{{volume::change}}"></paper-slide r> 17 <paper-slider id="volumeSlider" value="{{volume::change}}"></paper-slide r>
19 </div> 18 </div>
20 <div class="control-row audio-controls"> 19 <div class="control-row audio-controls">
21 <!-- Shuffle toggle button in the bottom line. --> 20 <!-- Shuffle toggle button in the bottom line. -->
22 <button class="shuffle-mode media-button toggle" state="default"> 21 <files-icon-button toggles
23 <label> 22 id="shuffle"
24 <input id="shuffleCheckbox" 23 class="shuffle-mode media-button toggle"
25 type="checkbox" 24 active="{{shuffle}}">
26 checked="{{shuffle::change}}"> 25 </files-icon-button>
27 <span class="icon"></span>
28 </label>
29 <files-toggle-ripple activated="[[shuffle]]"></files-toggle-ripple>
30 </button>
31 26
32 <!-- Repeat toggle button in the bottom line. --> 27 <!-- Repeat toggle button in the bottom line. -->
33 <button class="repeat media-button toggle" state="default"> 28 <files-icon-button toggles
34 <label> 29 id="repeat"
35 <input id="repeatCheckbox" 30 class="repeat media-button toggle"
36 type="checkbox" 31 active="{{repeat}}">
37 checked="{{repeat::change}}"> 32 </files-icon-button>
38 <span class="icon"></span>
39 </label>
40 <files-toggle-ripple activated="[[repeat]]"></files-toggle-ripple>
41 </button>
42 33
43 <!-- Prev button in the bottom line. --> 34 <!-- Prev button in the bottom line. -->
44 <button class="previous media-button" 35 <files-icon-button
45 state="default" 36 id="previous"
46 on-click="previousClick"> 37 class="previous media-button"
47 <div class="normal default"></div> 38 on-click="previousClick">
48 <div class="disabled"></div> 39 </files-icon-button>
49 <files-ripple></files-ripple>
50 </button>
51 40
52 <!-- Play button in the bottom line. --> 41 <!-- Play button in the bottom line. -->
53 <button class="play media-button" 42 <files-icon-button
54 state$="[[computePlayState_(playing)]]" 43 id="play"
55 on-click="playClick"> 44 class="play media-button"
56 <div class="normal playing"></div> 45 on-click="playClick">
57 <div class="normal ended"></div> 46 </files-icon-button>
58 <div class="disabled"></div>
59 <files-ripple></files-ripple>
60 </button>
61 47
62 <!-- Next button in the bottom line. --> 48 <!-- Next button in the bottom line. -->
63 <button class="next media-button" 49 <files-icon-button
64 state="default" 50 id="next"
65 on-click="nextClick"> 51 class="next media-button"
66 <div class="normal default"></div> 52 on-click="nextClick">
67 <div class="disabled"></div> 53 </files-icon-button>
68 <files-ripple></files-ripple>
69 </button>
70 54
71 <!-- Volume button in the bottom line. --> 55 <!-- Volume button in the bottom line. -->
72 <button id="volumeButton" 56 <files-icon-button toggles
73 class="volume media-button toggle" 57 id="volume"
74 state="default" 58 class="volume media-button toggle"
75 anchor-point="bottom center"> 59 anchor-point="bottom center"
76 <label> 60 active="{{volumeSliderShown}}">
77 <input type="checkbox" checked="{{volumeSliderShown::change}}"> 61 </files-icon-button>
78 <span class="icon"></span>
79 </label>
80 <files-toggle-ripple activated="[[volumeSliderShown]]"></files-toggle- ripple>
81 </button>
82 62
83 <!-- Playlist button in the bottom line. --> 63 <!-- Playlist button in the bottom line. -->
84 <button id="playlistButton" 64 <files-icon-button toggles
85 class="playlist media-button toggle" 65 id="playList"
86 state="default"> 66 class="playlist media-button toggle"
87 <label> 67 active="{{expanded}}">
88 <input type="checkbox" checked="{{expanded::change}}"> 68 </files-toggle-ripple>
89 <span class="icon"></span>
90 </label>
91 <files-toggle-ripple activated="[[expanded]]"></files-toggle-ripple>
92 </button>
93 </div> 69 </div>
94 <div class="control-row time-controls"> 70 <div class="control-row time-controls">
95 <div class="time-container"> 71 <div class="time-container">
96 <div class="time-spacer">[[computeTimeString_(duration, duration)]]</d iv> 72 <div class="time-spacer">[[computeTimeString_(duration, duration)]]</d iv>
97 <div class="time">[[computeTimeString_(time, duration)]]</div> 73 <div class="time">[[computeTimeString_(time, duration)]]</div>
98 </div> 74 </div>
99 <paper-slider id="timeSlider" max="[[duration]]" value="{{time::change}} "></paper-slider> 75 <paper-slider id="timeSlider" max="[[duration]]" value="{{time::change}} "></paper-slider>
100 </div> 76 </div>
101 </div> 77 </div>
102 </template> 78 </template>
103 </dom-module> 79 </dom-module>
104 80
105 <script src="control_panel.js"></script> 81 <script src="control_panel.js"></script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698