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

updated hovers

This commit is contained in:
Graham Steffaniak 2023-07-30 17:20:22 -05:00
parent 87515d9cf9
commit 8226281579
9 changed files with 124 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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: 800px) { #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 {

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

@ -48,7 +48,7 @@
</li> </li>
</ul> </ul>
<template v-if="isEmpty"> <template v-if="isEmpty">
<p>{{ text }}</p> <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>
@ -278,7 +278,7 @@ export default {
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();
} }
@ -306,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>

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

@ -42,11 +42,6 @@ audio, video {
margin: 1em auto 0; margin: 1em auto 0;
} }
/* Mobile Specific Styles */
.mobile-only {
display: none !important;
}
/* Icons */ /* Icons */
i.spin { i.spin {
animation: 1s spin linear infinite; animation: 1s spin linear infinite;
@ -56,7 +51,7 @@ i.spin {
#app { #app {
transition: 0.2s ease padding; transition: 0.2s ease padding;
} }
over
#app.multiple { #app.multiple {
padding-bottom: 4em; padding-bottom: 4em;
} }
@ -197,15 +192,35 @@ body.rtl .breadcrumbs a {
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;

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;

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

@ -2,6 +2,7 @@
header { header {
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
z-index: 10000;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -86,6 +87,9 @@ 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%;
@ -241,7 +245,7 @@ body.rtl #search .boxes h3 {
margin: 1em; margin: 1em;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
max-width: 30em; max-width: 40em;
justify-content: space-between; justify-content: space-between;
} }

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;
} }

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

@ -3,52 +3,55 @@
<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> </template>
</div> </div>
@ -84,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>
@ -235,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";
@ -312,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,
@ -480,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 });
} }
@ -563,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;
@ -611,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;
@ -648,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++) {
@ -703,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);
} }
@ -805,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;