updated hovers
This commit is contained in:
Graham Steffaniak
parent
87515d9cf9
commit
8226281579
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue