danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
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>

111
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
} }
// 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 // await this.$nextTick()
}, 100)
} // 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) => {