Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-29 04:50:14 +00:00
Code Issues Projects Releases Wiki Activity

Reenable bits of library start adopting CSS Grid

Browse source
This commit is contained in:
Jordan Eldredge 2019-03-13 21:07:52 -07:00
parent 6077299ace
commit 6ea58f3599
3 changed files with 45 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

15
css/media-library-window.css
View file

@ -13,17 +13,6 @@
padding: 0;
}
#webamp-media-library th {
font-weight: normal;
text-align: left;
padding-left: 5px;
white-space: nowrap;
height: 14px;
}
#webamp-media-library td {
white-space: nowrap;
}
#webamp-media-library ul {
list-style: none;
}
@ -37,10 +26,6 @@
padding-left: 10px;
}
#webamp-media-library .webamp-media-library-table {
width: 100%;
border-spacing: unset;
}
#webamp-media-library .webamp-media-library-vertical-divider {
padding-top: 2px;
padding-bottom: 2px;

72
js/components/MediaLibraryWindow/TracksTable.tsx
View file

@ -19,7 +19,11 @@ class TracksTable extends React.Component<StateProps, State> {
super(props);
this.state = { filter: "" };
}
render() {
const cellStyle: React.CSSProperties = {
whiteSpace: "nowrap"
};
return (
<div
style={{
@ -43,43 +47,57 @@ class TracksTable extends React.Component<StateProps, State> {
style={{ flexGrow: 1, overflowY: "scroll" }}
className="webamp-media-library-item"
>
<div
style={{
display: "grid",
gridTemplateColumns:
"[artist] 1fr [title] 1fr [album] 1fr [length] 1fr [track number] 1fr [genere] 1fr [year] 1fr [filename] 1fr",
gridColumnGap: 1
}}
>
<div style={cellStyle}>Artist</div>
<div style={cellStyle}>Title</div>
<div style={cellStyle}>Album</div>
<div style={cellStyle}>Length</div>
<div style={cellStyle}>Track #</div>
<div style={cellStyle}>Genere</div>
<div style={cellStyle}>Year</div>
<div style={cellStyle}>Filename</div>
{this.props.filterTracks(this.state.filter).map(track => {
return (
<React.Fragment key={track.id}>
<div style={cellStyle}>{track.artist}</div>
<div style={cellStyle}>{track.title}</div>
<div style={cellStyle}>{track.album}</div>
<div style={cellStyle}>
{Utils.getTimeStr(track.duration)}
</div>
<div style={cellStyle}>1</div>
<div style={cellStyle}>Primus</div>
<div style={cellStyle}>2001</div>
<div style={cellStyle}>
{track.url == null
? track.defaultName
: FileUtils.filenameFromUrl(track.url)}
</div>
</React.Fragment>
);
})}
</div>
{/*
<table
className="webamp-media-library-table"
style={{ overflow: "scroll" }}
>
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Album</th>
<th>Length</th>
<th>Track #</th>
<th>Genere</th>
<th>Year</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
{this.props.filterTracks(this.state.filter).map(track => {
return (
<tr key={track.id}>
<td>{track.artist}</td>
<td>{track.title}</td>
<td>{track.album}</td>
<td>{Utils.getTimeStr(track.duration)}</td>
<td>1</td>
<td>Primus</td>
<td>2001</td>
<td>
{track.url == null
? track.defaultName
: FileUtils.filenameFromUrl(track.url)}
</td>
</tr>
);
})}
</tbody>
</table>
</table> */}
</div>
<div style={{ marginTop: 2 }}>
<button>Play</button>

4
js/components/MediaLibraryWindow/index.tsx
View file

@ -87,11 +87,9 @@ class MediaLibraryWindow extends React.Component<Props, State> {
overflow: "hidden"
}}
>
{/*
<div style={{ width: this.state.sidebarWidth }}>
<Sidebar />
</div>
*/}
<div
className="webamp-media-library-vertical-divider"
onMouseDown={this._handleSidebarMouseDown}
@ -108,7 +106,6 @@ class MediaLibraryWindow extends React.Component<Props, State> {
overflow: "hidden"
}}
>
{/*
<div
style={{
display: "flex",
@ -128,7 +125,6 @@ class MediaLibraryWindow extends React.Component<Props, State> {
</div>
<AlbumsTable />
</div>
*/}
<div
className="webamp-media-library-horizontal-divider"
onMouseDown={this._handlePlaylistResizeMouseDown}