Graham Steffaniak
GitHub
commit
52ddc50c2a
|
|
@ -5,8 +5,9 @@ rice-box.go
|
|||
.idea/
|
||||
/filebrowser
|
||||
/filebrowser.exe
|
||||
/dist
|
||||
/src/backend/vendor
|
||||
/frontend/dist
|
||||
/backend/vendor
|
||||
|
||||
|
||||
.DS_Store
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../frontend/dist
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
# Ignore everything in this directory
|
||||
*
|
||||
# Except this file
|
||||
!.gitignore
|
||||
|
|
@ -59,6 +59,7 @@ func ParseSearch(value string) *searchOptions {
|
|||
case "folder" : opts.Conditions["dir"] = true
|
||||
case "file" : opts.Conditions["dir"] = false
|
||||
}
|
||||
|
||||
if len(filter) < 8 {
|
||||
continue
|
||||
}
|
||||
|
|
@ -90,7 +91,8 @@ func ParseSearch(value string) *searchOptions {
|
|||
opts.Terms = []string{unique}
|
||||
return opts
|
||||
}
|
||||
|
||||
re := regexp.MustCompile(` +`)
|
||||
value = re.ReplaceAllString(value, " ")
|
||||
opts.Terms = strings.Split(value, " ")
|
||||
return opts
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@
|
|||
"watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
|
||||
},
|
||||
"dependencies": {
|
||||
"normalize.css": "^8.0.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"ace-builds": "^1.4.7",
|
||||
"clipboard": "^2.0.4",
|
||||
"css-vars-ponyfill": "^2.4.3",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
--surfacePrimary: #20292F;
|
||||
--surfaceSecondary: #3A4147;
|
||||
--divider: rgba(255, 255, 255, 0.12);
|
||||
--icon: #ffffff;
|
||||
--textPrimary: rgba(255, 255, 255, 0.87);
|
||||
--textSecondary: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
|
@ -16,9 +15,6 @@ body {
|
|||
#loading {
|
||||
background: var(--background);
|
||||
}
|
||||
#loading .spinner div, main .spinner div {
|
||||
background: var(--icon);
|
||||
}
|
||||
|
||||
#login {
|
||||
background: var(--background);
|
||||
|
|
@ -65,9 +61,7 @@ header {
|
|||
.action:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
.action i {
|
||||
color: var(--icon) !important;
|
||||
}
|
||||
|
||||
.action .counter {
|
||||
border-color: var(--surfacePrimary);
|
||||
}
|
||||
|
|
@ -92,9 +86,7 @@ nav > div {
|
|||
color: var(--textPrimary);
|
||||
border-color: var(--divider) !important;
|
||||
}
|
||||
#listing .item i {
|
||||
color: var(--icon);
|
||||
}
|
||||
|
||||
#listing .item .modified {
|
||||
color: var(--textSecondary);
|
||||
}
|
||||
|
|
@ -105,9 +97,7 @@ nav > div {
|
|||
#listing.list .header span {
|
||||
color: var(--textPrimary);
|
||||
}
|
||||
#listing.list .header i {
|
||||
color: var(--icon);
|
||||
}
|
||||
|
||||
#listing.list .item.header {
|
||||
background: var(--background);
|
||||
}
|
||||
|
|
@ -130,6 +120,9 @@ nav > div {
|
|||
.dashboard #nav ul li:hover {
|
||||
background: var(--surfaceSecondary);
|
||||
}
|
||||
#result-list {
|
||||
background-color:#292929;
|
||||
}
|
||||
|
||||
.card h3,
|
||||
.dashboard #nav,
|
||||
|
|
@ -173,9 +166,6 @@ table th {
|
|||
.file-list li:before {
|
||||
color: var(--textSecondary);
|
||||
}
|
||||
.file-list li[aria-selected=true]:before {
|
||||
color: var(--icon);
|
||||
}
|
||||
|
||||
.shell {
|
||||
background: var(--surfacePrimary);
|
||||
|
|
@ -196,16 +186,18 @@ nav {
|
|||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
#file-selection {
|
||||
#file-selection {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
#file-selection span {
|
||||
}
|
||||
#file-selection span {
|
||||
color: var(--textPrimary) !important;
|
||||
}
|
||||
#dropdown {
|
||||
}
|
||||
#dropdown {
|
||||
background: var(--surfaceSecondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
background-color:darkgray;
|
||||
}
|
||||
|
||||
.share__box {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,36 +1,39 @@
|
|||
<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')">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<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 id="result" ref="result">
|
||||
<div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
|
||||
<div id="result-list">
|
||||
<br>
|
||||
<br>
|
||||
<div class="button" style="width:100%">Search Context: {{ getContext(this.$route.path) }}</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 class="button" style="width: 100%">
|
||||
Search Context: {{ getContext(this.$route.path) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<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>
|
||||
|
|
@ -44,12 +47,83 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonGroup from "./ButtonGroup.vue";
|
||||
import { mapState, mapGetters, mapMutations } from "vuex";
|
||||
import { search } from "@/api";
|
||||
|
||||
|
|
@ -66,10 +140,28 @@ var boxes = {
|
|||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ButtonGroup,
|
||||
},
|
||||
name: "search",
|
||||
data: function () {
|
||||
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: "",
|
||||
width: window.innerWidth,
|
||||
active: false,
|
||||
ongoing: false,
|
||||
results: [],
|
||||
|
|
@ -120,42 +212,42 @@ export default {
|
|||
? this.$t("search.typeToSearch")
|
||||
: this.$t("search.pressToSearch");
|
||||
},
|
||||
isMobile() {
|
||||
return this.width <= 800;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.result.addEventListener("scroll", (event) => {
|
||||
if (
|
||||
event.target.offsetHeight + event.target.scrollTop >=
|
||||
event.target.scrollHeight - 100
|
||||
) {
|
||||
this.resultsCount += 50;
|
||||
}
|
||||
});
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
this.handleResize(); // Call this once to set the initial width
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.width = window.innerWidth;
|
||||
},
|
||||
async navigateTo(url) {
|
||||
this.closeHovers();
|
||||
await this.$nextTick();
|
||||
setTimeout(() => this.$router.push(url), 0);
|
||||
},
|
||||
getContext(url) {
|
||||
url = url.slice(1)
|
||||
let path = "./" + url.substring(url.indexOf('/') + 1);
|
||||
return path.replace(/\/+$/, '') + "/"
|
||||
url = url.slice(1);
|
||||
let path = "./" + url.substring(url.indexOf("/") + 1);
|
||||
return path.replace(/\/+$/, "") + "/";
|
||||
},
|
||||
basePath(str) {
|
||||
if (!str.includes("/")){
|
||||
return ""
|
||||
if (!str.includes("/")) {
|
||||
return "";
|
||||
}
|
||||
let parts = str.replace(/\/$/, '').split("/")
|
||||
parts.pop()
|
||||
return parts.join("/") + "/"
|
||||
let parts = str.replace(/\/$/, "").split("/");
|
||||
parts.pop();
|
||||
return parts.join("/") + "/";
|
||||
},
|
||||
baseName(str) {
|
||||
let parts = str.split("/")
|
||||
let parts = str.split("/");
|
||||
if (str.endsWith("/")) {
|
||||
return parts[parts.length - 2] + "/"
|
||||
return parts[parts.length - 2] + "/";
|
||||
} else {
|
||||
return parts[parts.length - 1]
|
||||
return parts[parts.length - 1];
|
||||
}
|
||||
},
|
||||
...mapMutations(["showHover", "closeHovers", "setReload"]),
|
||||
|
|
@ -174,8 +266,22 @@ export default {
|
|||
this.results.length === 0;
|
||||
},
|
||||
init(string) {
|
||||
this.value = `${string} `;
|
||||
if (string == null || string == ""){
|
||||
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() {
|
||||
this.ongoing = false;
|
||||
|
|
@ -184,7 +290,7 @@ export default {
|
|||
},
|
||||
async submit(event) {
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,6 @@
|
|||
<template>
|
||||
<nav :class="{ active }">
|
||||
<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
|
||||
class="action"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<component ref="currentComponent" :is="currentComponent"></component>
|
||||
<div v-if="showOverlay" @click="resetPrompts" class="overlay"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -103,6 +104,16 @@ export default {
|
|||
|
||||
return (matched && this.show) || null;
|
||||
},
|
||||
showOverlay: function () {
|
||||
return (
|
||||
this.show !== null && this.show !== "more"
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resetPrompts() {
|
||||
this.$store.commit("closeHovers");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
@media (max-width: 800px) {
|
||||
.share {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* Basic Styles */
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
padding-top: 4em;
|
||||
|
|
@ -11,12 +12,6 @@ body.rtl {
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:hover,
|
||||
*:active,
|
||||
*:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
|
@ -28,45 +23,70 @@ img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
audio, video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 95%;
|
||||
max-width: 960px;
|
||||
margin: 1em auto 0;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
i.spin {
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
|
||||
/* App Styles */
|
||||
#app {
|
||||
transition: 0.2s ease padding;
|
||||
}
|
||||
|
||||
over
|
||||
#app.multiple {
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
|
||||
/* Navigation Styles */
|
||||
nav {
|
||||
width: 16em;
|
||||
position: fixed;
|
||||
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 {
|
||||
left: unset;
|
||||
right: -17em;
|
||||
}
|
||||
|
||||
nav.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.rtl nav.active {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
nav > div {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
nav .action {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
|
@ -77,41 +97,17 @@ nav .action {
|
|||
overflow: hidden;
|
||||
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 {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav > div {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
nav .action > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
main {
|
||||
margin: 1em;
|
||||
}
|
||||
|
|
@ -119,15 +115,12 @@ main {
|
|||
.breadcrumbs {
|
||||
height: 3em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.breadcrumbs span,
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
|
||||
.breadcrumbs span,
|
||||
.breadcrumbs a {
|
||||
color: inherit;
|
||||
transition: 0.1s ease-in;
|
||||
|
|
@ -146,12 +139,14 @@ body.rtl .breadcrumbs a {
|
|||
padding: 0.2em;
|
||||
}
|
||||
|
||||
/* Files */
|
||||
.files {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -168,33 +163,76 @@ body.rtl .breadcrumbs a {
|
|||
transition: 0.2s ease width;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
word-break: break-all;
|
||||
/* Animations */
|
||||
@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 {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
-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;
|
||||
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 {
|
||||
border-radius: 50%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#file-selection > span {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
color: #6f6f6f;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#file-selection .action span {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -295,6 +295,17 @@ body.rtl .card .card-title>*:first-child {
|
|||
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 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -311,10 +322,6 @@ body.rtl .card .card-title>*:first-child {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* PROMPT - MOVE *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
.file-list {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,29 @@
|
|||
/* Header */
|
||||
header {
|
||||
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;
|
||||
justify-content: space-between;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 4em;
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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) {
|
||||
header {
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(16px) invert(0.1);
|
||||
}
|
||||
}
|
||||
header > * {
|
||||
|
||||
header>* {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -56,27 +59,14 @@ header>div div {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
#search {
|
||||
position: absolute;
|
||||
height: 3em;
|
||||
width: 50%;
|
||||
max-width: 50em;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0%);
|
||||
}
|
||||
|
||||
#search.active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
#search #input {
|
||||
|
|
@ -90,23 +80,6 @@ header>div div {
|
|||
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 {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
|
@ -114,24 +87,44 @@ header>div div {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#result-list p {
|
||||
margin: 1em;
|
||||
}
|
||||
#result-list {
|
||||
width: 60em;
|
||||
max-width: 100%;
|
||||
padding-top: 3em;
|
||||
overflow-x: hidden;
|
||||
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 {
|
||||
white-space: nowrap; /* Prevents the text from wrapping */
|
||||
overflow: hidden; /* Hides the content that exceeds the div size */
|
||||
text-overflow: ellipsis; /* Adds "..." when the text overflows */
|
||||
width: 100%; /* Ensures the content takes the full width available */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#search #result {
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
display: flex;
|
||||
|
|
@ -139,19 +132,12 @@ header>div div {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
height: 0;
|
||||
transition: .2s ease height, .2s ease padding;
|
||||
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 {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
@ -165,16 +151,12 @@ body.rtl #search #result {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/*** RTL - Keep search result LTR because it has paths (in english) ***/
|
||||
/* Search Results */
|
||||
body.rtl #search #result ul>* {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#search.active #result {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
#search ul {
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
|
|
@ -197,38 +179,28 @@ body.rtl #search #result ul>* {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Icon Colors */
|
||||
.folder-icons {
|
||||
color: var(--icon-blue);
|
||||
}
|
||||
|
||||
.video-icons {
|
||||
color: lightskyblue;
|
||||
}
|
||||
|
||||
.image-icons {
|
||||
color: lightcoral;
|
||||
}
|
||||
|
||||
.archive-icons {
|
||||
color: tan;
|
||||
}
|
||||
|
||||
.audio-icons {
|
||||
color: plum;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#search.active #result ul li a i {
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
/* Search Input Placeholder */
|
||||
#search::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
|
@ -247,11 +219,12 @@ body.rtl #search #result ul>* {
|
|||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
/* Search Boxes */
|
||||
#search .boxes {
|
||||
border: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
margin: 1em 0;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#search .boxes h3 {
|
||||
|
|
@ -269,9 +242,11 @@ body.rtl #search .boxes h3 {
|
|||
#search .boxes>div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 40em;
|
||||
justify-content: space-between;
|
||||
margin-right: -1em;
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
#search .boxes>div>div {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,24 @@
|
|||
@media (max-width: 1024px) {
|
||||
|
||||
/* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
|
||||
#previewer .preview {
|
||||
height: calc(100% - 4em) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 736px) {
|
||||
@media (max-width: 800px) {
|
||||
body {
|
||||
padding-bottom: 5em;
|
||||
}
|
||||
|
||||
#listing.list .item .size {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing.list .item .name {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#more {
|
||||
display: inherit
|
||||
}
|
||||
|
|
@ -28,6 +32,7 @@
|
|||
header img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
|
@ -43,19 +48,76 @@
|
|||
body.rtl #nav .wrapper {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
body.rtl .dashboard .row {
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
#search.active {
|
||||
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) {
|
||||
#listing.list .item .modified {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#listing.list .item .name {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* Mobile Specific Styles */
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@ main .spinner .bounce2 {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 738px) {
|
||||
@media (min-width: 800px) {
|
||||
#previewer header #dropdown .action i {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,22 +3,25 @@
|
|||
<header-bar showMenu showLogo>
|
||||
<search />
|
||||
<template #actions>
|
||||
<action
|
||||
:icon="viewIcon"
|
||||
:label="$t('buttons.switchView')"
|
||||
@action="switchView"
|
||||
/>
|
||||
<action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
|
||||
</template>
|
||||
</header-bar>
|
||||
|
||||
<div id="file-selection">
|
||||
<span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
|
||||
<template >
|
||||
<template>
|
||||
<action
|
||||
v-if="headerButtons.info"
|
||||
v-if="headerButtons.select"
|
||||
icon="info"
|
||||
:label="$t('buttons.info')"
|
||||
show="info" />
|
||||
show="info"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.select"
|
||||
icon="check_circle"
|
||||
:label="$t('buttons.selectMultiple')"
|
||||
@action="toggleMultipleSelection"
|
||||
/>
|
||||
<action
|
||||
v-if="headerButtons.share"
|
||||
icon="share"
|
||||
|
|
@ -49,6 +52,7 @@
|
|||
:label="$t('buttons.delete')"
|
||||
show="delete"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="loading">
|
||||
|
|
@ -83,12 +87,7 @@
|
|||
multiple
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
id="listing"
|
||||
ref="listing"
|
||||
:class="user.viewMode + ' file-icons'"
|
||||
>
|
||||
<div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
|
||||
<div>
|
||||
<div class="item header">
|
||||
<div></div>
|
||||
|
|
@ -234,15 +233,7 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
"req",
|
||||
"selected",
|
||||
"user",
|
||||
"show",
|
||||
"multiple",
|
||||
"selected",
|
||||
"loading",
|
||||
]),
|
||||
...mapState(["req", "selected", "user", "show", "multiple", "selected", "loading"]),
|
||||
...mapGetters(["selectedCount"]),
|
||||
nameSorted() {
|
||||
return this.req.sorting.by === "name";
|
||||
|
|
@ -311,7 +302,6 @@ export default {
|
|||
},
|
||||
headerButtons() {
|
||||
return {
|
||||
info: this.selectedCount > 0,
|
||||
select: this.selectedCount > 0,
|
||||
upload: this.user.perm.create,
|
||||
download: this.user.perm.download,
|
||||
|
|
@ -479,9 +469,7 @@ export default {
|
|||
let items = [];
|
||||
|
||||
for (let item of this.$store.state.clipboard.items) {
|
||||
const from = item.from.endsWith("/")
|
||||
? item.from.slice(0, -1)
|
||||
: item.from;
|
||||
const from = item.from.endsWith("/") ? item.from.slice(0, -1) : item.from;
|
||||
const to = this.$route.path + encodeURIComponent(item.name);
|
||||
items.push({ from, to, name: item.name });
|
||||
}
|
||||
|
|
@ -562,9 +550,7 @@ export default {
|
|||
|
||||
if (currentPos > triggerPos) {
|
||||
// Quantity of items needed to fill 2x of the window height
|
||||
const showQuantity = Math.ceil(
|
||||
(window.innerHeight * 2) / this.itemWeight
|
||||
);
|
||||
const showQuantity = Math.ceil((window.innerHeight * 2) / this.itemWeight);
|
||||
|
||||
// Increase the number of displayed items
|
||||
this.showLimit += showQuantity;
|
||||
|
|
@ -610,11 +596,7 @@ export default {
|
|||
? this.$route.path
|
||||
: this.$route.path + "/";
|
||||
|
||||
if (
|
||||
el !== null &&
|
||||
el.classList.contains("item") &&
|
||||
el.dataset.dir === "true"
|
||||
) {
|
||||
if (el !== null && el.classList.contains("item") && el.dataset.dir === "true") {
|
||||
// Get url from ListingItem instance
|
||||
path = el.__vue__.url;
|
||||
|
||||
|
|
@ -647,8 +629,7 @@ export default {
|
|||
|
||||
let files = event.currentTarget.files;
|
||||
let folder_upload =
|
||||
files[0].webkitRelativePath !== undefined &&
|
||||
files[0].webkitRelativePath !== "";
|
||||
files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";
|
||||
|
||||
if (folder_upload) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
|
|
@ -702,9 +683,7 @@ export default {
|
|||
}
|
||||
|
||||
try {
|
||||
await users.update({ id: this.user.id, sorting: { by, asc } }, [
|
||||
"sorting",
|
||||
]);
|
||||
await users.update({ id: this.user.id, sorting: { by, asc } }, ["sorting"]);
|
||||
} catch (e) {
|
||||
this.$showError(e);
|
||||
}
|
||||
|
|
@ -804,9 +783,7 @@ export default {
|
|||
const windowHeight = window.innerHeight;
|
||||
|
||||
// Quantity of items needed to fill 2x of the window height
|
||||
const showQuantity = Math.ceil(
|
||||
(windowHeight + windowHeight * 2) / this.itemWeight
|
||||
);
|
||||
const showQuantity = Math.ceil((windowHeight + windowHeight * 2) / this.itemWeight);
|
||||
|
||||
// Less items to display than current
|
||||
if (this.showLimit > showQuantity && !fit) return;
|
||||
|
|
|
|||
Loading…
Reference in New Issue