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

v1.5-alpha.1

Browse Source
This commit is contained in:
carodej
2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/js/components/FilesView/SearchBar.vue
View File

@@ -1,5 +1,11 @@
<template>
<div class="search-bar">
<div class="icon" v-if="!isQuery">
<search-icon size="19"></search-icon>
</div>
<div class="icon" v-if="isQuery" @click="resetQuery">
<x-icon class="pointer" size="19"></x-icon>
</div>
<input
v-model="query"
class="query"
@@ -7,22 +13,21 @@
name="query"
:placeholder="$t('inputs.placeholder_search_files')"
/>
<div class="icon" v-if="!isQuery">
<FontAwesomeIcon icon="search"></FontAwesomeIcon>
</div>
<div class="icon" v-if="isQuery" @click="resetQuery">
<FontAwesomeIcon icon="times" class="pointer"></FontAwesomeIcon>
</div>
</div>
</template>
<script>
import { SearchIcon, XIcon } from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
import {events} from '@/bus'
export default {
name: 'SearchBar',
components: {
SearchIcon,
XIcon,
},
computed: {
...mapGetters(['currentFolder']),
isQuery() {
@@ -52,9 +57,9 @@
// Get back after delete query to previosly folder
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [this.currentFolder, true])
this.$store.dispatch('browseShared', [{folder: this.currentFolder, back: true, init: false}])
} else {
this.$store.dispatch('getFolder', [this.currentFolder, true])
this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
}
}
@@ -69,20 +74,20 @@
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.search-bar {
position: relative;
input {
//width: 100%;
background: $light_background;
background: transparent;
border-radius: 8px;
outline: 0;
padding: 9px 20px;
font-weight: 100;
padding: 9px 20px 9px 43px;
font-weight: 400;
@include font-size(16);
min-width: 380px;
min-width: 175px;
transition: 0.15s all ease;
border: 1px solid white;
-webkit-appearance: none;
@@ -90,7 +95,7 @@
&::placeholder {
color: $text;
@include font-size(14);
font-weight: 400;
font-weight: 500;
}
&:focus {
@@ -108,8 +113,8 @@
.icon {
position: absolute;
top: 0;
right: 0;
padding: 10px 15px;
left: 0;
padding: 11px 15px;
.pointer {
cursor: pointer;
@@ -117,11 +122,41 @@
}
}
@media only screen and (max-width: 1024px) {
.search-bar input {
max-width: 190px;
padding-right: 0;
}
}
@media only screen and (max-width: 690px) {
.search-bar {
input {
min-width: initial;
width: 100%;
padding: 9px 20px 9px 30px;
&:focus {
border: 1px solid transparent;
box-shadow: none;
}
}
.icon {
padding: 11px 15px 11px 0;
}
}
}
@media (prefers-color-scheme: dark) {
.search-bar {
input {
background: $dark_mode_foreground;
border-color: $dark_mode_foreground;
border-color: transparent;
color: $dark_mode_text_primary;
&::placeholder {
color: $dark_mode_text_secondary;