From edbb2e058cf16e488450ef0f852f6f79268bb201 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 13 Mar 2017 13:17:11 +1300 Subject: [PATCH] Unified lists and columns --- src/js/components/ContextMenu.js | 8 +- src/js/components/List.js | 7 +- src/js/components/TrackList.js | 7 +- src/js/services/ui/reducer.js | 1 - src/js/views/Album.js | 10 +- src/js/views/Artist.js | 41 +----- src/js/views/Playlist.js | 9 +- src/js/views/Queue.js | 1 + src/js/views/QueueHistory.js | 3 +- src/js/views/User.js | 16 +-- src/scss/components/_lists.scss | 238 +++++++++++++++---------------- 11 files changed, 144 insertions(+), 197 deletions(-) diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 9739386b..5e7247b2 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -103,6 +103,7 @@ class ContextMenu extends React.Component{ if (this.props.menu.items && this.props.menu.items.length > 0){ var item = this.props.menu.items[0] context.item = item + context.items_count = this.props.menu.items.length context.source = helpers.uriSource(item.uri) context.type = helpers.uriType(item.uri) context.in_library = this.inLibrary(item) @@ -264,6 +265,11 @@ class ContextMenu extends React.Component{ renderTitle(){ var context = this.getContext() + if (context.name == 'custom'){ + return null + // TODO: make this the page title + } + switch (context.type){ case 'artist': @@ -298,7 +304,7 @@ class ContextMenu extends React.Component{ {context.nice_name}s
- {this.props.menu.items.length} items + {context.items_count} items
) diff --git a/src/js/components/List.js b/src/js/components/List.js index 12cad121..691344bd 100755 --- a/src/js/components/List.js +++ b/src/js/components/List.js @@ -72,8 +72,13 @@ class List extends React.Component{ render(){ if (!this.props.rows) return null + var className = 'list' + if (this.props.className){ + className += ' '+this.props.className + } + return ( -
+
{ this.renderHeader() } { this.props.rows.map( (row, row_index) => { diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index a9424f4a..413894b2 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -290,8 +290,13 @@ class TrackList extends React.Component{ if( !this.state.tracks || Object.prototype.toString.call(this.state.tracks) !== '[object Array]' ) return null let self = this; + var className = 'list track-list '+this.props.context + if (this.props.className){ + className += ' '+this.props.className + } + return ( -
+
{ this.renderHeader() } { this.state.tracks.map( diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js index 98535377..110f79db 100755 --- a/src/js/services/ui/reducer.js +++ b/src/js/services/ui/reducer.js @@ -539,7 +539,6 @@ export default function reducer(ui = {}, action){ return Object.assign({}, ui, { library_playlists: library_playlists, library_playlists_started: true - library_playlists_loaded: true }); case 'PLAYLIST_LIBRARY_CHECK': diff --git a/src/js/views/Album.js b/src/js/views/Album.js index 63cef240..87f72349 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -137,7 +137,7 @@ class Album extends React.Component{
- { this.props.album.tracks ? : null } + { this.props.album.tracks ? : null } this.loadMore() }/>
@@ -151,7 +151,7 @@ class Album extends React.Component{
- + Album

@@ -165,12 +165,6 @@ class Album extends React.Component{
- -
- - - -

); diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index e5a05cae..1ad4a6da 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -172,7 +172,7 @@ class Artist extends React.Component{
0 ? "col w70" : "col w100"}>

Top tracks

- { this.props.artist.tracks ? : null } + { this.props.artist.tracks ? : null }
@@ -248,45 +248,6 @@ class Artist extends React.Component{ { this.renderSubViewMenu() }
- -
-
-

- -

-
- - - -
-
- -
- -
-

- -

-
- - - -
-
- -
- -

- -

-
-
- - - -
-
-
); } diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index df04e401..c334f192 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -182,7 +182,7 @@ class Playlist extends React.Component{ { this.renderActions() }
- { this.props.playlist.tracks ? this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null } + { this.props.playlist.tracks ? this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null } this.loadMore() }/>
@@ -195,7 +195,7 @@ class Playlist extends React.Component{
- + Playlist

    @@ -207,11 +207,6 @@ class Playlist extends React.Component{
    -
    - - - -
) } diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js index 6971eec2..05021eae 100755 --- a/src/js/views/Queue.js +++ b/src/js/views/Queue.js @@ -91,6 +91,7 @@ class Queue extends React.Component{ this.removeTracks( tracks ) } playTracks={ tracks => this.playTracks( tracks ) } diff --git a/src/js/views/QueueHistory.js b/src/js/views/QueueHistory.js index 30ce6f80..a0dd4e5a 100755 --- a/src/js/views/QueueHistory.js +++ b/src/js/views/QueueHistory.js @@ -47,11 +47,12 @@ class QueueHistory extends React.Component{ ) return ( -
+
diff --git a/src/js/views/User.js b/src/js/views/User.js index 7b7b9d2c..049eafe1 100755 --- a/src/js/views/User.js +++ b/src/js/views/User.js @@ -91,25 +91,11 @@ class User extends React.Component{
-

-
    -
  • - -
    • -
+

-
-
-
- - - -
-
-
); } diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index c18ce7f0..45c0f172 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -1,5 +1,5 @@ -.list-wrapper { +.list { .list-item { @@ -35,106 +35,58 @@ border-top: 0; padding-bottom: 2px; } + } - &.track { - padding-left: 40px; + &.track-list .list-item { + padding-left: 40px; - .col { - &.name { width: 40%; } - &.artists, - &.album { width: 26%; } + .col { + &.name { + width: 40%; } - - .select-state { - position: absolute; - top: 12px; - left: 15px; - font-size: 10px; + &.artists, + &.album { + width: 25%; } - - .play-state { - display: none; - position: absolute; - top: 13px; - left: 15px; - font-size: 10px; - } - - &.playing { - font-weight: 600; - .play-state { - display: block; - opacity: 1; - } - } - - &.playing.selected { - .play-state { - display: none; - } - } - - :root .dragging &:hover { - border-top: 3px solid $blue; - margin-top: -3px; - background: transparent; + &.duration { + width: 5%; } } - @include responsive( $bp_medium ){ - padding: 7px 10px 7px 20px; + .select-state { + position: absolute; + top: 12px; + left: 15px; + font-size: 10px; + } - .col { - &.name { - width: 90% !important; - padding-right: 10%; - } + .play-state { + display: none; + position: absolute; + top: 13px; + left: 15px; + font-size: 10px; + } - &.duration { - width: auto; - position: absolute; - right: 10px; - text-align: right; - } - - &:not(.name){ - color: $mid_grey; - display: inline-block; - width: auto !important; - } - - &:not(.name):not(:nth-child(2)){ - @include bullet(); - } - - &.followers_total:after { - content: ' followers'; - } - - &.tracks_total:after { - content: ' tracks'; - } - - &.popularity:after { - content: '% popularity'; - } - - &.can_edit, - &.release_date { - display: none; - } - } - - &.header { - display: none; - } - - .select-state, + &.playing { + font-weight: 600; .play-state { - top: 11px; - left: 5px; + display: block; + opacity: 1; } } + + &.playing.selected { + .play-state { + display: none; + } + } + + :root .dragging &:hover { + border-top: 3px solid $blue; + margin-top: -3px; + background: transparent; + } } &.playlist-list .list-item { @@ -182,6 +134,30 @@ } } + &.queue-track-list { + .col { + &.name, + &.artists, + &.album { + width: 25% !important; + } + &.added { + width: 20%; + } + } + } + + &.queue-history-track-list { + .col { + &.name { + width: 60%; + } + &.played_at { + width: 20%; + } + } + } + .artist-list { .artist { display: block; @@ -211,43 +187,61 @@ } } - .history.track-list { + @include responsive( $bp_medium ){ .list-item { - .col{ - &.name { width: 60%; } - &.played_at { width: 20%; } - } - } - } + padding: 7px 10px 7px 16px !important; - .queue.track-list { - .list-item { - .col{ - &.name, - &.artists, - &.album { width: 25%; } - &.added { width: 20%; } - } - - @include responsive( $bp_medium ){ - .col { - &.name { - width: 90%; - padding-right: 10%; - } - - &.artists, - &.album { - width: auto; - color: $mid_grey; - display: inline-block; - } - - &.added { - display: none; - } + &.track { + .select-state, + .play-state { + display: none !important; } } + + .col { + &.name { + width: 90% !important; + padding-right: 10%; + } + + &.duration { + width: auto; + position: absolute; + right: 10px; + text-align: right; + } + + &:not(.name):not(.duration){ + color: $mid_grey; + display: inline-block; + width: auto !important; + } + + &:not(.name):not(.duration):not(:nth-child(2)){ + @include bullet(); + } + + &.followers_total:after { + content: ' followers'; + } + + &.tracks_total:after { + content: ' tracks'; + } + + &.popularity:after { + content: '% popularity'; + } + + &.can_edit, + &.release_date { + display: none; + } + } + + &.header { + display: none; + } } } } \ No newline at end of file