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

Merge pull request #8 from gtsteffaniak/update-hovers 

updated styling
This commit is contained in:
Graham Steffaniak 2023-07-30 17:36:16 -05:00 committed by GitHub
parent ca343b73e8 b8af3f8147
commit 52ddc50c2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 547 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -5,8 +5,9 @@ rice-box.go
.idea/ .idea/
/filebrowser /filebrowser
/filebrowser.exe /filebrowser.exe
/dist /frontend/dist
/src/backend/vendor /backend/vendor
.DS_Store .DS_Store
node_modules node_modules

1
backend/frontend/dist Symbolic link
View File

@ -0,0 +1 @@
../../frontend/dist

4
backend/frontend/dist/.gitignore vendored
View File

@ -1,4 +0,0 @@
# Ignore everything in this directory
*
# Except this file
!.gitignore

8
backend/search/conditions.go
View File

@ -26,9 +26,9 @@ var compressedFile = []string{
} }
type searchOptions struct { type searchOptions struct {
Conditions map[string]bool Conditions map[string]bool
Size int Size int
Terms []string Terms []string
} }
func ParseSearch(value string) *searchOptions { func ParseSearch(value string) *searchOptions {
@ -59,6 +59,7 @@ func ParseSearch(value string) *searchOptions {
case "folder" : opts.Conditions["dir"] = true case "folder" : opts.Conditions["dir"] = true
case "file" : opts.Conditions["dir"] = false case "file" : opts.Conditions["dir"] = false
} }
if len(filter) < 8 { if len(filter) < 8 {
continue continue
} }
@ -90,7 +91,8 @@ func ParseSearch(value string) *searchOptions {
opts.Terms = []string{unique} opts.Terms = []string{unique}
return opts return opts
} }
re := regexp.MustCompile(` +`)
value = re.ReplaceAllString(value, " ")
opts.Terms = strings.Split(value, " ") opts.Terms = strings.Split(value, " ")
return opts return opts
} }

2
frontend/package.json
View File

@ -9,8 +9,6 @@
"watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean" "watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
}, },
"dependencies": { "dependencies": {
"normalize.css": "^8.0.1",
"file-loader": "^6.2.0",
"ace-builds": "^1.4.7", "ace-builds": "^1.4.7",
"clipboard": "^2.0.4", "clipboard": "^2.0.4",
"css-vars-ponyfill": "^2.4.3", "css-vars-ponyfill": "^2.4.3",

44
frontend/public/themes/dark.css
View File

@ -3,7 +3,6 @@
--surfacePrimary: #20292F; --surfacePrimary: #20292F;
--surfaceSecondary: #3A4147; --surfaceSecondary: #3A4147;
--divider: rgba(255, 255, 255, 0.12); --divider: rgba(255, 255, 255, 0.12);
--icon: #ffffff;
--textPrimary: rgba(255, 255, 255, 0.87); --textPrimary: rgba(255, 255, 255, 0.87);
--textSecondary: rgba(255, 255, 255, 0.6); --textSecondary: rgba(255, 255, 255, 0.6);
} }
@ -16,9 +15,6 @@ body {
#loading { #loading {
background: var(--background); background: var(--background);
} }
#loading .spinner div, main .spinner div {
background: var(--icon);
}
#login { #login {
background: var(--background); background: var(--background);
@ -65,9 +61,7 @@ header {
.action:hover { .action:hover {
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1);
} }
.action i {
color: var(--icon) !important;
}
.action .counter { .action .counter {
border-color: var(--surfacePrimary); border-color: var(--surfacePrimary);
} }
@ -92,9 +86,7 @@ nav > div {
color: var(--textPrimary); color: var(--textPrimary);
border-color: var(--divider) !important; border-color: var(--divider) !important;
} }
#listing .item i {
color: var(--icon);
}
#listing .item .modified { #listing .item .modified {
color: var(--textSecondary); color: var(--textSecondary);
} }
@ -105,9 +97,7 @@ nav > div {
#listing.list .header span { #listing.list .header span {
color: var(--textPrimary); color: var(--textPrimary);
} }
#listing.list .header i {
color: var(--icon);
}
#listing.list .item.header { #listing.list .item.header {
background: var(--background); background: var(--background);
} }
@ -130,6 +120,9 @@ nav > div {
.dashboard #nav ul li:hover { .dashboard #nav ul li:hover {
background: var(--surfaceSecondary); background: var(--surfaceSecondary);
} }
#result-list {
background-color:#292929;
}
.card h3, .card h3,
.dashboard #nav, .dashboard #nav,
@ -173,9 +166,6 @@ table th {
.file-list li:before { .file-list li:before {
color: var(--textSecondary); color: var(--textSecondary);
} }
.file-list li[aria-selected=true]:before {
color: var(--icon);
}
.shell { .shell {
background: var(--surfacePrimary); background: var(--surfacePrimary);
@ -196,16 +186,18 @@ nav {
background: var(--surfaceSecondary) !important; background: var(--surfaceSecondary) !important;
} }
@media (max-width: 736px) { #file-selection {
#file-selection { background: var(--surfaceSecondary) !important;
background: var(--surfaceSecondary) !important; }
} #file-selection span {
#file-selection span { color: var(--textPrimary) !important;
color: var(--textPrimary) !important; }
} #dropdown {
#dropdown { background: var(--surfaceSecondary) !important;
background: var(--surfaceSecondary) !important; }
}
.button-group button {
background-color:darkgray;
} }
.share__box { .share__box {

94
frontend/src/components/ButtonGroup.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<div class="button-group">
<button
v-for="(btn, index) in buttons"
:key="index"
:class="{ active: activeButton === index }"
@click="setActiveButton(index)"
>
{{ btn.label }}
</button>
</div>
</template>
<script>
export default {
props: {
buttons: {
type: Array,
default: () => [],
},
initialActive: {
type: Number,
default: null,
},
},
data() {
return {
activeButton: this.initialActive,
};
},
methods: {
setActiveButton(index) {
// If the clicked button is already active, de-select it
if (this.activeButton === index) {
this.activeButton = null;
this.$emit("remove-button-clicked", this.buttons[index].value);
} else {
// Emit remove-button-clicked for all other indexes
this.buttons.forEach((button, idx) => {
if (idx !== index) {
this.$emit("remove-button-clicked", button.value);
}
});
this.activeButton = index;
this.$emit("button-clicked", this.buttons[index].value);
}
},
},
watch: {
initialActive: {
immediate: true,
handler(newVal) {
this.activeButton = newVal;
},
},
},
};
</script>
<style scoped>
.button-group {
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
button {
flex: 1;
height: 3em;
padding: 8px 16px;
border: none;
background-color: #f5f5f5;
transition: background-color 0.3s;
/* Add borders */
border-right: 1px solid #ccc;
}
/* Remove the border from the last button */
.button-group > button:last-child {
border-right: none;
}
button:hover {
background-color: #e0e0e0;
}
button.active {
background-color: var(--blue);
color: #ffffff;
}
</style>

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

@ -1,36 +1,39 @@
<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 v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')"> <button
<i class="material-icons">arrow_back</i> v-if="active"
class="action"
@click="close"
:aria-label="$t('buttons.close')"
:title="$t('buttons.close')"
>
<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 type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value" <input
:aria-label="$t('search.search')" :placeholder="$t('search.search')" /> 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>
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
<div id="result" ref="result">
<div id="result-list"> <div id="result-list">
<br> <div class="button" style="width: 100%">
<br> Search Context: {{ getContext(this.$route.path) }}
<div class="button" style="width:100%">Search Context: {{ getContext(this.$route.path) }}</div> </div>
<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)">
<i class="material-icons">{{ v.icon }}</i>
<p>{{ v.label }}</p>
</div>
</div>
</div>
</template>
</template>
<ul v-show="results.length > 0"> <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=""> <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>
@ -44,12 +47,83 @@
</router-link> </router-link>
</li> </li>
</ul> </ul>
<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"
>
<i class="material-icons">{{ v.icon }}</i>
<p>{{ v.label }}</p>
</div>
</div>
</div>
</template>
</template>
</div>
</div>
<div v-if="!isMobile && active" id="result-desktop" ref="result">
<div id="result-list">
<div class="button" style="width: 100%">
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"
>
<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>
<i v-else-if="s.image" class="material-icons image-icons"> photo </i>
<i v-else-if="s.video" class="material-icons video-icons"> movie </i>
<i v-else-if="s.archive" class="material-icons archive-icons"> archive </i>
<i v-else class="material-icons file-icons"> insert_drive_file </i>
<span class="text-container">
{{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
</span>
</router-link>
</li>
</ul>
<template >
<p v-show="isEmpty" >{{ 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"
/>
</div>
</template>
</template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ButtonGroup from "./ButtonGroup.vue";
import { mapState, mapGetters, mapMutations } from "vuex"; import { mapState, mapGetters, mapMutations } from "vuex";
import { search } from "@/api"; import { search } from "@/api";
@ -66,10 +140,28 @@ var boxes = {
}; };
export default { export default {
components: {
ButtonGroup,
},
name: "search", name: "search",
data: function () { data: function () {
return { return {
folderSelect: [
{ label: "Only Folders", value: "type:folder" },
{ label: "Only Files", value: "type:file" },
],
typeSelect: [
{ label: "Archives", value: "type:archive" },
{ label: "Audio Files", value: "type:audio" },
{ label: "Videos", value: "type:video" },
{ label: "Documents", value: "type:docs" },
],
sizeSelect: [
{ label: "Smaller than 100MB", value: "type:smaller=100" },
{ label: "Larger than 100MB", value: "type:larger=100" },
],
value: "", value: "",
width: window.innerWidth,
active: false, active: false,
ongoing: false, ongoing: false,
results: [], results: [],
@ -120,42 +212,42 @@ export default {
? this.$t("search.typeToSearch") ? this.$t("search.typeToSearch")
: this.$t("search.pressToSearch"); : this.$t("search.pressToSearch");
}, },
isMobile() {
return this.width <= 800;
},
}, },
mounted() { mounted() {
this.$refs.result.addEventListener("scroll", (event) => { window.addEventListener("resize", this.handleResize);
if ( this.handleResize(); // Call this once to set the initial width
event.target.offsetHeight + event.target.scrollTop >=
event.target.scrollHeight - 100
) {
this.resultsCount += 50;
}
});
}, },
methods: { methods: {
handleResize() {
this.width = window.innerWidth;
},
async navigateTo(url) { async navigateTo(url) {
this.closeHovers(); this.closeHovers();
await this.$nextTick(); await this.$nextTick();
setTimeout(() => this.$router.push(url), 0); setTimeout(() => this.$router.push(url), 0);
}, },
getContext(url) { getContext(url) {
url = url.slice(1) url = url.slice(1);
let path = "./" + url.substring(url.indexOf('/') + 1); let path = "./" + url.substring(url.indexOf("/") + 1);
return path.replace(/\/+$/, '') + "/" return path.replace(/\/+$/, "") + "/";
}, },
basePath(str) { basePath(str) {
if (!str.includes("/")){ if (!str.includes("/")) {
return "" return "";
} }
let parts = str.replace(/\/$/, '').split("/") let parts = str.replace(/\/$/, "").split("/");
parts.pop() parts.pop();
return parts.join("/") + "/" return parts.join("/") + "/";
}, },
baseName(str) { baseName(str) {
let parts = str.split("/") let parts = str.split("/");
if (str.endsWith("/")) { if (str.endsWith("/")) {
return parts[parts.length - 2] + "/" return parts[parts.length - 2] + "/";
} else { } else {
return parts[parts.length - 1] return parts[parts.length - 1];
} }
}, },
...mapMutations(["showHover", "closeHovers", "setReload"]), ...mapMutations(["showHover", "closeHovers", "setReload"]),
@ -174,8 +266,22 @@ export default {
this.results.length === 0; this.results.length === 0;
}, },
init(string) { init(string) {
this.value = `${string} `; if (string == null || string == ""){
this.$refs.input.focus(); return false
}
this.value = `${string} ${this.value}`;
if (this.isMobile){
this.$refs.input.focus();
}
},
removeInit(string) {
if (string == null || string == ""){
return false
}
this.value = this.value.replace(string+" ", "");
if (this.isMobile){
this.$refs.input.focus();
}
}, },
reset() { reset() {
this.ongoing = false; this.ongoing = false;
@ -184,7 +290,7 @@ export default {
}, },
async submit(event) { async submit(event) {
event.preventDefault(); event.preventDefault();
const words = this.value.split(" ").filter(word => word.length < 3); const words = this.value.split(" ").filter((word) => word.length < 3);
if (this.value === "" || words.length > 0) { if (this.value === "" || words.length > 0) {
return; return;
} }
@ -200,4 +306,4 @@ export default {
}, },
}, },
}; };
</script> </script>

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

@ -1,34 +1,6 @@
<template> <template>
<nav :class="{ active }"> <nav :class="{ active }">
<template v-if="isLogged"> <template v-if="isLogged">
<!--
i want this here eventually
<action
v-if="headerButtons.download"
icon="file_download"
:label="$t('buttons.download')"
@action="download"
:counter="selectedCount"
/>
<action
v-if="headerButtons.upload"
icon="file_upload"
id="upload-button"
:label="$t('buttons.upload')"
@action="upload"
/>
<action
v-if="headerButtons.shell"
icon="code"
:label="$t('buttons.shell')"
@action="$store.commit('toggleShell')"
/>
<action
:icon="viewIcon"
:label="$t('buttons.switchView')"
@action="switchView"
/>
-->
<button <button
class="action" class="action"

13
frontend/src/components/prompts/Prompts.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<component ref="currentComponent" :is="currentComponent"></component> <component ref="currentComponent" :is="currentComponent"></component>
<div v-if="showOverlay" @click="resetPrompts" class="overlay"></div>
</div> </div>
</template> </template>
@ -103,6 +104,16 @@ export default {
return (matched && this.show) || null; return (matched && this.show) || null;
}, },
showOverlay: function () {
return (
this.show !== null && this.show !== "more"
);
},
},
methods: {
resetPrompts() {
this.$store.commit("closeHovers");
},
}, },
}; };
</script> </script>

2
frontend/src/css/_share.css
View File

@ -5,7 +5,7 @@
align-items: flex-start; align-items: flex-start;
} }
@media (max-width: 736px) { @media (max-width: 800px) {
.share { .share {
display: block; display: block;
} }

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

@ -1,3 +1,4 @@
/* Basic Styles */
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
padding-top: 4em; padding-top: 4em;
@ -11,12 +12,6 @@ body.rtl {
* { * {
box-sizing: border-box; box-sizing: border-box;
}
*,
*:hover,
*:active,
*:focus {
outline: 0; outline: 0;
} }
@ -28,45 +23,70 @@ img {
max-width: 100%; max-width: 100%;
} }
audio, audio, video {
video {
width: 100%; width: 100%;
} }
.mobile-only { .hidden {
display: none !important; display: none !important;
} }
.break-word {
word-break: break-all;
}
/* Container */
.container { .container {
width: 95%; width: 95%;
max-width: 960px; max-width: 960px;
margin: 1em auto 0; margin: 1em auto 0;
} }
/* Icons */
i.spin { i.spin {
animation: 1s spin linear infinite; animation: 1s spin linear infinite;
} }
/* App Styles */
#app { #app {
transition: 0.2s ease padding; transition: 0.2s ease padding;
} }
over
#app.multiple { #app.multiple {
padding-bottom: 4em; padding-bottom: 4em;
} }
/* Navigation Styles */
nav { nav {
width: 16em; width: 16em;
position: fixed; position: fixed;
top: 4em; top: 4em;
left: 0; left: -17em;
z-index: 99999;
background: #fff;
height: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: .1s ease left;
} }
body.rtl nav { body.rtl nav {
left: unset;
right: -17em;
}
nav.active {
left: 0;
}
body.rtl nav.active {
left: unset; left: unset;
right: 0; right: 0;
} }
nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
nav .action { nav .action {
width: 100%; width: 100%;
display: block; display: block;
@ -77,41 +97,17 @@ nav .action {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
nav {
z-index: 99999;
background: #fff;
height: 100%;
width: 16em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: .1s ease left;
left: -17em;
}
body.rtl nav {
left: unset;
right: -17em;
}
nav.active {
left: 0;
}
body.rtl nav.active {
left: unset;
right: 0;
}
body.rtl .action { body.rtl .action {
direction: rtl; direction: rtl;
text-align: right; text-align: right;
} }
nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
nav .action > * { nav .action > * {
vertical-align: middle; vertical-align: middle;
} }
/* Main Content */
main { main {
margin: 1em; margin: 1em;
} }
@ -119,15 +115,12 @@ main {
.breadcrumbs { .breadcrumbs {
height: 3em; height: 3em;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.breadcrumbs span,
.breadcrumbs {
display: flex; display: flex;
align-items: center; align-items: center;
color: #6f6f6f; color: #6f6f6f;
} }
.breadcrumbs span,
.breadcrumbs a { .breadcrumbs a {
color: inherit; color: inherit;
transition: 0.1s ease-in; transition: 0.1s ease-in;
@ -146,12 +139,14 @@ body.rtl .breadcrumbs a {
padding: 0.2em; padding: 0.2em;
} }
/* Files */
.files { .files {
position: absolute; position: absolute;
bottom: 30px; bottom: 30px;
width: 100%; width: 100%;
} }
/* Progress Bar */
.progress { .progress {
position: fixed; position: fixed;
top: 0; top: 0;
@ -168,33 +163,76 @@ body.rtl .breadcrumbs a {
transition: 0.2s ease width; transition: 0.2s ease width;
} }
.break-word { /* Animations */
word-break: break-all; @keyframes flyInFromTop {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
} }
#search.active #result-desktop ul li a {
display: flex;
align-items: center;
padding: .3em 0;
margin-right: .3em;
}
#result-desktop {
animation: flyInFromTop 0.5s forwards;
}
/* File Selection */
#file-selection { #file-selection {
position: fixed; position: fixed;
bottom: 1em; bottom: 1em;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: -ms-flexbox;
-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; 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: 25em;
z-index: 1; z-index: 1;
} }
button {
flex: 1;
height: 3em;
padding: 8px 16px;
border: none;
background-color: #f5f5f5;
transition: background-color 0.3s;
/* Add borders */
border-right: 1px solid #ccc;
}
@media (min-width: 800px) {
#file-selection {
bottom: 4em;
}
}
#file-selection .action { #file-selection .action {
border-radius: 50%; border-radius: 50%;
width: auto; width: auto;
} }
#file-selection > span { #file-selection > span {
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
color: #6f6f6f; color: #6f6f6f;
margin-right: auto; margin-right: auto;
} }
#file-selection .action span { #file-selection .action span {
display: none; display: none;
} }

