nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 17:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

FilePreview solved v0.3 issues

Browse Source
This commit is contained in:
Miloš Holba
2020-08-26 22:37:33 +02:00
parent aac0aa755f
commit 82b43eb996
7 changed files with 1015 additions and 1126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
resources/js/components/FilesView/FilePreviewActions.vue
View File

@@ -1,90 +1,74 @@
<template>
<div v-if="filteredFiles.length > 1">
<chevron-left-icon
class="prev"
@click.prevent="prev"
size="17"
></chevron-left-icon>
<chevron-right-icon
class="next"
@click.prevent="next"
size="17"
></chevron-right-icon>
</div>
<div v-if="filteredFiles.length > 1">
<chevron-left-icon class="prev" @click.prevent="prev" size="17"></chevron-left-icon>
<chevron-right-icon class="next" @click.prevent="next" size="17"></chevron-right-icon>
</div>
</template>
<script>
import { events } from '@/bus';
import { mapGetters } from "vuex";
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons';
import { events } from '@/bus'
import { mapGetters } from 'vuex'
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
export default {
components: {
ChevronLeftIcon,
ChevronRightIcon,
},
computed: {
...mapGetters(["fileInfoDetail", "data"]),
name: 'FilePreviewActions',
components: {
ChevronLeftIcon,
ChevronRightIcon
},
computed: {
...mapGetters(['fileInfoDetail', 'data']),
filteredFiles() {
let filteredData = []
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
filteredData.push(element);
}
});
return filteredData
},
},
filteredFiles() {
let filteredData = []
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
filteredData.push(element)
}
})
return filteredData
}
},
methods: {
next: function() {
events.$emit('filePreviewAction:next');
},
prev: function() {
events.$emit('filePreviewAction:prev');
},
},
};
methods: {
next: function() {
events.$emit('filePreviewAction:next')
},
prev: function() {
events.$emit('filePreviewAction:prev')
}
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
.icon-wrapper {
width: 40px;
height: 40px;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 53.5%;
display: flex;
justify-content: center;
background-color: white !important;
color: $text;
border-radius: 50%;
text-decoration: none;
user-select: none;
cursor: pointer;
position: absolute;
top: 53.5%;
display: flex;
justify-content: center;
color: $text;
border-radius: 50%;
text-decoration: none;
user-select: none;
filter: drop-shadow(0px 0px 0.8px rgba(255, 255, 255, 1));
}
.next {
right: 0;
margin-right: 10px;
right: 0;
margin-right: 10px;
}
.prev {
left: 0;
margin-left: 10px;
left: 0;
margin-left: 10px;
}
@media (prefers-color-scheme: dark) {
.prev,
.next {
color: $light-text;
background-color: $dark_mode_background !important;
}
.prev,
.next {
color: $light-text;
filter: drop-shadow(0px 0px 0.8px rgba(17, 19, 20, 1));
}
}
</style>
</style>