Index: ui/file_manager/audio_player/elements/control_panel.html |
diff --git a/ui/file_manager/audio_player/elements/control_panel.html b/ui/file_manager/audio_player/elements/control_panel.html |
index e8fdb28342c8f1a3ad6caef8a1b3b31031883738..b2ab5278ed133c4ff19880ab7491d2e5ea9cf724 100644 |
--- a/ui/file_manager/audio_player/elements/control_panel.html |
+++ b/ui/file_manager/audio_player/elements/control_panel.html |
@@ -7,6 +7,7 @@ |
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
<link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html"> |
<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html"> |
+<link rel="import" href="volume_controller.html"> |
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_ripple.html"> |
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html"> |
@@ -14,10 +15,7 @@ |
<link rel="import" type="css" href="control_panel.css"> |
<template> |
<div class="controls"> |
- <div class="control-row volume-controls" hidden="[[!volumeSliderShown]]"> |
- <paper-slider id="volumeSlider" value="{{volume::change}}"></paper-slider> |
- </div> |
- <div class="control-row audio-controls"> |
+ <div class="upper-controls audio-controls"> |
<!-- Shuffle toggle button in the bottom line. --> |
<button class="shuffle-mode media-button toggle" state="default"> |
<label> |
@@ -68,6 +66,16 @@ |
<files-ripple></files-ripple> |
</button> |
+ <div id="volumeContainer" |
+ class="default-hidden" |
+ anchor-point="bottom center"> |
+ <volume-controller id="volumeSlider" value="{{volume}}" |
+ width="32" height="85" value="50"> |
+ </volume-controller> |
+ |
+ <polymer-anchor-point id="anchorHelper"></polymer-anchor-point> |
+ </div> |
+ |
<!-- Volume button in the bottom line. --> |
<button id="volumeButton" |
class="volume media-button toggle" |
@@ -91,7 +99,7 @@ |
<files-toggle-ripple activated="[[expanded]]"></files-toggle-ripple> |
</button> |
</div> |
- <div class="control-row time-controls"> |
+ <div class="lower-controls time-controls"> |
<div class="time-container"> |
<div class="time-spacer">[[computeTimeString_(duration, duration)]]</div> |
<div class="time">[[computeTimeString_(time, duration)]]</div> |