Skip to content

GitLab

T
tangled
Commit 1633f13d authored by Luciano Pacheco's avatar Luciano Pacheco Committed by Commit Bot
Browse files
Options

Fix Audio Player expand/collapse button 

Fix CSS selector for <track-info-panel> element, CSS uses a different
syntax for Polymer :host pseudo-element with attributes selector.

I used code search for all ":host" entries and only this file is using
the incorrect syntax.

There is no change in behaviour, only styles have changed.

Test: Checked manually/visually Audio Player.
Bug: 896056
Change-Id: Id93eb2460a8370dfc1e2488e335bdfac3c4067e7
Reviewed-on: https://chromium-review.googlesource.com/c/1295629
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: default avatarTrent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#601857}
parent 8f75525a
Show whitespace changes
Inline Side-by-side
Showing with 23 additions and 26 deletions
ui/file_manager/audio_player/audio_player.html
View file @ 1633f13d
...@@ -20,6 +20,17 @@ ...@@ -20,6 +20,17 @@
<script src="js/audio_player_scripts.js"></script> <script src="js/audio_player_scripts.js"></script>
</head> </head>
<body> <body>
<custom-style>
<style is="custom-style">
html {
/* Customize control-panel buttons. */
--files-ripple-bg-color: black;
--files-toggle-ripple-bg-color: black;
--files-toggle-ripple-activated-bg-color: black;
--files-toggle-ripple-activated-opacity: 0.1;
}
</style>
</custom-style>
<div class="audio-player"> <div class="audio-player">
<!-- Place the audio player. --> <!-- Place the audio player. -->
<audio-player></audio-player> <audio-player></audio-player>
......
ui/file_manager/audio_player/elements/control_panel.css
View file @ 1633f13d
...@@ -32,9 +32,6 @@ ...@@ -32,9 +32,6 @@
/* Customized scrollbar for the playlist. */ /* Customized scrollbar for the playlist. */
.media-button { .media-button {
--files-toggle-ripple-activated: {
opacity: 0.1;
};
background-color: transparent; background-color: transparent;
border: 0; border: 0;
flex: none; flex: none;
...@@ -209,15 +206,3 @@ paper-slider.disabled { ...@@ -209,15 +206,3 @@ paper-slider.disabled {
position: absolute; position: absolute;
top: -1px; top: -1px;
} }
.control-panel {
--files-ripple: {
background-color: black;
};
--files-toggle-ripple: {
background-color: black;
};
--files-toggle-ripple-activated: {
background-color: black;
};
}
ui/file_manager/audio_player/elements/track_info_panel.css
View file @ 1633f13d
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
width: 100%; width: 100%;
} }
:host[expanded] .track { :host([expanded]) .track {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
width: 48px; width: 48px;
} }
:host[expanded] .icon { :host([expanded]) .icon {
visibility: hidden; visibility: hidden;
} }
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
position: relative; position: relative;
} }
:host:not([artwork-available])[expanded] .track-wrapper { :host(:not([artwork-available])[expanded]) .track-wrapper {
height: 320px; height: 320px;
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -65,11 +65,11 @@ ...@@ -65,11 +65,11 @@
background-size: 0 0; background-size: 0 0;
} }
:host:not([expanded]) .icon-unavailable-expanded { :host(:not([expanded])) .icon-unavailable-expanded {
background-size: 0 0; background-size: 0 0;
} }
:host:not([artwork-available])[expanded] .icon-unavailable-expanded { :host(:not([artwork-available])[expanded]) .icon-unavailable-expanded {
background-image: -webkit-image-set( background-image: -webkit-image-set(
url(../assets/100/player_no_artwork.png) 1x, url(../assets/100/player_no_artwork.png) 1x,
url(../assets/200/player_no_artwork.png) 2x); url(../assets/200/player_no_artwork.png) 2x);
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
width: 320px; width: 320px;
} }
:host[artwork-available][expanded] .icon-expanded { :host([artwork-available][expanded]) .icon-expanded {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
...@@ -100,13 +100,13 @@ ...@@ -100,13 +100,13 @@
width: 48px; width: 48px;
} }
:host:not([expanded]) .track .expand { :host(:not([expanded])) .track .expand {
background-image: -webkit-image-set( background-image: -webkit-image-set(
url(../assets/100/player_cover_open.png) 1x, url(../assets/100/player_cover_open.png) 1x,
url(../assets/200/player_cover_open.png) 2x); url(../assets/200/player_cover_open.png) 2x);
} }
:host[expanded] .track .expand { :host([expanded]) .track .expand {
background-image: -webkit-image-set( background-image: -webkit-image-set(
url(../assets/100/player_cover_close.png) 1x, url(../assets/100/player_cover_close.png) 1x,
url(../assets/200/player_cover_close.png) 2x); url(../assets/200/player_cover_close.png) 2x);
......
ui/file_manager/file_manager/foreground/elements/files_ripple.html
View file @ 1633f13d
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
} }
.ripple { .ripple {
background-color: white; background-color: var(--files-ripple-bg-color, white);
border-radius: 50%; border-radius: 50%;
height: 50%; height: 50%;
margin: 0 auto; margin: 0 auto;
......
ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
View file @ 1633f13d
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
} }
.ripple { .ripple {
background-color: white; background-color: var(--files-toggle-ripple-bg-color, white);
height: 0; height: 0;
margin: 0 auto; margin: 0 auto;
opacity: 0; opacity: 0;
...@@ -36,9 +36,10 @@ ...@@ -36,9 +36,10 @@
} }
.ripple.activated { .ripple.activated {
background-color: var(--files-toggle-ripple-activated-bg-color, white);
border-radius: 2px; border-radius: 2px;
height: 50%; height: 50%;
opacity: 0.2; opacity: var(--files-toggle-ripple-activated-opacity, 0.2);
width: 50%; width: 50%;
@apply(--files-toggle-ripple-activated); @apply(--files-toggle-ripple-activated);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment