nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

spotlight optimizing UI

Browse Source
This commit is contained in:
Peter Papp
2021-08-10 08:38:57 +02:00
parent f78cedbc0c
commit 79295e77b6
2 changed files with 69 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/mix-manifest.json
View File

@@ -55,7 +55,7 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=146515010333316075d6",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=320263fdc9aef3a3be60",
"/chunks/plans.js": "/chunks/plans.js?id=0533e61243eeb87b3e8e",
"/chunks/platform.js": "/chunks/platform.js?id=bf59a93fdde837b22dbf",
"/chunks/platform.js": "/chunks/platform.js?id=597d30febb2dfcc15eba",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=ee71419eaba22ae14a9a",
"/chunks/profile.js": "/chunks/profile.js?id=7186e04a6f0f5b6bf470",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
@@ -613,5 +613,27 @@
"/chunks/files~chunks/platform~chunks/shared/file-browser.dc1f0f8d38a536a2dc13.hot-update.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.dc1f0f8d38a536a2dc13.hot-update.js",
"/chunks/files~chunks/platform~chunks/shared/file-browser.3aa1fa7fa9c75daee08a.hot-update.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.3aa1fa7fa9c75daee08a.hot-update.js",
"/chunks/files~chunks/platform~chunks/shared/file-browser.1971794c4174676bef38.hot-update.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.1971794c4174676bef38.hot-update.js",
"/chunks/files~chunks/platform~chunks/shared/file-browser.23684752d840db317fdc.hot-update.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.23684752d840db317fdc.hot-update.js"
"/chunks/files~chunks/platform~chunks/shared/file-browser.23684752d840db317fdc.hot-update.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.23684752d840db317fdc.hot-update.js",
"/chunks/platform.1ff5dd620d742c5633fa.hot-update.js": "/chunks/platform.1ff5dd620d742c5633fa.hot-update.js",
"/chunks/platform.5fced3457c18d3a10a02.hot-update.js": "/chunks/platform.5fced3457c18d3a10a02.hot-update.js",
"/chunks/platform.c3141bfeac5e3ac327b5.hot-update.js": "/chunks/platform.c3141bfeac5e3ac327b5.hot-update.js",
"/chunks/platform.ac360556ed6d21227e98.hot-update.js": "/chunks/platform.ac360556ed6d21227e98.hot-update.js",
"/chunks/platform.e7ad6e5ad11eb26434dc.hot-update.js": "/chunks/platform.e7ad6e5ad11eb26434dc.hot-update.js",
"/chunks/platform.88499f8ecc2dc8844be4.hot-update.js": "/chunks/platform.88499f8ecc2dc8844be4.hot-update.js",
"/chunks/platform.0d99c9e82418570bab1a.hot-update.js": "/chunks/platform.0d99c9e82418570bab1a.hot-update.js",
"/chunks/platform.3d4e401a2fc25a82ff5d.hot-update.js": "/chunks/platform.3d4e401a2fc25a82ff5d.hot-update.js",
"/chunks/platform.6e14fe2318eada6fea49.hot-update.js": "/chunks/platform.6e14fe2318eada6fea49.hot-update.js",
"/chunks/platform.1cd490c1a1386aa79fb5.hot-update.js": "/chunks/platform.1cd490c1a1386aa79fb5.hot-update.js",
"/chunks/platform.aa331318daafc9f5c069.hot-update.js": "/chunks/platform.aa331318daafc9f5c069.hot-update.js",
"/chunks/platform.3a2b3fcc3a9d2f950894.hot-update.js": "/chunks/platform.3a2b3fcc3a9d2f950894.hot-update.js",
"/chunks/platform.c2b61a5182fec32a41e2.hot-update.js": "/chunks/platform.c2b61a5182fec32a41e2.hot-update.js",
"/chunks/platform.c62b11f5f038092152d0.hot-update.js": "/chunks/platform.c62b11f5f038092152d0.hot-update.js",
"/chunks/platform.06b0053018a08ef79afd.hot-update.js": "/chunks/platform.06b0053018a08ef79afd.hot-update.js",
"/chunks/platform.e43bfc58e4657bb01c51.hot-update.js": "/chunks/platform.e43bfc58e4657bb01c51.hot-update.js",
"/chunks/platform.38926643b3c807517c9b.hot-update.js": "/chunks/platform.38926643b3c807517c9b.hot-update.js",
"/chunks/platform.b01a82caeb0fea146e1e.hot-update.js": "/chunks/platform.b01a82caeb0fea146e1e.hot-update.js",
"/chunks/platform.8afb013ee3223badd378.hot-update.js": "/chunks/platform.8afb013ee3223badd378.hot-update.js",
"/chunks/platform.ac0340f63402777e82e0.hot-update.js": "/chunks/platform.ac0340f63402777e82e0.hot-update.js",
"/chunks/platform.e919cc82bbf31d4f5310.hot-update.js": "/chunks/platform.e919cc82bbf31d4f5310.hot-update.js",
"/chunks/platform.f985a50ce3a63b7bc6db.hot-update.js": "/chunks/platform.f985a50ce3a63b7bc6db.hot-update.js"
}

