Graham Steffaniak
GitHub
commit
2ba4e04b7a
|
|
@ -184,6 +184,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
|
|||
fileTypes := map[string]bool{}
|
||||
fileSize := getFileSize(pathName)
|
||||
matchesCondition := false
|
||||
matchesAllConditions := true
|
||||
extension := filepath.Ext(strings.ToLower(path))
|
||||
mimetype := mime.TypeByExtension(extension)
|
||||
fileTypes["audio"] = strings.HasPrefix(mimetype, "audio")
|
||||
|
|
@ -192,7 +193,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
|
|||
fileTypes["doc"] = isDoc(extension)
|
||||
fileTypes["archive"] = isArchive(extension)
|
||||
fileTypes["dir"] = isDir
|
||||
anyFilter := false
|
||||
|
||||
for t,v := range conditions {
|
||||
switch t {
|
||||
case "exact" : continue
|
||||
|
|
@ -200,12 +201,12 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
|
|||
case "smaller" : matchesCondition = fileSize < int64(options.Size) * 1000000
|
||||
default : matchesCondition = v == fileTypes[t]
|
||||
}
|
||||
anyFilter = true
|
||||
if (!matchesCondition) {
|
||||
matchesAllConditions = false
|
||||
}
|
||||
}
|
||||
if !anyFilter {
|
||||
matchesCondition = true
|
||||
}
|
||||
return matchesCondition, fileTypes
|
||||
|
||||
return matchesAllConditions, fileTypes
|
||||
}
|
||||
return false, map[string]bool{}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,12 @@
|
|||
<template>
|
||||
<div id="search" @click="open" v-bind:class="{ active, ongoing }">
|
||||
<div id="input">
|
||||
<button
|
||||
v-if="active"
|
||||
class="action"
|
||||
@click="close"
|
||||
:aria-label="$t('buttons.close')"
|
||||
:title="$t('buttons.close')"
|
||||
>
|
||||
<button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<i v-else class="material-icons">search</i>
|
||||
<input
|
||||
type="text"
|
||||
@keyup.exact="keyup"
|
||||
@input="submit"
|
||||
ref="input"
|
||||
:autofocus="active"
|
||||
v-model.trim="value"
|
||||
:aria-label="$t('search.search')"
|
||||
:placeholder="$t('search.search')"
|
||||
/>
|
||||
<input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value"
|
||||
:aria-label="$t('search.search')" :placeholder="$t('search.search')" />
|
||||
</div>
|
||||
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
|
||||
<div id="result-list">
|
||||
|
|
@ -28,12 +14,7 @@
|
|||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
<ul v-show="results.length > 0">
|
||||
<li
|
||||
v-for="(s, k) in results"
|
||||
:key="k"
|
||||
@click.stop.prevent="navigateTo(s.url)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
|
||||
<router-link to="#" event="">
|
||||
<i v-if="s.dir" class="material-icons folder-icons"> folder </i>
|
||||
<i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
|
||||
|
|
@ -47,20 +28,17 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-show="isEmpty && isRunning" id="renew">
|
||||
<i class="material-icons spin">autorenew</i>
|
||||
</p>
|
||||
<p v-show="isEmpty && !isRunning">{{ text }}</p>
|
||||
<template v-if="isEmpty">
|
||||
<p >{{ text }}</p>
|
||||
<template v-if="value.length === 0">
|
||||
<div class="boxes">
|
||||
<h3>{{ $t("search.types") }}</h3>
|
||||
<div>
|
||||
<div
|
||||
tabindex="0"
|
||||
v-for="(v, k) in boxes"
|
||||
:key="k"
|
||||
role="button"
|
||||
@click="init('type:' + k)"
|
||||
:aria-label="v.label"
|
||||
>
|
||||
<div tabindex="0" v-for="(v, k) in boxes" :key="k" role="button" @click="init('type:' + k)"
|
||||
:aria-label="v.label">
|
||||
<i class="material-icons">{{ v.icon }}</i>
|
||||
<p>{{ v.label }}</p>
|
||||
</div>
|
||||
|
|
@ -76,12 +54,7 @@
|
|||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
<ul v-show="results.length > 0">
|
||||
<li
|
||||
v-for="(s, k) in results"
|
||||
:key="k"
|
||||
@click.stop.prevent="navigateTo(s.url)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
|
||||
<router-link to="#" event="">
|
||||
<i v-if="s.dir" class="material-icons folder-icons"> folder </i>
|
||||
<i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
|
||||
|
|
@ -95,25 +68,16 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template >
|
||||
<p v-show="isEmpty" >{{ text }}</p>
|
||||
<template >
|
||||
<template>
|
||||
<p v-show="isEmpty && isRunning" id="renew">
|
||||
<i class="material-icons spin">autorenew</i>
|
||||
</p>
|
||||
<p v-show="isEmpty && !isRunning">{{ text }}</p>
|
||||
<template>
|
||||
<div v-show="results.length == 0" class="boxes">
|
||||
<ButtonGroup
|
||||
:buttons="folderSelect"
|
||||
@button-clicked="init"
|
||||
@remove-button-clicked="removeInit"
|
||||
/>
|
||||
<ButtonGroup
|
||||
:buttons="typeSelect"
|
||||
@button-clicked="init"
|
||||
@remove-button-clicked="removeInit"
|
||||
/>
|
||||
<ButtonGroup
|
||||
:buttons="sizeSelect"
|
||||
@button-clicked="init"
|
||||
@remove-button-clicked="removeInit"
|
||||
/>
|
||||
<ButtonGroup :buttons="folderSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
|
||||
<ButtonGroup :buttons="typeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
|
||||
<ButtonGroup :buttons="sizeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -151,10 +115,11 @@ export default {
|
|||
{ label: "Only Files", value: "type:file" },
|
||||
],
|
||||
typeSelect: [
|
||||
{ label: "Archives", value: "type:archive" },
|
||||
{ label: "Audio Files", value: "type:audio" },
|
||||
{ label: "Photos", value: "type:image" },
|
||||
{ label: "Audio", value: "type:audio" },
|
||||
{ label: "Videos", value: "type:video" },
|
||||
{ label: "Documents", value: "type:docs" },
|
||||
{ label: "Archives", value: "type:archive" },
|
||||
],
|
||||
sizeSelect: [
|
||||
{ label: "Smaller than 100MB", value: "type:smaller=100" },
|
||||
|
|
@ -215,6 +180,9 @@ export default {
|
|||
isMobile() {
|
||||
return this.width <= 800;
|
||||
},
|
||||
isRunning() {
|
||||
return this.ongoing;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
|
|
@ -266,20 +234,20 @@ export default {
|
|||
this.results.length === 0;
|
||||
},
|
||||
init(string) {
|
||||
if (string == null || string == ""){
|
||||
if (string == null || string == "") {
|
||||
return false
|
||||
}
|
||||
this.value = `${string} ${this.value}`;
|
||||
if (this.isMobile){
|
||||
if (this.isMobile) {
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
},
|
||||
removeInit(string) {
|
||||
if (string == null || string == ""){
|
||||
if (string == null || string == "") {
|
||||
return false
|
||||
}
|
||||
this.value = this.value.replace(string+" ", "");
|
||||
if (this.isMobile){
|
||||
this.value = this.value.replace(string + " ", "");
|
||||
if (this.isMobile) {
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
},
|
||||
|
|
@ -301,7 +269,6 @@ export default {
|
|||
} catch (error) {
|
||||
this.$showError(error);
|
||||
}
|
||||
|
||||
this.ongoing = false;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,117 +1,65 @@
|
|||
<template>
|
||||
<nav :class="{ active }">
|
||||
<template v-if="isLogged">
|
||||
|
||||
<button
|
||||
class="action"
|
||||
@click="toRoot"
|
||||
:aria-label="$t('sidebar.myFiles')"
|
||||
:title="$t('sidebar.myFiles')"
|
||||
>
|
||||
<button class="action" @click="toRoot" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t("sidebar.myFiles") }}</span>
|
||||
</button>
|
||||
|
||||
<div v-if="user.perm.create">
|
||||
<button
|
||||
@click="$store.commit('showHover', 'newDir')"
|
||||
class="action"
|
||||
:aria-label="$t('sidebar.newFolder')"
|
||||
:title="$t('sidebar.newFolder')"
|
||||
>
|
||||
<button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
|
||||
:title="$t('sidebar.newFolder')">
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("sidebar.newFolder") }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="$store.commit('showHover', 'newFile')"
|
||||
class="action"
|
||||
:aria-label="$t('sidebar.newFile')"
|
||||
:title="$t('sidebar.newFile')"
|
||||
>
|
||||
<button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')"
|
||||
:title="$t('sidebar.newFile')">
|
||||
<i class="material-icons">note_add</i>
|
||||
<span>{{ $t("sidebar.newFile") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="action"
|
||||
@click="toSettings"
|
||||
:aria-label="$t('sidebar.settings')"
|
||||
:title="$t('sidebar.settings')"
|
||||
>
|
||||
<button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
|
||||
<i class="material-icons">settings_applications</i>
|
||||
<span>{{ $t("sidebar.settings") }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="canLogout"
|
||||
@click="logout"
|
||||
class="action"
|
||||
id="logout"
|
||||
:aria-label="$t('sidebar.logout')"
|
||||
:title="$t('sidebar.logout')"
|
||||
>
|
||||
<button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
|
||||
:title="$t('sidebar.logout')">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
<span>{{ $t("sidebar.logout") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<router-link
|
||||
class="action"
|
||||
to="/login"
|
||||
:aria-label="$t('sidebar.login')"
|
||||
:title="$t('sidebar.login')"
|
||||
>
|
||||
<router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
<span>{{ $t("sidebar.login") }}</span>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
v-if="signup"
|
||||
class="action"
|
||||
to="/login"
|
||||
:aria-label="$t('sidebar.signup')"
|
||||
:title="$t('sidebar.signup')"
|
||||
>
|
||||
<router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')"
|
||||
:title="$t('sidebar.signup')">
|
||||
<i class="material-icons">person_add</i>
|
||||
<span>{{ $t("sidebar.signup") }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="credits"
|
||||
v-if="
|
||||
$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
|
||||
"
|
||||
style="width: 90%; margin: 2em 2.5em 3em 2.5em"
|
||||
>
|
||||
<progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
|
||||
<br />
|
||||
{{ usage.used }} of {{ usage.total }} used
|
||||
</div>
|
||||
|
||||
<p class="credits">
|
||||
<span>
|
||||
<span v-if="disableExternal">File Browser</span>
|
||||
<a
|
||||
v-else
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://github.com/gtsteffaniak/filebrowser"
|
||||
>File Browser</a
|
||||
>
|
||||
<span> {{ version }}</span>
|
||||
<div class="credits" v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
|
||||
">
|
||||
<progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
|
||||
<span style="text-align:center">{{ usage.usedPercentage }}%</span>
|
||||
<span>{{ usage.used }} of {{ usage.total }} used</span>
|
||||
<br>
|
||||
<span v-if="disableExternal">File Browser</span>
|
||||
<span v-else>
|
||||
<a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
|
||||
File Browser
|
||||
</a>
|
||||
</span>
|
||||
<span>{{ version }}</span>
|
||||
<span>
|
||||
<a @click="help">{{ $t("sidebar.help") }}</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import * as auth from "@/utils/auth";
|
||||
|
|
@ -157,8 +105,8 @@ export default {
|
|||
try {
|
||||
let usage = await api.usage(path);
|
||||
usageStats = {
|
||||
used: prettyBytes(usage.used/1024, { binary: true }),
|
||||
total: prettyBytes(usage.total/1024, { binary: true }),
|
||||
used: prettyBytes(usage.used / 1024, { binary: true }),
|
||||
total: prettyBytes(usage.total / 1024, { binary: true }),
|
||||
usedPercentage: Math.round((usage.used / usage.total) * 100),
|
||||
};
|
||||
} catch (error) {
|
||||
|
|
@ -174,11 +122,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
toRoot() {
|
||||
this.$router.push({ path: "/files/" }, () => {});
|
||||
this.$router.push({ path: "/files/" }, () => { });
|
||||
this.$store.commit("closeHovers");
|
||||
},
|
||||
toSettings() {
|
||||
this.$router.push({ path: "/settings" }, () => {});
|
||||
this.$router.push({ path: "/settings" }, () => { });
|
||||
this.$store.commit("closeHovers");
|
||||
},
|
||||
help() {
|
||||
|
|
|
|||
|
|
@ -58,11 +58,12 @@ over
|
|||
|
||||
/* Navigation Styles */
|
||||
nav {
|
||||
width: 16em;
|
||||
width: 18em;
|
||||
position: fixed;
|
||||
top: 4em;
|
||||
left: -17em;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
padding-top: 4em;
|
||||
left: -19em;
|
||||
z-index: 10000;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -188,6 +189,7 @@ body.rtl .breadcrumbs a {
|
|||
|
||||
/* File Selection */
|
||||
#file-selection {
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
left: 50%;
|
||||
|
|
@ -196,10 +198,8 @@ body.rtl .breadcrumbs a {
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
|
||||
width: 95%;
|
||||
max-width: 25em;
|
||||
max-width: 30em;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -167,15 +167,15 @@ body.rtl #search #result ul>* {
|
|||
margin: .5em;
|
||||
}
|
||||
|
||||
#search #result #renew {
|
||||
#search #renew {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: none;
|
||||
margin: 0;
|
||||
margin: 1em;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#search.ongoing #result #renew {
|
||||
#search.ongoing #renew {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -335,14 +335,15 @@ body.rtl .breadcrumbs .chevron {
|
|||
* * * * * * * * * * * * * * * */
|
||||
|
||||
.credits {
|
||||
font-size: 0.6em;
|
||||
margin: 3em 2.5em;
|
||||
font-size: 1em;
|
||||
color: #a5a5a5;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.credits > span {
|
||||
display: block;
|
||||
margin: .3em 0;
|
||||
margin-top: .5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.credits a,
|
||||
|
|
|
|||
Loading…
Reference in New Issue