15
frontend/src/css/dashboard.css
View File

@ -295,6 +295,17 @@ body.rtl .card .card-title>*:first-child {
opacity: 0; opacity: 0;
} }
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 4em;
left: 0;
height: 100%;
width: 100%;
z-index: 9999;
animation: .3s show ease-in;
}
.card#share .action.copy-clipboard.active::after { .card#share .action.copy-clipboard.active::after {
opacity: 1; opacity: 1;
} }
@ -311,10 +322,6 @@ body.rtl .card .card-title>*:first-child {
flex: 1; flex: 1;
} }
/* * * * * * * * * * * * * * * *
* PROMPT - MOVE *
* * * * * * * * * * * * * * * */
.file-list { .file-list {
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;

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

@ -1,26 +1,29 @@
/* Header */
header { header {
z-index: 1000; z-index: 1000;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: fixed; position: fixed;
justify-content: space-between; z-index: 10000;
top: 0; top: 0;
left: 0; left: 0;
height: 4em;
width: 100%; width: 100%;
padding: 0; height: 4em;
display: flex; display: flex;
padding: 0.5em;
align-items: center; align-items: center;
justify-content: space-between;
background-color: white; background-color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 0.5em;
} }
@supports (backdrop-filter: none) { @supports (backdrop-filter: none) {
header { header {
background-color: transparent; background-color: transparent;
backdrop-filter: blur(16px) invert(0.1); backdrop-filter: blur(16px) invert(0.1);
} }
} }
header > * {
header>* {
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -56,27 +59,14 @@ header>div div {
position: relative; position: relative;
} }
#more { /* Search */
display: none;
}
#search { #search {
position: absolute; position: absolute;
height: 3em; height: 3em;
width: 50%; width: 50%;
max-width: 50em; max-width: 50em;
left: 50%; left: 50%;
transform: translate(-50%,0%); transform: translate(-50%, 0%);
}
#search.active {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 9999;
} }
#search #input { #search #input {
@ -90,23 +80,6 @@ header>div div {
z-index: 2; z-index: 2;
} }
#search.active #input {
border-bottom: 3px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6px);
height: 4em;
}
#search.active>div {
border-radius: 0 !important;
}
#search #input>.action,
#search #input>i {
margin-right: 0.3em;
user-select: none;
}
#search input { #search input {
width: 100%; width: 100%;
border: 0; border: 0;
@ -114,24 +87,44 @@ header>div div {
padding: 0; padding: 0;
} }
#result-list p {
margin: 1em;
}
#result-list { #result-list {
width: 60em; width: 60em;
max-width: 100%; max-width: 100%;
padding-top: 3em;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border-color: gray;
}
@media (min-width: 800px) {
#result-list {
padding-top: 0;
border-radius: .5em;
border-width: 2px;
border-style: solid;
background-color: white;
margin-top: 1em;
max-height: 80vh;
left: 50%;
max-width: 90vw;
transform: translateX(-50%);
box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3)
}
} }
.text-container { .text-container {
white-space: nowrap; /* Prevents the text from wrapping */ white-space: nowrap;
overflow: hidden; /* Hides the content that exceeds the div size */ overflow: hidden;
text-overflow: ellipsis; /* Adds "..." when the text overflows */ text-overflow: ellipsis;
width: 100%; /* Ensures the content takes the full width available */ width: 100%;
text-align: left; text-align: left;
direction: rtl; direction: rtl;
} }
#search #result { #search #result {
padding-top: 1em;
overflow: hidden; overflow: hidden;
background: white; background: white;
display: flex; display: flex;
@ -139,19 +132,12 @@ header>div div {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: left; text-align: left;
padding: 0;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
height: 0; height: 0;
transition: .2s ease height, .2s ease padding; transition: .2s ease height, .2s ease padding;
z-index: 1; z-index: 1;
} }
@media screen and (min-width: 800px) {
#search #result {
background: linear-gradient(to right, white 15%,lightgray 25%,lightgray 75%,white 85%);
}
}
body.rtl #search #result { body.rtl #search #result {
direction: ltr; direction: ltr;
} }
@ -165,16 +151,12 @@ body.rtl #search #result {
text-align: right; text-align: right;
} }
/*** RTL - Keep search result LTR because it has paths (in english) ***/ /* Search Results */
body.rtl #search #result ul>* { body.rtl #search #result ul>* {
direction: ltr; direction: ltr;
text-align: left; text-align: left;
} }
#search.active #result {
height: 100vh
}
#search ul { #search ul {
margin-top: 1em; margin-top: 1em;
padding: 0; padding: 0;
@ -197,38 +179,28 @@ body.rtl #search #result ul>* {
display: block; display: block;
} }
/* Icon Colors */
.folder-icons { .folder-icons {
color: var(--icon-blue); color: var(--icon-blue);
} }
.video-icons { .video-icons {
color: lightskyblue; color: lightskyblue;
} }
.image-icons { .image-icons {
color: lightcoral; color: lightcoral;
} }
.archive-icons { .archive-icons {
color: tan; color: tan;
} }
.audio-icons { .audio-icons {
color: plum; color: plum;
} }
#search.active #result>p>i { /* Search Input Placeholder */
text-align: center;
margin: 0 auto;
display: table;
}
#search.active #result ul li a {
display: flex;
align-items: center;
padding: .3em 0;
}
#search.active #result ul li a i {
margin-right: .3em;
}
#search::-webkit-input-placeholder { #search::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
} }
@ -247,11 +219,12 @@ body.rtl #search #result ul>* {
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
} }
/* Search Boxes */
#search .boxes { #search .boxes {
border: 1px solid rgba(0, 0, 0, 0.075); border: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background: #fff; background: #fff;
margin: 1em 0; margin: 1em;
} }
#search .boxes h3 { #search .boxes h3 {
@ -269,9 +242,11 @@ body.rtl #search .boxes h3 {
#search .boxes>div { #search .boxes>div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em;
margin-right: auto;
margin-left: auto;
max-width: 40em;
justify-content: space-between; justify-content: space-between;
margin-right: -1em;
margin-bottom: -1em;
} }
#search .boxes>div>div { #search .boxes>div>div {

