diff --git a/changes/changelog.d/131.enhancement b/changes/changelog.d/131.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..260a8bb6fe7c71319567df75c9d6db4b95ae7cf6 --- /dev/null +++ b/changes/changelog.d/131.enhancement @@ -0,0 +1 @@ +Removed player from queue tab and consistently show current track in queue (#131) diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index f225313b6b5f64139ed668473a6ebea51bc58eec..42a923b6b3faaf5586a35613277bbcdd7ea8c27d 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -16,8 +16,8 @@ <div class="menu-area"> <div class="ui compact fluid two item inverted menu"> - <a class="active item" data-tab="library">Browse</a> - <a class="item" data-tab="queue"> + <a class="active item" @click="selectedTab = 'library'" data-tab="library">Browse</a> + <a class="item" @click="selectedTab = 'queue'" data-tab="queue"> Queue <template v-if="queue.tracks.length === 0"> (empty) @@ -46,6 +46,8 @@ v-if="$store.state.auth.authenticated" class="item" :to="{path: '/activity'}"><i class="bell icon"></i> Activity</router-link> </div> + + <player></player> </div> <div v-if="queue.previousQueue " class="ui black icon message"> <i class="history icon"></i> @@ -96,7 +98,6 @@ </div> </div> </div> - <player></player> </div> </template> @@ -121,6 +122,7 @@ export default { }, data () { return { + selectedTab: 'library', backend: backend, isCollapsed: true } @@ -140,11 +142,36 @@ export default { }), reorder: function (oldValue, newValue) { this.$store.commit('queue/reorder', {oldValue, newValue}) + }, + scrollToCurrent () { + let current = $(this.$el).find('[data-tab="queue"] .active')[0] + if (!current) { + return + } + let container = $(this.$el).find('.tabs')[0] + // Position container at the top line then scroll current into view + container.scrollTop = 0 + current.scrollIntoView(true) + // Scroll back nothing if element is at bottom of container else do it + // for half the height of the containers display area + var scrollBack = (container.scrollHeight - container.scrollTop <= container.clientHeight) ? 0 : container.clientHeight / 2 + container.scrollTop = container.scrollTop - scrollBack + console.log(container.scrollHeight - container.scrollTop, container.clientHeight) } }, watch: { url: function () { this.isCollapsed = true + }, + selectedTab: function (newValue) { + if (newValue === 'queue') { + this.scrollToCurrent() + } + }, + '$store.state.queue.currentIndex': function () { + if (this.selectedTab !== 'queue') { + this.scrollToCurrent() + } } } } @@ -204,19 +231,38 @@ $sidebar-color: #3D3E3F; } } .tabs { + flex: 1; + display: flex; + flex-direction: column; overflow-y: auto; + justify-content: space-between; @include media(">tablet") { height: 0px; } @include media("<desktop") { - max-height: 400px; + max-height: 500px; } } +.ui.tab.active { + display: flex; +} .tab[data-tab="queue"] { + flex-direction: column; tr { cursor: pointer; } } +.tab[data-tab="library"] { + flex-direction: column; + flex: 1 1 auto; + > .menu { + flex: 1; + flex-grow: 1; + } + > .player-wrapper { + width: 100%; + } +} .sidebar .segment { margin: 0; border-radius: 0; @@ -225,9 +271,6 @@ $sidebar-color: #3D3E3F; .ui.inverted.segment.header-wrapper { padding: 0; } -.tabs { - flex: 1; -} .logo { cursor: pointer;