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;
--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: 800px) {
#file-selection {
background: var(--surfaceSecondary) !important;
}
#file-selection span {
color: var(--textPrimary) !important;
}
#dropdown {
background: var(--surfaceSecondary) !important;
}
#file-selection {
background: var(--surfaceSecondary) !important;
}
#file-selection span {
color: var(--textPrimary) !important;
}
#dropdown {
background: var(--surfaceSecondary) !important;
}
.button-group button {
background-color:darkgray;
}
.share__box {

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

@ -48,7 +48,7 @@
</li>
</ul>
<template v-if="isEmpty">
<p>{{ text }}</p>
<p >{{ text }}</p>
<template v-if="value.length === 0">
<div class="boxes">
<h3>{{ $t("search.types") }}</h3>
@ -278,7 +278,7 @@ export default {
if (string == null || string == ""){
return false
}
this.value = this.value.replace(string, "");
this.value = this.value.replace(string+" ", "");
if (this.isMobile){
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>
<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"

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

@ -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>
</script>

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

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

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

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

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

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

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

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

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

@ -3,52 +3,55 @@
<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 >
<action
v-if="headerButtons.info"
icon="info"
:label="$t('buttons.info')"
show="info" />
<action
v-if="headerButtons.share"
icon="share"
:label="$t('buttons.share')"
show="share"
/>
<action
v-if="headerButtons.rename"
icon="mode_edit"
:label="$t('buttons.rename')"
show="rename"
/>
<action
v-if="headerButtons.copy"
icon="content_copy"
:label="$t('buttons.copyFile')"
show="copy"
/>
<action
v-if="headerButtons.move"
icon="forward"
:label="$t('buttons.moveFile')"
show="move"
/>
<action
v-if="headerButtons.delete"
icon="delete"
:label="$t('buttons.delete')"
show="delete"
/>
<template>
<action
v-if="headerButtons.select"
icon="info"
:label="$t('buttons.info')"
show="info"
/>
<action
v-if="headerButtons.select"
icon="check_circle"
:label="$t('buttons.selectMultiple')"
@action="toggleMultipleSelection"
/>
<action
v-if="headerButtons.share"
icon="share"
:label="$t('buttons.share')"
show="share"
/>
<action
v-if="headerButtons.rename"
icon="mode_edit"
:label="$t('buttons.rename')"
show="rename"
/>
<action
v-if="headerButtons.copy"
icon="content_copy"
:label="$t('buttons.copyFile')"
show="copy"
/>
<action
v-if="headerButtons.move"
icon="forward"
:label="$t('buttons.moveFile')"
show="move"
/>
<action
v-if="headerButtons.delete"
icon="delete"
:label="$t('buttons.delete')"
show="delete"
/>
</template>
</div>
@ -84,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>
@ -235,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";
@ -312,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,
@ -480,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 });
}
@ -563,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;
@ -611,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;
@ -648,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++) {
@ -703,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);
}
@ -805,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;