64
frontend/src/css/mobile.css
View File

@ -1,20 +1,24 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
/* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */ /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
#previewer .preview { #previewer .preview {
height: calc(100% - 4em) !important; height: calc(100% - 4em) !important;
} }
} }
@media (max-width: 736px) { @media (max-width: 800px) {
body { body {
padding-bottom: 5em; padding-bottom: 5em;
} }
#listing.list .item .size { #listing.list .item .size {
display: none; display: none;
} }
#listing.list .item .name { #listing.list .item .name {
width: 60%; width: 60%;
} }
#more { #more {
display: inherit display: inherit
} }
@ -28,6 +32,7 @@
header img { header img {
display: none; display: none;
} }
#listing { #listing {
margin-bottom: 5em; margin-bottom: 5em;
} }
@ -43,19 +48,76 @@
body.rtl #nav .wrapper { body.rtl #nav .wrapper {
margin-right: unset; margin-right: unset;
} }
body.rtl .dashboard .row { body.rtl .dashboard .row {
margin-right: unset; margin-right: unset;
} }
#search.active { #search.active {
display: block; display: block;
} }
#search.active {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 9999;
}
#search.active #input {
border-bottom: 3px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6px);
height: 4em;
}
#search.active>div {
border-radius: 0 !important;
}
#search.active #result {
height: 100vh
}
#search.active #result>p>i {
text-align: center;
margin: 0 auto;
display: table;
}
#search.active #result ul li a {
display: flex;
align-items: center;
padding: .3em 0;
margin-right: .3em;
}
#search #input>.action,
#search #input>i {
margin-right: 0.3em;
user-select: none;
}
#result-list {
padding-top: 3em;
}
} }
@media (max-width: 450px) { @media (max-width: 450px) {
#listing.list .item .modified { #listing.list .item .modified {
display: none; display: none;
} }
#listing.list .item .name { #listing.list .item .name {
width: 100%; width: 100%;
} }
}
/* Mobile Specific Styles */
.mobile-only {
display: none !important;
} }

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

