Skip to content

Commit c68f28a

Browse files
ahmedkandelahmedkandel
committed
Extend settings
Add and apply more settings (btnClasses, showFullScreen, showAbout, showDiskList, viewType, folderIcon, showProperties, showSize, canDownload, canManage) from outside the compiled fileusing var fmSettings = {settings key:value pairs};
1 parent b88eb66 commit c68f28a

File tree

11 files changed

+226
-45
lines changed

11 files changed

+226
-45
lines changed

‎INSTALL.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
## Installation
2+
3+
### Laravel
4+
1. Create new laravel project
5+
```
6+
composer create-project --prefer-dist laravel/laravel fm
7+
```
8+
9+
2. Install file manager packend package
10+
```
11+
composer require alexusmai/laravel-file-manager
12+
```
13+
14+
3. Publish configuration file
15+
```
16+
php artisan vendor:publish --tag=fm-config
17+
```
18+
19+
4. Publish compiled and minimized js and css files
20+
```
21+
php artisan vendor:publish --tag=fm-assets
22+
```
23+
24+
5. Edit the content of `resources/views/welcome.blade.php` adding
25+
```
26+
<!-- CSRF Token -->
27+
<meta name="csrf-token" content="{{ csrf_token() }}">
28+
29+
<!-- Styles -->
30+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
31+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
32+
<link rel="stylesheet" href="{{ asset('vendor/file-manager/css/file-manager.css') }}">
33+
34+
....
35+
36+
<div class="container-fluid">
37+
<div class="row justify-content-center">
38+
<div class="col-12 py-3">
39+
<div id="fm"></div>
40+
</div>
41+
</div>
42+
</div>
43+
...
44+
<!-- File manager js -->
45+
<script src="{{ asset('vendor/file-manager/js/file-manager.js') }}"></script>
46+
```
47+
48+
### NPM
49+
1. Install node dependencies
50+
```
51+
npm install
52+
```
53+
54+
2. Install file manager frontend package
55+
```
56+
npm install laravel-file-manager --save
57+
```
58+
59+
3. Change the content of `resources/js/app.js` to
60+
```
61+
import Vue from 'vue';
62+
import Vuex from 'vuex';
63+
import FileManager from 'laravel-file-manager'
64+
65+
Vue.use(Vuex);
66+
67+
const store = new Vuex.Store();
68+
69+
Vue.use(FileManager, {
70+
store
71+
});
72+
73+
window.fm = new Vue({
74+
el: '#fm',
75+
store,
76+
template: '<file-manager></file-manager>'
77+
});
78+
```
79+
80+
4. Edit the content of `resources/views/welcome.blade.php` replacing
81+
```
82+
<link rel="stylesheet" href="{{ asset('vendor/file-manager/css/file-manager.css') }}">
83+
```
84+
And
85+
```
86+
<script src="{{ asset('vendor/file-manager/js/file-manager.js') }}"></script>
87+
```
88+
With
89+
```
90+
<script src="{{ asset('js/app.js') }}"></script>
91+
```
92+
93+
5. Compile frontend package
94+
```
95+
npm run dev
96+
```
97+
98+
6. Work on frontend package at `node_modules/laravel-file-manager` doing the modifications needed. Would be better to track changes using git
99+
100+
7. Compile again by `npm run production` then copy final `public/js/app.js` to your laravel app `public/js/file-manager.js` you don't need any css files as it is already included in the js file

‎src/components/blocks/InfoBlock.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<div class="col-auto">
44
<span v-show="selectedCount">
55
{{ `${lang.info.selected} ${selectedCount}` }}
6-
{{ `${lang.info.selectedSize} ${selectedFilesSize}` }}
6+
<span v-if="extSettings.showSize">{{ `${lang.info.selectedSize} ${selectedFilesSize}` }}</span>
77
</span>
88
<span v-show="!selectedCount">
99
{{ `${lang.info.directories} ${directoriesCount}` }}
1010
{{ `${lang.info.files} ${filesCount}` }}
11-
{{ `${lang.info.size} ${filesSize}`}}
11+
<span v-if="extSettings.showSize">{{ `${lang.info.size} ${filesSize}`}}</span>
1212
</span>
1313
</div>
1414
<div class="col-4">
@@ -42,13 +42,17 @@
4242
</template>
4343

