Skip to content

Commit 692d1fb

Browse files
author
v.malyshev
committed
Merge branch '64010.fm_changes'
2 parents ff11c0a + da040bd commit 692d1fb

File tree

13 files changed

+312
-83
lines changed

13 files changed

+312
-83
lines changed

‎src/components/blocks/Navbar.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ export default {
229229
* Search
230230
*/
231231
search() {
232+
this.$store.commit('fm/setPreloaderCondition', true);
232233
this.$store.dispatch('fm/search');
233234
},
234235

‎src/components/manager/Manager.vue

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,22 @@
22
<div class="fm-content d-flex flex-column">
33
<disk-list v-bind:manager="manager"/>
44
<breadcrumb v-bind:manager="manager"/>
5-
<div class="fm-content-body">
5+
<div class="fm-content-body" ref="managerWindow" v-on:dragover="dragging = true"
6+
v-on:drop ="dragging = false"
7+
>
8+
<div class="dragging" v-if="dragging" v-on:dragleave.self="dragging = false">
9+
<div class="dragging-container">
10+
<div class="dragging-text" v-html="lang.common.dragging"></div>
11+
</div>
12+
</div>
13+
<div class="forLoading" v-if="loading">
14+
<div class="loading">
15+
<div class="loading-container">
16+
<i class="fa fa-circle-notch fa-spin"></i>
17+
<div v-html="lang.common.preloader"></div>
18+
</div>
19+
</div>
20+
</div>
621
<table-view v-if="viewType === 'table'" v-bind:manager="manager"/>
722
<grid-view v-else v-bind:manager="manager"/>
823
</div>
@@ -15,18 +30,58 @@ import DiskList from './DiskList.vue';
1530
import Breadcrumb from './Breadcrumb.vue';
1631
import TableView from './TableView.vue';
1732
import GridView from './GridView.vue';
33+
import translate from '../../mixins/translate';
1834
1935
export default {
2036
name: 'Manager',
37+
data(){
38+
return {
39+
dragging:false
40+
}
41+
},
2142
components: {
2243
DiskList,
2344
Breadcrumb,
2445
TableView,
2546
GridView,
2647
},
48+
mixins:[translate],
2749
props: {
2850
manager: { type: String, required: true },
2951
},
52+
mounted() {
53+
this.dragAndDropCapable = this.determineDragAndDropCapable();
54+
if( this.dragAndDropCapable ){
55+
// set managerWindow to draggable
56+
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach( function( evt ) {
57+
this.$refs.managerWindow.addEventListener(evt, function(e){
58+
e.preventDefault();
59+
e.stopPropagation();
60+
}.bind(this), false);
61+
}.bind(this));
62+
// we need to set event listener to listen when file drop
63+
this.$refs.managerWindow.addEventListener('drop', function(e){
64+
this.$store.commit('fm/setFilesFromDragging', e.dataTransfer.files);
65+
// add files to store
66+
this.$store.commit('fm/modal/setModalState', {
67+
modalName: 'Upload',
68+
show: true,
69+
});
70+
}.bind(this));
71+
}
72+
},
73+
methods:{
74+
/**
75+
* Check if browser can use drag and drop
76+
*/
77+
determineDragAndDropCapable(){
78+
var div = document.createElement('div');
79+
return ( ( 'draggable' in div )
80+
|| ( 'ondragstart' in div && 'ondrop' in div ) )
81+
&& 'FormData' in window
82+
&& 'FileReader' in window;
83+
},
84+
},
3085
computed: {
3186
/**
3287
* view type - grid or table
@@ -35,6 +90,13 @@ export default {
3590
viewType() {
3691
return this.$store.state.fm[this.manager].viewType;
3792
},
93+
94+
/**
95+
* @returns {boolean}
96+
*/
97+
loading() {
98+
return this.$store.state.fm.preloader;
99+
},
38100
},
39101
};
40102
</script>
@@ -48,4 +110,43 @@ export default {
48110
overflow: auto;
49111
}
50112
}
113+
.loading, .dragging {
114+
position: absolute;
115+
width: 100%;
116+
height: 100%;
117+
top: 0;
118+
left: 0;
119+
text-align: center;
120+
background: #ffffff no-repeat 50% 10%;
121+
z-index: 1000;
122+
opacity: 0.5;
123+
124+
i{
125+
font-size: 25px;
126+
}
127+
}
128+
.dragging-text{
129+
top:45%;
130+
position: absolute;
131+
width: 100%;
132+
font-weight: 900;
133+
}
134+
.dragging-container {
135+
position: absolute;
136+
left: 5%;
137+
right: 5%;
138+
top: 5%;
139+
bottom: 5%;
140+
border: 3px dotted;
141+
border-radius: 25px;
142+
text-align: center;
143+
}
144+
.loading-container{
145+
top: 45%;
146+
position: absolute;
147+
bottom: 0;
148+
text-align: center;
149+
margin: auto;
150+
width: 100%;
151+
}
51152
</style>

