mobile spotlight

resources/js/components/FilesView/DesktopToolbar.vue

@@ -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')

resources/js/components/FilesView/EmptyFilePage.vue

@@ -54,7 +54,7 @@
 				'entries',
 			]),
 			isEmpty() {
-				return this.entries && this.entries.length == 0
+				return this.entries && this.entries.length === 0
 			}
 		}
 	}

resources/js/components/FilesView/FileActionsMobile.vue

@@ -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')
             },

resources/js/components/FilesView/FileBrowser.vue

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

resources/js/components/FilesView/MobileActionButton.vue

@@ -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));

resources/js/components/FilesView/MobileToolbar.vue

@@ -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);

resources/js/components/FilesView/SearchBar.vue

@@ -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;
             }
         }
     }