FIX: UI doesn't load for non-user on share (#51)
Co-authored-by: Graham Steffaniak <graham.steffaniak@autodesk.com>
This commit is contained in:
Graham Steffaniak
GitHub
parent
3c1a852435
commit
3fd8ee7783
|
|
@ -3,7 +3,7 @@ server:
|
|||
baseURL: "/"
|
||||
auth:
|
||||
method: password
|
||||
signup: false
|
||||
signup: true
|
||||
userDefaults:
|
||||
darkMode: true
|
||||
disableSettings: false
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
<template>
|
||||
<div id="search" @click="open" v-bind:class="{ active, ongoing, 'dark-mode': isDarkMode }">
|
||||
<div
|
||||
id="search"
|
||||
@click="open"
|
||||
v-bind:class="{ active, ongoing, 'dark-mode': isDarkMode }"
|
||||
>
|
||||
<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 class="main-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
|
||||
class="main-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">
|
||||
|
|
@ -14,7 +33,12 @@
|
|||
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>
|
||||
|
|
@ -37,15 +61,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<template v-if="isEmpty">
|
||||
<button class="mobile-boxes" v-if="value.length === 0 && !showBoxes" @click="resetSearchFilters()">
|
||||
<button
|
||||
class="mobile-boxes"
|
||||
v-if="value.length === 0 && !showBoxes"
|
||||
@click="resetSearchFilters()"
|
||||
>
|
||||
Reset filters
|
||||
</button>
|
||||
<template v-if="value.length === 0 && showBoxes">
|
||||
<div class="boxes">
|
||||
<h3>{{ $t("search.types") }}</h3>
|
||||
<div>
|
||||
<div class="mobile-boxes" tabindex="0" v-for="(v, k) in boxes" :key="k" role="button"
|
||||
@click="addToTypes('type:' + k)" :aria-label="v.label">
|
||||
<div
|
||||
class="mobile-boxes"
|
||||
tabindex="0"
|
||||
v-for="(v, k) in boxes"
|
||||
:key="k"
|
||||
role="button"
|
||||
@click="addToTypes('type:' + k)"
|
||||
:aria-label="v.label"
|
||||
>
|
||||
<i class="material-icons">{{ v.icon }}</i>
|
||||
<p>{{ v.label }}</p>
|
||||
</div>
|
||||
|
|
@ -90,26 +125,51 @@
|
|||
</p>
|
||||
</div>
|
||||
<template>
|
||||
<ButtonGroup :buttons="folderSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
|
||||
@disableAll="folderSelectClicked()" @enableAll="resetButtonGroups()" />
|
||||
<ButtonGroup :buttons="typeSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
|
||||
:isDisabled="isTypeSelectDisabled" />
|
||||
<ButtonGroup
|
||||
:buttons="folderSelect"
|
||||
@button-clicked="addToTypes"
|
||||
@remove-button-clicked="removeFromTypes"
|
||||
@disableAll="folderSelectClicked()"
|
||||
@enableAll="resetButtonGroups()"
|
||||
/>
|
||||
<ButtonGroup
|
||||
:buttons="typeSelect"
|
||||
@button-clicked="addToTypes"
|
||||
@remove-button-clicked="removeFromTypes"
|
||||
:isDisabled="isTypeSelectDisabled"
|
||||
/>
|
||||
<div class="sizeConstraints">
|
||||
<div class="sizeInputWrapper">
|
||||
<p>Smaller Than:</p>
|
||||
<input class="sizeInput" v-model="smallerThan" type="number" min="0" placeholder="number" />
|
||||
<input
|
||||
class="sizeInput"
|
||||
v-model="smallerThan"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="number"
|
||||
/>
|
||||
<p>MB</p>
|
||||
</div>
|
||||
<div class="sizeInputWrapper">
|
||||
<p>Larger Than:</p>
|
||||
<input class="sizeInput" v-model="largerThan" type="number" placeholder="number" />
|
||||
<input
|
||||
class="sizeInput"
|
||||
v-model="largerThan"
|
||||
type="number"
|
||||
placeholder="number"
|
||||
/>
|
||||
<p>MB</p>
|
||||
</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>
|
||||
|
|
@ -142,7 +202,7 @@
|
|||
border-right: 1px solid gray;
|
||||
}
|
||||
|
||||
#result-desktop>#result-list {
|
||||
#result-desktop > #result-list {
|
||||
max-height: 80vh;
|
||||
width: 35em;
|
||||
overflow: scroll;
|
||||
|
|
@ -180,8 +240,8 @@
|
|||
#search.active #result-desktop ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .3em 0;
|
||||
margin-right: .3em;
|
||||
padding: 0.3em 0;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
#search #result-list.active {
|
||||
|
|
@ -204,10 +264,10 @@
|
|||
|
||||
/* Search */
|
||||
#search {
|
||||
background-color:unset;
|
||||
z-index:3;
|
||||
background-color: unset;
|
||||
z-index: 3;
|
||||
position: fixed;
|
||||
top: .5em;
|
||||
top: 0.5em;
|
||||
min-width: 35em;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
|
|
@ -259,7 +319,6 @@
|
|||
direction: rtl;
|
||||
}
|
||||
|
||||
|
||||
#search #result {
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
|
|
@ -280,7 +339,7 @@ body.rtl #search #result {
|
|||
direction: ltr;
|
||||
}
|
||||
|
||||
#search #result>div>*:first-child {
|
||||
#search #result > div > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -290,7 +349,7 @@ body.rtl #search #result {
|
|||
}
|
||||
|
||||
/* Search Results */
|
||||
body.rtl #search #result ul>* {
|
||||
body.rtl #search #result ul > * {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -415,7 +474,7 @@ body.rtl #search .boxes h3 {
|
|||
width: 5em;
|
||||
border-radius: 1em;
|
||||
padding: 1em;
|
||||
backdrop-filter: invert(.1);
|
||||
backdrop-filter: invert(0.1);
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -431,7 +490,7 @@ body.rtl #search .boxes h3 {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.helpButton {
|
||||
|
|
@ -457,6 +516,7 @@ body.rtl #search .boxes h3 {
|
|||
import ButtonGroup from "./ButtonGroup.vue";
|
||||
import { mapState, mapGetters, mapMutations } from "vuex";
|
||||
import { search } from "@/api";
|
||||
import { darkMode } from "@/utils/constants";
|
||||
|
||||
var boxes = {
|
||||
folder: { label: "folders", icon: "folder" },
|
||||
|
|
@ -506,12 +566,11 @@ export default {
|
|||
const resultList = document.getElementById("result-list");
|
||||
if (!active) {
|
||||
resultList.classList.remove("active");
|
||||
return
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
resultList.classList.add("active");
|
||||
}, 100);
|
||||
|
||||
},
|
||||
show(val, old) {
|
||||
this.active = val === "search";
|
||||
|
|
@ -543,7 +602,7 @@ export default {
|
|||
...mapState(["user", "show"]),
|
||||
...mapGetters(["isListing"]),
|
||||
isDarkMode() {
|
||||
return this.user.darkMode === true
|
||||
return this.user && this.user.darkMode ? this.user.darkMode : darkMode;
|
||||
},
|
||||
showBoxes() {
|
||||
return this.searchTypes == "";
|
||||
|
|
@ -630,7 +689,6 @@ export default {
|
|||
return false;
|
||||
}
|
||||
this.searchTypes = this.searchTypes + string + " ";
|
||||
|
||||
},
|
||||
resetSearchFilters() {
|
||||
this.searchTypes = "";
|
||||
|
|
|
|||
|
|
@ -1,59 +1,99 @@
|
|||
<template>
|
||||
<nav :class="{ active, 'dark-mode': isDarkMode }">
|
||||
<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>
|
||||
<button id="upload-button" @click="upload($event)" class="action" >
|
||||
<button id="upload-button" @click="upload($event)" class="action">
|
||||
<i class="material-icons">file_upload</i>
|
||||
<span>Upload file</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
|
||||
">
|
||||
<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 style="text-align: center">{{ usage.usedPercentage }}%</span>
|
||||
<span>{{ usage.used }} of {{ usage.total }} used</span>
|
||||
<br>
|
||||
<br />
|
||||
<span v-if="disableExternal">File Browser</span>
|
||||
<span v-else>
|
||||
<a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://github.com/gtsteffaniak/filebrowser"
|
||||
>
|
||||
File Browser
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -79,6 +119,7 @@ import {
|
|||
import { files as api } from "@/api";
|
||||
import ProgressBar from "vue-simple-progress";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { darkMode } from "@/utils/constants";
|
||||
|
||||
export default {
|
||||
name: "sidebar",
|
||||
|
|
@ -88,7 +129,7 @@ export default {
|
|||
computed: {
|
||||
...mapState(["user"]),
|
||||
isDarkMode() {
|
||||
return this.user.darkMode === true
|
||||
return this.user && this.user.darkMode ? this.user.darkMode : darkMode;
|
||||
},
|
||||
...mapGetters(["isLogged"]),
|
||||
active() {
|
||||
|
|
@ -130,11 +171,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() {
|
||||
|
|
|
|||
|
|
@ -16,14 +16,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import editorBar from "./bars/EditorBar.vue"
|
||||
import defaultBar from "./bars/Default.vue"
|
||||
import listingBar from "./bars/ListingBar.vue"
|
||||
import editorBar from "./bars/EditorBar.vue";
|
||||
import defaultBar from "./bars/Default.vue";
|
||||
import listingBar from "./bars/ListingBar.vue";
|
||||
import Prompts from "@/components/prompts/Prompts";
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
import UploadFiles from "../components/prompts/UploadFiles";
|
||||
import { enableExec } from "@/utils/constants";
|
||||
import { darkMode } from "@/utils/constants";
|
||||
|
||||
export default {
|
||||
name: "layout",
|
||||
components: {
|
||||
|
|
@ -46,7 +48,7 @@ export default {
|
|||
...mapGetters(["isLogged", "progress", "isListing"]),
|
||||
...mapState(["req", "user", "state"]),
|
||||
isDarkMode() {
|
||||
return this.user.darkMode === true
|
||||
return this.user && this.user.darkMode ? this.user.darkMode : darkMode;
|
||||
},
|
||||
isExecEnabled: () => enableExec,
|
||||
currentView() {
|
||||
|
|
@ -56,10 +58,7 @@ export default {
|
|||
|
||||
if (this.req.isDir) {
|
||||
return "listing";
|
||||
} else if (
|
||||
this.req.type === "text" ||
|
||||
this.req.type === "textImmutable"
|
||||
) {
|
||||
} else if (this.req.type === "text" || this.req.type === "textImmutable") {
|
||||
return "editor";
|
||||
} else {
|
||||
return "preview";
|
||||
|
|
@ -75,28 +74,25 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getTitle() {
|
||||
let title = "Title"
|
||||
if (this.$route.path.startsWith('/settings/')) {
|
||||
title = "Settings"
|
||||
let title = "Title";
|
||||
if (this.$route.path.startsWith("/settings/")) {
|
||||
title = "Settings";
|
||||
}
|
||||
return title
|
||||
return title;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
/* Use the class .dark-mode to apply styles conditionally */
|
||||
.dark-mode {
|
||||
background: var(--background);
|
||||
color: var(--textPrimary);
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
.dark-mode-header {
|
||||
color:white;
|
||||
background: var(--surfacePrimary);
|
||||
}
|
||||
|
||||
|
|
@ -107,5 +103,4 @@ export default {
|
|||
backdrop-filter: blur(16px) invert(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue