From 2f8c53a3e0b865310b244d592a9bea25537a631b Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Thu, 4 Feb 2021 12:16:37 -0600
Subject: [PATCH 1/9] Componets for Element.io support

---
 src/FileManager.vue                         |  10 +-
 src/components/blocks/InfoBlock.vue         |   4 +-
 src/components/blocks/Navbar.vue            | 136 ++++----
 src/components/manager/Breadcrumb.vue       |  16 +-
 src/components/manager/GridView.vue         |   6 +-
 src/components/manager/Manager.vue          |   2 +-
 src/components/manager/TableView.vue        |  21 +-
 src/components/modals/Modal.vue             |  23 +-
 src/components/modals/additions/Cropper.vue |  24 +-
 src/components/modals/views/About.vue       |  80 ++---
 src/components/modals/views/AudioPlayer.vue | 241 +++++++-------
 src/components/modals/views/Clipboard.vue   | 231 ++++++-------
 src/components/modals/views/Delete.vue      |  88 ++---
 src/components/modals/views/NewFile.vue     | 125 ++++---
 src/components/modals/views/NewFolder.vue   | 125 ++++---
 src/components/modals/views/Preview.vue     | 231 +++++++------
 src/components/modals/views/Properties.vue  | 197 +++++------
 src/components/modals/views/Rename.vue      | 178 +++++-----
 src/components/modals/views/Status.vue      |  76 ++---
 src/components/modals/views/TextEdit.vue    | 204 ++++++------
 src/components/modals/views/Unzip.vue       | 171 +++++-----
 src/components/modals/views/Upload.vue      | 351 +++++++++-----------
 src/components/modals/views/VideoPlayer.vue | 101 +++---
 src/components/modals/views/Zip.vue         | 129 ++++---
 src/components/tree/Branch.vue              |   7 +-
 25 files changed, 1351 insertions(+), 1426 deletions(-)

diff --git a/src/FileManager.vue b/src/FileManager.vue
index deb3704..9fa59f9 100644
--- a/src/FileManager.vue
+++ b/src/FileManager.vue
@@ -10,8 +10,14 @@
         <left-manager class="col" manager="left"/>
       </template>
       <template v-else-if="windowsConfig === 2">
-        <folder-tree class="col-4 col-md-3"/>
-        <left-manager class="col-8 col-md-9" manager="left"/>
+        <el-row style="width:100%">
+          <el-col :span="6">
+        <folder-tree/>
+          </el-col>
+          <el-col :span="18">
+        <left-manager manager="left"/>
+          </el-col>
+        </el-row>
       </template>
       <template v-else-if="windowsConfig === 3">
         <left-manager class="col-12 col-sm-6"
diff --git a/src/components/blocks/InfoBlock.vue b/src/components/blocks/InfoBlock.vue
index b2033ac..3f092ed 100644
--- a/src/components/blocks/InfoBlock.vue
+++ b/src/components/blocks/InfoBlock.vue
@@ -25,7 +25,7 @@
         </div>
         <div class="col-auto text-right">
             <span v-show="loadingSpinner">
-                <i class="fas fa-spinner fa-pulse"/>
+                <i class="far fa-spinner fa-pulse"/>
             </span>
             <span v-show="clipboardType"
                   v-on:click="showModal('Clipboard')"
@@ -35,7 +35,7 @@
             <span v-on:click="showModal('Status')"
                   v-bind:class="[hasErrors ? 'text-danger' : 'text-success']"
                   v-bind:title="lang.modal.status.title">
-                <i class="fas fa-info-circle"/>
+                <i class="far fa-info-circle"/>
             </span>
         </div>
     </div>
diff --git a/src/components/blocks/Navbar.vue b/src/components/blocks/Navbar.vue
index 55a9dda..00b4f7a 100644
--- a/src/components/blocks/Navbar.vue
+++ b/src/components/blocks/Navbar.vue
@@ -1,116 +1,117 @@
 <template>
     <div class="fm-navbar mb-3">
-        <div class="row justify-content-between">
-            <div class="col-auto">
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+        <el-row>
+            <el-col :span="12">
+                <el-button-group>
+                    <el-button type="primary"
                             v-bind:disabled="backDisabled"
                             v-bind:title="lang.btn.back"
                             v-on:click="historyBack()">
-                        <i class="fas fa-step-backward"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-step-backward"/>
+                    </el-button>
+                    
+                    <el-button type="primary"
                             v-bind:disabled="forwardDisabled"
                             v-bind:title="lang.btn.forward"
                             v-on:click="historyForward()">
-                        <i class="fas fa-step-forward"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-step-forward"/>
+                    </el-button>
+                    <el-button type="primary"
                             v-on:click="refreshAll()"
                             v-bind:title="lang.btn.refresh">
-                        <i class="fas fa-sync-alt"/>
-                    </button>
-                </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-sync-alt"/>
+                    </el-button>
+                </el-button-group>
+                <el-button-group>
+                    <el-button type="primary"
                             v-on:click="showModal('NewFile')"
                             v-bind:title="lang.btn.file">
                         <i class="far fa-file"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                    </el-button>
+                    <el-button type="primary"
                             v-on:click="showModal('NewFolder')"
                             v-bind:title="lang.btn.folder">
                         <i class="far fa-folder"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                    </el-button>
+                    <el-button type="primary"
                             disabled
                             v-if="uploading"
                             v-bind:title="lang.btn.upload">
-                        <i class="fas fa-upload"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-upload"/>
+                    </el-button>
+                    <el-button type="primary"
                             v-else
                             v-on:click="showModal('Upload')"
                             v-bind:title="lang.btn.upload">
-                        <i class="fas fa-upload"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-upload"/>
+                    </el-button>
+                    <el-button type="primary"
                             v-bind:disabled="!isAnyItemSelected"
                             v-on:click="showModal('Delete')"
                             v-bind:title="lang.btn.delete">
-                        <i class="fas fa-trash-alt"/>
-                    </button>
-                </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-trash-alt"/>
+                    </el-button>
+                </el-button-group>
+                <el-button-group>
+                    <el-button type="primary"
                             v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.copy"
                             v-on:click="toClipboard('copy')">
-                        <i class="fas fa-copy"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-copy"/>
+                    </el-button>
+                    <el-button type="primary"
                             v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.cut"
                             v-on:click="toClipboard('cut')">
-                        <i class="fas fa-cut"/>
-                    </button>
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-cut"/>
+                    </el-button>
+                    <el-button type="primary"
                             v-bind:disabled="!clipboardType"
                             v-bind:title="lang.btn.paste"
                             v-on:click="paste">
-                        <i class="fas fa-paste"/>
-                    </button>
-                </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-paste"/>
+                    </el-button>
+                </el-button-group>
+                <el-button-group>
+                    <el-button type="primary"
                             v-bind:title="lang.btn.hidden"
                             v-on:click="toggleHidden">
-                        <i class="fas" v-bind:class="[hiddenFiles ? 'fa-eye': 'fa-eye-slash']"/>
-                    </button>
-                </div>
-            </div>
-            <div class="col-auto text-right">
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far" v-bind:class="[hiddenFiles ? 'fa-eye': 'fa-eye-slash']"/>
+                    </el-button>
+                </el-button-group>
+            </el-col>
+            <el-col :span="12" style="text-align:end">
+                <el-button-group>
+                    <el-button type="primary"
                             v-bind:class="[viewType === 'table' ? 'active' : '']"
                             v-on:click="selectView('table')"
                             v-bind:title="lang.btn.table">
-                        <i class="fas fa-th-list"/>
-                    </button>
-                    <button role="button" class="btn btn-secondary"
+                        <i class="far fa-th-list"/>
+                    </el-button>
+                    <el-button role="button" type="primary"
                             v-bind:class="[viewType === 'grid' ? 'active' : '']"
                             v-on:click="selectView('grid')"
                             v-bind:title="lang.btn.grid">
-                        <i class="fas fa-th"/>
-                    </button>
-                </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-th"/>
+                    </el-button>
+                </el-button-group>
+                <el-button-group>
+                    <el-button type="primary"
                             v-bind:title="lang.btn.fullScreen"
                             v-bind:class="{ active: fullScreen }"
                             v-on:click="screenToggle">
-                        <i class="fas fa-expand-arrows-alt"/>
-                    </button>
-                </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                        <i class="far fa-expand-arrows-alt"/>
+                    </el-button>
+                </el-button-group>
+                <el-button-group>
+                    <el-button type="primary"
                             v-bind:title="lang.btn.about"
                             v-on:click="showModal('About')">
-                        <i class="fas fa-question"/>
-                    </button>
-                </div>
-            </div>
-        </div>
+                        <i class="far fa-question"/>
+                    </el-button>
+                </el-button-group>
+            </el-col>
+        </el-row>
     </div>
 </template>
 