4444
<script>
45+
import { mapState } from 'vuex';
4546
import translate from './../../mixins/translate';
4647
import helper from './../../mixins/helper';
4748
4849
export default {
4950
name: 'InfoBlock',
5051
mixins: [translate, helper],
5152
computed: {
53+
...mapState('fm', {
54+
extSettings: state => state.settings.extSettings,
55+
}),
5256
/**
5357
* Active manager
5458
* @returns {default.computed.activeManager|(function())|string|activeManager}

‎src/components/blocks/Navbar.vue

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,79 @@
33
<div class="row justify-content-between">
44
<div class="col-auto">
55
<div class="btn-group" role="group">
6-
<button type="button" class="btn btn-secondary"
6+
<button type="button"
7+
v-bind:class="extSettings.btnClasses"
78
v-bind:disabled="backDisabled"
89
v-bind:title="lang.btn.back"
910
v-on:click="historyBack()">
1011
<i class="fas fa-step-backward"></i>
1112
</button>
12-
<button type="button" class="btn btn-secondary"
13+
<button type="button"
14+
v-bind:class="extSettings.btnClasses"
1315
v-bind:disabled="forwardDisabled"
1416
v-bind:title="lang.btn.forward"
1517
v-on:click="historyForward()">
1618
<i class="fas fa-step-forward"></i>
1719
</button>
18-
<button type="button" class="btn btn-secondary"
20+
<button type="button"
21+
v-bind:class="extSettings.btnClasses"
1922
v-on:click="refreshAll()"
2023
v-bind:title="lang.btn.refresh">
2124
<i class="fas fa-sync-alt"></i>
2225
</button>
2326
</div>
24-
<div class="btn-group" role="group">
25-
<button type="button" class="btn btn-secondary"
27+
<div v-if="extSettings.canManage" class="btn-group" role="group">
28+
<button type="button"
29+
v-bind:class="extSettings.btnClasses"
2630
v-on:click="showModal('NewFile')"
2731
v-bind:title="lang.btn.file">
2832
<i class="far fa-file"></i>
2933
</button>
30-
<button type="button" class="btn btn-secondary"
34+
<button type="button"
35+
v-bind:class="extSettings.btnClasses"
3136
v-on:click="showModal('NewFolder')"
3237
v-bind:title="lang.btn.folder">
3338
<i class="far fa-folder"></i>
3439
</button>
35-
<button type="button" class="btn btn-secondary"
40+
<button type="button"
41+
v-bind:class="extSettings.btnClasses"
3642
disabled
3743
v-if="uploading"
3844
v-bind:title="lang.btn.upload">
3945
<i class="fas fa-upload"></i>
4046
</button>
41-
<button type="button" class="btn btn-secondary"
47+
<button type="button"
48+
v-bind:class="extSettings.btnClasses"
4249
v-else
4350
v-on:click="showModal('Upload')"
4451
v-bind:title="lang.btn.upload">
4552
<i class="fas fa-upload"></i>
4653
</button>
47-
<button type="button" class="btn btn-secondary"
54+
<button type="button"
55+
v-bind:class="extSettings.btnClasses"
4856
v-bind:disabled="!isAnyItemSelected"
4957
v-on:click="showModal('Delete')"
5058
v-bind:title="lang.btn.delete">
5159
<i class="fas fa-trash-alt"></i>
5260
</button>
5361
</div>
54-
<div class="btn-group" role="group">
55-
<button type="button" class="btn btn-secondary"
62+
<div v-if="extSettings.canManage" class="btn-group" role="group">
63+
<button type="button"
64+
v-bind:class="extSettings.btnClasses"
5665
v-bind:disabled="!isAnyItemSelected"
5766
v-bind:title="lang.btn.copy"
5867
v-on:click="toClipboard('copy')">
5968
<i class="fas fa-copy"></i>
6069
</button>
61-
<button type="button" class="btn btn-secondary"
70+
<button type="button"
71+
v-bind:class="extSettings.btnClasses"
6272
v-bind:disabled="!isAnyItemSelected"
6373
v-bind:title="lang.btn.cut"
6474
v-on:click="toClipboard('cut')">
6575
<i class="fas fa-cut"></i>
6676
</button>
67-
<button type="button" class="btn btn-secondary"
77+
<button type="button"
78+
v-bind:class="extSettings.btnClasses"
6879
v-bind:disabled="!clipboardType"
6980
v-bind:title="lang.btn.paste"
7081
v-on:click="paste">
@@ -74,29 +85,30 @@
7485
</div>
7586
<div class="col-auto text-right">
7687
<div class="btn-group" role="group">
77-
<button type="button" class="btn btn-secondary"
78-
v-bind:class="[viewType === 'table' ? 'active' : '']"
88+
<button type="button"
89+
v-bind:class="[viewType === 'table' ? 'active' : '', extSettings.btnClasses]"
7990
v-on:click="selectView('table')"
8091
v-bind:title="lang.btn.table">
8192
<i class="fas fa-th-list"></i>
8293
</button>
83-
<button role="button" class="btn btn-secondary"
84-
v-bind:class="[viewType === 'grid' ? 'active' : '']"
94+
<button role="button"
95+
v-bind:class="[viewType === 'grid' ? 'active' : '', extSettings.btnClasses]"
8596
v-on:click="selectView('grid')"
8697
v-bind:title="lang.btn.grid">
8798
<i class="fas fa-th"></i>
8899
</button>
89100
</div>
90-
<div class="btn-group" role="group">
91-
<button type="button" class="btn btn-secondary"
101+
<div v-if="extSettings.showFullScreen" class="btn-group" role="group">
102+
<button type="button"
92103
v-bind:title="lang.btn.fullScreen"
93-
v-bind:class="{ active: fullScreen }"
104+
v-bind:class="[fullScreen ? 'active' : '', extSettings.btnClasses]"
94105
v-on:click="screenToggle">
95106
<i class="fas fa-expand-arrows-alt"></i>
96107
</button>
97108
</div>
98-
<div class="btn-group" role="group">
99-
<button type="button" class="btn btn-secondary"
109+
<div v-if="extSettings.showAbout" class="btn-group" role="group">
110+
<button type="button"
111+
v-bind:class="extSettings.btnClasses"
100112
v-bind:title="lang.btn.about"
101113
v-on:click="showModal('About')">
102114
<i class="fas fa-question"></i>
@@ -108,12 +120,16 @@
108120
</template>
109121

110122
<script>
123+
import { mapState } from 'vuex';
111124
import translate from './../../mixins/translate';
112125
import EventBus from './../../eventBus';
113126
114127
export default {
115128
mixins: [translate],
116129
computed: {
130+
...mapState('fm', {
131+
extSettings: state => state.settings.extSettings,
132+
}),
117133
/**
118134
* Active manager name
119135
* @returns {default.computed.activeManager|(function())|string|activeManager}

0 commit comments

Comments
 (0)