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

key binds fix

Browse Source
This commit is contained in:
Miloš Holba
2020-08-17 20:10:30 +02:00
parent ba315014fa
commit bb22ec1e88
7 changed files with 162 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/components/FilesView/FileFullPreview.vue
View File

@@ -5,7 +5,7 @@
id="fileFullPreview"
ref="filePreview"
tabindex="-1"
@keydown.esc="showFullPreview = false"
@keydown.esc="(showFullPreview = false), hideMenu()"
@keydown.right="next"
@keydown.left="prev"
>
@@ -41,6 +41,9 @@ export default {
prev: function () {
events.$emit("filePreviewAction:prev");
},
hideMenu() {
events.$emit("showContextMenuPreview:show");
},
},
updated() {
@@ -67,12 +70,6 @@ export default {
this.showFullPreview = false;
});
},
methods: {
hideMenu() {
events.$emit("showContextMenuPreview:hide");
console.log("aaaa");
},
},
};
</script>
@@ -92,4 +89,4 @@ export default {
background-color: $dark_mode_background;
}
}
</style>
</style>

5
resources/js/components/FilesView/FileItemList.vue
View File

@@ -137,7 +137,10 @@ export default {
return this.data.type === "video";
},
isAudio() {
return this.data.type === "audio";
return (
// this.data.type === "audio" &&
this.data.mimetype === "mp3" || "wan" || "mpeg"
);
},
canEditName() {
return (

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

@@ -15,8 +15,8 @@
</template>
<script>
import { events } from "@/bus";
import { ChevronLeftIcon, ChevronRightIcon } from "vue-feather-icons";
import { events } from '@/bus';
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons';
export default {
components: {
@@ -25,18 +25,18 @@ export default {
},
methods: {
next: function () {
events.$emit("filePreviewAction:next");
next: function() {
events.$emit('filePreviewAction:next');
},
prev: function () {
events.$emit("filePreviewAction:prev");
prev: function() {
events.$emit('filePreviewAction:prev');
},
},
};
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables";
@import '@assets/vue-file-manager/_variables';
.icon-wrapper {
width: 40px;
@@ -47,10 +47,10 @@ export default {
.next {
cursor: pointer;
position: absolute;
top: 50%;
top: 49.5%;
display: flex;
justify-content: center;
background-color: white;
background-color: white !important;
color: $text;
border-radius: 50%;
text-decoration: none;
@@ -67,7 +67,7 @@ export default {
.prev,
.next {
color: $light-text;
background-color: $dark_mode_background;
background-color: $dark_mode_background !important;
}
}
</style>
</style>

85
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
View File

@@ -9,10 +9,10 @@
<span class="file-count">
({{
showImageIndex +
" " +
$t("pronouns.of") +
" " +
filteredFiles.length
' ' +
$t('pronouns.of') +
' ' +
filteredFiles.length
}})
</span>
</div>
@@ -57,11 +57,11 @@
</template>
<script>
import { events } from "@/bus";
import { mapGetters } from "vuex";
import { XIcon, MoreHorizontalIcon } from "vue-feather-icons";
import { events } from '@/bus';
import { mapGetters } from 'vuex';
import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons';
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import ToolbarButton from '@/components/FilesView/ToolbarButton';
export default {
components: { ToolbarButton, XIcon, MoreHorizontalIcon },
@@ -71,7 +71,7 @@ export default {
};
},
computed: {
...mapGetters(["fileInfoDetail", "data"]),
...mapGetters(['fileInfoDetail', 'data']),
filteredFiles() {
let files = [];
this.data.filter((element) => {
@@ -83,7 +83,7 @@ export default {
return files;
},
showImageIndex() {
let activeIndex = "";
let activeIndex = '';
this.filteredFiles.filter((element, index) => {
if (element.unique_id == this.fileInfoDetail.unique_id) {
activeIndex = index + 1;
@@ -94,8 +94,8 @@ export default {
formatedName() {
let name = this.fileInfoDetail.name;
if (name.lastIndexOf(".") > -1) {
return _.truncate(name.substring(0, name.lastIndexOf(".")), {
if (name.lastIndexOf('.') > -1) {
return _.truncate(name.substring(0, name.lastIndexOf('.')), {
length: 20,
});
} else {
@@ -106,19 +106,19 @@ export default {
},
canShareInView() {
return !this.$isThisLocation([
"base",
"participant_uploads",
"latest",
"shared",
"public",
'base',
'participant_uploads',
'latest',
'shared',
'public',
]);
},
},
methods: {
printMethod() {
var tab = document.getElementById("image");
var win = window.open("", "", "height=700,width=700");
var tab = document.getElementById('image');
var win = window.open('', '', 'height=700,width=700');
win.document.write(tab.outerHTML);
win.document.close();
win.print();
@@ -127,47 +127,50 @@ export default {
// Download file
this.$downloadFile(
this.fileInfoDetail.file_url,
this.fileInfoDetail.name + "." + this.fileInfoDetail.mimetype
this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
);
},
shareItem() {
if (this.fileInfoDetail.shared) {
events.$emit("popup:open", {
name: "share-edit",
events.$emit('popup:open', {
name: 'share-edit',
item: this.fileInfoDetail,
});
} else {
events.$emit("popup:open", {
name: "share-create",
events.$emit('popup:open', {
name: 'share-create',
item: this.fileInfoDetail,
});
}
},
menuOpen() {
if (this.$isMobile()) {
events.$emit("mobileMenu:show", "showFromMediaPreview");
events.$emit('mobileMenu:show', 'showFromMediaPreview');
} else {
events.$emit("showContextMenuPreview:show", this.fileInfoDetail);
events.$emit('showContextMenuPreview:show', this.fileInfoDetail);
}
},
closeFullPreview() {
events.$emit("fileFullPreview:hide");
events.$emit("showContextMenuPreview:hide");
events.$emit('fileFullPreview:hide');
events.$emit('showContextMenuPreview:hide');
},
},
};
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.name-wrapper {
width: 33%;
height: 22px;
display: flex;
position: relative;
align-items: center;
// align-items: center;
flex-grow: 1;
align-self: center;
white-space: nowrap;
.name-count-wrapper {
display: flex;
.file-count {
@@ -179,6 +182,7 @@ export default {
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
align-self: center;
color: $text;
}
.title {
@@ -189,6 +193,7 @@ export default {
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
align-self: center;
color: $text;
}
}
@@ -197,6 +202,7 @@ export default {
cursor: pointer;
margin-right: 6px;
color: $text;
align-self: center;
@include transition(150ms);
}
.fast-menu-icon {
@@ -288,25 +294,20 @@ export default {
}
}
.navigation-panel {
height: 6.7%;
min-height: 63px;
height: 6.9%;
padding: 10px 15px;
display: flex;
position: relative;
align-items: center;
background-color: $light-background;
color: $text;
> div {
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
}
@media (prefers-color-scheme: dark) {
.navigation-panel {
background-color: $dark_mode_foreground;
color: $light-text;
color: $dark_mode_text_primary;
.icon-close {
color: $light-text;
color: $dark_mode_text_primary;
}
.fast-menu-icon:hover {
background: $dark_mode_background;
@@ -315,7 +316,7 @@ export default {
.name-wrapper {
.title,
.file-count {
color: $light-text !important;
color: $dark_mode_text_primary !important;
}
}
.navigation-icons {
@@ -324,4 +325,4 @@ export default {
}
}
}
</style>
</style>

56
resources/js/components/FilesView/MediaFullPreview.vue
View File

@@ -36,10 +36,10 @@
</template>
<script>
import { events } from "@/bus";
import { mapGetters } from "vuex";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import Spinner from "@/components/FilesView/Spinner";
import { events } from '@/bus';
import { mapGetters } from 'vuex';
import ToolbarButton from '@/components/FilesView/ToolbarButton';
import Spinner from '@/components/FilesView/Spinner';
export default {
components: { ToolbarButton, Spinner },
@@ -48,14 +48,14 @@ export default {
currentIndex: 1,
sliderFile: [],
loaded: false,
sizeWidth: "",
sizeHeight: "",
sizeWidth: '',
sizeHeight: '',
};
},
computed: {
...mapGetters(["fileInfoDetail", "data"]),
...mapGetters(['fileInfoDetail', 'data']),
currentFile: function () {
currentFile: function() {
return this.sliderFile[
Math.abs(this.currentIndex) % this.sliderFile.length
];
@@ -63,22 +63,22 @@ export default {
canShareInView() {
return !this.$isThisLocation([
"base",
"participant_uploads",
"latest",
"shared",
"public",
'base',
'participant_uploads',
'latest',
'shared',
'public',
]);
},
},
mounted() {
events.$on("filePreviewAction:next", () => {
events.$on('filePreviewAction:next', () => {
this.currentIndex += 1;
if (this.currentIndex > this.sliderFile.length - 1) {
this.currentIndex = 0;
}
});
events.$on("filePreviewAction:prev", () => {
events.$on('filePreviewAction:prev', () => {
this.currentIndex -= 1;
if (this.currentIndex < 0) {
this.currentIndex = this.sliderFile.length - 1;
@@ -92,17 +92,17 @@ export default {
watch: {
currentFile() {
//HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
events.$emit("actualShowingImage:ContextMenu", this.currentFile);
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
events.$emit('actualShowingImage:ContextMenu', this.currentFile);
},
fileInfoDetail() {
//FILE DELETE HANDLING
if (!this.fileInfoDetail) {
if (this.data.length == 0) {
events.$emit("fileFullPreview:hide");
events.$emit('fileFullPreview:hide');
} else {
this.currentIndex = this.currentIndex - 1;
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
this.sliderFile = [];
this.filteredFiles();
}
@@ -119,15 +119,15 @@ export default {
methods: {
imageSizing() {
if (this.$isMobile()) {
this.sizeWidth = "100%";
this.sizeHeight = "auto";
this.sizeWidth = '100%';
this.sizeHeight = 'auto';
} else {
this.sizeWidth = "auto";
this.sizeHeight = "100%";
this.sizeWidth = 'auto';
this.sizeHeight = '100%';
}
},
closeFullPreview() {
events.$emit("fileFullPreview:hide");
events.$emit('fileFullPreview:hide');
},
filteredFiles() {
@@ -153,11 +153,11 @@ export default {
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.media-full-preview {
height: 93%;
height: 93.1%;
position: relative;
}
@@ -206,4 +206,4 @@ export default {
background-color: $dark_mode_background;
}
}
</style>
</style>