Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-08-05 00:14:46 +00:00
Code Issues Projects Releases Wiki Activity

Tweak playlist top tiling to exactly match real Winamp. Quirky!

Browse source 
Fixes #448
This commit is contained in:
Jordan Eldredge 2018-01-20 15:18:21 -08:00
parent c726a6e461
commit d6f99c1d99
4 changed files with 99 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

31
css/playlist-window.css
View file

@ -9,29 +9,38 @@
min-height: 20px;
max-height: 20px;
position: relative;
display: flex;
}
#winamp2-js .playlist-top-left {
width: 25px;
height: 20px;
position: absolute;
}
#winamp2-js .playlist-top-left-spacer {
width: 12px;
}
#winamp2-js .playlist-top-left-fill {
flex-grow: 1;
background-position: right;
}
#winamp2-js .playlist-top-right-spacer {
/* This goes to the right of the center */
width: 13px;
}
#winamp2-js .playlist-top-right-fill {
flex-grow: 1;
background-position: right;
}
#winamp2-js .playlist-top-title {
width: 100px;
height: 20px;
margin: 0 auto;
position: absolute;
/* Giving left and right 0 seems to center */
left: 0;
right: 0;
}
#winamp2-js .playlist-top-right {
width: 25px;
height: 20px;
position: absolute;
right: 0;
}
#winamp2-js .playlist-middle {

57
js/components/PlaylistWindow/__snapshots__/index.test.js.snap
View file

@ -27,9 +27,21 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
<div
className="playlist-top-left draggable"
/>
<div
className="playlist-top-left-spacer draggable"
/>
<div
className="playlist-top-left-fill draggable"
/>
<div
className="playlist-top-title draggable"
/>
<div
className="playlist-top-right-spacer draggable"
/>
<div
className="playlist-top-right-fill draggable"
/>
<div
className="playlist-top-right draggable"
>
@ -210,6 +222,51 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
>
0
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
<span
className=" character character-32"
>
</span>
</div>
</div>
<div

10
js/components/PlaylistWindow/index.js
View file

@ -85,6 +85,8 @@ class PlaylistWindow extends React.Component {
wide: playlistSize[0] > 2
});
const showSpacers = playlistSize[0] % 2 === 0;
return (
<DropTarget
id="playlist-window"
@ -99,7 +101,15 @@ class PlaylistWindow extends React.Component {
onDoubleClick={this.props.togglePlaylistShadeMode}
>
<div className="playlist-top-left draggable" />
{showSpacers && (
<div className="playlist-top-left-spacer draggable" />
)}
<div className="playlist-top-left-fill draggable" />
<div className="playlist-top-title draggable" />
{showSpacers && (
<div className="playlist-top-right-spacer draggable" />
)}
<div className="playlist-top-right-fill draggable" />
<div className="playlist-top-right draggable">
<div id="playlist-shade-button" onClick={toggleShade} />
<div id="playlist-close-button" onClick={close} />

14
js/skinSelectors.js
View file

@ -57,11 +57,21 @@ export const imageSelectors = {
MAIN_STOPPED_INDICATOR: [".stop #play-pause"],
MAIN_NOT_WORKING_INDICATOR: ["#work-indicator"],
MAIN_WORKING_INDICATOR: ["#work-indicator.selected"],
PLAYLIST_TOP_TILE: [".playlist-top"],
PLAYLIST_TOP_TILE: [
".playlist-top-left-fill",
".playlist-top-left-spacer",
".playlist-top-right-fill",
".playlist-top-right-spacer"
],
PLAYLIST_TOP_LEFT_CORNER: [".playlist-top-left"],
PLAYLIST_TITLE_BAR: [".playlist-top-title"],
PLAYLIST_TOP_RIGHT_CORNER: [".playlist-top-right"],
PLAYLIST_TOP_TILE_SELECTED: [".selected .playlist-top"],
PLAYLIST_TOP_TILE_SELECTED: [
".selected .playlist-top-left-fill",
".selected .playlist-top-left-spacer",
".selected .playlist-top-right-fill",
".selected .playlist-top-right-spacer"
],
PLAYLIST_TOP_LEFT_SELECTED: [".selected .playlist-top-left"],
PLAYLIST_TITLE_BAR_SELECTED: [".selected .playlist-top-title"],
PLAYLIST_TOP_RIGHT_CORNER_SELECTED: [".selected .playlist-top-right"],