chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Merge pull request #10 from gtsteffaniak/v0.1.3 

V0.1.3
This commit is contained in:
Graham Steffaniak 2023-07-31 18:51:01 -05:00 committed by GitHub
parent 8efec9317b 78853f5e92
commit 2ba4e04b7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
backend/search/indexing.go
View File

@ -184,6 +184,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
fileTypes := map[string]bool{} fileTypes := map[string]bool{}
fileSize := getFileSize(pathName) fileSize := getFileSize(pathName)
matchesCondition := false matchesCondition := false
matchesAllConditions := true
extension := filepath.Ext(strings.ToLower(path)) extension := filepath.Ext(strings.ToLower(path))
mimetype := mime.TypeByExtension(extension) mimetype := mime.TypeByExtension(extension)
fileTypes["audio"] = strings.HasPrefix(mimetype, "audio") fileTypes["audio"] = strings.HasPrefix(mimetype, "audio")
@ -192,7 +193,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
fileTypes["doc"] = isDoc(extension) fileTypes["doc"] = isDoc(extension)
fileTypes["archive"] = isArchive(extension) fileTypes["archive"] = isArchive(extension)
fileTypes["dir"] = isDir fileTypes["dir"] = isDir
anyFilter := false
for t,v := range conditions { for t,v := range conditions {
switch t { switch t {
case "exact" : continue case "exact" : continue
@ -200,12 +201,12 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
case "smaller" : matchesCondition = fileSize < int64(options.Size) * 1000000 case "smaller" : matchesCondition = fileSize < int64(options.Size) * 1000000
default : matchesCondition = v == fileTypes[t] default : matchesCondition = v == fileTypes[t]
} }
anyFilter = true if (!matchesCondition) {
matchesAllConditions = false
}
} }
if !anyFilter {
matchesCondition = true return matchesAllConditions, fileTypes
}
return matchesCondition, fileTypes
} }
return false, map[string]bool{} return false, map[string]bool{}
} }

95
frontend/src/components/Search.vue
View File

@ -1,26 +1,12 @@
<template> <template>
<div id="search" @click="open" v-bind:class="{ active, ongoing }"> <div id="search" @click="open" v-bind:class="{ active, ongoing }">
<div id="input"> <div id="input">
<button <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
v-if="active"
class="action"
@click="close"
:aria-label="$t('buttons.close')"
:title="$t('buttons.close')"
>
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
<i v-else class="material-icons">search</i> <i v-else class="material-icons">search</i>
<input <input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value"
type="text" :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
@keyup.exact="keyup"
@input="submit"
ref="input"
:autofocus="active"
v-model.trim="value"
:aria-label="$t('search.search')"
:placeholder="$t('search.search')"
/>
</div> </div>
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result"> <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
<div id="result-list"> <div id="result-list">
@ -28,12 +14,7 @@
Search Context: {{ getContext(this.$route.path) }} Search Context: {{ getContext(this.$route.path) }}
</div> </div>
<ul v-show="results.length > 0"> <ul v-show="results.length > 0">
<li <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
v-for="(s, k) in results"
:key="k"
@click.stop.prevent="navigateTo(s.url)"
style="cursor: pointer"
>
<router-link to="#" event=""> <router-link to="#" event="">
<i v-if="s.dir" class="material-icons folder-icons"> folder </i> <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> <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@ -47,20 +28,17 @@
</router-link> </router-link>
</li> </li>
</ul> </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"> <template v-if="isEmpty">
<p >{{ text }}</p>
<template v-if="value.length === 0"> <template v-if="value.length === 0">
<div class="boxes"> <div class="boxes">
<h3>{{ $t("search.types") }}</h3> <h3>{{ $t("search.types") }}</h3>
<div> <div>
<div <div tabindex="0" v-for="(v, k) in boxes" :key="k" role="button" @click="init('type:' + k)"
tabindex="0" :aria-label="v.label">
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> <i class="material-icons">{{ v.icon }}</i>
<p>{{ v.label }}</p> <p>{{ v.label }}</p>
</div> </div>
@ -76,12 +54,7 @@
Search Context: {{ getContext(this.$route.path) }} Search Context: {{ getContext(this.$route.path) }}
</div> </div>
<ul v-show="results.length > 0"> <ul v-show="results.length > 0">
<li <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
v-for="(s, k) in results"
:key="k"
@click.stop.prevent="navigateTo(s.url)"
style="cursor: pointer"
>
<router-link to="#" event=""> <router-link to="#" event="">
<i v-if="s.dir" class="material-icons folder-icons"> folder </i> <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> <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@ -95,25 +68,16 @@
</router-link> </router-link>
</li> </li>
</ul> </ul>
<template > <template>
<p v-show="isEmpty" >{{ text }}</p> <p v-show="isEmpty && isRunning" id="renew">
<template > <i class="material-icons spin">autorenew</i>
</p>
<p v-show="isEmpty && !isRunning">{{ text }}</p>
<template>
<div v-show="results.length == 0" class="boxes"> <div v-show="results.length == 0" class="boxes">
<ButtonGroup <ButtonGroup :buttons="folderSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
:buttons="folderSelect" <ButtonGroup :buttons="typeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
@button-clicked="init" <ButtonGroup :buttons="sizeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
@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> </div>
</template> </template>
</template> </template>
@ -151,10 +115,11 @@ export default {
{ label: "Only Files", value: "type:file" }, { label: "Only Files", value: "type:file" },
], ],
typeSelect: [ typeSelect: [
{ label: "Archives", value: "type:archive" }, { label: "Photos", value: "type:image" },
{ label: "Audio Files", value: "type:audio" }, { label: "Audio", value: "type:audio" },
{ label: "Videos", value: "type:video" }, { label: "Videos", value: "type:video" },
{ label: "Documents", value: "type:docs" }, { label: "Documents", value: "type:docs" },
{ label: "Archives", value: "type:archive" },
], ],
sizeSelect: [ sizeSelect: [
{ label: "Smaller than 100MB", value: "type:smaller=100" }, { label: "Smaller than 100MB", value: "type:smaller=100" },
@ -215,6 +180,9 @@ export default {
isMobile() { isMobile() {
return this.width <= 800; return this.width <= 800;
}, },
isRunning() {
return this.ongoing;
}
}, },
mounted() { mounted() {
window.addEventListener("resize", this.handleResize); window.addEventListener("resize", this.handleResize);
@ -266,20 +234,20 @@ export default {
this.results.length === 0; this.results.length === 0;
}, },
init(string) { init(string) {
if (string == null || string == ""){ if (string == null || string == "") {
return false return false
} }
this.value = `${string} ${this.value}`; this.value = `${string} ${this.value}`;
if (this.isMobile){ if (this.isMobile) {
this.$refs.input.focus(); this.$refs.input.focus();
} }
}, },
removeInit(string) { removeInit(string) {
if (string == null || string == ""){ if (string == null || string == "") {
return false return false
} }
this.value = this.value.replace(string+" ", ""); this.value = this.value.replace(string + " ", "");
if (this.isMobile){ if (this.isMobile) {
this.$refs.input.focus(); this.$refs.input.focus();
} }
}, },
@ -301,7 +269,6 @@ export default {
} catch (error) { } catch (error) {
this.$showError(error); this.$showError(error);
} }
this.ongoing = false; this.ongoing = false;
}, },
}, },