@@ -306,7 +307,8 @@ export default {
 
 <style lang="scss">
     .fm-navbar {
-
+        margin-bottom: 20px;
+        
         .btn-group {
             margin-right: 0.4rem;
         }
diff --git a/src/components/manager/Breadcrumb.vue b/src/components/manager/Breadcrumb.vue
index 47b789d..001d84f 100644
--- a/src/components/manager/Breadcrumb.vue
+++ b/src/components/manager/Breadcrumb.vue
@@ -1,6 +1,18 @@
 <template>
     <div class="fm-breadcrumb">
-        <nav aria-label="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item v-on:click="selectMainDirectory"><span class="badge badge-secondary">
+                        <i class="far fa-hdd"/>
+                    </span></el-breadcrumb-item>
+        <el-breadcrumb-item v-for="(item, index) in breadcrumb"
+                    v-bind:key="index"
+                    v-bind:class="[breadcrumb.length === index + 1 ? 'active' : '']"
+                    v-on:click="selectDirectory(index)">
+                    <span>{{ item }}</span>
+                    </el-breadcrumb-item>
+      </el-breadcrumb>
+
+        <!--nav aria-label="breadcrumb">
             <ol class="breadcrumb"
                 v-bind:class="[manager === activeManager ? 'active-manager' : 'bg-light']">
                 <li class="breadcrumb-item" v-on:click="selectMainDirectory">
@@ -16,7 +28,7 @@
                     <span>{{ item }}</span>
                 </li>
             </ol>
-        </nav>
+        </nav-->
     </div>
 </template>
 
diff --git a/src/components/manager/GridView.vue b/src/components/manager/GridView.vue
index 7c57d73..42462bc 100644
--- a/src/components/manager/GridView.vue
+++ b/src/components/manager/GridView.vue
@@ -3,7 +3,7 @@
         <div class="d-flex align-content-start flex-wrap">
             <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
                 <div class="fm-item-icon">
-                    <i class="fas fa-level-up-alt fa-5x pb-2"/>
+                    <i class="far fa-level-up-alt fa-5x pb-2"/>
                 </div>
                 <div class="fm-item-info"><strong>..</strong></div>
             </div>
@@ -18,7 +18,7 @@
                  v-on:contextmenu.prevent="contextMenu(directory, $event)">
                 <div class="fm-item-icon">
                     <i class="fa-5x pb-2"
-                       v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'"/>
+                       v-bind:class="(acl && directory.acl === 0) ? 'far fa-unlock-alt' : 'far fa-folder'"/>
                 </div>
                 <div class="fm-item-info">{{ directory.basename }}</div>
             </div>
@@ -32,7 +32,7 @@
                  v-on:dblclick="selectAction(file.path, file.extension)"
                  v-on:contextmenu.prevent="contextMenu(file, $event)">
                 <div class="fm-item-icon">
-                    <i v-if="acl && file.acl === 0" class="fas fa-unlock-alt fa-5x pb-2"/>
+                    <i v-if="acl && file.acl === 0" class="far fa-unlock-alt fa-5x pb-2"/>
                     <thumbnail v-else-if="thisImage(file.extension)"
                                v-bind:disk="disk"
                                v-bind:file="file">
diff --git a/src/components/manager/Manager.vue b/src/components/manager/Manager.vue
index 951cda5..ef03639 100644
--- a/src/components/manager/Manager.vue
+++ b/src/components/manager/Manager.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="fm-content d-flex flex-column">
-        <disk-list v-bind:manager="manager"/>
+        <!--disk-list v-bind:manager="manager"/-->
         <breadcrumb v-bind:manager="manager"/>
         <div class="fm-content-body">
             <table-view v-if="viewType === 'table'" v-bind:manager="manager"/>
diff --git a/src/components/manager/TableView.vue b/src/components/manager/TableView.vue
index ad4e5aa..a1b9811 100644
--- a/src/components/manager/TableView.vue
+++ b/src/components/manager/TableView.vue
@@ -6,36 +6,36 @@
                     <th class="w-65" v-on:click="sortBy('name')">
                         {{ lang.manager.table.name }}
                         <template v-if="sortSettings.field === 'name'">
-                            <i class="fas fa-sort-amount-down"
+                            <i class="far fa-sort-amount-down"
                                v-show="sortSettings.direction === 'down'"/>
-                            <i class="fas fa-sort-amount-up"
+                            <i class="far fa-sort-amount-up"
                                v-show="sortSettings.direction === 'up'"/>
                         </template>
                     </th>
                     <th class="w-10" v-on:click="sortBy('size')">
                         {{ lang.manager.table.size }}
                         <template v-if="sortSettings.field === 'size'">
-                            <i class="fas fa-sort-amount-down"
+                            <i class="far fa-sort-amount-down"
                                v-show="sortSettings.direction === 'down'"/>
-                            <i class="fas fa-sort-amount-up"
+                            <i class="far fa-sort-amount-up"
                                v-show="sortSettings.direction === 'up'"/>
                         </template>
                     </th>
                     <th class="w-10" v-on:click="sortBy('type')">
                         {{ lang.manager.table.type }}
                         <template v-if="sortSettings.field === 'type'">
-                            <i class="fas fa-sort-amount-down"
+                            <i class="far fa-sort-amount-down"
                                v-show="sortSettings.direction === 'down'"/>
-                            <i class="fas fa-sort-amount-up"
+                            <i class="far fa-sort-amount-up"
                                v-show="sortSettings.direction === 'up'"/>
                         </template>
                     </th>
                     <th class="w-auto" v-on:click="sortBy('date')">
                         {{ lang.manager.table.date }}
                         <template v-if="sortSettings.field === 'date'">
-                            <i class="fas fa-sort-amount-down"
+                            <i class="far fa-sort-amount-down"
                                v-show="sortSettings.direction === 'down'"/>
-                            <i class="fas fa-sort-amount-up"
+                            <i class="far fa-sort-amount-up"
                                v-show="sortSettings.direction === 'up'"/>
                         </template>
                     </th>
@@ -44,7 +44,7 @@
             <tbody>
                 <tr v-if="!isRootPath">
                     <td colspan="4" class="fm-content-item" v-on:click="levelUp">
-                        <i class="fas fa-level-up-alt"/>
+                        <i class="far fa-level-up-alt"/>
                     </td>
                 </tr>
                 <tr v-for="(directory, index) in directories"
@@ -165,5 +165,8 @@ export default {
         .text-hidden {
             color: #cdcdcd;
         }
+        .table-info{
+                background-color: #bee5eb;
+        }
     }
 </style>
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index 4d0e00d..3559dd0 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -1,13 +1,16 @@
 <template>
     <transition name="fm-modal">
-        <div class="fm-modal" ref="fmModal" v-on:click="hideModal">
+        
+        <component v-if="showModal" :showModal="showModal" @hideModal="hideModal" v-bind:is="modalName"/>
+
+        <!--div class="fm-modal" ref="fmModal" v-on:click="hideModal">
             <div class="modal-dialog"
-                 role="document"
-                 v-bind:class="modalSize"
-                 v-on:click.stop>
+                role="document"
+                v-bind:class="modalSize"
+                v-on:click.stop>
                 <component v-bind:is="modalName"/>
             </div>
-        </div>
+        </div-->
     </transition>
 </template>
 
@@ -47,9 +50,15 @@ export default {
     Unzip,
     About,
   },
+  data() {
+    return {
+      showModal: false,
+    };
+  },
   mounted() {
     // set height
-    this.$store.commit('fm/modal/setModalBlockHeight', this.$refs.fmModal.offsetHeight);
+    //this.$store.commit('fm/modal/setModalBlockHeight', this.$refs.fmModal.offsetHeight);
+    this.showModal = true;
   },
   computed: {
     /**
@@ -93,7 +102,7 @@ export default {
         left: 0;
         right: 0;
         width: 100%;
-        height: 100%;
+        height: 100vh;
         background-color: rgba(0, 0, 0, .35);
         display: block;
         transition: opacity .4s ease;
diff --git a/src/components/modals/additions/Cropper.vue b/src/components/modals/additions/Cropper.vue
index a5a044b..30642d8 100644
--- a/src/components/modals/additions/Cropper.vue
+++ b/src/components/modals/additions/Cropper.vue
@@ -69,7 +69,7 @@
                     <button v-on:click="setData()"
                             v-bind:title="lang.modal.cropper.apply"
                             type="button" class="btn btn-block btn-sm btn-info mb-2">
-                        <i class="fas fa-check"/>
+                        <i class="far fa-check"/>
                     </button>
                 </div>
             </div>
@@ -78,44 +78,44 @@
             <div>
                 <div class="btn-group mr-2" role="group" aria-label="Scale">
                     <button v-on:click="cropMove(-10, 0)" class="btn btn-info">
-                        <i class="fas fa-arrow-left"/>
+                        <i class="far fa-arrow-left"/>
                     </button>
                     <button v-on:click="cropMove(10, 0)" class="btn btn-info">
-                        <i class="fas fa-arrow-right"/>
+                        <i class="far fa-arrow-right"/>
                     </button>
                     <button v-on:click="cropMove(0, -10)" class="btn btn-info">
-                        <i class="fas fa-arrow-up"/>
+                        <i class="far fa-arrow-up"/>
                     </button>
                     <button v-on:click="cropMove(0, 10)" class="btn btn-info">
-                        <i class="fas fa-arrow-down"/>
+                        <i class="far fa-arrow-down"/>
                     </button>
                 </div>
                 <div class="btn-group mr-2" role="group" aria-label="Scale">
                     <button v-on:click="cropScaleX()" class="btn btn-info">
-                        <i class="fas fa-arrows-alt-h"/>
+                        <i class="far fa-arrows-alt-h"/>
                     </button>
                     <button v-on:click="cropScaleY()" class="btn btn-info">
-                        <i class="fas fa-arrows-alt-v"/>
+                        <i class="far fa-arrows-alt-v"/>
                     </button>
                 </div>
                 <div class="btn-group mr-2" role="group" aria-label="Rotate">
                     <button v-on:click="cropRotate(-45)" class="btn btn-info">
-                        <i class="fas fa-undo"/>
+                        <i class="far fa-undo"/>
                     </button>
                     <button v-on:click="cropRotate(45)" class="btn btn-info">
-                        <i class="fas fa-redo"/>
+                        <i class="far fa-redo"/>
                     </button>
                 </div>
                 <div class="btn-group mr-2" role="group" aria-label="Rotate">
                     <button v-on:click="cropZoom(0.1)" class="btn btn-info">
-                        <i class="fas fa-search-plus"/>
+                        <i class="far fa-search-plus"/>
                     </button>
                     <button v-on:click="cropZoom(-0.1)" class="btn btn-info">
-                        <i class="fas fa-search-minus"/>
+                        <i class="far fa-search-minus"/>
                     </button>
                 </div>
                 <button v-on:click="cropReset()" v-bind:title="lang.modal.cropper.reset" class="btn btn-info mr-2">
-                    <i class="fas fa-sync-alt"/>
+                    <i class="far fa-sync-alt"/>
                 </button>
                 <button v-on:click="cropSave()" v-bind:title="lang.modal.cropper.save" class="btn btn-danger mr-2">
                     <i class="far fa-save"/>
diff --git a/src/components/modals/views/About.vue b/src/components/modals/views/About.vue
index 134d44d..0b7490c 100644
--- a/src/components/modals/views/About.vue
+++ b/src/components/modals/views/About.vue
@@ -1,34 +1,34 @@
 <template>
-    <div class="modal-content fm-modal-about">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.about.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <strong>{{ lang.modal.about.name }}</strong>
-            <hr>
-            <dl class="row">
-                <dt class="col-3">{{ lang.modal.about.version }}:</dt>
-                <dd class="col-9">{{ version }}</dd>
+<el-dialog :title="lang.modal.about.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
 
-                <dt class="col-3">{{ lang.modal.about.developer }}:</dt>
-                <dd class="col-9">Aleksandr Manekin (alexusmai@gmail.com)</dd>
+    <div class="modal-body">
+        <strong>{{ lang.modal.about.name }}</strong>
+        <hr>
+        <dl class="row">
+            <dt class="col-3">{{ lang.modal.about.version }}:</dt>
+            <dd class="col-9">{{ version }}</dd>
 
-                <dt class="col-3">GitHub:</dt>
-                <dd class="col-9">
-                    <a href="https://github.com/alexusmai/laravel-file-manager" target="_blank">
-                        alexusmai/laravel-file-manager
-                    </a>
-                    <br>
-                    <a href="https://github.com/alexusmai/vue-laravel-file-manager" target="_blank">
-                        alexusmai/vue-laravel-file-manager
-                    </a>
-                </dd>
-            </dl>
-        </div>
+            <dt class="col-3">{{ lang.modal.about.developer }}:</dt>
+            <dd class="col-9">Aleksandr Manekin (alexusmai@gmail.com)</dd>
+
+            <dt class="col-3">GitHub:</dt>
+            <dd class="col-9">
+                <a href="https://github.com/alexusmai/laravel-file-manager" target="_blank">
+                    alexusmai/laravel-file-manager
+                </a>
+                <br>
+                <a href="https://github.com/alexusmai/vue-laravel-file-manager" target="_blank">
+                    alexusmai/vue-laravel-file-manager
+                </a>
+            </dd>
+        </dl>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -36,16 +36,22 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'About',
-  mixins: [modal, translate],
-  computed: {
-    /**
-     * App version
-     * @returns {*}
-     */
-    version() {
-      return this.$store.state.fm.settings.version;
+    name: 'About',
+    props: ['showModal'],
+    mixins: [modal, translate],
+    computed: {
+        /**
+         * App version
+         * @returns {*}
+         */
+        version() {
+            return this.$store.state.fm.settings.version;
+        },
     },
-  },
+    methods: {
+        hideModal() {
+            this.$store.commit('fm/modal/clearModal');
+        },
+    }
 };
 </script>
diff --git a/src/components/modals/views/AudioPlayer.vue b/src/components/modals/views/AudioPlayer.vue
index c110aef..159ccb0 100644
--- a/src/components/modals/views/AudioPlayer.vue
+++ b/src/components/modals/views/AudioPlayer.vue
@@ -1,40 +1,33 @@
 <template>
+<el-dialog :title="lang.modal.audioPlayer.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
     <div class="modal-content fm-modal-audio-player">
-        <div class="modal-header">
-            <h5 class="modal-title">
-                {{ lang.modal.audioPlayer.title }}
-            </h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
         <div class="modal-body">
-            <audio ref="fmAudio" controls/>
+            <audio ref="fmAudio" controls />
             <hr>
-            <div class="d-flex justify-content-between py-2 px-2"
-                 v-bind:class="playingIndex === index ? 'bg-light' : ''"
-                 v-for="(item, index) in audioFiles"
-                 v-bind:key="index">
+            <div class="d-flex justify-content-between py-2 px-2" v-bind:class="playingIndex === index ? 'bg-light' : ''" v-for="(item, index) in audioFiles" v-bind:key="index">
                 <div class="w-75 text-truncate">
                     <span class="text-muted pr-2">{{ index }}.</span>
                     {{ item.basename }}
                 </div>
                 <template v-if="playingIndex === index">
                     <div v-if="status === 'playing'">
-                        <i v-on:click="togglePlay()" class="fas fa-play active"/>
+                        <i v-on:click="togglePlay()" class="far fa-play active" />
                     </div>
                     <div v-else>
-                        <i v-on:click="togglePlay()" class="fas fa-pause"/>
+                        <i v-on:click="togglePlay()" class="far fa-pause" />
                     </div>
                 </template>
                 <template v-else>
                     <div>
-                        <i v-on:click="selectTrack(index)" class="fas fa-play"/>
+                        <i v-on:click="selectTrack(index)" class="far fa-play" />
                     </div>
                 </template>
             </div>
         </div>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -43,128 +36,130 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Player',
-  mixins: [modal, translate],
-  data() {
-    return {
-      player: {},
-      playingIndex: 0,
-      status: 'paused',
-    };
-  },
-  mounted() {
-    // initiate player
-    this.player = new Plyr(this.$refs.fmAudio, {
-      speed: {
-        selected: 1,
-        options: [0.5, 1, 1.5],
-      },
-    });
-
-    // select first item in the list
-    this.setSource(this.playingIndex);
-
-    // add event listeners
-    this.player.on('play', () => {
-      this.status = 'playing';
-    });
-
-    this.player.on('pause', () => {
-      this.status = 'paused';
-    });
-
-    this.player.on('ended', () => {
-      if (this.audioFiles.length > this.playingIndex + 1) {
-        // play next track
-        this.selectTrack(this.playingIndex + 1);
-      }
-    });
-  },
-  beforeDestroy() {
-    // destroy player
-    this.player.destroy();
-  },
-  computed: {
-    /**
-     * Selected disk
-     * @returns {*}
-     */
-    selectedDisk() {
-      return this.$store.getters['fm/selectedDisk'];
+    name: 'Player',
+    props: ['showModal'],
+
+    mixins: [modal, translate],
+    data() {
+        return {
+            player: {},
+            playingIndex: 0,
+            status: 'paused',
+        };
     },
+    mounted() {
+        // initiate player
+        this.player = new Plyr(this.$refs.fmAudio, {
+            speed: {
+                selected: 1,
+                options: [0.5, 1, 1.5],
+            },
+        });
+
+        // select first item in the list
+        this.setSource(this.playingIndex);
 
-    /**
-     * Audio files list
-     * @returns {*}
-     */
-    audioFiles() {
-      return this.$store.getters['fm/selectedItems'];
+        // add event listeners
+        this.player.on('play', () => {
+            this.status = 'playing';
+        });
+
+        this.player.on('pause', () => {
+            this.status = 'paused';
+        });
+
+        this.player.on('ended', () => {
+            if (this.audioFiles.length > this.playingIndex + 1) {
+                // play next track
+                this.selectTrack(this.playingIndex + 1);
+            }
+        });
     },
-  },
-  methods: {
-    /**
-     * Select another audio track
-     * @param index
-     */
-    selectTrack(index) {
-      if (this.player.playing) {
-        // stop playing
-        this.player.stop();
-      }
-      // load new source
-      this.setSource(index);
-      // start play
-      this.player.play();
-
-      this.playingIndex = index;
+    beforeDestroy() {
+        // destroy player
+        this.player.destroy();
     },
+    computed: {
+        /**
+         * Selected disk
+         * @returns {*}
+         */
+        selectedDisk() {
+            return this.$store.getters['fm/selectedDisk'];
+        },
 
-    /**
-     * Set source to audio player
-     * @param index
-     */
-    setSource(index) {
-      this.player.source = {
-        type: 'audio',
-        title: this.audioFiles[index].filename,
-        sources: [{
-          src: `${this.$store.getters['fm/settings/baseUrl']}stream-file?disk=${this.selectedDisk}&path=${encodeURIComponent(this.audioFiles[index].path)}`,
-          type: `audio/${this.audioFiles[index].extension}`,
-        }],
-      };
+        /**
+         * Audio files list
+         * @returns {*}
+         */
+        audioFiles() {
+            return this.$store.getters['fm/selectedItems'];
+        },
     },
+    methods: {
+        /**
+         * Select another audio track
+         * @param index
+         */
+        selectTrack(index) {
+            if (this.player.playing) {
+                // stop playing
+                this.player.stop();
+            }
+            // load new source
+            this.setSource(index);
+            // start play
+            this.player.play();
 
-    /**
-     * Play/Pause
-     */
-    togglePlay() {
-      this.player.togglePlay();
+            this.playingIndex = index;
+        },
+
+        /**
+         * Set source to audio player
+         * @param index
+         */
+        setSource(index) {
+            this.player.source = {
+                type: 'audio',
+                title: this.audioFiles[index].filename,
+                sources: [{
+                    src: `${this.$store.getters['fm/settings/baseUrl']}stream-file?disk=${this.selectedDisk}&path=${encodeURIComponent(this.audioFiles[index].path)}`,
+                    type: `audio/${this.audioFiles[index].extension}`,
+                }],
+            };
+        },
+
+        /**
+         * Play/Pause
+         */
+        togglePlay() {
+            this.player.togglePlay();
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss">
-    .fm-modal-audio-player {
-        .fas.fa-play {
-            color: gray;
-            opacity: 0.1;
-            cursor: pointer;
-
-            &:hover {
-                opacity: 0.5;
-            }
+.fm-modal-audio-player {
+    .far.fa-play {
+        color: gray;
+        opacity: 0.1;
+        cursor: pointer;
 
-            &.active {
-                opacity: 1;
-                color: deepskyblue;
-            }
+        &:hover {
+            opacity: 0.5;
         }
 
-        .fas.fa-pause {
-            color: gray;
-            opacity: 0.5;
-            cursor: pointer;
+        &.active {
+            opacity: 1;
+            color: deepskyblue;
         }
     }
+
+    .far.fa-pause {
+        color: gray;
+        opacity: 0.5;
+        cursor: pointer;
+    }
+}
 </style>
diff --git a/src/components/modals/views/Clipboard.vue b/src/components/modals/views/Clipboard.vue
index e846f0b..ec5349a 100644
--- a/src/components/modals/views/Clipboard.vue
+++ b/src/components/modals/views/Clipboard.vue
@@ -1,72 +1,59 @@
 <template>
-    <div class="modal-content fm-modal-clipboard">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.clipboard.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <template v-if="clipboard.type">
-                <div class="d-flex justify-content-between">
-                    <div class="w-75 text-truncate">
-                        <span>
-                           <i class="far fa-hdd"/>{{ clipboard.disk }}
-                        </span>
-                    </div>
-                    <div class="text-right text-muted">
-                        <span v-bind:title="`${lang.clipboard.actionType} - ${lang.clipboard[clipboard.type]}`">
-                            <i v-if="clipboard.type === 'copy'" class="fas fa-copy"/>
-                            <i v-else class="fas fa-cut"/>
-                        </span>
-                    </div>
+<el-dialog :title="lang.clipboard.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <template v-if="clipboard.type">
+            <div class="d-flex justify-content-between">
+                <div class="w-75 text-truncate">
+                    <span>
+                        <i class="far fa-hdd" />{{ clipboard.disk }}
+                    </span>
+                </div>
+                <div class="text-right text-muted">
+                    <span v-bind:title="`${lang.clipboard.actionType} - ${lang.clipboard[clipboard.type]}`">
+                        <i v-if="clipboard.type === 'copy'" class="far fa-copy" />
+                        <i v-else class="far fa-cut" />
+                    </span>
+                </div>
+            </div>
+            <hr>
+            <div class="d-flex justify-content-between" v-for="(dir, index) in directories" v-bind:key="`d-${index}`">
+                <div class="w-75 text-truncate">
+                    <span>
+                        <i class="far fa-folder" />{{ dir.name }}
+                    </span>
                 </div>
-                <hr>
-                <div class="d-flex justify-content-between"
-                     v-for="(dir, index) in directories"
-                     v-bind:key="`d-${index}`">
-                    <div class="w-75 text-truncate">
-                        <span>
-                            <i class="far fa-folder"/>{{ dir.name }}
-                        </span>
-                    </div>
-                    <div class="text-right">
-                        <button type="button" class="close"
-                                v-bind:title="lang.btn.delete"
-                                v-on:click="deleteItem('directories', dir.path)">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
+                <div class="text-right">
+                    <button type="button" class="close" v-bind:title="lang.btn.delete" v-on:click="deleteItem('directories', dir.path)">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
                 </div>
-                <div class="d-flex justify-content-between"
-                     v-for="(file, index) in files"
-                     v-bind:key="`f-${index}`">
-                    <div class="w-75 text-truncate">
-                        <span>
-                            <i class="far" v-bind:class="file.icon"/>{{ file.name }}
-                        </span>
-                    </div>
-                    <div class="text-right">
-                        <button type="button" class="close"
-                                v-bind:title="lang.btn.delete"
-                                v-on:click="deleteItem('files', file.path)">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
+            </div>
+            <div class="d-flex justify-content-between" v-for="(file, index) in files" v-bind:key="`f-${index}`">
+                <div class="w-75 text-truncate">
+                    <span>
+                        <i class="far" v-bind:class="file.icon" />{{ file.name }}
+                    </span>
                 </div>
-            </template>
-            <template v-else>
-                <span>{{ lang.clipboard.none }}</span>
-            </template>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-danger"
-                    v-bind:disabled="!clipboard.type"
-                    v-on:click="resetClipboard">{{ lang.btn.clear }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
-        </div>
+                <div class="text-right">
+                    <button type="button" class="close" v-bind:title="lang.btn.delete" v-on:click="deleteItem('files', file.path)">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <span>{{ lang.clipboard.none }}</span>
+        </template>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="danger" v-bind:disabled="!clipboard.type" v-on:click="resetClipboard">{{ lang.btn.clear }}
+        </el-button>
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -75,68 +62,66 @@ import translate from '../../../mixins/translate';
 import helper from '../../../mixins/helper';
 
 export default {
-  name: 'Clipboard',
-  mixins: [modal, translate, helper],
-  computed: {
-    /**
-     * Clipboard state
-     * @returns {*}
-     */
-    clipboard() {
-      return this.$store.state.fm.clipboard;
-    },
+    name: 'Clipboard',
+    props: ['showModal'],
+    mixins: [modal, translate, helper],
+    computed: {
+        /**
+         * Clipboard state
+         * @returns {*}
+         */
+        clipboard() {
+            return this.$store.state.fm.clipboard;
+        },
 
-    /**
-     * Paths and names for directories
-     * @returns {{path: *, name: *}[]}
-     */
-    directories() {
-      return this.$store.state.fm.clipboard.directories.map((item) => ({
-        path: item,
-        name: item.split('/').slice(-1)[0],
-      }));
-    },
+        /**
+         * Paths and names for directories
+         * @returns {{path: *, name: *}[]}
+         */
+        directories() {
+            return this.$store.state.fm.clipboard.directories.map((item) => ({
+                path: item,
+                name: item.split('/').slice(-1)[0],
+            }));
+        },
 
-    /**
-     * File names, paths and icons
-     * @returns {{path: *, name: *, icon: *}[]}
-     */
-    files() {
-      return this.$store.state.fm.clipboard.files.map((item) => {
-        const name = item.split('/').slice(-1)[0];
-        return {
-          path: item,
-          name,
-          icon: this.extensionToIcon(name.split('.').slice(-1)[0]),
-        };
-      });
-    },
-  },
-  methods: {
-    /**
-     * Delete item from clipboard
-     * @param type
-     * @param path
-     */
-    deleteItem(type, path) {
-      this.$store.commit('fm/truncateClipboard', { type, path });
+        /**
+         * File names, paths and icons
+         * @returns {{path: *, name: *, icon: *}[]}
+         */
+        files() {
+            return this.$store.state.fm.clipboard.files.map((item) => {
+                const name = item.split('/').slice(-1)[0];
+                return {
+                    path: item,
+                    name,
+                    icon: this.extensionToIcon(name.split('.').slice(-1)[0]),
+                };
+            });
+        },
     },
+    methods: {
+        /**
+         * Delete item from clipboard
+         * @param type
+         * @param path
+         */
+        deleteItem(type, path) {
+            this.$store.commit('fm/truncateClipboard', {
+                type,
+                path
+            });
+        },
 
-    /**
-     * Reset clipboard
-     */
-    resetClipboard() {
-      this.$store.commit('fm/resetClipboard');
+        /**
+         * Reset clipboard
+         */
+        resetClipboard() {
+            this.$store.commit('fm/resetClipboard');
+        },
+        hideModal() {
+            this.$store.commit('fm/modal/clearModal');
+        },
     },
-  },
 };
-</script>
-
-<style lang="scss">
-    .fm-modal-clipboard {
-
-        .modal-body .far {
-            padding-right: 0.5rem;
-        }
-    }
-</style>
+</script>
\ No newline at end of file
diff --git a/src/components/modals/views/Delete.vue b/src/components/modals/views/Delete.vue
index f5b3a17..615f892 100644
--- a/src/components/modals/views/Delete.vue
+++ b/src/components/modals/views/Delete.vue
@@ -1,25 +1,21 @@
 <template>
-    <div class="modal-content fm-modal-delete">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.delete.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <div v-if="selectedItems.length">
-                <selected-file-list/>
-            </div>
-            <div v-else>
-                <span class="text-danger">{{ lang.modal.delete.noSelected }}</span>
-            </div>
+<el-dialog :title="lang.modal.delete.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <div v-if="selectedItems.length">
+            <selected-file-list />
         </div>
-        <div class="modal-footer">
-            <button class="btn btn-danger" v-on:click="deleteItems">{{ lang.modal.delete.title }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
+        <div v-else>
+            <span class="text-danger">{{ lang.modal.delete.noSelected }}</span>
         </div>
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="danger" v-on:click="deleteItems">{{ lang.modal.delete.title }}
+        </el-button>
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+</el-dialog>
 </template>
 
 <script>
@@ -28,34 +24,38 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Delete',
-  mixins: [modal, translate],
-  components: { SelectedFileList },
-  computed: {
-    /**
-     * Files and folders for deleting
-     * @returns {*}
-     */
-    selectedItems() {
-      return this.$store.getters['fm/selectedItems'];
+    name: 'Delete',
+    props: ['showModal'],
+
+    mixins: [modal, translate],
+    components: {
+        SelectedFileList
+    },
+    computed: {
+        /**
+         * Files and folders for deleting
+         * @returns {*}
+         */
+        selectedItems() {
+            return this.$store.getters['fm/selectedItems'];
+        },
     },
-  },
-  methods: {
-    /**
-     * Delete selected directories and files
-     */
-    deleteItems() {
-      // create items list for delete
-      const items = this.selectedItems.map((item) => ({
-        path: item.path,
-        type: item.type,
-      }));
+    methods: {
+        /**
+         * Delete selected directories and files
+         */
+        deleteItems() {
+            // create items list for delete
+            const items = this.selectedItems.map((item) => ({
+                path: item.path,
+                type: item.type,
+            }));
 
-      this.$store.dispatch('fm/delete', items).then(() => {
-        // close modal window
-        this.hideModal();
-      });
+            this.$store.dispatch('fm/delete', items).then(() => {
+                // close modal window
+                this.hideModal();
+            });
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/modals/views/NewFile.vue b/src/components/modals/views/NewFile.vue
index 2444eae..af1d2b5 100644
--- a/src/components/modals/views/NewFile.vue
+++ b/src/components/modals/views/NewFile.vue
@@ -1,32 +1,21 @@
 <template>
-    <div class="modal-content fm-modal-folder">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.newFile.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <div class="form-group">
-                <label for="fm-file-name">{{ lang.modal.newFile.fieldName }}</label>
-                <input type="text" class="form-control" id="fm-file-name"
-                       v-focus
-                       v-bind:class="{'is-invalid': fileExist}"
-                       v-model="fileName"
-                       v-on:keyup="validateFileName">
-                <div class="invalid-feedback" v-show="fileExist">
-                    {{ lang.modal.newFile.fieldFeedback }}
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-info"
-                    v-bind:disabled="!submitActive"
-                    v-on:click="addFile">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
+<el-dialog :title="lang.modal.newFile.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="form-group">
+        <label for="fm-file-name">{{ lang.modal.newFile.fieldName }}</label>
+        <el-input type="text" class="form-control" id="fm-file-name" v-focus v-bind:class="{'is-invalid': fileExist}" v-model="fileName" v-on:keyup="validateFileName"></el-input>
+        <div class="invalid-feedback" v-show="fileExist">
+            {{ lang.modal.newFile.fieldFeedback }}
         </div>
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="info" v-bind:disabled="!submitActive" v-on:click="addFile">{{ lang.btn.submit }}
+        </el-button>
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -34,50 +23,54 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'NewFile',
-  mixins: [modal, translate],
-  data() {
-    return {
-      // name for new file
-      fileName: '',
+    name: 'NewFile',
+    props: ['showModal'],
+    mixins: [modal, translate],
+    data() {
+        return {
+            // name for new file
+            fileName: '',
 
-      // file exist
-      fileExist: false,
-    };
-  },
-  computed: {
-    /**
-     * Submit button - active or no
-     * @returns {string|boolean}
-     */
-    submitActive() {
-      return this.fileName && !this.fileExist;
+            // file exist
+            fileExist: false,
+        };
     },
-  },
-  methods: {
-    /**
-     * Check the file name if it exists or not.
-     */
-    validateFileName() {
-      if (this.fileName) {
-        this.fileExist = this.$store.getters[`fm/${this.activeManager}/fileExist`](this.fileName);
-      } else {
-        this.fileExist = false;
-      }
+    computed: {
+        /**
+         * Submit button - active or no
+         * @returns {string|boolean}
+         */
+        submitActive() {
+            return this.fileName && !this.fileExist;
+        },
     },
+    methods: {
+        /**
+         * Check the file name if it exists or not.
+         */
+        validateFileName() {
+            if (this.fileName) {
+                this.fileExist = this.$store.getters[`fm/${this.activeManager}/fileExist`](this.fileName);
+            } else {
+                this.fileExist = false;
+            }
+        },
 
-    /**
-     * Create new file
-     */
-    addFile() {
-      this.$store.dispatch('fm/createFile', this.fileName).then((response) => {
-        // if new directory created successfully
-        if (response.data.result.status === 'success') {
-          // close modal window
-          this.hideModal();
-        }
-      });
+        /**
+         * Create new file
+         */
+        addFile() {
+            this.$store.dispatch('fm/createFile', this.fileName).then((response) => {
+                // if new directory created successfully
+                if (response.data.result.status === 'success') {
+                    // close modal window
+                    this.hideModal();
+                }
+            });
+        },
+        hideModal() {
+            this.$store.commit('fm/modal/clearModal');
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/modals/views/NewFolder.vue b/src/components/modals/views/NewFolder.vue
index 7ba1ee7..b8f525c 100644
--- a/src/components/modals/views/NewFolder.vue
+++ b/src/components/modals/views/NewFolder.vue
@@ -1,32 +1,21 @@
 <template>
-    <div class="modal-content fm-modal-folder">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.newFolder.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <div class="form-group">
-                <label for="fm-folder-name">{{ lang.modal.newFolder.fieldName }}</label>
-                <input type="text" class="form-control" id="fm-folder-name"
-                       v-focus
-                       v-bind:class="{'is-invalid': directoryExist}"
-                       v-model="directoryName"
-                       v-on:keyup="validateDirName">
-                <div class="invalid-feedback" v-show="directoryExist">
-                    {{ lang.modal.newFolder.fieldFeedback }}
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-info"
-                    v-bind:disabled="!submitActive"
-                    v-on:click="addFolder">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
+<el-dialog :title="lang.modal.newFolder.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="form-group">
+        <label for="fm-folder-name">{{ lang.modal.newFolder.fieldName }}</label>
+        <el-input type="text" class="form-control" id="fm-folder-name" v-focus v-bind:class="{'is-invalid': directoryExist}" v-model="directoryName" v-on:keyup="validateDirName"></el-input>
+        <div class="invalid-feedback" v-show="directoryExist">
+            {{ lang.modal.newFolder.fieldFeedback }}
         </div>
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="info" v-bind:disabled="!submitActive" v-on:click="addFolder">{{ lang.btn.submit }}
+        </el-button>
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -34,50 +23,54 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'NewFolder',
-  mixins: [modal, translate],
-  data() {
-    return {
-      // name for new directory
-      directoryName: '',
+    name: 'NewFolder',
+    props: ['showModal'],
+    mixins: [modal, translate],
+    data() {
+        return {
+            // name for new directory
+            directoryName: '',
 
-      // directory exist
-      directoryExist: false,
-    };
-  },
-  computed: {
-    /**
-     * Submit button - active or no
-     * @returns {string|boolean}
-     */
-    submitActive() {
-      return this.directoryName && !this.directoryExist;
+            // directory exist
+            directoryExist: false,
+        };
     },
-  },
-  methods: {
-    /**
-     * Check the folder name if it exists or not.
-     */
-    validateDirName() {
-      if (this.directoryName) {
-        this.directoryExist = this.$store.getters[`fm/${this.activeManager}/directoryExist`](this.directoryName);
-      } else {
-        this.directoryExist = false;
-      }
+    computed: {
+        /**
+         * Submit button - active or no
+         * @returns {string|boolean}
+         */
+        submitActive() {
+            return this.directoryName && !this.directoryExist;
+        },
     },
+    methods: {
+        /**
+         * Check the folder name if it exists or not.
+         */
+        validateDirName() {
+            if (this.directoryName) {
+                this.directoryExist = this.$store.getters[`fm/${this.activeManager}/directoryExist`](this.directoryName);
+            } else {
+                this.directoryExist = false;
+            }
+        },
 
-    /**
-     * Create new directory
-     */
-    addFolder() {
-      this.$store.dispatch('fm/createDirectory', this.directoryName).then((response) => {
-        // if new directory created successfully
-        if (response.data.result.status === 'success') {
-          // close modal window
-          this.hideModal();
-        }
-      });
+        /**
+         * Create new directory
+         */
+        addFolder() {
+            this.$store.dispatch('fm/createDirectory', this.directoryName).then((response) => {
+                // if new directory created successfully
+                if (response.data.result.status === 'success') {
+                    // close modal window
+                    this.hideModal();
+                }
+            });
+        },
+        hideModal() {
+            this.$store.commit('fm/modal/clearModal');
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/modals/views/Preview.vue b/src/components/modals/views/Preview.vue
index ccb92a3..6462934 100644
--- a/src/components/modals/views/Preview.vue
+++ b/src/components/modals/views/Preview.vue
@@ -1,40 +1,34 @@
 <template>
+<el-dialog :title="showCropperModule ? lang.modal.cropper.title : lang.modal.preview.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
     <div class="modal-content fm-modal-preview">
-        <div class="modal-header">
-            <h5 class="modal-title w-75 text-truncate">
-                {{ showCropperModule ? lang.modal.cropper.title : lang.modal.preview.title }}
-                <small class="text-muted pl-3">{{ selectedItem.basename }}</small>
-            </h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
+
         <div class="modal-body text-center">
             <template v-if="showCropperModule">
-                <cropper-module v-bind:imgSrc="imgSrc"
-                                v-bind:maxHeight="maxHeight"
-                                v-on:closeCropper="closeCropper"/>
+                <cropper-module v-bind:imgSrc="imgSrc" v-bind:maxHeight="maxHeight" v-on:closeCropper="closeCropper" />
             </template>
             <transition v-else name="fade" mode="out-in">
-                <i v-if="!imgSrc" class="fas fa-spinner fa-spin fa-5x p-5 text-muted"/>
-                <img v-else
-                     v-bind:src="http://github.com/imgSrc"
-                     v-bind:alt="selectedItem.basename"
-                     v-bind:style="{'max-height': maxHeight+'px'}">
+                <i v-if="!imgSrc" class="far fa-spinner fa-spin fa-5x p-5 text-muted" />
+                <img v-else v-bind:src="http://github.com/imgSrc" v-bind:alt="selectedItem.basename" v-bind:style="{'max-height': maxHeight+'px'}">
             </transition>
         </div>
+
+    </div>
+
+    <div slot="footer" class="dialog-footer">
         <div v-if="showFooter" class="d-flex justify-content-between">
             <span class="d-block">
-                <button class="btn btn-info"
-                        v-bind:title="lang.modal.cropper.title" v-on:click="showCropperModule = true">
-                    <i class="fas fa-crop-alt"/>
-                </button>
+                <el-button type="info" v-bind:title="lang.modal.cropper.title" v-on:click="showCropperModule = true">
+                    <i class="far fa-crop-alt" />
+                </el-button>
             </span>
             <span class="d-block">
-                <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
+                <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
             </span>
         </div>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -45,118 +39,121 @@ import helper from '../../../mixins/helper';
 import GET from '../../../http/get';
 
 export default {
-  name: 'Preview',
-  mixins: [modal, translate, helper],
-  components: { CropperModule },
-  data() {
-    return {
-      showCropperModule: false,
-      imgSrc: '',
-    };
-  },
-  created() {
-    this.loadImage();
-  },
-  computed: {
-    /**
-     * Authorization required
-     * @return {*}
-     */
-    auth() {
-      return this.$store.getters['fm/settings/authHeader'];
+    name: 'Preview',
+    props: ['showModal'],
+    mixins: [modal, translate, helper],
+    components: {
+        CropperModule
     },
-
-    /**
-     * Selected disk
-     * @returns {*}
-     */
-    selectedDisk() {
-      return this.$store.getters['fm/selectedDisk'];
+    data() {
+        return {
+            showCropperModule: false,
+            imgSrc: '',
+        };
     },
-
-    /**
-     * Selected file
-     * @returns {*}
-     */
-    selectedItem() {
-      return this.$store.getters['fm/selectedItems'][0];
+    created() {
+        this.loadImage();
     },
+    computed: {
+        /**
+         * Authorization required
+         * @return {*}
+         */
+        auth() {
+            return this.$store.getters['fm/settings/authHeader'];
+        },
 
-    /**
-     * Show modal footer
-     * @return boolean
-     */
-    showFooter() {
-      return this.canCrop(this.selectedItem.extension) && !this.showCropperModule;
-    },
+        /**
+         * Selected disk
+         * @returns {*}
+         */
+        selectedDisk() {
+            return this.$store.getters['fm/selectedDisk'];
+        },
 
-    /**
-     * Calculate the max height for image
-     * @returns {number}
-     */
-    maxHeight() {
-      if (this.$store.state.fm.modal.modalBlockHeight) {
-        return this.$store.state.fm.modal.modalBlockHeight - 170;
-      }
+        /**
+         * Selected file
+         * @returns {*}
+         */
+        selectedItem() {
+            return this.$store.getters['fm/selectedItems'][0];
+        },
 
-      return 300;
-    },
-  },
-  methods: {
-    /**
-     * Can we crop this image?
-     * @param extension
-     * @returns {boolean}
-     */
-    canCrop(extension) {
-      return this.$store.state.fm.settings.cropExtensions.includes(extension.toLowerCase());
-    },
+        /**
+         * Show modal footer
+         * @return boolean
+         */
+        showFooter() {
+            return this.canCrop(this.selectedItem.extension) && !this.showCropperModule;
+        },
 
-    /**
-     * Close cropper
-     */
-    closeCropper() {
-      this.showCropperModule = false;
-      this.loadImage();
+        /**
+         * Calculate the max height for image
+         * @returns {number}
+         */
+        maxHeight() {
+            if (this.$store.state.fm.modal.modalBlockHeight) {
+                return this.$store.state.fm.modal.modalBlockHeight - 170;
+            }
+
+            return 300;
+        },
     },
+    methods: {
+        /**
+         * Can we crop this image?
+         * @param extension
+         * @returns {boolean}
+         */
+        canCrop(extension) {
+            return this.$store.state.fm.settings.cropExtensions.includes(extension.toLowerCase());
+        },
+
+        /**
+         * Close cropper
+         */
+        closeCropper() {
+            this.showCropperModule = false;
+            this.loadImage();
+        },
 
-    /**
-     * Load image
-     */
-    loadImage() {
-      // if authorization required
-      if (this.auth) {
-        GET.preview(
-          this.selectedDisk,
-          this.selectedItem.path,
-        ).then((response) => {
-          const mimeType = response.headers['content-type'].toLowerCase();
-          const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');
-
-          this.imgSrc = `data:${mimeType};base64,${imgBase64}`;
-        });
-      } else {
-        this.imgSrc = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItem.path)}&v=${this.selectedItem.timestamp}`;
-      }
+        /**
+         * Load image
+         */
+        loadImage() {
+            // if authorization required
+            if (this.auth) {
+                GET.preview(
+                    this.selectedDisk,
+                    this.selectedItem.path,
+                ).then((response) => {
+                    const mimeType = response.headers['content-type'].toLowerCase();
+                    const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');
+
+                    this.imgSrc = `data:${mimeType};base64,${imgBase64}`;
+                });
+            } else {
+                this.imgSrc = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItem.path)}&v=${this.selectedItem.timestamp}`;
+            }
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss">
-    .fm-modal-preview {
+.fm-modal-preview {
 
-        .modal-body {
-            padding: 0;
+    .modal-body {
+        padding: 0;
 
-            img {
-                max-width: 100%;
-            }
+        img {
+            max-width: 100%;
         }
+    }
 
-        & > .d-flex {
-            padding: 1rem;
-            border-top: 1px solid #e9ecef;
-        }
+    &>.d-flex {
+        padding: 1rem;
+        border-top: 1px solid #e9ecef;
     }
+}
 </style>
diff --git a/src/components/modals/views/Properties.vue b/src/components/modals/views/Properties.vue
index 437491b..709a109 100644
--- a/src/components/modals/views/Properties.vue
+++ b/src/components/modals/views/Properties.vue
@@ -1,37 +1,28 @@
 <template>
+<el-dialog :title="lang.modal.properties.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
     <div class="modal-content fm-modal-properties">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.properties.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
+
         <div class="modal-body">
             <div class="row">
                 <div class="col-2">{{ lang.modal.properties.disk }}:</div>
                 <div class="col-9">{{ selectedDisk }}</div>
                 <div class="col-1 text-right">
-                    <i v-on:click="copyToClipboard(selectedDisk)"
-                       v-bind:title="lang.clipboard.copy"
-                       class="far fa-copy"/>
+                    <i v-on:click="copyToClipboard(selectedDisk)" v-bind:title="lang.clipboard.copy" class="far fa-copy" />
                 </div>
             </div>
             <div class="row">
                 <div class="col-2">{{ lang.modal.properties.name }}:</div>
                 <div class="col-9">{{ selectedItem.basename }}</div>
                 <div class="col-1 text-right">
-                    <i v-on:click="copyToClipboard(selectedItem.basename)"
-                       v-bind:title="lang.clipboard.copy"
-                       class="far fa-copy"/>
+                    <i v-on:click="copyToClipboard(selectedItem.basename)" v-bind:title="lang.clipboard.copy" class="far fa-copy" />
                 </div>
             </div>
             <div class="row">
                 <div class="col-2">{{ lang.modal.properties.path }}:</div>
                 <div class="col-9">{{ selectedItem.path }}</div>
                 <div class="col-1 text-right">
-                    <i v-on:click="copyToClipboard(selectedItem.path)"
-                       v-bind:title="lang.clipboard.copy"
-                       class="far fa-copy"/>
+                    <i v-on:click="copyToClipboard(selectedItem.path)" v-bind:title="lang.clipboard.copy" class="far fa-copy" />
                 </div>
             </div>
             <template v-if="selectedItem.type === 'file'">
@@ -39,9 +30,7 @@
                     <div class="col-2">{{ lang.modal.properties.size }}:</div>
                     <div class="col-9">{{ bytesToHuman(selectedItem.size) }}</div>
                     <div class="col-1 text-right">
-                        <i v-on:click="copyToClipboard(bytesToHuman(selectedItem.size))"
-                           v-bind:title="lang.clipboard.copy"
-                           class="far fa-copy"/>
+                        <i v-on:click="copyToClipboard(bytesToHuman(selectedItem.size))" v-bind:title="lang.clipboard.copy" class="far fa-copy" />
                     </div>
                 </div>
                 <div class="row">
@@ -49,16 +38,13 @@
                     <div class="col-9">
                         <span v-if="url">{{ url }}</span>
                         <span v-else>
-                            <button v-on:click="getUrl" type="button"
-                                    class="btn btn-sm btn-light">
-                                <i class="fas fa-sm fa-link"/> Get URL
+                            <button v-on:click="getUrl" type="button" class="btn btn-sm btn-light">
+                                <i class="far fa-sm fa-link" /> Get URL
                             </button>
                         </span>
                     </div>
                     <div v-if="url" class="col-1 text-right">
-                        <i v-on:click="copyToClipboard(url)"
-                           v-bind:title="lang.clipboard.copy"
-                           class="far fa-copy"/>
+                        <i v-on:click="copyToClipboard(url)" v-bind:title="lang.clipboard.copy" class="far fa-copy" />
                     </div>
                 </div>
             </template>
@@ -67,9 +53,7 @@
                     <div class="col-2">{{ lang.modal.properties.modified }}:</div>
                     <div class="col-9">{{ timestampToDate(selectedItem.timestamp) }}</div>
                     <div class="col-1 text-right">
-                        <i v-on:click="copyToClipboard(timestampToDate(selectedItem.timestamp))"
-                           v-bind:title="lang.clipboard.copy"
-                           class="far fa-copy"/>
+                        <i v-on:click="copyToClipboard(timestampToDate(selectedItem.timestamp))" v-bind:title="lang.clipboard.copy" class="far fa-copy" />
                     </div>
                 </div>
             </template>
@@ -81,6 +65,8 @@
             </template>
         </div>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -90,100 +76,101 @@ import helper from '../../../mixins/helper';
 import EventBus from '../../../eventBus';
 
 export default {
-  name: 'Properties',
-  mixins: [modal, translate, helper],
-  data() {
-    return {
-      url: null,
-    };
-  },
-  computed: {
-    /**
-     * Selected disk
-     * @returns {*}
-     */
-    selectedDisk() {
-      return this.$store.getters['fm/selectedDisk'];
+    name: 'Properties',
+    props: ['showModal'],
+    mixins: [modal, translate, helper],
+    data() {
+        return {
+            url: null,
+        };
     },
+    computed: {
+        /**
+         * Selected disk
+         * @returns {*}
+         */
+        selectedDisk() {
+            return this.$store.getters['fm/selectedDisk'];
+        },
 
-    /**
-     * Selected file
-     * @returns {*}
-     */
-    selectedItem() {
-      return this.$store.getters['fm/selectedItems'][0];
-    },
-  },
-  methods: {
-    /**
-     * Get URL
-     */
-    getUrl() {
-      this.$store.dispatch('fm/url', {
-        disk: this.selectedDisk,
-        path: this.selectedItem.path,
-      }).then((response) => {
-        if (response.data.result.status === 'success') {
-          this.url = response.data.url;
-        }
-      });
+        /**
+         * Selected file
+         * @returns {*}
+         */
+        selectedItem() {
+            return this.$store.getters['fm/selectedItems'][0];
+        },
     },
+    methods: {
+        /**
+         * Get URL
+         */
+        getUrl() {
+            this.$store.dispatch('fm/url', {
+                disk: this.selectedDisk,
+                path: this.selectedItem.path,
+            }).then((response) => {
+                if (response.data.result.status === 'success') {
+                    this.url = response.data.url;
+                }
+            });
+        },
 
-    /**
-     * Copy text to clipboard
-     * @param text
-     */
-    copyToClipboard(text) {
-      // create input
-      const copyInputHelper = document.createElement('input');
-      copyInputHelper.className = 'copyInputHelper';
-      document.body.appendChild(copyInputHelper);
-      // add text
-      copyInputHelper.value = text;
-      copyInputHelper.select();
-      // copy text to clipboard
-      document.execCommand('copy');
-      // clear
-      document.body.removeChild(copyInputHelper);
+        /**
+         * Copy text to clipboard
+         * @param text
+         */
+        copyToClipboard(text) {
+            // create input
+            const copyInputHelper = document.createElement('input');
+            copyInputHelper.className = 'copyInputHelper';
+            document.body.appendChild(copyInputHelper);
+            // add text
+            copyInputHelper.value = text;
+            copyInputHelper.select();
+            // copy text to clipboard
+            document.execCommand('copy');
+            // clear
+            document.body.removeChild(copyInputHelper);
 
-      // Notification
-      EventBus.$emit('addNotification', {
-        status: 'success',
-        message: this.lang.notifications.copyToClipboard,
-      });
+            // Notification
+            EventBus.$emit('addNotification', {
+                status: 'success',
+                message: this.lang.notifications.copyToClipboard,
+            });
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss">
-    .fm-modal-properties .modal-body{
-        .row {
-            margin-bottom: 0.3rem;
-            padding-top: 0.3rem;
-            padding-bottom: 0.3rem;
+.fm-modal-properties .modal-body {
+    .row {
+        margin-bottom: 0.3rem;
+        padding-top: 0.3rem;
+        padding-bottom: 0.3rem;
 
-            .fa-copy {
-                padding-top: 0.2rem;
-                display: none;
-                cursor: pointer;
-            }
+        .fa-copy {
+            padding-top: 0.2rem;
+            display: none;
+            cursor: pointer;
+        }
 
-            &:hover {
-                background-color: #f8f9fa;
+        &:hover {
+            background-color: #f8f9fa;
 
-                & .fa-copy {
-                    display: block;
-                }
+            & .fa-copy {
+                display: block;
             }
         }
+    }
 
-        .col-2 {
-            font-weight: bold;
-        }
+    .col-2 {
+        font-weight: bold;
+    }
 
-        .col-9 {
-            word-wrap: break-word;
-        }
+    .col-9 {
+        word-wrap: break-word;
     }
+}
 </style>
diff --git a/src/components/modals/views/Rename.vue b/src/components/modals/views/Rename.vue
index 4751cb6..a7abe71 100644
--- a/src/components/modals/views/Rename.vue
+++ b/src/components/modals/views/Rename.vue
@@ -1,34 +1,25 @@
 <template>
-    <div class="modal-content fm-modal-rename">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.rename.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <div class="form-group">
-                <label for="fm-input-rename">{{ lang.modal.rename.fieldName }}</label>
-                <input type="text" class="form-control" id="fm-input-rename"
-                       v-focus
-                       v-bind:class="{'is-invalid': checkName}"
-                       v-model="name"
-                       v-on:keyup="validateName">
-                <div class="invalid-feedback" v-show="checkName">
-                    {{ lang.modal.rename.fieldFeedback }}
-                    {{ directoryExist ? ` - ${lang.modal.rename.directoryExist}` : ''}}
-                    {{ fileExist ? ` - ${lang.modal.rename.fileExist}` : ''}}
-                </div>
+<el-dialog :title="lang.modal.rename.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <div class="form-group">
+            <label for="fm-input-rename">{{ lang.modal.rename.fieldName }}</label>
+            <input type="text" class="form-control" id="fm-input-rename" v-focus v-bind:class="{'is-invalid': checkName}" v-model="name" v-on:keyup="validateName">
+            <div class="invalid-feedback" v-show="checkName">
+                {{ lang.modal.rename.fieldFeedback }}
+                {{ directoryExist ? ` - ${lang.modal.rename.directoryExist}` : ''}}
+                {{ fileExist ? ` - ${lang.modal.rename.fileExist}` : ''}}
             </div>
         </div>
-        <div class="modal-footer">
-            <button class="btn btn-info"
-                    v-bind:disabled="submitDisable"
-                    v-on:click="rename">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
-        </div>
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="info" v-bind:disabled="submitDisable" v-on:click="rename">{{ lang.btn.submit }}
+        </el-button>
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -36,79 +27,80 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Rename',
-  mixins: [modal, translate],
-  data() {
-    return {
-      name: '',
-      directoryExist: false,
-      fileExist: false,
-    };
-  },
-  computed: {
-    /**
-     * Selected item
-     * @returns {*}
-     */
-    selectedItem() {
-      return this.$store.getters[`fm/${this.activeManager}/selectedList`][0];
+    name: 'Rename',
+    props: ['showModal'],
+    mixins: [modal, translate],
+    data() {
+        return {
+            name: '',
+            directoryExist: false,
+            fileExist: false,
+        };
     },
+    computed: {
+        /**
+         * Selected item
+         * @returns {*}
+         */
+        selectedItem() {
+            return this.$store.getters[`fm/${this.activeManager}/selectedList`][0];
+        },
 
-    /**
-     * Check new name
-     * @returns {boolean}
-     */
-    checkName() {
-      return this.directoryExist || this.fileExist || !this.name;
-    },
+        /**
+         * Check new name
+         * @returns {boolean}
+         */
+        checkName() {
+            return this.directoryExist || this.fileExist || !this.name;
+        },
 
-    /**
-     * Submit button disable
-     * @returns {*|boolean}
-     */
-    submitDisable() {
-      return this.checkName || this.name === this.selectedItem.basename;
+        /**
+         * Submit button disable
+         * @returns {*|boolean}
+         */
+        submitDisable() {
+            return this.checkName || this.name === this.selectedItem.basename;
+        },
     },
-  },
-  mounted() {
-    // initiate item name
-    this.name = this.selectedItem.basename;
-  },
-  methods: {
-    /**
-     * Validate item name
-     */
-    validateName() {
-      if (this.name !== this.selectedItem.basename) {
-        // if item - folder
-        if (this.selectedItem.type === 'dir') {
-          // check folder name matches
-          this.directoryExist = this.$store.getters[`fm/${this.activeManager}/directoryExist`](this.name);
-        } else {
-          // check file name matches
-          this.fileExist = this.$store.getters[`fm/${this.activeManager}/fileExist`](this.name);
-        }
-      }
+    mounted() {
+        // initiate item name
+        this.name = this.selectedItem.basename;
     },
+    methods: {
+        /**
+         * Validate item name
+         */
+        validateName() {
+            if (this.name !== this.selectedItem.basename) {
+                // if item - folder
+                if (this.selectedItem.type === 'dir') {
+                    // check folder name matches
+                    this.directoryExist = this.$store.getters[`fm/${this.activeManager}/directoryExist`](this.name);
+                } else {
+                    // check file name matches
+                    this.fileExist = this.$store.getters[`fm/${this.activeManager}/fileExist`](this.name);
+                }
+            }
+        },
 
-    /**
-     * Rename item
-     */
-    rename() {
-      // create new name with path
-      const newName = this.selectedItem.dirname
-        ? `${this.selectedItem.dirname}/${this.name}`
-        : this.name;
+        /**
+         * Rename item
+         */
+        rename() {
+            // create new name with path
+            const newName = this.selectedItem.dirname ?
+                `${this.selectedItem.dirname}/${this.name}` :
+                this.name;
 
-      this.$store.dispatch('fm/rename', {
-        type: this.selectedItem.type,
-        newName,
-        oldName: this.selectedItem.path,
-      }).then(() => {
-        // close modal window
-        this.hideModal();
-      });
+            this.$store.dispatch('fm/rename', {
+                type: this.selectedItem.type,
+                newName,
+                oldName: this.selectedItem.path,
+            }).then(() => {
+                // close modal window
+                this.hideModal();
+            });
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/modals/views/Status.vue b/src/components/modals/views/Status.vue
index 3aa9224..4178888 100644
--- a/src/components/modals/views/Status.vue
+++ b/src/components/modals/views/Status.vue
@@ -1,30 +1,25 @@
 <template>
-    <div class="modal-content fm-modal-errors">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.status.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <div v-if="errors.length">
-                <ul class="list-unstyled">
-                    <li v-for="(item, index) in errors" v-bind:key="index">
-                        {{ item.status }} - {{ item.message }}
-                    </li>
-                </ul>
-            </div>
-            <div v-else>
-                <span>{{ lang.modal.status.noErrors }}</span>
-            </div>
+<el-dialog :title="lang.modal.status.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <div v-if="errors.length">
+            <ul class="list-unstyled">
+                <li v-for="(item, index) in errors" v-bind:key="index">
+                    {{ item.status }} - {{ item.message }}
+                </li>
+            </ul>
         </div>
-        <div class="modal-footer">
-            <button class="btn btn-danger"
-                    v-bind:disabled="!errors.length"
-                    v-on:click="clearErrors">{{ lang.btn.clear }}</button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
+        <div v-else>
+            <span>{{ lang.modal.status.noErrors }}</span>
         </div>
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button type="primary" v-bind:disabled="!errors.length" v-on:click="clearErrors">{{ lang.btn.clear }}</el-button>
+        <el-button type="danger" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -32,24 +27,25 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Status',
-  mixins: [modal, translate],
-  computed: {
-    /**
-     * Application errors
-     * @returns {default.computed.errors|(function())|Array|boolean}
-     */
-    errors() {
-      return this.$store.state.fm.messages.errors;
+    name: 'Status',
+    props: ['showModal'],
+    mixins: [modal, translate],
+    computed: {
+        /**
+         * Application errors
+         * @returns {default.computed.errors|(function())|Array|boolean}
+         */
+        errors() {
+            return this.$store.state.fm.messages.errors;
+        },
     },
-  },
-  methods: {
-    /**
-     * Clear all errors
-     */
-    clearErrors() {
-      this.$store.commit('fm/messages/clearErrors');
+    methods: {
+        /**
+         * Clear all errors
+         */
+        clearErrors() {
+            this.$store.commit('fm/messages/clearErrors');
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/modals/views/TextEdit.vue b/src/components/modals/views/TextEdit.vue
index 47611c3..a38bce4 100644
--- a/src/components/modals/views/TextEdit.vue
+++ b/src/components/modals/views/TextEdit.vue
@@ -1,27 +1,23 @@
 <template>
-    <div class="modal-content fm-modal-text-edit">
-        <div class="modal-header">
-            <h5 class="modal-title w-75 text-truncate">
-                {{ lang.modal.editor.title }} <small class="text-muted pl-3">{{ selectedItem.basename }}</small>
-            </h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <codemirror ref="fmCodeEditor" v-model="code" :options="cmOptions"/>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-info"
-                    v-on:click="updateFile">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
-        </div>
+<el-dialog :title="selectedItem.basename" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <codemirror ref="fmCodeEditor" v-model="code" :options="cmOptions" />
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button class="btn btn-info" v-on:click="updateFile">{{ lang.btn.submit }}
+        </el-button>
+        <el-button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
-import { codemirror } from 'vue-codemirror';
+import {
+    codemirror
+} from 'vue-codemirror';
 import 'codemirror/mode/shell/shell';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/sass/sass';
@@ -45,103 +41,107 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'TextEdit',
-  mixins: [modal, translate],
-  components: { codemirror },
-  data() {
-    return {
-      code: '',
-    };
-  },
-  mounted() {
-    // get file for edit
-    this.$store.dispatch('fm/getFile', {
-      disk: this.selectedDisk,
-      path: this.selectedItem.path,
-    }).then((response) => {
-      // add code
-      if (this.selectedItem.extension === 'json') {
-        this.code = JSON.stringify(response.data, null, 4);
-      } else {
-        this.code = response.data;
-      }
+    name: 'TextEdit',
+    props: ['showModal'],
 
-      // set size
-      this.$refs.fmCodeEditor.codemirror.setSize(null, this.editorHeight);
-    });
-  },
-  computed: {
-    /**
-     * Selected disk
-     * @returns {*}
-     */
-    selectedDisk() {
-      return this.$store.getters['fm/selectedDisk'];
+    mixins: [modal, translate],
+    components: {
+        codemirror
     },
-
-    /**
-     * Selected file
-     * @returns {*}
-     */
-    selectedItem() {
-      return this.$store.getters['fm/selectedItems'][0];
+    data() {
+        return {
+            code: '',
+        };
     },
+    mounted() {
+        // get file for edit
+        this.$store.dispatch('fm/getFile', {
+            disk: this.selectedDisk,
+            path: this.selectedItem.path,
+        }).then((response) => {
+            // add code
+            if (this.selectedItem.extension === 'json') {
+                this.code = JSON.stringify(response.data, null, 4);
+            } else {
+                this.code = response.data;
+            }
 
-    /**
-     * CodeMirror options
-     * @returns {{tabSize: number, mode: *, theme: string, lineNumbers: boolean, line: boolean}}
-     */
-    cmOptions() {
-      return {
-        mode: this.$store.state.fm.settings.textExtensions[this.selectedItem.extension],
-        theme: 'blackboard',
-        lineNumbers: true,
-        line: true,
-      };
+            // set size
+            this.$refs.fmCodeEditor.codemirror.setSize(null, this.editorHeight);
+        });
     },
+    computed: {
+        /**
+         * Selected disk
+         * @returns {*}
+         */
+        selectedDisk() {
+            return this.$store.getters['fm/selectedDisk'];
+        },
+
+        /**
+         * Selected file
+         * @returns {*}
+         */
+        selectedItem() {
+            return this.$store.getters['fm/selectedItems'][0];
+        },
+
+        /**
+         * CodeMirror options
+         * @returns {{tabSize: number, mode: *, theme: string, lineNumbers: boolean, line: boolean}}
+         */
+        cmOptions() {
+            return {
+                mode: this.$store.state.fm.settings.textExtensions[this.selectedItem.extension],
+                theme: 'blackboard',
+                lineNumbers: true,
+                line: true,
+            };
+        },
 
-    /**
-     * Calculate the height of the code editor
-     * @returns {number}
-     */
-    editorHeight() {
-      if (this.$store.state.fm.modal.modalBlockHeight) {
-        return this.$store.state.fm.modal.modalBlockHeight - 200;
-      }
+        /**
+         * Calculate the height of the code editor
+         * @returns {number}
+         */
+        editorHeight() {
+            if (this.$store.state.fm.modal.modalBlockHeight) {
+                return this.$store.state.fm.modal.modalBlockHeight - 200;
+            }
 
-      return 300;
+            return 300;
+        },
     },
-  },
-  methods: {
-    // Update file
-    updateFile() {
-      const formData = new FormData();
-      // add disk name
-      formData.append('disk', this.selectedDisk);
-      // add path
-      formData.append('path', this.selectedItem.dirname);
-      // add updated file
-      formData.append('file', new Blob([this.code]), this.selectedItem.basename);
+    methods: {
+        // Update file
+        updateFile() {
+            const formData = new FormData();
+            // add disk name
+            formData.append('disk', this.selectedDisk);
+            // add path
+            formData.append('path', this.selectedItem.dirname);
+            // add updated file
+            formData.append('file', new Blob([this.code]), this.selectedItem.basename);
 
-      this.$store.dispatch('fm/updateFile', formData).then((response) => {
-        // if file updated successfully
-        if (response.data.result.status === 'success') {
-          // close modal window
-          this.hideModal();
-        }
-      });
+            this.$store.dispatch('fm/updateFile', formData).then((response) => {
+                // if file updated successfully
+                if (response.data.result.status === 'success') {
+                    // close modal window
+                    this.hideModal();
+                }
+            });
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss">
-    @import 'http://github.com/~codemirror/lib/codemirror.css';
-    @import 'http://github.com/~codemirror/theme/blackboard.css';
+@import 'http://github.com/~codemirror/lib/codemirror.css';
+@import 'http://github.com/~codemirror/theme/blackboard.css';
 
-    .fm-modal-text-edit {
-        .modal-body {
-            padding: 0;
-        }
+.fm-modal-text-edit {
+    .modal-body {
+        padding: 0;
     }
+}
 </style>
diff --git a/src/components/modals/views/Unzip.vue b/src/components/modals/views/Unzip.vue
index c768d44..a5b5b2b 100644
--- a/src/components/modals/views/Unzip.vue
+++ b/src/components/modals/views/Unzip.vue
@@ -1,63 +1,42 @@
 <template>
-    <div class="modal-content fm-modal-unzip">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.unzip.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <div class="d-flex justify-content-between">
-                <div>
-                    <strong>{{ lang.modal.unzip.fieldRadioName }}</strong>
-                </div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input"
-                           id="unzipRadio1"
-                           type="radio"
-                           name="uploadOptions"
-                           value="0"
-                           checked
-                           v-model.number="createFolder">
-                    <label class="form-check-label" for="unzipRadio1">
-                        {{ lang.modal.unzip.fieldRadio1 }}
-                    </label>
-                </div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input"
-                           id="unzipRadio2"
-                           type="radio"
-                           name="uploadOptions"
-                           value="1"
-                           checked
-                           v-model.number="createFolder">
-                    <label class="form-check-label" for="unzipRadio2">
-                        {{ lang.modal.unzip.fieldRadio2 }}
-                    </label>
-                </div>
+<el-dialog :title="lang.modal.unzip.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <div class="d-flex justify-content-between">
+            <div>
+                <strong>{{ lang.modal.unzip.fieldRadioName }}</strong>
             </div>
-            <hr>
-            <div v-if="createFolder" class="form-group">
-                <label for="fm-folder-name">{{ lang.modal.unzip.fieldName }}</label>
-                <input type="text" class="form-control" id="fm-folder-name"
-                       v-focus
-                       v-bind:class="{'is-invalid': directoryExist}"
-                       v-model="directoryName"
-                       v-on:keyup="validateDirName">
-                <div class="invalid-feedback" v-show="directoryExist">
-                    {{ lang.modal.unzip.fieldFeedback }}
-                </div>
+            <div class="form-check form-check-inline">
+                <el-input class="form-check-input" id="unzipRadio1" type="radio" name="uploadOptions" value="0" checked v-model.number="createFolder"></el-input>
+                <label class="form-check-label" for="unzipRadio1">
+                    {{ lang.modal.unzip.fieldRadio1 }}
+                </label>
+            </div>
+            <div class="form-check form-check-inline">
+                <el-input class="form-check-input" id="unzipRadio2" type="radio" name="uploadOptions" value="1" checked v-model.number="createFolder"></el-input>
+                <label class="form-check-label" for="unzipRadio2">
+                    {{ lang.modal.unzip.fieldRadio2 }}
+                </label>
             </div>
-            <span v-else class="text-danger">{{ lang.modal.unzip.warning }}</span>
         </div>
-        <div class="modal-footer">
-            <button class="btn btn-info"
-                    v-bind:disabled="!submitActive"
-                    v-on:click="unpackArchive">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
+        <hr>
+        <div v-if="createFolder" class="form-group">
+            <label for="fm-folder-name">{{ lang.modal.unzip.fieldName }}</label>
+            <el-input type="text" class="form-control" id="fm-folder-name" v-focus v-bind:class="{'is-invalid': directoryExist}" v-model="directoryName" v-on:keyup="validateDirName"></el-input>
+            <div class="invalid-feedback" v-show="directoryExist">
+                {{ lang.modal.unzip.fieldFeedback }}
+            </div>
         </div>
+        <span v-else class="text-danger">{{ lang.modal.unzip.warning }}</span>
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button class="btn btn-info" v-bind:disabled="!submitActive" v-on:click="unpackArchive">{{ lang.btn.submit }}
+        </el-button>
+        <el-button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -65,53 +44,55 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Unzip',
-  mixins: [modal, translate],
-  data() {
-    return {
-      createFolder: 0,
+    name: 'Unzip',
+    props: ['showModal'],
 
-      // name for new directory
-      directoryName: '',
+    mixins: [modal, translate],
+    data() {
+        return {
+            createFolder: 0,
 
-      // directory exist
-      directoryExist: false,
-    };
-  },
-  computed: {
-    /**
-     * Submit button - active or no
-     * @returns {string|boolean}
-     */
-    submitActive() {
-      if (this.createFolder) {
-        return this.directoryName && !this.directoryExist;
-      }
+            // name for new directory
+            directoryName: '',
 
-      return true;
+            // directory exist
+            directoryExist: false,
+        };
     },
-  },
-  methods: {
-    /**
-     * Check the folder name if it exists or not.
-     */
-    validateDirName() {
-      if (this.directoryName) {
-        this.directoryExist = this.$store.getters[`fm/${this.activeManager}/directoryExist`](this.directoryName);
-      } else {
-        this.directoryExist = false;
-      }
+    computed: {
+        /**
+         * Submit button - active or no
+         * @returns {string|boolean}
+         */
+        submitActive() {
+            if (this.createFolder) {
+                return this.directoryName && !this.directoryExist;
+            }
+
+            return true;
+        },
     },
+    methods: {
+        /**
+         * Check the folder name if it exists or not.
+         */
+        validateDirName() {
+            if (this.directoryName) {
+                this.directoryExist = this.$store.getters[`fm/${this.activeManager}/directoryExist`](this.directoryName);
+            } else {
+                this.directoryExist = false;
+            }
+        },
 
-    /**
-     * Unpack selected archive
-     */
-    unpackArchive() {
-      this.$store.dispatch('fm/unzip', this.createFolder ? this.directoryName : null).then(() => {
-        // close modal window
-        this.hideModal();
-      });
+        /**
+         * Unpack selected archive
+         */
+        unpackArchive() {
+            this.$store.dispatch('fm/unzip', this.createFolder ? this.directoryName : null).then(() => {
+                // close modal window
+                this.hideModal();
+            });
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/modals/views/Upload.vue b/src/components/modals/views/Upload.vue
index 603333d..f1137ad 100644
--- a/src/components/modals/views/Upload.vue
+++ b/src/components/modals/views/Upload.vue
@@ -1,96 +1,74 @@
 <template>
-    <div class="modal-content fm-modal-upload">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.upload.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
+<el-dialog :title="lang.modal.upload.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <div class="fm-btn-wrapper" v-show="!progressBar">
+            <!--el-button type="button" class="btn btn-secondary btn-block">
+                {{ lang.btn.uploadSelect }}
+            </el-button-->
+            <input type="file" multiple name="myfile" v-on:change="selectFiles($event)">
         </div>
-        <div class="modal-body">
-            <div class="fm-btn-wrapper" v-show="!progressBar">
-                <button type="button" class="btn btn-secondary btn-block">
-                    {{ lang.btn.uploadSelect }}
-                </button>
-                <input type="file" multiple name="myfile" v-on:change="selectFiles($event)">
-            </div>
-            <div class="fm-upload-list" v-if="countFiles">
-                <div class="d-flex justify-content-between"
-                     v-for="(item, index) in newFiles"
-                     v-bind:key="index">
-                    <div class="w-75 text-truncate">
-                        <i class="far" v-bind:class="mimeToIcon(item.type)"/>
-                        {{ item.name }}
-                    </div>
-                    <div class="text-right">
-                        {{ bytesToHuman(item.size) }}
-                    </div>
+        <div class="fm-upload-list" v-if="countFiles">
+            <div class="d-flex justify-content-between" v-for="(item, index) in newFiles" v-bind:key="index">
+                <div class="w-75 text-truncate">
+                    <i class="far" v-bind:class="mimeToIcon(item.type)" />
+                    {{ item.name }}
+                </div>
+                <div class="text-right">
+                    {{ bytesToHuman(item.size) }}
                 </div>
-                <hr>
-                <div class="d-flex justify-content-between">
-                    <div>
-                        <strong>{{ lang.modal.upload.selected }}</strong>
-                        {{ newFiles.length }}
-                    </div>
-                    <div class="text-right">
-                        <strong>{{ lang.modal.upload.size }}</strong>
-                        {{ allFilesSize }}
-                    </div>
+            </div>
+            <hr>
+            <div class="d-flex justify-content-between">
+                <div>
+                    <strong>{{ lang.modal.upload.selected }}</strong>
+                    {{ newFiles.length }}
                 </div>
-                <hr>
-                <div class="d-flex justify-content-between">
-                    <div>
-                        <strong>{{ lang.modal.upload.ifExist }}</strong>
-                    </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input"
-                               id="uploadRadio1"
-                               type="radio"
-                               name="uploadOptions"
-                               value="0"
-                               checked
-                               v-model="overwrite">
-                        <label class="form-check-label" for="uploadRadio1">
-                            {{ lang.modal.upload.skip }}
-                        </label>
-                    </div>
-                    <div class="form-check form-check-inline">
-                        <input class="form-check-input"
-                               id="uploadRadio2"
-                               type="radio"
-                               name="uploadOptions"
-                               value="1"
-                               checked
-                               v-model="overwrite">
-                        <label class="form-check-label" for="uploadRadio2">
-                            {{ lang.modal.upload.overwrite }}
-                        </label>
-                    </div>
+                <div class="text-right">
+                    <strong>{{ lang.modal.upload.size }}</strong>
+                    {{ allFilesSize }}
                 </div>
-                <hr>
             </div>
-            <div v-else><p>{{ lang.modal.upload.noSelected }}</p></div>
-            <div class="fm-upload-info">
-                <!-- Progress Bar -->
-                <div class="progress" v-show="countFiles">
-                    <div class="progress-bar progress-bar-striped bg-info" role="progressbar"
-                         v-bind:aria-valuenow="progressBar"
-                         aria-valuemin="0"
-                         aria-valuemax="100"
-                         v-bind:style="{width: progressBar + '%' }">
-                        {{ progressBar }}%
-                    </div>
+            <hr>
+            <div class="d-flex justify-content-between">
+                <div>
+                    <strong>{{ lang.modal.upload.ifExist }}</strong>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" id="uploadRadio1" type="radio" name="uploadOptions" value="0" checked v-model="overwrite">
+                    <label class="form-check-label" for="uploadRadio1">
+                        {{ lang.modal.upload.skip }}
+                    </label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" id="uploadRadio2" type="radio" name="uploadOptions" value="1" checked v-model="overwrite">
+                    <label class="form-check-label" for="uploadRadio2">
+                        {{ lang.modal.upload.overwrite }}
+                    </label>
                 </div>
             </div>
+            <hr>
         </div>
-        <div class="modal-footer">
-            <button class="btn"
-                    v-bind:class="[countFiles ? 'btn-info' : 'btn-light']"
-                    v-bind:disabled="!countFiles"
-                    v-on:click="uploadFiles">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal()">{{ lang.btn.cancel }}</button>
+        <div v-else>
+            <p>{{ lang.modal.upload.noSelected }}</p>
         </div>
+        <div class="fm-upload-info">
+            <!-- Progress Bar -->
+            <div class="progress" v-show="countFiles">
+                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" v-bind:aria-valuenow="progressBar" aria-valuemin="0" aria-valuemax="100" v-bind:style="{width: progressBar + '%' }">
+                    {{ progressBar }}%
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button class="btn" v-bind:class="[countFiles ? 'btn-info' : 'btn-light']" v-bind:disabled="!countFiles" v-on:click="uploadFiles">{{ lang.btn.submit }}
+        </el-button>
+        <el-button class="btn btn-light" v-on:click="hideModal()">{{ lang.btn.cancel }}</el-button>
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -99,118 +77,119 @@ import translate from '../../../mixins/translate';
 import helper from '../../../mixins/helper';
 
 export default {
-  name: 'Upload',
-  mixins: [modal, translate, helper],
-  data() {
-    return {
-      // selected files
-      newFiles: [],
-
-      // overwrite if exists
-      overwrite: 0,
-    };
-  },
-  computed: {
-
-    /**
-     * Progress bar value - %
-     * @returns {number}
-     */
-    progressBar() {
-      return this.$store.state.fm.messages.actionProgress;
+    name: 'Upload',
+    props: ['showModal'],
+    mixins: [modal, translate, helper],
+    data() {
+        return {
+            // selected files
+            newFiles: [],
+
+            // overwrite if exists
+            overwrite: 0,
+        };
     },
+    computed: {
+
+        /**
+         * Progress bar value - %
+         * @returns {number}
+         */
+        progressBar() {
+            return this.$store.state.fm.messages.actionProgress;
+        },
+
+        /**
+         * Count of files selected for upload
+         * @returns {number}
+         */
+        countFiles() {
+            return this.newFiles.length;
+        },
+
+        /**
+         * Calculate the size of all files
+         * @returns {*|string}
+         */
+        allFilesSize() {
+            let size = 0;
+
+            for (let i = 0; i < this.newFiles.length; i += 1) {
+                size += this.newFiles[i].size;
+            }
+
+            return this.bytesToHuman(size);
+        },
 
-    /**
-     * Count of files selected for upload
-     * @returns {number}
-     */
-    countFiles() {
-      return this.newFiles.length;
     },
+    methods: {
+        /**
+         * Select file or files
+         * @param event
+         */
+        selectFiles(event) {
+            // files selected?
+            if (event.target.files.length === 0) {
+                // no file selected
+                this.newFiles = [];
+            } else {
+                // we have file or files
+                this.newFiles = event.target.files;
+            }
+        },
+
+        /**
+         * Upload new files
+         */
+        uploadFiles() {
+            // if files exists
+            if (this.countFiles) {
+                // upload files
+                this.$store.dispatch('fm/upload', {
+                    files: this.newFiles,
+                    overwrite: this.overwrite,
+                }).then((response) => {
+                    // if upload is successful
+                    if (response.data.result.status === 'success') {
+                        // close modal window
+                        this.hideModal();
+                    }
+                });
+            }
+        },
+    },
+};
+</script>
 
-    /**
-     * Calculate the size of all files
-     * @returns {*|string}
-     */
-    allFilesSize() {
-      let size = 0;
+<style lang="scss">
+.fm-modal-upload {
 
-      for (let i = 0; i < this.newFiles.length; i += 1) {
-        size += this.newFiles[i].size;
-      }
+    .fm-btn-wrapper {
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 6px;
+        margin-bottom: 0.6rem;
+    }
 
-      return this.bytesToHuman(size);
-    },
+    .fm-btn-wrapper input[type=file] {
+        font-size: 100px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        cursor: pointer;
+    }
 
-  },
-  methods: {
-    /**
-     * Select file or files
-     * @param event
-     */
-    selectFiles(event) {
-      // files selected?
-      if (event.target.files.length === 0) {
-        // no file selected
-        this.newFiles = [];
-      } else {
-        // we have file or files
-        this.newFiles = event.target.files;
-      }
-    },
+    .fm-upload-list .far {
+        padding-right: 0.5rem;
+    }
 
-    /**
-     * Upload new files
-     */
-    uploadFiles() {
-      // if files exists
-      if (this.countFiles) {
-        // upload files
-        this.$store.dispatch('fm/upload', {
-          files: this.newFiles,
-          overwrite: this.overwrite,
-        }).then((response) => {
-          // if upload is successful
-          if (response.data.result.status === 'success') {
-            // close modal window
-            this.hideModal();
-          }
-        });
-      }
-    },
-  },
-};
-</script>
+    .fm-upload-list .form-check-inline {
+        margin-right: 0;
+    }
 
-<style lang="scss">
-    .fm-modal-upload {
-
-        .fm-btn-wrapper {
-            position: relative;
-            overflow: hidden;
-            padding-bottom: 6px;
-            margin-bottom: 0.6rem;
-        }
-
-        .fm-btn-wrapper input[type=file] {
-            font-size: 100px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            opacity: 0;
-            cursor: pointer;
-        }
-
-        .fm-upload-list .far {
-            padding-right: 0.5rem;
-        }
-
-        .fm-upload-list .form-check-inline {
-            margin-right: 0;
-        }
-
-        .fm-upload-info > .progress {
-            margin-bottom: 1rem;
-        }
+    .fm-upload-info>.progress {
+        margin-bottom: 1rem;
     }
+}
 </style>
diff --git a/src/components/modals/views/VideoPlayer.vue b/src/components/modals/views/VideoPlayer.vue
index 62194b2..d50b314 100644
--- a/src/components/modals/views/VideoPlayer.vue
+++ b/src/components/modals/views/VideoPlayer.vue
@@ -1,17 +1,11 @@
 <template>
-    <div class="modal-content fm-modal-video-player">
-        <div class="modal-header">
-            <h5 class="modal-title w-75 text-truncate">
-                {{ lang.modal.videoPlayer.title }} <small class="text-muted pl-3">{{ videoFile.basename }}</small>
-            </h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <video ref="fmVideo" controls/>
-        </div>
+<el-dialog :title="lang.modal.videoPlayer.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+
+    <div class="modal-body">
+        <video ref="fmVideo" controls />
     </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -20,53 +14,52 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Player',
-  mixins: [modal, translate],
-  data() {
-    return {
-      player: {},
-    };
-  },
-  mounted() {
-    // initiate video player
-    this.player = new Plyr(this.$refs.fmVideo);
-    // load source
-    this.player.source = {
-      type: 'video',
-      title: this.videoFile.filename,
-      sources: [{
-        src: `${this.$store.getters['fm/settings/baseUrl']}stream-file?disk=${this.selectedDisk}&path=${encodeURIComponent(this.videoFile.path)}`,
-        type: `audio/${this.videoFile.extension}`,
-      }],
-    };
-  },
-  beforeDestroy() {
-    this.player.destroy();
-  },
-  computed: {
-    /**
-     * Selected disk
-     * @returns {*}
-     */
-    selectedDisk() {
-      return this.$store.getters['fm/selectedDisk'];
+    name: 'Player',
+    props: ['showModal'],
+
+    mixins: [modal, translate],
+    data() {
+        return {
+            player: {},
+        };
     },
+    mounted() {
+        // initiate video player
+        this.player = new Plyr(this.$refs.fmVideo);
+        // load source
+        this.player.source = {
+            type: 'video',
+            title: this.videoFile.filename,
+            sources: [{
+                src: `${this.$store.getters['fm/settings/baseUrl']}stream-file?disk=${this.selectedDisk}&path=${encodeURIComponent(this.videoFile.path)}`,
+                type: `audio/${this.videoFile.extension}`,
+            }],
+        };
+    },
+    beforeDestroy() {
+        this.player.destroy();
+    },
+    computed: {
+        /**
+         * Selected disk
+         * @returns {*}
+         */
+        selectedDisk() {
+            return this.$store.getters['fm/selectedDisk'];
+        },
 
-    /**
-     * Video file
-     * @returns {*}
-     */
-    videoFile() {
-      return this.$store.getters['fm/selectedItems'][0];
+        /**
+         * Video file
+         * @returns {*}
+         */
+        videoFile() {
+            return this.$store.getters['fm/selectedItems'][0];
+        },
     },
-  },
-  methods: {
-  },
+    methods: {},
 };
 </script>
 
 <style lang="scss">
-    .fm-modal-video-player {
-
-    }
+.fm-modal-video-player {}
 </style>
diff --git a/src/components/modals/views/Zip.vue b/src/components/modals/views/Zip.vue
index 06e6c09..ce91470 100644
--- a/src/components/modals/views/Zip.vue
+++ b/src/components/modals/views/Zip.vue
@@ -1,37 +1,27 @@
 <template>
-    <div class="modal-content fm-modal-zip">
-        <div class="modal-header">
-            <h5 class="modal-title">{{ lang.modal.zip.title }}</h5>
-            <button type="button" class="close" aria-label="Close" v-on:click="hideModal">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        <div class="modal-body">
-            <label for="fm-zip-name">{{ lang.modal.zip.fieldName }}</label>
-            <div class="input-group mb-3">
-                <input type="text" class="form-control" id="fm-zip-name"
-                       v-focus
-                       v-bind:class="{'is-invalid': archiveExist}"
-                       v-model="archiveName"
-                       v-on:keyup="validateArchiveName">
-                <div class="input-group-append">
-                    <span class="input-group-text">.zip</span>
-                </div>
-                <div class="invalid-feedback" v-show="archiveExist">
-                    {{ lang.modal.zip.fieldFeedback }}
-                </div>
+<el-dialog :title="lang.modal.zip.title" ref="fmModal" :visible.sync="showModal" width="30%" :before-close="hideModal">
+    <div class="modal-body">
+        <label for="fm-zip-name">{{ lang.modal.zip.fieldName }}</label>
+        <div class="input-group mb-3">
+            <input type="text" class="form-control" id="fm-zip-name" v-focus v-bind:class="{'is-invalid': archiveExist}" v-model="archiveName" v-on:keyup="validateArchiveName">
+            <div class="input-group-append">
+                <span class="input-group-text">.zip</span>
+            </div>
+            <div class="invalid-feedback" v-show="archiveExist">
+                {{ lang.modal.zip.fieldFeedback }}
             </div>
-            <hr>
-            <selected-file-list/>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-info"
-                    v-bind:disabled="!submitActive"
-                    v-on:click="createArchive">{{ lang.btn.submit }}
-            </button>
-            <button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</button>
         </div>
+        <hr>
+        <selected-file-list />
     </div>
+
+    <div slot="footer" class="dialog-footer">
+        <el-button class="btn btn-info" v-bind:disabled="!submitActive" v-on:click="createArchive">{{ lang.btn.submit }}
+        </el-button>
+        <el-button class="btn btn-light" v-on:click="hideModal">{{ lang.btn.cancel }}</el-button>
+    </div>
+
+</el-dialog>
 </template>
 
 <script>
@@ -40,48 +30,51 @@ import modal from '../mixins/modal';
 import translate from '../../../mixins/translate';
 
 export default {
-  name: 'Zip',
-  mixins: [modal, translate],
-  components: { SelectedFileList },
-  data() {
-    return {
-      // name for new archive
-      archiveName: '',
+    name: 'Zip',
+    props: ['showModal'],
+    mixins: [modal, translate],
+    components: {
+        SelectedFileList
+    },
+    data() {
+        return {
+            // name for new archive
+            archiveName: '',
 
-      // archive exist
-      archiveExist: false,
-    };
-  },
-  computed: {
-    /**
-     * Submit button - active or no
-     * @returns {string|boolean}
-     */
-    submitActive() {
-      return this.archiveName && !this.archiveExist;
+            // archive exist
+            archiveExist: false,
+        };
     },
-  },
-  methods: {
-    /**
-     * Check the archive name if it exists or not.
-     */
-    validateArchiveName() {
-      if (this.archiveName) {
-        this.archiveExist = this.$store.getters[`fm/${this.activeManager}/fileExist`](`${this.archiveName}.zip`);
-      } else {
-        this.archiveExist = false;
-      }
+    computed: {
+        /**
+         * Submit button - active or no
+         * @returns {string|boolean}
+         */
+        submitActive() {
+            return this.archiveName && !this.archiveExist;
+        },
     },
+    methods: {
+        /**
+         * Check the archive name if it exists or not.
+         */
+        validateArchiveName() {
+            if (this.archiveName) {
+                this.archiveExist = this.$store.getters[`fm/${this.activeManager}/fileExist`](`${this.archiveName}.zip`);
+            } else {
+                this.archiveExist = false;
+            }
+        },
 
-    /**
-     * Create new archive
-     */
-    createArchive() {
-      this.$store.dispatch('fm/zip', `${this.archiveName}.zip`).then(() => {
-        // close modal window
-        this.hideModal();
-      });
+        /**
+         * Create new archive
+         */
+        createArchive() {
+            this.$store.dispatch('fm/zip', `${this.archiveName}.zip`).then(() => {
+                // close modal window
+                this.hideModal();
+            });
+        },
     },
-  },
 };
 </script>
diff --git a/src/components/tree/Branch.vue b/src/components/tree/Branch.vue
index 4b6273f..e6b7ab1 100644
--- a/src/components/tree/Branch.vue
+++ b/src/components/tree/Branch.vue
@@ -14,7 +14,7 @@
                     ? 'fa-minus-square'
                     : 'fa-plus-square'
                    ]"/>
-                <i class="fas fa-minus fa-xs" v-else/>
+                <i class="far fa-minus fa-xs" v-else/>
                 {{ directory.basename }}
             </p>
 
@@ -92,6 +92,9 @@ export default {
 </script>
 
 <style lang="scss">
+  .list-unstyled{
+    list-style: none;
+  }
     .fm-tree-branch {
         display: table;
         width: 100%;
@@ -109,7 +112,7 @@ export default {
             }
         }
 
-        .fas.fa-minus{
+        .far.fa-minus{
             padding-left: 0.1rem;
             padding-right: 0.6rem;
         }

From cd80939b857aa342f7f82289b8a15dd284e6f0f3 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Thu, 4 Feb 2021 12:28:16 -0600
Subject: [PATCH 2/9] Update README.md

---
 README.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 034da5f..2c8410e 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,7 @@
-# laravel-file-manager (Frontend)
+# laravel-file-manager (Vuejs with Element design)
 
-> File manager for Laravel - Frontend - Vue.js 
+this repo is foked from https://github.com/alexusmai/vue-laravel-file-manager the purpose is replace bootstrap design with element design
 
-> Backend - Laravel 5 package - [alexusmai/laravel-file-manager](https://github.com/alexusmai/laravel-file-manager)
 
 ![Laravel File Manager](https://raw.github.com/alexusmai/vue-laravel-file-manager/master/src/assets/laravel-file-manager.gif?raw=true)
 
@@ -15,7 +14,7 @@ Now you can overwrite default settings using props
 
 ### NPM
 ```
-$ npm install laravel-file-manager --save
+$ npm install laravel-file-manager-element --save
 ```
 
 ## Usage
@@ -142,4 +141,4 @@ MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
 MIX_LFM_CSRF_TOKEN=OFF
 ```
 
-Warning! Package use axios (Promise) - use babel-polyfill for ie11
\ No newline at end of file
+Warning! Package use axios (Promise) - use babel-polyfill for ie11

From 314526c403ff98b829cadd36249375c1d96611c9 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Thu, 4 Feb 2021 12:33:20 -0600
Subject: [PATCH 3/9] update package.json

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 91cd09c..7fb65b5 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "laravel-file-manager",
+  "name": "laravel-file-manager-element",
   "version": "2.5.0",
-  "description": "File manager for Laravel",
+  "description": "File manager for Laravel with Vue.js and Element Style",
   "keywords": [
     "laravel",
     "file",
     "manager"
   ],
-  "author": "Aleksandr Manekin <alexusmai@gmail.com>",
+  "author": "Victor Samayoa <vhs1092@gmail.com>",
   "private": false,
   "license": "MIT",
   "main": "src/init.js",

From ce53746b4ce7ad86eab3be8c193e9a60dd6220b3 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Fri, 5 Feb 2021 15:36:07 -0600
Subject: [PATCH 4/9] Add action to select documents and retrieve their data

---
 package.json                         |  5 +++-
 src/components/manager/GridView.vue  |  2 +-
 src/components/manager/Manager.vue   |  9 +++++--
 src/components/manager/TableView.vue | 37 +++++++++++++++++++++++++---
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 7fb65b5..509868f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager-element",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "File manager for Laravel with Vue.js and Element Style",
   "keywords": [
     "laravel",
@@ -11,6 +11,9 @@
   "private": false,
   "license": "MIT",
   "main": "src/init.js",
+  "repository": {
+    "url": "git@github.com:vhs1092/vue-laravel-file-manager.git"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
diff --git a/src/components/manager/GridView.vue b/src/components/manager/GridView.vue
index 42462bc..6407af3 100644
--- a/src/components/manager/GridView.vue
+++ b/src/components/manager/GridView.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="fm-grid">
-        <div class="d-flex align-content-start flex-wrap">
+        <div class="d-flex align-content-start flex-wrap" style="display: flex; align-content: start; flex-wrap: wrap;">
             <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
                 <div class="fm-item-icon">
                     <i class="far fa-level-up-alt fa-5x pb-2"/>
diff --git a/src/components/manager/Manager.vue b/src/components/manager/Manager.vue
index ef03639..4da4209 100644
--- a/src/components/manager/Manager.vue
+++ b/src/components/manager/Manager.vue
@@ -3,7 +3,7 @@
         <!--disk-list v-bind:manager="manager"/-->
         <breadcrumb v-bind:manager="manager"/>
         <div class="fm-content-body">
-            <table-view v-if="viewType === 'table'" v-bind:manager="manager"/>
+            <table-view v-if="viewType === 'table'" @attachFilesToEmail="attachFilesToEmail" v-bind:manager="manager"/>
             <grid-view v-else v-bind:manager="manager"/>
         </div>
     </div>
@@ -25,7 +25,7 @@ export default {
     GridView,
   },
   props: {
-    manager: { type: String, required: true },
+    manager: { type: String, required: true }
   },
   computed: {
     /**
@@ -36,6 +36,11 @@ export default {
       return this.$store.state.fm[this.manager].viewType;
     },
   },
+  methods:{
+    attachFilesToEmail(data){
+      this.$emit('attachFilesToEmail', data);
+    }
+  }
 };
 </script>
 
diff --git a/src/components/manager/TableView.vue b/src/components/manager/TableView.vue
index a1b9811..926a27f 100644
--- a/src/components/manager/TableView.vue
+++ b/src/components/manager/TableView.vue
@@ -3,6 +3,7 @@
         <table class="table table-sm">
             <thead>
                 <tr>
+                    <th class="w-auto" v-if="files.length > 0"></th>
                     <th class="w-65" v-on:click="sortBy('name')">
                         {{ lang.manager.table.name }}
                         <template v-if="sortSettings.field === 'name'">
@@ -42,6 +43,7 @@
                 </tr>
             </thead>
             <tbody>
+
                 <tr v-if="!isRootPath">
                     <td colspan="4" class="fm-content-item" v-on:click="levelUp">
                         <i class="far fa-level-up-alt"/>
@@ -69,6 +71,8 @@
                     v-on:click="selectItem('files', file.path, $event)"
                     v-on:dblclick="selectAction(file.path, file.extension)"
                     v-on:contextmenu.prevent="contextMenu(file, $event)">
+                    <td><el-checkbox @change.native="confirm_send_files(file)"
+                        align="center"></el-checkbox></td>
                     <td class="fm-content-item unselectable"
                         v-bind:class="(acl && file.acl === 0) ? 'text-hidden' : ''">
                         <i class="far" v-bind:class="extensionToIcon(file.extension)"/>
@@ -91,12 +95,12 @@
 import translate from '../../mixins/translate';
 import helper from '../../mixins/helper';
 import managerHelper from './mixins/manager';
-
+import EventBus from '../../eventBus';
 export default {
   name: 'table-view',
   mixins: [translate, helper, managerHelper],
-  props: {
-    manager: { type: String, required: true },
+  props:{
+    manager: { type: String, required: true }
   },
   computed: {
     /**
@@ -107,6 +111,12 @@ export default {
       return this.$store.state.fm[this.manager].sort;
     },
   },
+  data() {
+    return {
+        filesToSend:[],
+        filesToAttach:[]
+    };
+  },
   methods: {
     /**
      * Sort by field
@@ -115,6 +125,27 @@ export default {
     sortBy(field) {
       this.$store.dispatch(`fm/${this.manager}/sortBy`, { field, direction: null });
     },
+    /***
+     * Files to send through email
+     */
+    confirm_send_files(file){
+
+        const result = this.filesToSend.find( ({ file_path }) => file_path === file.path );
+        if(result !== undefined){
+            this.filesToSend = this.filesToSend.filter(function(el) { return el.file_path != file.path; });
+        }else{
+        
+            let data = {};
+            data.file_name = file.basename;
+            data.file_path = file.path;
+            data.url = file.path;
+            data.folder_and_file_path = file.path;
+            data.name = file.basename;
+            this.filesToSend.push(data);
+        }
+
+        this.$emit('attachFilesToEmail', this.filesToSend);
+    }
   },
 };
 </script>

From f52c81eba2badbb2e98a8d367be4a153d246a2d3 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Fri, 5 Feb 2021 16:05:49 -0600
Subject: [PATCH 5/9] Add action to select documents and retrieve their data

---
 package.json        |  2 +-
 src/FileManager.vue | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 509868f..70f2c8d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager-element",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "File manager for Laravel with Vue.js and Element Style",
   "keywords": [
     "laravel",
diff --git a/src/FileManager.vue b/src/FileManager.vue
index 9fa59f9..2dcc7ee 100644
--- a/src/FileManager.vue
+++ b/src/FileManager.vue
@@ -7,7 +7,7 @@
       <context-menu/>
       <modal v-if="showModal"/>
       <template v-if="windowsConfig === 1">
-        <left-manager class="col" manager="left"/>
+        <left-manager @attachFilesToEmail="attachFilesToEmail" class="col" manager="left"/>
       </template>
       <template v-else-if="windowsConfig === 2">
         <el-row style="width:100%">
@@ -15,17 +15,17 @@
         <folder-tree/>
           </el-col>
           <el-col :span="18">
-        <left-manager manager="left"/>
+        <left-manager @attachFilesToEmail="attachFilesToEmail" manager="left"/>
           </el-col>
         </el-row>
       </template>
       <template v-else-if="windowsConfig === 3">
-        <left-manager class="col-12 col-sm-6"
+        <left-manager @attachFilesToEmail="attachFilesToEmail" class="col-12 col-sm-6"
                       manager="left"
                       v-on:click.native="selectManager('left')"
                       v-on:contextmenu.native="selectManager('left')">
         </left-manager>
-        <right-manager class="col-12 col-sm-6"
+        <right-manager @attachFilesToEmail="attachFilesToEmail" class="col-12 col-sm-6"
                        manager="right"
                        v-on:click.native="selectManager('right')"
                        v-on:contextmenu.native="selectManager('right')">
@@ -222,6 +222,9 @@ export default {
         this.$store.commit('fm/setActiveManager', managerName);
       }
     },
+    attachFilesToEmail(data){
+      this.$emit('attachFilesToEmail', data);
+    }
   },
 };
 </script>

From 291694a64583750edf971d1c4c9651beaa403bfc Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Fri, 5 Feb 2021 16:06:43 -0600
Subject: [PATCH 6/9] Add action to select documents and retrieve their data

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 70f2c8d..33cc9ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager-element",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "File manager for Laravel with Vue.js and Element Style",
   "keywords": [
     "laravel",

From c95d4a443e78687084c7191cc8f028ce2c739bf8 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Mon, 8 Feb 2021 11:10:57 -0600
Subject: [PATCH 7/9] Show or hide admin buttons with prop

---
 README.md                        | 15 +++++++++++++--
 package.json                     |  2 +-
 src/FileManager.vue              |  6 +++---
 src/components/blocks/Navbar.vue | 15 ++++++++-------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 2c8410e..9e80b21 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,9 @@ this repo is foked from https://github.com/alexusmai/vue-laravel-file-manager th
 
 ![Laravel File Manager](https://raw.github.com/alexusmai/vue-laravel-file-manager/master/src/assets/laravel-file-manager.gif?raw=true)
 
-# v 2.4.0
+# v 2.5.4
 
-Now you can overwrite default settings using props
+Now you can overwrite default settings using props and show or hide actions
 
 
 ## Installation
@@ -19,6 +19,17 @@ $ npm install laravel-file-manager-element --save
 
 ## Usage
 
+** To Show Admin Buttons (copy, paste, file upload, delete)
+Pass object settings with property settings for instance
+
+```
+<file-manager :settings="fileManagerSettings"></file-manager>
+
+fileManagerSettings: {
+            showAdminButtons: true
+},
+```
+
 **IF** your App using Vuex store
 
 ```
diff --git a/package.json b/package.json
index 33cc9ec..b6ca9ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager-element",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "File manager for Laravel with Vue.js and Element Style",
   "keywords": [
     "laravel",
diff --git a/src/FileManager.vue b/src/FileManager.vue
index 2dcc7ee..3cd3f3e 100644
--- a/src/FileManager.vue
+++ b/src/FileManager.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="fm d-flex flex-column"
        v-bind:class="{ 'fm-full-screen': fullScreen }">
-    <navbar/>
+    <navbar :showAdminButtons="settings.showAdminButtons" />
     <div class="fm-body">
       <notification/>
-      <context-menu/>
+      <context-menu v-if="settings.showAdminButtons"/>
       <modal v-if="showModal"/>
       <template v-if="windowsConfig === 1">
         <left-manager @attachFilesToEmail="attachFilesToEmail" class="col" manager="left"/>
@@ -76,7 +76,7 @@ export default {
       default() {
         return {};
       },
-    },
+    }
   },
   created() {
     // manual settings
diff --git a/src/components/blocks/Navbar.vue b/src/components/blocks/Navbar.vue
index 00b4f7a..0509b07 100644
--- a/src/components/blocks/Navbar.vue
+++ b/src/components/blocks/Navbar.vue
@@ -22,7 +22,7 @@
                         <i class="far fa-sync-alt"/>
                     </el-button>
                 </el-button-group>
-                <el-button-group>
+                <el-button-group v-if="showAdminButtons">
                     <el-button type="primary"
                             v-on:click="showModal('NewFile')"
                             v-bind:title="lang.btn.file">
@@ -52,7 +52,7 @@
                         <i class="far fa-trash-alt"/>
                     </el-button>
                 </el-button-group>
-                <el-button-group>
+                <el-button-group v-if="showAdminButtons">
                     <el-button type="primary"
                             v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.copy"
@@ -72,7 +72,7 @@
                         <i class="far fa-paste"/>
                     </el-button>
                 </el-button-group>
-                <el-button-group>
+                <el-button-group v-if="showAdminButtons">
                     <el-button type="primary"
                             v-bind:title="lang.btn.hidden"
                             v-on:click="toggleHidden">
@@ -88,12 +88,12 @@
                             v-bind:title="lang.btn.table">
                         <i class="far fa-th-list"/>
                     </el-button>
-                    <el-button role="button" type="primary"
+                    <!--el-button role="button" type="primary"
                             v-bind:class="[viewType === 'grid' ? 'active' : '']"
                             v-on:click="selectView('grid')"
                             v-bind:title="lang.btn.grid">
                         <i class="far fa-th"/>
-                    </el-button>
+                    </el-button-->
                 </el-button-group>
                 <el-button-group>
                     <el-button type="primary"
@@ -103,13 +103,13 @@
                         <i class="far fa-expand-arrows-alt"/>
                     </el-button>
                 </el-button-group>
-                <el-button-group>
+                <!--el-button-group>
                     <el-button type="primary"
                             v-bind:title="lang.btn.about"
                             v-on:click="showModal('About')">
                         <i class="far fa-question"/>
                     </el-button>
-                </el-button-group>
+                </el-button-group-->
             </el-col>
         </el-row>
     </div>
@@ -121,6 +121,7 @@ import EventBus from '../../eventBus';
 
 export default {
   mixins: [translate],
+  props:['showAdminButtons'],
   computed: {
     /**
      * Active manager name

From d33cb31ce7cdff44bfa9c196bbb0996b3475c1f9 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Mon, 8 Feb 2021 11:22:37 -0600
Subject: [PATCH 8/9] Show or hide admin buttons with prop

---
 src/components/blocks/Navbar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/blocks/Navbar.vue b/src/components/blocks/Navbar.vue
index 0509b07..984f584 100644
--- a/src/components/blocks/Navbar.vue
+++ b/src/components/blocks/Navbar.vue
@@ -81,20 +81,20 @@
                 </el-button-group>
             </el-col>
             <el-col :span="12" style="text-align:end">
-                <el-button-group>
+                <!--el-button-group>
                     <el-button type="primary"
                             v-bind:class="[viewType === 'table' ? 'active' : '']"
                             v-on:click="selectView('table')"
                             v-bind:title="lang.btn.table">
                         <i class="far fa-th-list"/>
                     </el-button>
-                    <!--el-button role="button" type="primary"
+                    <el-button role="button" type="primary"
                             v-bind:class="[viewType === 'grid' ? 'active' : '']"
                             v-on:click="selectView('grid')"
                             v-bind:title="lang.btn.grid">
                         <i class="far fa-th"/>
-                    </el-button-->
-                </el-button-group>
+                    </el-button>
+                </el-button-group-->
                 <el-button-group>
                     <el-button type="primary"
                             v-bind:title="lang.btn.fullScreen"

From bfe1d06e67e6e59558afb0e10c289047443f9e73 Mon Sep 17 00:00:00 2001
From: Victor Samayoa <vhs1092@gmail.com>
Date: Mon, 8 Feb 2021 11:22:56 -0600
Subject: [PATCH 9/9] Show or hide admin buttons with prop

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b6ca9ba..dc0bb30 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager-element",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "description": "File manager for Laravel with Vue.js and Element Style",
   "keywords": [
     "laravel",