@ -158,7 +158,7 @@ main .spinner .bounce2 {
color: #fff; color: #fff;
} }
@media (min-width: 738px) { @media (min-width: 800px) {
#previewer header #dropdown .action i { #previewer header #dropdown .action i {
color: #fff; color: #fff;
} }

129
frontend/src/views/files/Listing.vue
View File

@ -3,52 +3,56 @@
<header-bar showMenu showLogo> <header-bar showMenu showLogo>
<search /> <search />
<template #actions> <template #actions>
<action <action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
:icon="viewIcon"
:label="$t('buttons.switchView')"
@action="switchView"
/>
</template> </template>
</header-bar> </header-bar>
<div id="file-selection"> <div id="file-selection">
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span> <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
<template > <template>
<action <action
v-if="headerButtons.info" v-if="headerButtons.select"
icon="info" icon="info"
:label="$t('buttons.info')" :label="$t('buttons.info')"
show="info" /> show="info"
<action />
v-if="headerButtons.share" <action
icon="share" v-if="headerButtons.select"
:label="$t('buttons.share')" icon="check_circle"
show="share" :label="$t('buttons.selectMultiple')"
/> @action="toggleMultipleSelection"
<action />
v-if="headerButtons.rename" <action
icon="mode_edit" v-if="headerButtons.share"
:label="$t('buttons.rename')" icon="share"
show="rename" :label="$t('buttons.share')"
/> show="share"
<action />
v-if="headerButtons.copy" <action
icon="content_copy" v-if="headerButtons.rename"
:label="$t('buttons.copyFile')" icon="mode_edit"
show="copy" :label="$t('buttons.rename')"
/> show="rename"
<action />
v-if="headerButtons.move" <action
icon="forward" v-if="headerButtons.copy"
:label="$t('buttons.moveFile')" icon="content_copy"
show="move" :label="$t('buttons.copyFile')"
/> show="copy"
<action />
v-if="headerButtons.delete" <action
icon="delete" v-if="headerButtons.move"
:label="$t('buttons.delete')" icon="forward"
show="delete" :label="$t('buttons.moveFile')"
/> show="move"
/>
<action
v-if="headerButtons.delete"
icon="delete"
:label="$t('buttons.delete')"
show="delete"
/>
</template>
</div> </div>
<div v-if="loading"> <div v-if="loading">
@ -83,12 +87,7 @@
multiple multiple
/> />
</div> </div>
<div <div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
v-else
id="listing"
ref="listing"
:class="user.viewMode + ' file-icons'"
>
<div> <div>
<div class="item header"> <div class="item header">
<div></div> <div></div>
@ -234,15 +233,7 @@ export default {
}; };
}, },
computed: { computed: {
...mapState([ ...mapState(["req", "selected", "user", "show", "multiple", "selected", "loading"]),
"req",
"selected",
"user",
"show",
"multiple",
"selected",
"loading",
]),
...mapGetters(["selectedCount"]), ...mapGetters(["selectedCount"]),
nameSorted() { nameSorted() {
return this.req.sorting.by === "name"; return this.req.sorting.by === "name";
@ -311,7 +302,6 @@ export default {
}, },
headerButtons() { headerButtons() {
return { return {
info: this.selectedCount > 0,
select: this.selectedCount > 0, select: this.selectedCount > 0,
upload: this.user.perm.create, upload: this.user.perm.create,
download: this.user.perm.download, download: this.user.perm.download,
@ -479,9 +469,7 @@ export default {
let items = []; let items = [];
for (let item of this.$store.state.clipboard.items) { for (let item of this.$store.state.clipboard.items) {
const from = item.from.endsWith("/") const from = item.from.endsWith("/") ? item.from.slice(0, -1) : item.from;
? item.from.slice(0, -1)
: item.from;
const to = this.$route.path + encodeURIComponent(item.name); const to = this.$route.path + encodeURIComponent(item.name);
items.push({ from, to, name: item.name }); items.push({ from, to, name: item.name });
} }
@ -562,9 +550,7 @@ export default {
if (currentPos > triggerPos) { if (currentPos > triggerPos) {
// Quantity of items needed to fill 2x of the window height // Quantity of items needed to fill 2x of the window height
const showQuantity = Math.ceil( const showQuantity = Math.ceil((window.innerHeight * 2) / this.itemWeight);
(window.innerHeight * 2) / this.itemWeight
);
// Increase the number of displayed items // Increase the number of displayed items
this.showLimit += showQuantity; this.showLimit += showQuantity;
@ -610,11 +596,7 @@ export default {
? this.$route.path ? this.$route.path
: this.$route.path + "/"; : this.$route.path + "/";
if ( if (el !== null && el.classList.contains("item") && el.dataset.dir === "true") {
el !== null &&
el.classList.contains("item") &&
el.dataset.dir === "true"
) {
// Get url from ListingItem instance // Get url from ListingItem instance
path = el.__vue__.url; path = el.__vue__.url;
@ -647,8 +629,7 @@ export default {
let files = event.currentTarget.files; let files = event.currentTarget.files;
let folder_upload = let folder_upload =
files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";
files[0].webkitRelativePath !== "";
if (folder_upload) { if (folder_upload) {
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
@ -702,9 +683,7 @@ export default {
} }
try { try {
await users.update({ id: this.user.id, sorting: { by, asc } }, [ await users.update({ id: this.user.id, sorting: { by, asc } }, ["sorting"]);
"sorting",
]);
} catch (e) { } catch (e) {
this.$showError(e); this.$showError(e);
} }
@ -804,9 +783,7 @@ export default {
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
// Quantity of items needed to fill 2x of the window height // Quantity of items needed to fill 2x of the window height
const showQuantity = Math.ceil( const showQuantity = Math.ceil((windowHeight + windowHeight * 2) / this.itemWeight);
(windowHeight + windowHeight * 2) / this.itemWeight
);
// Less items to display than current // Less items to display than current
if (this.showLimit > showQuantity && !fit) return; if (this.showLimit > showQuantity && !fit) return;