mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-25 22:24:42 +00:00
mobile spotlight
This commit is contained in:
Peter Papp
@@ -18,7 +18,7 @@
|
||||
|
||||
<!--Search bar-->
|
||||
<ToolbarGroup style="margin-left: 0">
|
||||
<SearchBar v-model="query" @reset-query="query = ''" :placeholder="$t('inputs.placeholder_search_files')" />
|
||||
<SearchBar />
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--Creating controls-->
|
||||
@@ -169,16 +169,6 @@
|
||||
return this.$isThisLocation(locations) && this.clipboard.length === 1 && this.clipboard[0].type === 'folder'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
this.$searchFiles(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
'entries',
|
||||
]),
|
||||
isEmpty() {
|
||||
return this.entries && this.entries.length == 0
|
||||
return this.entries && this.entries.length === 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
|
||||
<!--Base location-->
|
||||
<div v-if="$isThisLocation(['base']) && $checkPermission(['master', 'editor']) && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
<MobileActionButton @click.native="showSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="createItems" icon="cloud-plus">
|
||||
{{ $t('mobile.create') }}
|
||||
</MobileActionButton>
|
||||
<!-- <MobileActionButtonUpload>
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>-->
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
@@ -22,6 +22,9 @@
|
||||
|
||||
<!--Base location editor-->
|
||||
<div v-if="$isThisLocation('public') && $checkPermission('editor') && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
@@ -38,6 +41,9 @@
|
||||
|
||||
<!--Base location visitor-->
|
||||
<div v-if="$isThisLocation('public') && $checkPermission('visitor') && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileActionButton>
|
||||
@@ -48,6 +54,9 @@
|
||||
|
||||
<!--Recent uploads location-->
|
||||
<div v-if="$isThisLocation('latest') && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
@@ -64,6 +73,9 @@
|
||||
|
||||
<!--Trash location--->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
@@ -80,6 +92,9 @@
|
||||
|
||||
<!--Shared location--->
|
||||
<div v-if="$isThisLocation(['shared']) && ! isSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="showSpotlight" icon="search">
|
||||
{{ $t('actions.search')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ filterLocationTitle }}
|
||||
</MobileActionButton>
|
||||
@@ -150,6 +165,9 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSpotlight() {
|
||||
events.$emit('spotlight:show')
|
||||
},
|
||||
showLocations() {
|
||||
events.$emit('mobile-menu:show', 'file-filter')
|
||||
},
|
||||
|
||||
@@ -18,8 +18,6 @@
|
||||
>
|
||||
<MobileToolbar />
|
||||
|
||||
<SearchBar v-model="query" @reset-query="query = ''" class="mobile-search" :placeholder="$t('inputs.placeholder_search_files')" />
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<FileActionsMobile />
|
||||
|
||||
@@ -66,14 +64,7 @@
|
||||
</div>
|
||||
|
||||
<!--Show empty page if folder is empty-->
|
||||
<EmptyFilePage v-if="! isSearching" />
|
||||
|
||||
<!--Show empty page if no search results-->
|
||||
<EmptyMessage
|
||||
v-if="isSearching && isEmpty"
|
||||
:message="$t('messages.nothing_was_found')"
|
||||
icon="eye-slash"
|
||||
/>
|
||||
<EmptyFilePage />
|
||||
</div>
|
||||
|
||||
<!--File Info Panel-->
|
||||
@@ -91,7 +82,6 @@
|
||||
import FileItemList from '@/components/FilesView/FileItemList'
|
||||
import FileItemGrid from '@/components/FilesView/FileItemGrid'
|
||||
import InfoSidebar from '@/components/FilesView/InfoSidebar'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import {debounce} from "lodash";
|
||||
@@ -106,7 +96,6 @@
|
||||
FileItemGrid,
|
||||
EmptyMessage,
|
||||
InfoSidebar,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
@@ -114,7 +103,6 @@
|
||||
'isVisibleSidebar',
|
||||
'FilePreviewType',
|
||||
'currentFolder',
|
||||
'isSearching',
|
||||
'clipboard',
|
||||
'isLoading',
|
||||
'entries'
|
||||
@@ -126,7 +114,7 @@
|
||||
return this.FilePreviewType === 'list'
|
||||
},
|
||||
isEmpty() {
|
||||
return this.entries.length == 0
|
||||
return this.entries.length === 0
|
||||
},
|
||||
draggedItems() {
|
||||
//Set opacity for dragged items
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<button class="mobile-action-button">
|
||||
<div class="flex">
|
||||
<search-icon v-if="icon === 'search'" size="15" class="icon dark-text-theme" />
|
||||
<refresh-cw-icon v-if="icon === 'refresh'" size="15" class="icon dark-text-theme" />
|
||||
<download-icon v-if="icon === 'download'" size="15" class="icon dark-text-theme" />
|
||||
<copy-icon v-if="icon === 'copy'" size="15" class="icon dark-text-theme" />
|
||||
@@ -18,7 +19,7 @@
|
||||
<dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="icon dark-text-theme" />
|
||||
<sorting-icon v-if="icon === 'preview-sorting'" class="icon dark-text-theme preview-sorting" />
|
||||
<cloud-plus-icon v-if="icon === 'cloud-plus'" class="icon dark-text-theme preview-sorting" />
|
||||
<span class="label">
|
||||
<span v-if="$slots.default" class="label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
@@ -26,7 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RefreshCwIcon, DownloadIcon, CopyIcon, FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon } from 'vue-feather-icons'
|
||||
import { SearchIcon, RefreshCwIcon, DownloadIcon, CopyIcon, FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon } from 'vue-feather-icons'
|
||||
import CloudPlusIcon from '@/components/FilesView/Icons/CloudPlusIcon'
|
||||
import SortingIcon from '@/components/FilesView/Icons/SortingIcon'
|
||||
|
||||
@@ -47,6 +48,7 @@
|
||||
SortingIcon,
|
||||
XSquareIcon,
|
||||
FilterIcon,
|
||||
SearchIcon,
|
||||
CheckIcon,
|
||||
TrashIcon,
|
||||
PlusIcon,
|
||||
@@ -76,7 +78,6 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
@include font-size(14);
|
||||
|
||||
path, line, polyline, rect, circle, polygon {
|
||||
@@ -89,7 +90,8 @@
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include transform(scale(0.95));
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="mobile-toolbar">
|
||||
|
||||
<!-- Go back-->
|
||||
<div @click="goBack" class="go-back-button" :class="{'is-visible': browseHistory.length > 1}">
|
||||
<chevron-left-icon size="17" class="icon-back" />
|
||||
</div>
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon size="17" class="icon-back" :class="{'is-visible': browseHistory.length > 1}" />
|
||||
|
||||
<!--Folder Title-->
|
||||
<div class="directory-name">
|
||||
{{ directoryName }}
|
||||
</div>
|
||||
<!--Folder Title-->
|
||||
<div class="directory-name">
|
||||
{{ directoryName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--More Actions-->
|
||||
<div class="more-actions-button">
|
||||
@@ -104,26 +104,25 @@
|
||||
.go-back-button {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
.icon-back {
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-top: -2px;
|
||||
}
|
||||
margin-right: 4px;
|
||||
|
||||
&.is-visible {
|
||||
pointer-events: initial;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
&.is-visible {
|
||||
pointer-events: initial;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
@include font-size(16);
|
||||
|
||||
@@ -1,53 +1,35 @@
|
||||
<template>
|
||||
<div class="search-bar">
|
||||
<div class="icon" v-if="!isQuery">
|
||||
<search-icon size="19" />
|
||||
</div>
|
||||
<div class="icon" v-if="isQuery" @click="resetQuery">
|
||||
<x-icon class="pointer" size="19" />
|
||||
</div>
|
||||
<input
|
||||
v-model="query"
|
||||
@input="$emit('input', query)"
|
||||
class="query focus-border-theme"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<div @click="showSpotlight" class="search-bar">
|
||||
<div class="message">
|
||||
<span>
|
||||
{{ $t('inputs.placeholder_search_files') }}
|
||||
</span>
|
||||
<span>
|
||||
{{ metaKeyIcon }}+K
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {SearchIcon, XIcon} from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
import {SearchIcon} from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'DesktopSearchBar',
|
||||
props: [
|
||||
'placeholder'
|
||||
],
|
||||
name: 'SearchBar',
|
||||
components: {
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
isQuery() {
|
||||
return this.query !== '' && typeof this.query !== 'undefined'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetQuery() {
|
||||
this.query = ''
|
||||
this.$emit('reset-query')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('clear-query', () => this.query = undefined)
|
||||
}
|
||||
computed: {
|
||||
metaKeyIcon() {
|
||||
return this.$isApple() ? '⌘' : '⊞'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showSpotlight() {
|
||||
events.$emit('spotlight:show')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -59,86 +41,46 @@
|
||||
position: relative;
|
||||
background: $light_background;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
.message {
|
||||
border-radius: 8px;
|
||||
outline: 0;
|
||||
padding: 9px 20px 9px 43px;
|
||||
font-weight: 400;
|
||||
@include font-size(16);
|
||||
padding: 11px 20px;
|
||||
min-width: 300px;
|
||||
transition: 0.15s all ease;
|
||||
border: 1px solid white;
|
||||
-webkit-appearance: none;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&::placeholder {
|
||||
color: #B9B9B9;
|
||||
@include font-size(13);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 11px 15px;
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
circle, line {
|
||||
stroke: #B9B9B9;
|
||||
span {
|
||||
font-weight: 400;
|
||||
@include font-size(14);
|
||||
color: #B9B9B9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.search-bar input {
|
||||
.search-bar .message {
|
||||
max-width: 190px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.search-bar {
|
||||
|
||||
input {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
max-width: initial;
|
||||
padding: 9px 20px 9px 30px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 11px 15px 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar .message {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.search-bar {
|
||||
input {
|
||||
border-color: transparent;
|
||||
color: $dark_mode_text_primary;
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
fill: $dark_mode_text_secondary;
|
||||
.message span {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -265,7 +265,7 @@
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
background: $dark_mode_foreground;
|
||||
background: #181a1b;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,31 +1,44 @@
|
||||
<template>
|
||||
<div @keyup.esc="exit" id="spotlight" tabindex="-1">
|
||||
<div v-if="isVisible" class="spotlight-wrapper">
|
||||
<div v-if="isVisible" @keyup.esc="exit" id="spotlight" tabindex="-1">
|
||||
<div class="spotlight-wrapper">
|
||||
|
||||
<!--Query bar-->
|
||||
<div class="spotlight-search">
|
||||
<div class="icon">
|
||||
<div class="magnify-icon">
|
||||
<div v-if="isLoading" class="spinner-icon">
|
||||
<Spinner />
|
||||
</div>
|
||||
<search-icon :class="{'is-hidden': isLoading}" size="22" class="text-theme" />
|
||||
<search-icon :class="{'is-hidden': isLoading}" size="22" class="magnify 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>
|
||||
<span class="title keyboard-hint">esc</span>
|
||||
</div>
|
||||
<div @click="exit" class="close-icon">
|
||||
<x-icon size="22" class="close"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="results.length !== 0" class="spotlight-results">
|
||||
<div v-for="(item, i) in results" :key="item.id" class="result-item">
|
||||
|
||||
<div v-if="query !== ''" class="spotlight-results">
|
||||
|
||||
<!--Show results-->
|
||||
<div v-if="results.length !== 0" 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"
|
||||
@click.native="exit"
|
||||
/>
|
||||
<div class="input-hint">
|
||||
<span class="title">{{ i === 0 ? '↵' : getSystemMetaKeyIcon() + i}}</span>
|
||||
<span class="title">{{ i === 0 ? '↵' : metaKeyIcon + i}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show Empty message-->
|
||||
<div v-if="results.length === 0">
|
||||
<span class="message">{{ $t('messages.nothing_was_found') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,8 +47,7 @@
|
||||
<script>
|
||||
import FileItemList from '@/components/FilesView/FileItemList'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import {SearchIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {SearchIcon, XIcon} from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
import {debounce} from 'lodash';
|
||||
import axios from "axios";
|
||||
@@ -46,6 +58,12 @@ export default {
|
||||
FileItemList,
|
||||
SearchIcon,
|
||||
Spinner,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
metaKeyIcon() {
|
||||
return this.$isApple() ? '⌘' : '⊞'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
@@ -139,9 +157,6 @@ export default {
|
||||
this.query = ''
|
||||
this.isVisible = false
|
||||
events.$emit('popup:close')
|
||||
},
|
||||
getSystemMetaKeyIcon() {
|
||||
return this.$isApple() ? '⌘' : '⊞'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -160,7 +175,6 @@ export default {
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
|
||||
#spotlight {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -177,6 +191,62 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.spotlight-search {
|
||||
margin: 0 auto 0;
|
||||
padding: 20px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
.magnify-icon {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
.is-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.magnify {
|
||||
transform: translateY(3px);
|
||||
|
||||
circle, line {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-icon {
|
||||
@include transform(scale(0.5) translateY(23px));
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
color: $text;
|
||||
@include font-size(19);
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
cursor: pointer;
|
||||
|
||||
.close {
|
||||
transform: translateY(4px);
|
||||
|
||||
line {
|
||||
stroke: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spotlight-results {
|
||||
margin: -8px auto 0;
|
||||
padding: 10px 10px 10px;
|
||||
@@ -199,49 +269,12 @@ export default {
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
}
|
||||
|
||||
.spotlight-search {
|
||||
margin: 0 auto 0;
|
||||
padding: 20px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
.is-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
|
||||
circle, line {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-icon {
|
||||
@include transform(scale(0.5) translateY(23px));
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
.message {
|
||||
color: $text;
|
||||
@include font-size(19);
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: $text;
|
||||
}
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,9 +284,12 @@ export default {
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.spotlight-search {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
#spotlight .spotlight-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.spotlight-search {
|
||||
input {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
@@ -265,16 +301,38 @@ export default {
|
||||
|
||||
.spotlight-results {
|
||||
border-color: $dark_mode_border_color;
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.is-clicked {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.input-hint .title {
|
||||
.input-hint .title, .message {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
#spotlight {
|
||||
background: white;
|
||||
z-index: 99;
|
||||
|
||||
.spotlight-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.spotlight-search {
|
||||
.keyboard-hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spotlight-results .input-hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Vendored
-22
@@ -44,28 +44,6 @@ const Helpers = {
|
||||
})
|
||||
}
|
||||
|
||||
Vue.prototype.$searchFiles = debounce(function (value) {
|
||||
|
||||
if (value !== '' && typeof value !== 'undefined') {
|
||||
|
||||
this.$store.dispatch('getSearchResult', value)
|
||||
|
||||
} else if (typeof value !== 'undefined') {
|
||||
|
||||
if (this.$store.getters.currentFolder) {
|
||||
|
||||
// Get back after delete query to previously folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{folder: this.$store.getters.currentFolder, back: true, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{folder: this.$store.getters.currentFolder, back: true, init: false}])
|
||||
}
|
||||
}
|
||||
|
||||
this.$store.commit('CHANGE_SEARCHING_STATE', false)
|
||||
}
|
||||
}, 300)
|
||||
|
||||
Vue.prototype.$updateText = debounce(function (route, name, value, allowEmpty = false) {
|
||||
|
||||
if ((value === '' || value === ' ' || typeof value === 'object') && !allowEmpty) return
|
||||
|
||||
-38
@@ -8,7 +8,6 @@ const defaultState = {
|
||||
currentFolder: undefined,
|
||||
navigation: undefined,
|
||||
|
||||
isSearching: false,
|
||||
isLoading: true,
|
||||
|
||||
browseHistory: [],
|
||||
@@ -23,12 +22,6 @@ const actions = {
|
||||
if (payload.init)
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
// Clear search
|
||||
if (getters.isSearching) {
|
||||
commit('CHANGE_SEARCHING_STATE', false)
|
||||
events.$emit('clear-query')
|
||||
}
|
||||
|
||||
// Set folder location
|
||||
payload.folder.location = payload.folder.deleted_at || payload.folder.location === 'trash' ? 'trash' : 'base'
|
||||
|
||||
@@ -130,33 +123,6 @@ const actions = {
|
||||
})
|
||||
.catch(() => Vue.prototype.$isSomethingWrong())
|
||||
},
|
||||
getSearchResult: ({commit, getters}, query) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
commit('CHANGE_SEARCHING_STATE', true)
|
||||
|
||||
// Get route
|
||||
let route = undefined
|
||||
|
||||
if (getters.sharedDetail) {
|
||||
let permission = getters.sharedDetail.is_protected
|
||||
? 'private'
|
||||
: 'public'
|
||||
|
||||
route = `/api/browse/search/${permission}/${router.currentRoute.params.token}`
|
||||
|
||||
} else {
|
||||
route = '/api/browse/search'
|
||||
}
|
||||
|
||||
axios
|
||||
.get(route, {
|
||||
params: {query: query}
|
||||
})
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
})
|
||||
.catch(() => Vue.prototype.$isSomethingWrong())
|
||||
},
|
||||
getFolderTree: ({commit, getters}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
@@ -224,9 +190,6 @@ const mutations = {
|
||||
}
|
||||
})
|
||||
},
|
||||
CHANGE_SEARCHING_STATE(state, searchState) {
|
||||
state.isSearching = searchState
|
||||
},
|
||||
UPDATE_SHARED_ITEM(state, data) {
|
||||
state.entries.find(item => {
|
||||
if (item.id === data.item_id) item.shared = data
|
||||
@@ -274,7 +237,6 @@ const getters = {
|
||||
clipboard: state => state.clipboard,
|
||||
currentFolder: state => state.currentFolder,
|
||||
browseHistory: state => state.browseHistory,
|
||||
isSearching: state => state.isSearching,
|
||||
navigation: state => state.navigation,
|
||||
isLoading: state => state.isLoading,
|
||||
entries: state => state.entries,
|
||||
|
||||
-6
@@ -27,12 +27,6 @@ const actions = {
|
||||
if (payload.init)
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
// Clear search
|
||||
if (getters.isSearching) {
|
||||
commit('CHANGE_SEARCHING_STATE', false)
|
||||
events.$emit('clear-query')
|
||||
}
|
||||
|
||||
if (! payload.back && !payload.sorting)
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user