108
frontend/src/components/Sidebar.vue
View File

@ -1,117 +1,65 @@
<template> <template>
<nav :class="{ active }"> <nav :class="{ active }">
<template v-if="isLogged"> <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> <i class="material-icons">folder</i>
<span>{{ $t("sidebar.myFiles") }}</span> <span>{{ $t("sidebar.myFiles") }}</span>
</button> </button>
<div v-if="user.perm.create"> <div v-if="user.perm.create">
<button <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
@click="$store.commit('showHover', 'newDir')" :title="$t('sidebar.newFolder')">
class="action"
:aria-label="$t('sidebar.newFolder')"
:title="$t('sidebar.newFolder')"
>
<i class="material-icons">create_new_folder</i> <i class="material-icons">create_new_folder</i>
<span>{{ $t("sidebar.newFolder") }}</span> <span>{{ $t("sidebar.newFolder") }}</span>
</button> </button>
<button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')"
<button :title="$t('sidebar.newFile')">
@click="$store.commit('showHover', 'newFile')"
class="action"
:aria-label="$t('sidebar.newFile')"
:title="$t('sidebar.newFile')"
>
<i class="material-icons">note_add</i> <i class="material-icons">note_add</i>
<span>{{ $t("sidebar.newFile") }}</span> <span>{{ $t("sidebar.newFile") }}</span>
</button> </button>
</div> </div>
<div> <div>
<button <button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
class="action"
@click="toSettings"
:aria-label="$t('sidebar.settings')"
:title="$t('sidebar.settings')"
>
<i class="material-icons">settings_applications</i> <i class="material-icons">settings_applications</i>
<span>{{ $t("sidebar.settings") }}</span> <span>{{ $t("sidebar.settings") }}</span>
</button> </button>
<button <button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
v-if="canLogout" :title="$t('sidebar.logout')">
@click="logout"
class="action"
id="logout"
:aria-label="$t('sidebar.logout')"
:title="$t('sidebar.logout')"
>
<i class="material-icons">exit_to_app</i> <i class="material-icons">exit_to_app</i>
<span>{{ $t("sidebar.logout") }}</span> <span>{{ $t("sidebar.logout") }}</span>
</button> </button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<router-link <router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
class="action"
to="/login"
:aria-label="$t('sidebar.login')"
:title="$t('sidebar.login')"
>
<i class="material-icons">exit_to_app</i> <i class="material-icons">exit_to_app</i>
<span>{{ $t("sidebar.login") }}</span> <span>{{ $t("sidebar.login") }}</span>
</router-link> </router-link>
<router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')"
<router-link :title="$t('sidebar.signup')">
v-if="signup"
class="action"
to="/login"
:aria-label="$t('sidebar.signup')"
:title="$t('sidebar.signup')"
>
<i class="material-icons">person_add</i> <i class="material-icons">person_add</i>
<span>{{ $t("sidebar.signup") }}</span> <span>{{ $t("sidebar.signup") }}</span>
</router-link> </router-link>
</template> </template>
<div class="credits" v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
<div ">
class="credits" <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
v-if=" <span style="text-align:center">{{ usage.usedPercentage }}%</span>
$router.currentRoute.path.includes('/files/') && !disableUsedPercentage <span>{{ usage.used }} of {{ usage.total }} used</span>
" <br>
style="width: 90%; margin: 2em 2.5em 3em 2.5em" <span v-if="disableExternal">File Browser</span>
> <span v-else>
<progress-bar :val="usage.usedPercentage" size="small"></progress-bar> <a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
<br /> File Browser
{{ usage.used }} of {{ usage.total }} used </a>
</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>
</span> </span>
<span>{{ version }}</span>
<span> <span>
<a @click="help">{{ $t("sidebar.help") }}</a> <a @click="help">{{ $t("sidebar.help") }}</a>
</span> </span>
</p> </div>
</nav> </nav>
</template> </template>
<script> <script>
import { mapState, mapGetters } from "vuex"; import { mapState, mapGetters } from "vuex";
import * as auth from "@/utils/auth"; import * as auth from "@/utils/auth";
@ -157,8 +105,8 @@ export default {
try { try {
let usage = await api.usage(path); let usage = await api.usage(path);
usageStats = { usageStats = {
used: prettyBytes(usage.used/1024, { binary: true }), used: prettyBytes(usage.used / 1024, { binary: true }),
total: prettyBytes(usage.total/1024, { binary: true }), total: prettyBytes(usage.total / 1024, { binary: true }),
usedPercentage: Math.round((usage.used / usage.total) * 100), usedPercentage: Math.round((usage.used / usage.total) * 100),
}; };
} catch (error) { } catch (error) {
@ -174,11 +122,11 @@ export default {
}, },
methods: { methods: {
toRoot() { toRoot() {
this.$router.push({ path: "/files/" }, () => {}); this.$router.push({ path: "/files/" }, () => { });
this.$store.commit("closeHovers"); this.$store.commit("closeHovers");
}, },
toSettings() { toSettings() {
this.$router.push({ path: "/settings" }, () => {}); this.$router.push({ path: "/settings" }, () => { });
this.$store.commit("closeHovers"); this.$store.commit("closeHovers");
}, },
help() { help() {

14
frontend/src/css/base.css
View File

@ -58,11 +58,12 @@ over
/* Navigation Styles */ /* Navigation Styles */
nav { nav {
width: 16em; width: 18em;
position: fixed; position: fixed;
top: 4em; top: 0;
left: -17em; padding-top: 4em;
z-index: 99999; left: -19em;
z-index: 10000;
background: #fff; background: #fff;
height: 100%; height: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
@ -188,6 +189,7 @@ body.rtl .breadcrumbs a {
/* File Selection */ /* File Selection */
#file-selection { #file-selection {
box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
position: fixed; position: fixed;
bottom: 1em; bottom: 1em;
left: 50%; left: 50%;
@ -196,10 +198,8 @@ body.rtl .breadcrumbs a {
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
background: #fff; 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%; width: 95%;
max-width: 25em; max-width: 30em;
z-index: 1; z-index: 1;
} }

6
frontend/src/css/header.css
View File

@ -167,15 +167,15 @@ body.rtl #search #result ul>* {
margin: .5em; margin: .5em;
} }
#search #result #renew { #search #renew {
width: 100%; width: 100%;
text-align: center; text-align: center;
display: none; display: none;
margin: 0; margin: 1em;
max-width: none; max-width: none;
} }
#search.ongoing #result #renew { #search.ongoing #renew {
display: block; display: block;
} }

7
frontend/src/css/styles.css
View File

@ -335,14 +335,15 @@ body.rtl .breadcrumbs .chevron {
* * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * */
.credits { .credits {
font-size: 0.6em; font-size: 1em;
margin: 3em 2.5em;
color: #a5a5a5; color: #a5a5a5;
padding: 1em;
} }
.credits > span { .credits > span {
display: block; display: block;
margin: .3em 0; margin-top: .5em;
margin-left: 0;
} }
.credits a, .credits a,