evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

14
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

40
src/components/App.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<div style="height: inherit;"> <div>
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<TheSidebar /> <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 /> <TheTrackPreview />
<TheQualityModal /> <TheQualityModal />
@ -12,18 +19,39 @@
</div> </div>
</template> </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> <script>
import TheSidebar from '@components/TheSidebar.vue' 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 TheTrackPreview from '@components/TheTrackPreview.vue'
import TheQualityModal from '@components/TheQualityModal.vue' import TheQualityModal from '@components/TheQualityModal.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue' import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import TheContextMenu from '@components/TheContextMenu.vue' import TheContextMenu from '@components/TheContextMenu.vue'
import TheDownloadTab from '@components/TheDownloadTab.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
export default { export default {
components: { components: {
TheSidebar, TheSidebar,
TheMainContent, TheSearchBar,
TheMiddleSection,
TheDownloadTab,
TheTrackPreview, TheTrackPreview,
TheQualityModal, TheQualityModal,
BaseLoadingPlaceholder, BaseLoadingPlaceholder,

2
src/components/BaseLoadingPlaceholder.vue
View File

@ -1,5 +1,5 @@
<template functional> <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> <span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring"> <div class="lds-ring">
<div></div> <div></div>

117
src/components/TheContent.vue
View File

@ -1,75 +1,80 @@
<template> <template>
<section id="content" @scroll="handleContentScroll" ref="content"> <!-- <section id="content" @scroll="handleContentScroll" ref="content"> -->
<section id="content">
<div id="container"> <div id="container">
<!-- HomeTab and MainSearchTab --> <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
<router-view></router-view> <router-view></router-view>
<TheMainSearch :scrolled-search-type="newScrolled" />
<!-- <ArtistTab /> -->
<!-- <TracklistTab /> -->
<!-- <TheHomeTab /> -->
<!-- <TheChartsTab />
<TheFavoritesTab />
<TheErrorsTab />
<TheLinkAnalyzerTab />
<TheAboutTab />
<TheSettingsTab /> -->
</div> </div>
</section> </section>
</template> </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> <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 { debounce } from '@/utils/utils'
import EventBus from '@/utils/EventBus.js' import EventBus from '@/utils/EventBus.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default { export default {
components: { components: {
// ArtistTab, BaseLoadingPlaceholder
// TracklistTab
// TheChartsTab,
// TheFavoritesTab,
// TheErrorsTab,
// TheHomeTab,
// TheLinkAnalyzerTab,
// TheAboutTab,
// TheSettingsTab,
TheMainSearch
}, },
data: () => ({ data: () => ({
newScrolled: null newScrolled: null,
loading: false
}), }),
methods: { mounted() {
handleContentScroll: debounce(async function () { this.$root.$on('updateSearchLoadingState', loading => {
if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return console.log({ loading })
this.loading = loading
if ( })
main_selected !== 'search_tab' ||
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) === -1
) {
return
}
this.newScrolled = window.search_selected.split('_')[0]
await this.$nextTick()
this.newScrolled = null
}, 100)
} }
// 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
// }
// this.newScrolled = window.search_selected.split('_')[0]
// await this.$nextTick()
// this.newScrolled = null
// }, 100)
// }
} }
</script> </script>
<style>
</style>

66
src/components/TheDownloadTab.vue
View File

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

10
src/components/TheHomeTab.vue
View File

@ -29,7 +29,12 @@
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text"> <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> </p>
</div> </div>
</div> </div>
@ -57,7 +62,7 @@
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <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>
</div> </div>
</section> </section>
@ -129,7 +134,6 @@ export default {
this.$refs.notLogged.classList.add('hide') this.$refs.notLogged.classList.add('hide')
} }
// ! Need to init home everytime, atm this is called only on connect
this.checkIfWaitData(this.getHomeData) this.checkIfWaitData(this.getHomeData)
// socket.on('init_home', this.initHome) // socket.on('init_home', this.initHome)
}, },

6
src/components/TheLinkAnalyzerTab.vue
View File

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

21
src/components/TheMainContent.vue
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>

74
src/components/TheMainSearch.vue
View File

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

21
src/components/TheMiddleSection.vue
View File

@ -1,20 +1,29 @@
<template> <template>
<div id="middle_section"> <main id="main_content">
<TheSearchBar />
<TheContent /> <TheContent />
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" /> <!-- <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" /> -->
</div> </main>
</template> </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> <script>
import TheContent from '@components/TheContent.vue' import TheContent from '@components/TheContent.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue' import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default { export default {
components: { components: {
TheContent, TheContent,
TheSearchBar,
BaseLoadingPlaceholder BaseLoadingPlaceholder
} }
} }

45
src/components/TheSearchBar.vue
View File

@ -25,28 +25,57 @@ import EventBus from '@/utils/EventBus.js'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
export default { export default {
data() {
return {
lastTextSearch: ''
}
},
methods: { methods: {
handleSearchBarKeyup(keyEvent) { async handleSearchBarKeyup(keyEvent) {
// Enter key let isEnterPressed = keyEvent.keyCode === 13
if (keyEvent.keyCode !== 13) return
// If not enter do nothing
if (!isEnterPressed) return
let term = this.$refs.searchbar.value let term = this.$refs.searchbar.value
let isEmptySearch = term === ''
if (isValidURL(term)) { // If empty do nothing
if (keyEvent.ctrlKey) { 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) this.$root.$emit('QualityModal:open', term)
} else { } else {
if (main_selected === 'analyzer_tab') { if (isShowingAnalyzer) {
EventBus.$emit('linkAnalyzerTab:reset') EventBus.$emit('linkAnalyzerTab:reset')
socket.emit('analyzeLink', term) socket.emit('analyzeLink', term)
} else { } else {
// ? Open downloads tab ?
Downloads.sendAddToQueue(term) Downloads.sendAddToQueue(term)
} }
} }
} else { } 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)
} }
} }
} }

10
src/router.js
View File

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

39
src/styles/scss/_middle-section.scss
View File

@ -1,11 +1,3 @@
/* Middle section */
#middle_section {
background-color: var(--main-background);
width: 100%;
height: 100%;
min-width: 10px;
}
/* Center section */ /* Center section */
$icon-dimension: 2rem; $icon-dimension: 2rem;
$searchbar-height: calc(2rem + 1em); $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 {
--container-width: 95%; --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 */ /* Modal Content */
.smallmodal-content { .smallmodal-content {
--modal-content-width: 95%; --modal-content-width: 95%;

9
src/styles/scss/globals/_globals.scss
View File

@ -241,7 +241,7 @@ a {
} }
.loading_placeholder { .loading_placeholder {
display: flex; // display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; 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 // TODO Remove
.inline-flex { .inline-flex {
display: flex; display: flex;

4
src/utils/socket.js
View File

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