removed useless divs, moved search placeholder to the right place, improved searchbar keyup listener code

This commit is contained in:
Roberto Tonino 2020-09-15 22:44:29 +02:00
parent 82e45633f5
commit cd8b03681a
16 changed files with 254 additions and 226 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,9 +1,16 @@
<template>
<div style="height: inherit;">
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<div>
<TheSidebar />
<TheMainContent />
<div class="app-container">
<div class="content-container">
<TheSearchBar />
<TheMiddleSection />
</div>
<TheDownloadTab class="downlaods" />
</div>
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<TheTrackPreview />
<TheQualityModal />
@ -12,18 +19,39 @@
</div>
</template>
<style lang="scss">
.app-container {
display: flex;
}
.content-container {
width: 100%;
display: flex;
flex-direction: column;
margin-left: 48px;
}
.downlaods {
flex-basis: 32px;
}
</style>
<script>
import TheSidebar from '@components/TheSidebar.vue'
import TheMainContent from '@components/TheMainContent.vue'
import TheMiddleSection from '@components/TheMiddleSection.vue'
import TheTrackPreview from '@components/TheTrackPreview.vue'
import TheQualityModal from '@components/TheQualityModal.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import TheContextMenu from '@components/TheContextMenu.vue'
import TheDownloadTab from '@components/TheDownloadTab.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
export default {
components: {
TheSidebar,
TheMainContent,
TheSearchBar,
TheMiddleSection,
TheDownloadTab,
TheTrackPreview,
TheQualityModal,
BaseLoadingPlaceholder,

View File

@ -1,5 +1,5 @@
<template functional>
<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
<div :id="props.id" class="loading_placeholder" v-show="!props.hidden">
<span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring">
<div></div>

View File

@ -1,75 +1,80 @@
<template>
<section id="content" @scroll="handleContentScroll" ref="content">
<!-- <section id="content" @scroll="handleContentScroll" ref="content"> -->
<section id="content">
<div id="container">
<!-- HomeTab and MainSearchTab -->
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
<router-view></router-view>
<TheMainSearch :scrolled-search-type="newScrolled" />
<!-- <ArtistTab /> -->
<!-- <TracklistTab /> -->
<!-- <TheHomeTab /> -->
<!-- <TheChartsTab />
<TheFavoritesTab />
<TheErrorsTab />
<TheLinkAnalyzerTab />
<TheAboutTab />
<TheSettingsTab /> -->
</div>
</section>
</template>
<style lang="scss">
#container {
margin: 0 auto;
max-width: 1280px;
width: var(--container-width);
}
#content {
background-color: var(--main-background);
width: 100%;
height: calc(100vh - 93px);
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--main-background);
}
&::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
</style>
<script>
// import ArtistTab from '@components/ArtistTab.vue'
// import TracklistTab from '@components/TracklistTab.vue'
// import TheChartsTab from '@components/TheChartsTab.vue'
// import TheFavoritesTab from '@components/TheFavoritesTab.vue'
// import TheErrorsTab from '@components/TheErrorsTab.vue'
// import TheHomeTab from '@components/TheHomeTab.vue'
// import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
// import TheAboutTab from '@components/TheAboutTab.vue'
// import TheSettingsTab from '@components/TheSettingsTab.vue'
import TheMainSearch from '@components/TheMainSearch.vue'
import { debounce } from '@/utils/utils'
import EventBus from '@/utils/EventBus.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
components: {
// ArtistTab,
// TracklistTab
// TheChartsTab,
// TheFavoritesTab,
// TheErrorsTab,
// TheHomeTab,
// TheLinkAnalyzerTab,
// TheAboutTab,
// TheSettingsTab,
TheMainSearch
BaseLoadingPlaceholder
},
data: () => ({
newScrolled: null
newScrolled: null,
loading: false
}),
methods: {
handleContentScroll: debounce(async function () {
if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
if (
main_selected !== 'search_tab' ||
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) === -1
) {
return
mounted() {
this.$root.$on('updateSearchLoadingState', loading => {
console.log({ loading })
this.loading = loading
})
}
// methods: {
// handleContentScroll: debounce(async function () {
// if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
this.newScrolled = window.search_selected.split('_')[0]
// if (
// main_selected !== 'search_tab' ||
// ['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) === -1
// ) {
// return
// }
await this.$nextTick()
// this.newScrolled = window.search_selected.split('_')[0]
this.newScrolled = null
}, 100)
}
// await this.$nextTick()
// this.newScrolled = null
// }, 100)
// }
}
</script>
<style>
</style>

View File