‎src/components/manager/mixins/manager.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,11 @@ export default {
137137
// search in selected array
138138
const alreadySelected = this.selected[type].includes(path);
139139

140+
if(event.shiftKey ){
141+
this.$store.dispatch(`fm/${this.manager}/selectMassByShift`, { type, path });
142+
return
143+
}
144+
140145
// if pressed Ctrl -> multi select
141146
if ((event.ctrlKey || event.metaKey) || this.isHold) {
142147
if (!alreadySelected) {

‎src/components/modals/views/NewFolder.vue

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
<template>
22
<div class="modal-content fm-modal-folder">
3-
<div class="modal-header">
4-
<h5 class="modal-title">{{ lang.modal.newFolder.title }}</h5>
5-
<button type="button" class="close" aria-label="Close" v-on:click="hideModal">
6-
<span aria-hidden="true">&times;</span>
7-
</button>
8-
</div>
9-
<div class="modal-body">
10-
<div class="form-group">
11-
<label for="fm-folder-name">{{ lang.modal.newFolder.fieldName }}</label>
12-
<input type="text" class="form-control" id="fm-folder-name"
13-
v-focus
14-
v-bind:class="{'is-invalid': directoryExist}"
15-
v-model="directoryName"
16-
v-on:keyup="validateDirName">
17-
<div class="invalid-feedback" v-show="directoryExist">
18-
{{ lang.modal.newFolder.fieldFeedback }}
3+
<form @submit.prevent="addFolder">
4+
<div class="modal-header">
5+
<h5 class="modal-title">{{ lang.modal.newFolder.title }}</h5>
6+
<button type="button" class="close" aria-label="Close" v-on:click="hideModal">
7+
<span aria-hidden="true">&times;</span>
8+
</button>
9+
</div>
10+
<div class="modal-body">
11+
<div class="form-group">
12+
<label for="fm-folder-name">{{ lang.modal.newFolder.fieldName }}</label>
13+
<input type="text" class="form-control" id="fm-folder-name"
14+
v-focus
15+
v-bind:class="{'is-invalid': directoryExist}"
16+
v-model="directoryName"
17+
v-on:keyup="validateDirName">
18+
<div class="invalid-feedback" v-show="directoryExist">
19+
{{ lang.modal.newFolder.fieldFeedback }}
20+
</div>
1921
</div>
2022
</div>
21-
</div>
22-
<div class="modal-footer">
23-
<button class="btn btn-info"
24-
v-bind:disabled="!submitActive"
25-
v-on:click="addFolder">{{ lang.btn.submit }}
26-
</button>
27-
<button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
28-
</div>
23+
<div class="modal-footer">
24+
<button class="btn btn-info"
25+
v-bind:disabled="!submitActive">{{ lang.btn.submit }}
26+
</button>
27+
<button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
28+
</div>
29+
</form>
2930
</div>
3031
</template>
3132

‎src/components/modals/views/Rename.vue

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
<template>
22
<div class="modal-content fm-modal-rename">
3-
<div class="modal-header">
4-
<h5 class="modal-title">{{ lang.modal.rename.title }}</h5>
5-
<button type="button" class="close" aria-label="Close" v-on:click="hideModal">
6-
<span aria-hidden="true">&times;</span>
7-
</button>
8-
</div>
9-
<div class="modal-body">
10-
<div class="form-group">
11-
<label for="fm-input-rename">{{ lang.modal.rename.fieldName }}</label>
12-
<input type="text" class="form-control" id="fm-input-rename"
13-
v-focus
14-
v-bind:class="{'is-invalid': checkName}"
15-
v-model="name"
16-
v-on:keyup="validateName">
17-
<div class="invalid-feedback" v-show="checkName">
18-
{{ lang.modal.rename.fieldFeedback }}
19-
{{ directoryExist ? ` - ${lang.modal.rename.directoryExist}` : ''}}
20-
{{ fileExist ? ` - ${lang.modal.rename.fileExist}` : ''}}
3+
<form @submit.prevent="rename">
4+
<div class="modal-header">
5+
<h5 class="modal-title">{{ lang.modal.rename.title }}</h5>
6+
<button type="button" class="close" aria-label="Close" v-on:click="hideModal">
7+
<span aria-hidden="true">&times;</span>
8+
</button>
9+
</div>
10+
<div class="modal-body">
11+
<div class="form-group">
12+
<label for="fm-input-rename">{{ lang.modal.rename.fieldName }}</label>
13+
<input type="text" class="form-control" id="fm-input-rename"
14+
v-focus
15+
v-bind:class="{'is-invalid': checkName}"
16+
v-model="name"
17+
v-on:keyup="validateName">
18+
<div class="invalid-feedback" v-show="checkName">
19+
{{ lang.modal.rename.fieldFeedback }}
20+
{{ directoryExist ? ` - ${lang.modal.rename.directoryExist}` : '' }}
21+
{{ fileExist ? ` - ${lang.modal.rename.fileExist}` : '' }}
22+
</div>
2123
</div>
2224
</div>
23-
</div>
24-
<div class="modal-footer">
25-
<button class="btn btn-info"
26-
v-bind:disabled="submitDisable"
27-
v-on:click="rename">{{ lang.btn.submit }}
28-
</button>
29-
<button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
30-
</div>
25+
<div class="modal-footer">
26+
<button class="btn btn-info"
27+
v-bind:disabled="submitDisable">{{ lang.btn.submit }}
28+
</button>
29+
<button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
30+
</div>
31+
</form>
3132
</div>
3233
</template>
3334

‎src/components/modals/views/Upload.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,18 @@ export default {
207207
return this.$store.state.fm.settings.maxFileUploads === null || this.newFiles.length <= this.$store.state.fm.settings.maxFileUploads;
208208
},
209209
210+
filesFromDrag() {
211+
this.newFiles = this.$store.state.fm.filesFromDrag
212+
return this.$store.state.fm.filesFromDrag ;
213+
},
214+
210215
},
216+
watch:{
217+
// when user drop file to FM we catch this files here
218+
filesFromDrag(){
219+
this.newFiles = this.filesFromDrag
220+
}
221+
},
211222
methods: {
212223
/**
213224
* Select file or files

‎src/components/modals/views/Zip.vue

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
11
<template>
22
<div class="modal-content fm-modal-zip">
3-
<div class="modal-header">
4-
<h5 class="modal-title">{{ lang.modal.zip.title }}</h5>
5-
<button type="button" class="close" aria-label="Close" v-on:click="hideModal">
6-
<span aria-hidden="true">&times;</span>
7-
</button>
8-
</div>
9-
<div class="modal-body">
10-
<label for="fm-zip-name">{{ lang.modal.zip.fieldName }}</label>
11-
<div class="input-group mb-3">
12-
<input type="text" class="form-control" id="fm-zip-name"
13-
v-focus
14-
v-bind:class="{'is-invalid': archiveExist}"
15-
v-model="archiveName"
16-
v-on:keyup="validateArchiveName">
17-
<div class="input-group-append">
18-
<span class="input-group-text">.zip</span>
19-
</div>
20-
<div class="invalid-feedback" v-show="archiveExist">
21-
{{ lang.modal.zip.fieldFeedback }}
3+
<form @submit.prevent="createArchive">
4+
<div class="modal-header">
5+
<h5 class="modal-title">{{ lang.modal.zip.title }}</h5>
6+
<button type="button" class="close" aria-label="Close" v-on:click="hideModal">
7+
<span aria-hidden="true">&times;</span>
8+
</button>
9+
</div>
10+
<div class="modal-body">
11+
<label for="fm-zip-name">{{ lang.modal.zip.fieldName }}</label>
12+
<div class="input-group mb-3">
13+
<input type="text" class="form-control" id="fm-zip-name"
14+
v-focus
15+
v-bind:class="{'is-invalid': archiveExist}"
16+
v-model="archiveName"
17+
v-on:keyup="validateArchiveName">
18+
<div class="input-group-append">
19+
<span class="input-group-text">.zip</span>
20+
</div>
21+
<div class="invalid-feedback" v-show="archiveExist">
22+
{{ lang.modal.zip.fieldFeedback }}
23+
</div>
2224
</div>
25+
<hr>
26+
<selected-file-list/>
27+
</div>
28+
<div class="modal-footer">
29+
<button class="btn btn-info"
30+
v-bind:disabled="!submitActive">{{ lang.btn.submit }}
31+
</button>
32+
<button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
2333
</div>
24-
<hr>
25-
<selected-file-list/>
26-
</div>
27-
<div class="modal-footer">
28-
<button class="btn btn-info"
29-
v-bind:disabled="!submitActive"
30-
v-on:click="createArchive">{{ lang.btn.submit }}
31-
</button>
32-
<button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
33-
</div>
34+
</form>
3435
</div>
3536
</template>
3637

‎src/lang/en.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ const en = {
2929
placeholders:{
3030
search: 'Search'
3131
},
32+
common:{
33+
preloader: 'Loading',
34+
dragging: 'Drop file here',
35+
},
3236
clipboard: {
3337
actionType: 'Type',
3438
copy: 'Copy',

‎src/lang/ru.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ const ru = {
2929
placeholders:{
3030
search: 'Поиск'
3131
},
32+
common:{
33+
preloader: 'Загрузка'
34+
},
3235
clipboard: {
3336
actionType: 'Тип операции',
3437
copy: 'Копировать',

0 commit comments

Comments
 (0)