90
resources/js/components/Spotlight/Spotlight.vue
View File

@@ -1,27 +1,30 @@
<template>
<div v-if="isVisible" @keyup.esc="exit" class="spotlight-wrapper">
<div class="spotlight-search">
<div class="icon">
<div v-if="isLoading" class="spinner-icon">
<Spinner />
<div @keyup.esc="exit" id="spotlight" tabindex="-1">
<div v-if="isVisible" class="spotlight-wrapper">
<div class="spotlight-search">
<div class="icon">
<div v-if="isLoading" class="spinner-icon">
<Spinner />
</div>
<search-icon :class="{'is-hidden': isLoading}" size="22" class="text-theme" />
</div>
<search-icon :class="{'is-hidden': isLoading}" size="22" class="text-theme" />
</div>
<input v-model="query" @keydown.enter="showSelected" @keydown.meta="proceedToSelect" @keyup.down="onPageDown" @keyup.up="onPageUp" type="text" placeholder="Spotlight search..." ref="searchInput">
<div class="input-hint">
<span class="title">esc</span>
</div>
</div>
<div v-if="results.length !== 0" class="spotlight-results">
<div v-for="(item, i) in results" :key="item.id" class="result-item">
<FileItemList
:item="item"
class="file-item"
:class="{'is-clicked': i === index}"
:disable-highlight="true"
/>
<input v-model="query" @keydown.enter="showSelected" @keydown.meta="proceedToSelect" @keyup.down="onPageDown" @keyup.up="onPageUp" type="text" placeholder="Spotlight search..." ref="searchInput">
<div class="input-hint">
<span class="title">{{ i === 0 ? '↵' : getSystemMetaKeyIcon() + i}}</span>
<span class="title">esc</span>
</div>
</div>
<div v-if="results.length !== 0" class="spotlight-results">
<div v-for="(item, i) in results" :key="item.id" class="result-item">
<FileItemList
:item="item"
class="file-item"
:class="{'is-clicked': i === index}"
:disable-highlight="true"
@dblclick.native="exit"
/>
<div class="input-hint">
<span class="title">{{ i === 0 ? '↵' : getSystemMetaKeyIcon() + i}}</span>
</div>
</div>
</div>
</div>
@@ -46,9 +49,8 @@ export default {
},
watch: {
query(val) {
if (val === '' || typeof val === 'undefined') {
if (val === '' || typeof val === 'undefined')
this.results = []
}
this.index = 0
this.searchFiles(val)
@@ -94,18 +96,14 @@ export default {
this.exit()
},
onPageDown() {
if (typeof this.index === 'undefined') {
this.index = 0
} else {
if (this.index < (this.results.length - 1)) this.index++
}
if (this.index < (this.results.length - 1))
this.index++
},
onPageUp() {
if (this.index > 0) this.index--
},
searchFiles: debounce(function (value) {
// Prevent empty searching
if (value === '' || typeof value === 'undefined') return
@@ -119,7 +117,7 @@ export default {
? 'private'
: 'public'
route = `/api/browse/search/${permission}/${router.currentRoute.params.token}`
route = `/api/browse/search/${permission}/${this.$router.currentRoute.params.token}`
} else {
route = '/api/browse/search'
@@ -135,7 +133,7 @@ export default {
.catch(() => this.$isSomethingWrong())
.finally(() => this.isLoading = false)
}, 300),
}, 150),
exit() {
this.results = []
this.query = ''
@@ -162,24 +160,29 @@ export default {
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
.spotlight-wrapper {
#spotlight {
position: absolute;
z-index: 99;
top: 10%;
left: 0;
right: 0;
bottom: 10%;
overflow-y: auto;
width: 100%;
height: 100%;
.spotlight-wrapper {
margin: 90px auto 0;
overflow-y: auto;
width: 590px;
background: white;
position: relative;
border-radius: 8px;
z-index: 99;
}
}
.spotlight-results {
width: 590px;
margin: -8px auto 0;
background: white;
padding: 10px 10px 10px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top: 1px solid $light_mode_border;
position: relative;
z-index: 99;
.result-item {
position: relative;
@@ -199,9 +202,6 @@ export default {
}
.spotlight-search {
width: 590px;
background: white;
border-radius: 8px;
margin: 0 auto 0;
padding: 20px 25px;
display: flex;