@ -15,14 +15,40 @@
:title="$t('globals.toggle_download_tab_hint')"
></i>
<div id="queue_buttons">
<i id="open_downloads_folder" class="material-icons download_bar_icon hide" :title="$t('globals.open_downloads_folder')" @click="openDownloadsFolder">folder_open</i>
<i id="clean_queue" class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">delete_sweep</i>
<i
id="open_downloads_folder"
class="material-icons download_bar_icon hide"
:title="$t('globals.open_downloads_folder')"
@click="openDownloadsFolder"
>
folder_open
</i>
<i
id="clean_queue"
class="material-icons download_bar_icon"
@click="cleanQueue"
:title="$t('globals.clean_queue_hint')"
>
clear_all
</i>
<i
id="cancel_queue"
class="material-icons download_bar_icon"
@click="cancelQueue"
:title="$t('globals.cancel_queue_hint')"
>
delete_sweep
</i>
</div>
<div id="download_list" @click="handleListClick" ref="list"></div>
</div>
</template>
<style lang="scss" scoped>
#download_tab_container {
height: 100vh;
}
</style>
<script>
import $ from 'jquery'
import { socket } from '@/utils/socket'
@ -91,9 +117,9 @@ export default {
switch (icon) {
case 'remove':
socket.emit('removeFromQueue', uuid)
if ($(`#bar_${uuid}`).hasClass('indeterminate')){
if ($(`#bar_${uuid}`).hasClass('indeterminate')) {
$(`#download_${uuid}`).remove()
}else{
} else {
target.innerHTML = `<div class="circle-loader"></div>`
}
break
@ -101,7 +127,13 @@ export default {
}
},
initQueue(data) {
const { queue: initQueue, queueComplete: initQueueComplete, currentItem, queueList: initQueueList, restored } = data
const {
queue: initQueue,
queueComplete: initQueueComplete,
currentItem,
queueList: initQueueList,
restored
} = data
if (initQueueComplete.length) {
initQueueComplete.forEach(item => {
@ -120,21 +152,21 @@ export default {
this.addToQueue(initQueueList[item])
})
if (restored){
if (restored) {
toast(this.$t('toasts.queueRestored'), 'done', true, 'restoring_queue')
socket.emit('queueRestored')
}
},
addToQueue(queueItem, current = false) {
if (Array.isArray(queueItem)){
if (queueItem.length > 1){
if (Array.isArray(queueItem)) {
if (queueItem.length > 1) {
queueItem.forEach((item, i) => {
item.silent = true
this.addToQueue(item)
});
toast(this.$t('toasts.addedMoreToQueue', {n: queueItem.length}), 'playlist_add_check')
})
toast(this.$t('toasts.addedMoreToQueue', { n: queueItem.length }), 'playlist_add_check')
return
}else{
} else {
queueItem = queueItem[0]
}
}
@ -210,7 +242,7 @@ export default {
}
if (!queueItem.silent) {
toast(this.$t('toasts.addedToQueue', {item: queueItem.title}), 'playlist_add_check')
toast(this.$t('toasts.addedToQueue', { item: queueItem.title }), 'playlist_add_check')
}
},
updateQueue(update) {
@ -247,7 +279,7 @@ export default {
}
if (conversion) {
$('#bar_' + uuid).css('width', (100-conversion) + '%')
$('#bar_' + uuid).css('width', 100 - conversion + '%')
}
}
},
@ -273,7 +305,7 @@ export default {
this.queueList = {}
this.queueList[currentItem] = tempQueueItem
$('.download_object').each(function(index) {
$('.download_object').each(function (index) {
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
})
}
@ -307,7 +339,7 @@ export default {
},
finishDownload(uuid) {
if (this.queue.indexOf(uuid) > -1) {
toast(this.$t('toasts.finishDownload', {item: this.queueList[uuid].title}), 'done')
toast(this.$t('toasts.finishDownload', { item: this.queueList[uuid].title }), 'done')
$('#bar_' + uuid).css('width', '100%')
@ -382,5 +414,3 @@ export default {
}
</script>
<style>
</style>

View File

@ -29,7 +29,12 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{ `${$t('globals.by', {artist: release.user.name})} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
</div>
@ -57,7 +62,7 @@
</div>
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', {artist: release.artist.name})}` }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</div>
</section>
@ -129,7 +134,6 @@ export default {
this.$refs.notLogged.classList.add('hide')
}
// ! Need to init home everytime, atm this is called only on connect
this.checkIfWaitData(this.getHomeData)
// socket.on('init_home', this.initHome)
},

View File

@ -191,17 +191,11 @@ export default {
}
},
mounted() {
console.log('link analyzer mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('linkAnalyzerTab:reset', this.reset)
socket.on('analyze_track', this.showTrack)
socket.on('analyze_album', this.showAlbum)
socket.on('analyze_notSupported', this.notSupported)
},
beforeDestroy() {
console.log('link analyzer bef dest')
// this.$refs.root.style.display = 'none'
}
}
</script>

View File

@ -1,21 +0,0 @@
<template>
<main id="main_content">
<TheMiddleSection />
<TheDownloadTab />
</main>
</template>
<script>
import TheMiddleSection from '@components/TheMiddleSection.vue'
import TheDownloadTab from '@components/TheDownloadTab.vue'
export default {
components: {
TheMiddleSection,
TheDownloadTab
}
}
</script>
<style>
</style>

View File

@ -16,7 +16,7 @@
{{ $tc('globals.listTabs.playlist', 2) }}
</li>
</ul>
<div id="search_tab_content">
<div id="search_tab_content" v-show="showSearchTab">
<!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent">
<template v-for="section in results.allTab.ORDER">
@ -62,8 +62,8 @@
<p class="secondary-text">
{{
results.allTab.TOP_RESULT[0].type == 'artist'
? $t('search.fans', {n: $n(results.allTab.TOP_RESULT[0].nb_fan)})
: $t('globals.by', {artist: results.allTab.TOP_RESULT[0].artist}) +
? $t('search.fans', { n: $n(results.allTab.TOP_RESULT[0].nb_fan) })
: $t('globals.by', { artist: results.allTab.TOP_RESULT[0].artist }) +
' - ' +
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
}}
@ -87,9 +87,7 @@
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
explicit
</i>
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon"> explicit </i>
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</div>
</td>
@ -119,9 +117,7 @@
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')">
get_app
</i>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
@ -155,7 +151,7 @@
</div>
</div>
<p class="primary-text">{{ release.ART_NAME }}</p>
<p class="secondary-text">{{ $t('search.fans', {n: $n(release.NB_FAN)}) }}</p>
<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
</div>
</div>
<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
@ -256,11 +252,9 @@
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
<th>{{ $tc('globals.listTabs.album', 1) }}</th>
<th>
<i class="material-icons">
timer
</i>
<i class="material-icons"> timer </i>
</th>
<th style="width: 56px;"></th>
<th style="width: 56px"></th>
</tr>
</thead>
<tbody>
@ -286,9 +280,7 @@
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
explicit
</i>
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1
@ -321,9 +313,7 @@
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')">
get_app
</i>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
@ -360,7 +350,9 @@
</p>
<p class="secondary-text">
{{
$t('globals.by', {artist: release.artist.name}) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks)
$t('globals.by', { artist: release.artist.name }) +
' - ' +
$tc('globals.listTabs.trackN', release.nb_tracks)
}}
</p>
</div>
@ -423,7 +415,12 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{ `${$t('globals.by', {artist: release.user.name})} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
</div>
@ -444,7 +441,6 @@ import { changeTab } from '@js/tabs.js'
import EventBus from '@/utils/EventBus.js'
export default {
name: 'the-main-search-tab',
components: {
BaseLoadingPlaceholder
},
@ -484,7 +480,8 @@ export default {
total: 0,
loaded: false
}
}
},
showSearchTab: false
}
},
props: {
@ -494,18 +491,12 @@ export default {
}
},
mounted() {
console.log('main search mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
socket.on('mainSearch', this.handleMainSearch)
socket.on('search', this.handleSearch)
},
beforeDestroy() {
console.log('main search bef dest')
// this.$refs.root.style.display = 'none'
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
@ -570,15 +561,16 @@ export default {
}
},
showNewResults(term, mainSelected) {
if (term !== this.results.query || mainSelected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
if (needToPerformNewSearch) {
this.showSearchTab = false
socket.emit('mainSearch', { term })
// Showing loading placeholder
document.getElementById('content').style.display = 'none'
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
this.$root.$emit('updateSearchLoadingState', true)
} else {
document.getElementById('search_tab_content').style.display = 'block'
this.showSearchTab = true
document.getElementById('main_search_tablink').click()
}
},
@ -639,9 +631,11 @@ export default {
}
},
handleMainSearch(result) {
this.$root.$emit('updateSearchLoadingState', false)
// Hiding loading placeholder
document.getElementById('content').style.display = ''
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
// document.getElementById('content').style.display = ''
// document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
let resetObj = { data: [], next: 0, total: 0, loaded: false }
@ -651,11 +645,13 @@ export default {
this.results.artistTab = { ...resetObj }
this.results.playlistTab = { ...resetObj }
if (this.results.query == '') document.getElementById('search_all_tab').click()
if (this.results.query == '') {
document.getElementById('search_all_tab').click()
}
this.results.query = result.QUERY
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
// document.getElementById('main_search_tablink').click()
},
handleSearch(result) {
const { next: nextResult, total, type, data } = result

View File

@ -1,20 +1,29 @@
<template>
<div id="middle_section">
<TheSearchBar />
<main id="main_content">
<TheContent />
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" />
</div>
<!-- <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" /> -->
</main>
</template>
<style lang="scss" scoped>
#main_content {
background-color: var(--main-background);
min-width: 10px;
// margin-left: 48px; // $sidebar-width
// width: calc(100% - #{$sidebar-width});
// flex: 1;
width: 100%;
height: 100%;
}
</style>
<script>
import TheContent from '@components/TheContent.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
components: {
TheContent,
TheSearchBar,
BaseLoadingPlaceholder
}
}

View File

@ -25,28 +25,57 @@ import EventBus from '@/utils/EventBus.js'
import { socket } from '@/utils/socket'
export default {
data() {
return {
lastTextSearch: ''
}
},
methods: {
handleSearchBarKeyup(keyEvent) {
// Enter key
if (keyEvent.keyCode !== 13) return
async handleSearchBarKeyup(keyEvent) {
let isEnterPressed = keyEvent.keyCode === 13
// If not enter do nothing
if (!isEnterPressed) return
let term = this.$refs.searchbar.value
let isEmptySearch = term === ''
if (isValidURL(term)) {
if (keyEvent.ctrlKey) {
// If empty do nothing
if (isEmptySearch) return
let isSearchingURL = isValidURL(term)
let isCtrlPressed = keyEvent.ctrlKey
let isShowingAnalyzer = this.$route.name === 'Link Analyzer'
let isShowingSearch = this.$route.name === 'Search'
let sameAsLastSearch = term === this.lastTextSearch
if (isSearchingURL) {
if (isCtrlPressed) {
this.$root.$emit('QualityModal:open', term)
} else {
if (main_selected === 'analyzer_tab') {
if (isShowingAnalyzer) {
EventBus.$emit('linkAnalyzerTab:reset')
socket.emit('analyzeLink', term)
} else {
// ? Open downloads tab ?
Downloads.sendAddToQueue(term)
}
}
} else {
if (term === '') return
if (isShowingSearch && sameAsLastSearch) return
this.$root.$emit('mainSearch:showNewResults', term, main_selected)
if (!isShowingSearch) {
await this.$router.push({
name: 'Search'
})
}
if (!sameAsLastSearch) {
this.$root.$emit('updateSearchLoadingState', true)
this.lastTextSearch = term
}
this.$root.$emit('mainSearch:showNewResults', term, window.main_selected)
}
}
}

View File

@ -63,11 +63,11 @@ const routes = [
name: 'Settings',
component: TheSettingsTab
},
// {
// path: '/search',
// name: 'Search',
// component: TheMainSearch
// },
{
path: '/search',
name: 'Search',
component: TheMainSearch
},
// 404 client side
{
path: '*',

View File

@ -1,11 +1,3 @@
/* Middle section */
#middle_section {
background-color: var(--main-background);
width: 100%;
height: 100%;
min-width: 10px;
}
/* Center section */
$icon-dimension: 2rem;
$searchbar-height: calc(2rem + 1em);
@ -63,31 +55,6 @@ $searchbar-height: calc(2rem + 1em);
}
}
#content {
background-color: var(--main-background);
// width: calc(100% - 10px);
width: 100%;
height: calc(100% - 93px);
overflow-y: scroll;
overflow-x: hidden;
// padding-left: 10px;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--main-background);
}
&::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
#container {
--container-width: 95%;
@ -100,12 +67,6 @@ $searchbar-height: calc(2rem + 1em);
}
}
#container {
margin: 0 auto;
max-width: 1280px;
width: var(--container-width);
}
/* Modal Content */
.smallmodal-content {
--modal-content-width: 95%;

View File

@ -241,7 +241,7 @@ a {
}
.loading_placeholder {
display: flex;
// display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@ -316,13 +316,6 @@ a {
}
}
#main_content {
margin-left: $sidebar-width;
width: calc(100% - #{$sidebar-width});
height: 100%;
display: flex;
}
// TODO Remove
.inline-flex {
display: flex;

View File

@ -7,11 +7,11 @@ socket.on('connect', () => {
})
socket.on('init_charts', charts => {
store.dispatch('cacheCharts', charts)
// store.dispatch('cacheCharts', charts)
})
socket.on('init_favorites', favorites => {
store.dispatch('setFavorites', favorites)
// store.dispatch('setFavorites', favorites)
})
socket.on('init_settings', (settings, credentials, defaults) => {