From dcbbcd6f65f30443715af8c64b174c5f1716250b Mon Sep 17 00:00:00 2001
From: Muah <muah003@gmail.com>
Date: Thu, 30 Aug 2018 04:03:40 +0200
Subject: [PATCH] v3.2.3

- css cleanups
- change gsp input UI
- add extra ux to gsp
- fix the image editor btns not showing up
- move all the colors to `vars.scss`
---
 .../js/components/globalSearch/panel.vue      | 177 ++++++++++++++----
 .../js/components/imageEditor/caman.vue       |  12 +-
 src/resources/assets/js/modules/utils.js      |   1 +
 .../extra/{loaders.scss => _loaders.scss}     |   0
 src/resources/assets/sass/extra/_vue.scss     |  71 +++++++
 .../assets/sass/extra/animation.scss          |  63 -------
 src/resources/assets/sass/extra/vars.scss     |  27 ++-
 src/resources/assets/sass/media.scss          |  64 ++++---
 src/resources/views/_manager.blade.php        |  48 ++---
 src/resources/views/cards/vertical.blade.php  |   2 +-
 10 files changed, 302 insertions(+), 163 deletions(-)
 rename src/resources/assets/sass/extra/{loaders.scss => _loaders.scss} (100%)
 create mode 100644 src/resources/assets/sass/extra/_vue.scss
 delete mode 100644 src/resources/assets/sass/extra/animation.scss

diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
index c641a95..90b87e1 100644
--- a/src/resources/assets/js/components/globalSearch/panel.vue
+++ b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -2,15 +2,20 @@
     <div v-if="showSearchPanel" class="modal mm-animated fadeIn is-active">
         <div class="modal-background"/>
         <div class="modal-content">
-            <div class="search-input">
+            <div :class="{'move': moveInput}" class="search-input">
                 <section>
                     <input ref="search" v-model="search" :placeholder="trans('find')" autofocus>
-                    <span class="icon is-medium"><icon name="search"/></span>
+                    <transition name="mm-info-in">
+                        <div v-show="listCount" class="count">
+                            <p class="title is-marginless is-2">{{ listCount }}</p>
+                            <p class="heading is-marginless">{{ trans('found') }}</p>
+                        </div>
+                    </transition>
                 </section>
             </div>
 
-            <transition-group tag="ul" mode="out-in" name="list" class="columns is-multiline">
-                <li v-for="(item, i) in filterdList" :key="i" class="column is-2">
+            <transition-group name="mm-gs" tag="ul" class="columns is-multiline" mode="out-in">
+                <li v-for="(item, i) in filterdList" :key="`${i}-${item.name}`" class="column is-2">
                     <div class="card">
                         <div class="card-image">
                             <a v-if="fileTypeIs(item, 'image')" :href="item.path" target="_blank" class="image">
@@ -27,7 +32,13 @@
                             </div>
                         </div>
                         <div class="card-content">
-                            <p class="title is-marginless">{{ item.name }}</p>
+                            <p v-tippy="{arrow: true, hideOnClick: false, followCursor: true}"
+                               :title="linkCopied ? trans('copied') : trans('to_cp')"
+                               class="title is-marginless link"
+                               @click="copyLink(item.path)"
+                               @hidden="linkCopied = false">
+                                {{ item.name }}
+                            </p>
                             <br>
                             <p class="subtitle is-marginless link" @click="goToFolder(item.dir, item.name)">
                                 <span class="icon"><icon name="folder"/></span>
@@ -40,6 +51,11 @@
                         </div>
                     </div>
                 </li>
+
+                <!-- nothing found -->
+                <li v-if="noData" key="noData" class="column no-data">
+                    <p class="title">{{ trans('nothing_found') }} !!</p>
+                </li>
             </transition-group>
         </div>
         <button class="modal-close is-large" @click="closePanel()"/>
@@ -47,6 +63,8 @@
 </template>
 
 <style scoped lang="scss">
+    @import '../../../sass/extra/vars';
+
     .modal {
         position: absolute;
         width: 100%;
@@ -62,46 +80,96 @@
         right: 0;
         left: 0;
         bottom: 0;
-        background-color: rgba(10, 10, 10, 0.98);
+        background-color: rgba($dark, 0.98);
     }
 
     .modal-content {
         margin: 0;
         height: 100%;
         width: 100%;
-        max-height: 100vh;
+        max-height: unset;
+    }
+
+    .column {
+        backface-visibility: hidden;
     }
 
     .search-input {
+        transform: translate(25%, 35vh);
         width: 100%;
         position: sticky;
         top: 0;
-        color: rgba(255, 255, 255, 0.8);
+        padding: 0 0.75rem;
+        color: $white;
         z-index: 1;
-        padding: 1rem 0;
-        background: rgba(15, 15, 15, 0.85);
-        backdrop-filter: blur(10px);
+        transition: all 1s ease 0.5s;
+
+        // animate linear-gradient
+        &::before {
+            content: '';
+            position: absolute;
+            background: linear-gradient(to bottom, $dark 0, rgba($dark, 0.5) 65%, transparent 100%);
+            opacity: 0;
+            top: 0;
+            transition: all 1s ease 1s;
+            height: 100%;
+            width: 100%;
+        }
 
         section {
-            margin-right: auto;
-            margin-left: 5%;
             display: flex;
-            padding: 0.2rem 1rem;
-            width: 25%;
+            margin: 0 auto;
+            width: 75%;
             position: relative;
-            border-radius: 100vw;
-            background-color: rgba(white, 0.1);
+            align-items: center;
+        }
+
+        input {
+            transition: all 1s ease 0.5s;
+            color: $white;
+            line-height: 2.5;
+            border: none;
+            background-color: transparent;
+            caret-color: $primary;
+            font-size: 5rem;
+        }
+
+        .count {
+            text-align: center;
+
+            .title {
+                color: $white;
+                text-shadow: 4px 4px $red;
+            }
+
+            .heading {
+                color: $white;
+                font-weight: bold;
+            }
+        }
+
+        &.move {
+            transform: translate(0);
+
+            &::before {
+                opacity: 1;
+            }
 
             input {
-                color: white;
-                border: none;
+                font-size: 3rem;
                 width: 100%;
-                background-color: transparent;
-                font-size: 1.5rem;
             }
         }
     }
 
+    .no-data {
+        text-align: center;
+
+        * {
+            color: rgba($white, 0.5);
+        }
+    }
+
     .card {
         min-width: unset;
         border-radius: 4px;
@@ -111,20 +179,21 @@
         vertical-align: middle;
     }
 
-    .modal-close {
-        position: absolute;
-        z-index: 2;
-        top: 1.2rem;
-    }
-
     @media screen and (max-width: 1083px) {
         .search-input {
-            padding-right: 3rem;
+            padding-right: 4rem;
 
             section {
                 width: 100%;
-                margin: auto;
             }
+
+            input {
+                line-height: 2;
+            }
+        }
+
+        .modal-close {
+            top: 1.5rem;
         }
     }
 </style>
@@ -133,13 +202,16 @@
 import debounce from 'lodash/debounce'
 
 export default {
-    props: ['trans', 'fileTypeIs'],
+    props: ['trans', 'fileTypeIs', 'noScroll'],
     data() {
         return {
             showSearchPanel: false,
-            index: [],
+            filesIndex: [],
             filterdList: [],
-            search: ''
+            search: '',
+            noData: false,
+            moveInput: false,
+            linkCopied: false
         }
     },
     mounted() {
@@ -147,13 +219,19 @@ export default {
     },
     computed: {
         fuseLib() {
-            return new Fuse(this.index, {keys: ['name']})
+            return new Fuse(this.filesIndex, {
+                keys: ['name'],
+                threshold: 0.4
+            })
+        },
+        listCount() {
+            return this.filterdList.length
         }
     },
     methods: {
         eventsListener() {
             EventHub.listen('global-search-index', (data) => {
-                this.index = data
+                this.filesIndex = data
             })
 
             EventHub.listen('show-global-search', (data) => {
@@ -173,6 +251,15 @@ export default {
                     this.closePanel()
                 }
             })
+
+            document.addEventListener('transitionend', (e) => {
+                this.noData = this.search && !this.listCount ? true : false
+            })
+        },
+
+        copyLink(path) {
+            this.linkCopied = true
+            this.$copyText(path)
         },
         closePanel() {
             this.showSearchPanel = false
@@ -192,26 +279,34 @@ export default {
             }
 
             this.filterdList = []
-        }, 250)
+        }, 500)
     },
     watch: {
         showSearchPanel(val) {
-            let cont = document.querySelector('#manager-container')
-
             if (val) {
-                EventHub.fire('disable-global-keys', true)
                 this.$nextTick(() => {
+                    this.noScroll('add')
                     this.$refs.search.focus()
                 })
 
-                // cont.style.position = 'relative'
+                EventHub.fire('disable-global-keys', true)
             } else {
+                this.$nextTick(() => {
+                    this.noScroll('remove')
+                    this.noData = false
+                    this.moveInput = false
+                })
+
                 EventHub.fire('disable-global-keys', false)
-                // cont.style.position = ''
             }
         },
-        search() {
+        search(val) {
+            this.moveInput = true
             this.getList()
+
+            document.addEventListener('transitionend', (e) => {
+                this.noData = val && !this.listCount ? true : false
+            })
         }
     }
 }
diff --git a/src/resources/assets/js/components/imageEditor/caman.vue b/src/resources/assets/js/components/imageEditor/caman.vue
index b138450..3a7b7d9 100644
--- a/src/resources/assets/js/components/imageEditor/caman.vue
+++ b/src/resources/assets/js/components/imageEditor/caman.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="__caman">
-        <button class="btn-plain" @click="toggleControls()"
-                :class="{'is-active': controls}"
+        <button v-tippy :class="{'is-active': controls}"
                 :disabled="processing"
-                v-tippy :title="filterName">
+                :title="filterName"
+                class="btn-plain" @click="toggleControls()">
             <span class="icon"><icon :name="processing ? 'spinner' : icon" :pulse="processing"/></span>
         </button>
 
-        <transition name="list">
+        <transition name="mm-list">
             <div v-show="controls" class="__caman-controls">
-                <button class="btn-plain" :disabled="incLimit() || processing" @click="inc()">
+                <button :disabled="incLimit() || processing" class="btn-plain" @click="inc()">
                     <span class="icon"><icon :name="processing ? 'spinner' : 'plus'" :pulse="processing"/></span>
                 </button>
-                <button class="btn-plain" :disabled="decLimit() || processing" @click="dec()">
+                <button :disabled="decLimit() || processing" class="btn-plain" @click="dec()">
                     <span class="icon"><icon :name="processing ? 'spinner' : 'minus'" :pulse="processing"/></span>
                 </button>
             </div>
diff --git a/src/resources/assets/js/modules/utils.js b/src/resources/assets/js/modules/utils.js
index 8573370..3836f25 100644
--- a/src/resources/assets/js/modules/utils.js
+++ b/src/resources/assets/js/modules/utils.js
@@ -224,6 +224,7 @@ export default {
                 }
 
                 this.toggleInfo = true
+                this.toolBar = true
                 this.togglePlayerCard = false
             }
         },
diff --git a/src/resources/assets/sass/extra/loaders.scss b/src/resources/assets/sass/extra/_loaders.scss
similarity index 100%
rename from src/resources/assets/sass/extra/loaders.scss
rename to src/resources/assets/sass/extra/_loaders.scss
diff --git a/src/resources/assets/sass/extra/_vue.scss b/src/resources/assets/sass/extra/_vue.scss
new file mode 100644
index 0000000..7d0c486
--- /dev/null
+++ b/src/resources/assets/sass/extra/_vue.scss
@@ -0,0 +1,71 @@
+$list: (mm-list, mm-img-prv, mm-img-nxt, mm-info-in, mm-info-out, mm-slide, mm-counter, mm-gs);
+
+@each $class in $list {
+    .#{$class}-enter-active,
+    .#{$class}-leave-active {
+        transition: all 0.2s ease-out;
+    }
+
+    .#{$class}-enter,
+    .#{$class}-leave-to {
+        opacity: 0;
+    }
+}
+
+/* files */
+.mm-list-enter,
+.mm-list-leave-to {
+    transform: translateY(30px);
+}
+
+/* image */
+.mm-img-prv-enter {
+    transform: translateX(-0.7rem);
+}
+
+.mm-img-prv-leave-to {
+    transform: translateX(90px);
+}
+
+.mm-img-nxt-enter {
+    transform: translateX(0.7rem);
+}
+
+.mm-img-nxt-leave-to {
+    transform: translateX(-90px);
+}
+
+/* info toggle btn */
+.mm-info-in-enter,
+.mm-info-in-leave-to {
+    transform: translateX(0.7rem);
+}
+
+.mm-info-out-enter,
+.mm-info-out-leave-to {
+    transform: translateX(-0.7rem);
+}
+
+/* global search panel */
+.mm-gs-enter,
+.mm-gs-leave-to {
+    transform: translateY(30px);
+}
+
+.mm-gs-leave-active {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+}
+
+/* info panel */
+.mm-slide-enter,
+.mm-slide-leave-to {
+    transform: translateX(-0.7rem);
+}
+
+/* counters */
+.mm-counter-enter,
+.mm-counter-leave-to {
+    transform: translateX(0.7rem);
+}
diff --git a/src/resources/assets/sass/extra/animation.scss b/src/resources/assets/sass/extra/animation.scss
deleted file mode 100644
index f24950c..0000000
--- a/src/resources/assets/sass/extra/animation.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-$list: (img-nxt, img-prv, info-in, info-out, slide, list);
-
-@each $class in $list {
-    .#{$class}-enter-active,
-    .#{$class}-leave-active {
-        transition: all 0.2s ease-out;
-    }
-}
-
-/* files */
-.list-enter,
-.list-leave-to {
-    transform: translateY(30px);
-    opacity: 0;
-}
-
-/* image */
-.img-prv-enter {
-    transform: translateX(-0.7rem);
-    opacity: 0;
-}
-
-.img-prv-leave-to {
-    transform: translateX(90px);
-    opacity: 0;
-}
-
-.img-nxt-enter {
-    transform: translateX(0.7rem);
-    opacity: 0;
-}
-
-.img-nxt-leave-to {
-    transform: translateX(-90px);
-    opacity: 0;
-}
-
-/* info toggle btn */
-.info-in-enter,
-.info-in-leave-to {
-    transform: translateX(0.7rem);
-    opacity: 0;
-}
-
-.info-out-enter,
-.info-out-leave-to {
-    transform: translateX(-0.7rem);
-    opacity: 0;
-}
-
-/* info panel */
-.slide-enter,
-.slide-leave-to {
-    transform: translateX(-0.7rem);
-    opacity: 0;
-}
-
-/* counters */
-.counter-enter,
-.counter-leave-to {
-    transform: translateX(0.7rem);
-    opacity: 0;
-}
diff --git a/src/resources/assets/sass/extra/vars.scss b/src/resources/assets/sass/extra/vars.scss
index 86d0683..69459bf 100644
--- a/src/resources/assets/sass/extra/vars.scss
+++ b/src/resources/assets/sass/extra/vars.scss
@@ -13,10 +13,29 @@ $active_theme: $light_theme;
 // colors
 $white: lighten($active_theme, 100%);
 $black: darken($active_theme, 80%);
-$green: hsl(141, 71%, 48%);
-$yellow: hsl(48, 100%, 67%);
-$red: hsl(348, 100%, 61%);
-$blue: hsl(217, 71%, 53%);
+$dark: #0a0a0a;
+$green: #23d160;
+$yellow: #ffdd57;
+$red: #ff3860;
+$blue: #3273dc;
+$primary: #00d1b2;
 $shadow_1: 0 10px 45px 0 rgba($black, 0.2);
 $shadow_2: 0 6px 25px 0 rgba($black, 0.3);
 $shadow_3: 0 6px 10px rgba($black, 0.08);
+
+// plyr
+$plyr-1: #3bea91;
+$plyr-2: #7f4cf1;
+$plyr-3: #f5164d;
+
+// ratio
+$audio: #f8d5f0;
+$video: #9951ff;
+$image: #ffd700;
+$text: #cdd5e0;
+$folder: #45eba5;
+$application: #00d1ff;
+$pdf: #3d6cb9;
+
+// other
+$breadcrumb: #dde3e6;
diff --git a/src/resources/assets/sass/media.scss b/src/resources/assets/sass/media.scss
index 73469d1..9d248bf 100644
--- a/src/resources/assets/sass/media.scss
+++ b/src/resources/assets/sass/media.scss
@@ -4,7 +4,7 @@
 
 @import './extra/vars';
 @import './extra/loaders';
-@import './extra/animation';
+@import './extra/vue';
 @import './packages/animate';
 @import './packages/progress';
 @import './packages/switcher';
@@ -325,7 +325,7 @@
 
 @include media('max', 1087) {
     .__stack-container {
-        max-height: 100vh;
+        max-height: unset;
     }
 }
 
@@ -791,7 +791,7 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
         }
 
         &:disabled {
-            background-color: rgba(darken($active_theme, 80%), 0.8);
+            background-color: rgba($black, 0.8);
         }
     }
 }
@@ -817,7 +817,11 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
     }
 
     .media-manager__stack {
-        box-shadow: none;
+        overflow: hidden;
+
+        &::before {
+            box-shadow: none;
+        }
     }
 
     .__stack-sidebar {
@@ -865,7 +869,7 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
     .__stack-breadcrumb {
         z-index: 1;
         border-top: none;
-        border-bottom: 1px solid #dde3e6;
+        border-bottom: 1px solid $breadcrumb;
     }
 }
 
@@ -906,48 +910,47 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
     }
 
     // animation
-    .slide-enter,
-    .slide-leave-to {
-        transform: translateX(0.75rem);
-        opacity: 0;
+    .mm-slide-enter,
+    .mm-slide-leave-to {
+        transform: translateX(0.7rem);
     }
 
-    .counter-enter,
-    .counter-leave-to {
-        transform: translateX(-0.75rem);
-        opacity: 0;
+    .mm-counter-enter,
+    .mm-counter-leave-to {
+        transform: translateX(-0.7rem);
     }
 }
 
 /*                Ratio bar                */
 .is-audio {
-    background-color: #f8d5f0;
+    background-color: $audio;
 }
 
 .is-video {
-    background-color: #9951ff;
+    background-color: $video;
 }
 
 .is-image {
-    background-color: #ffd700;
+    background-color: $image;
 }
 
 .is-text {
-    background-color: #cdd5e0;
+    background-color: $text;
 }
 
 .is-folder {
-    background-color: #45eba5;
+    background-color: $folder;
 }
 
 .is-application {
-    background-color: #00d1ff;
+    background-color: $application;
 }
 
 .is-pdf {
-    background-color: #3d6cb9;
+    background-color: $pdf;
 }
 
+/*                Progress bar                */
 @include media('max', 768) {
     .progress-bar strong {
         display: none;
@@ -956,11 +959,11 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
 
 /*                Plyr                */
 .plyr--full-ui input[type=range] {
-    color: #3bea91;
+    color: $plyr-1;
 }
 
 .plyr__control--overlaid {
-    background: #7f4cf1;
+    background: $plyr-2;
 }
 
 .plyr--video,
@@ -968,7 +971,7 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
     .plyr__control.plyr__tab-focus,
     .plyr__control:hover,
     .plyr__control[aria-expanded=true] {
-        background: #f5164d;
+        background: $plyr-3;
     }
 }
 
@@ -1024,7 +1027,7 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8);
     padding: 0;
     cursor: pointer;
     vertical-align: bottom;
-    color: darken($active_theme, 80%);
+    color: $black;
     border: none;
     border-radius: 0;
     background: transparent;
@@ -1063,7 +1066,7 @@ a[target='_blank'] {
 }
 
 .card {
-    overflow: hidden;
+    // overflow: hidden;
     min-width: 480px;
 }
 
@@ -1087,7 +1090,7 @@ a[target='_blank'] {
     }
 
     &.is-black {
-        background-color: darken($active_theme, 80%);
+        background-color: $black;
     }
 
     &.is-danger,
@@ -1116,6 +1119,15 @@ a[target='_blank'] {
         background-color: $white;
     }
 
+    .modal-close {
+        z-index: 2;
+        top: 2rem;
+        width: 3rem;
+        max-width: 3rem;
+        height: 3rem;
+        max-height: 3rem;
+    }
+
     &.is-active {
         padding: 0.75rem 0.75rem 0;
     }
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index 920c32b..cc0f169 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -33,7 +33,11 @@
         'glbl_search' => trans('MediaManager::messages.search.glbl'), 
         'glbl_search_avail' => trans('MediaManager::messages.search.glbl_avail'), 
         'go_to_folder' => trans('MediaManager::messages.go_to_folder'), 
-        'find' => trans('MediaManager::messages.find')
+        'find' => trans('MediaManager::messages.find'), 
+        'found' => trans('MediaManager::messages.found'), 
+        'nothing_found' => trans('MediaManager::messages.nothing_found'), 
+        'copied' => trans('MediaManager::messages.copy.copied'), 
+        'to_cp' => trans('MediaManager::messages.copy.to_cp')
     ]) }}"
     :in-modal="{{ isset($modal) ? 'true' : 'false' }}"
     :hide-ext="{{ isset($hideExt) ? json_encode($hideExt) : '[]' }}"
@@ -42,10 +46,10 @@
     :user-id="{{ config('mediaManager.enable_broadcasting') ? auth()->user()->id : 0 }}"
     :upload-panel-img-list="{{ $patterns }}">
 
-    <div class="" id="manager-container">
+    <div class="">
 
         {{-- content ratio bar --}}
-        <transition name="list" mode="out-in">
+        <transition name="mm-list" mode="out-in">
             <content-ratio v-if="config.ratioBar && allItemsCount"
                 :list="allFiles"
                 :total="allItemsCount"
@@ -54,10 +58,10 @@
         </transition>
 
         {{-- global search --}}
-        <global-search-panel :trans="trans" :file-type-is="fileTypeIs"></global-search-panel>
+        <global-search-panel :trans="trans" :file-type-is="fileTypeIs" :no-scroll="noScroll"></global-search-panel>
 
         {{-- top toolbar --}}
-        <transition name="list" mode="out-in">
+        <transition name="mm-list" mode="out-in">
             <nav class="media-manager__toolbar level" v-show="toolBar">
 
                 {{-- left toolbar --}}
@@ -375,7 +379,7 @@ class="button"
         {{-- ====================================================================== --}}
 
         {{-- dropzone --}}
-        <transition-group name="list" mode="out-in" tag="section">
+        <transition-group name="mm-list" mode="out-in" tag="section">
             <div key="1" v-show="toggleUploadArea" class="media-manager__dz">
                 <form id="new-upload" action="{{ route('media.upload') }}" :style="uploadPanelImg">
                     {{ csrf_field() }}
@@ -429,7 +433,7 @@ class="button"
                     <div id="loading_files" v-show="loading_files">
                         <div id="loading_files_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/world.json') }}"></div>
 
-                        <transition name="list" mode="out-in">
+                        <transition name="mm-list" mode="out-in">
                             <h3 key="1" v-if="showProgress">{{ trans('MediaManager::messages.stand_by') }} <strong>@{{ progressCounter }}</strong></h3>
                             <h3 key="2" v-else>{{ trans('MediaManager::messages.loading') }}</h3>
                         </transition>
@@ -454,13 +458,13 @@ class="button"
                 <v-touch class="__stack-files"
                     :class="{'__stack-sidebar-hidden' : !toggleInfo}"
                     ref="__stack-files"
-                    @swiperight="goToPrevFolder()">
+                    @swiperight="goToPrevFolder">
 
                     {{-- no search --}}
                     <section>
                         <div id="no_search" v-show="no_search">
                             <div id="no_search_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/ice_cream.json') }}"></div>
-                            <h3>{{ trans('MediaManager::messages.nothing_found') }}</h3>
+                            <h3>@{{ trans('nothing_found') }}</h3>
                         </div>
                     </section>
 
@@ -474,7 +478,7 @@ class="button"
                                 :class="{'bulk-selected': IsInBulkList(file), 'selected' : selectedFile == file}"
                                 @swipeup="setSelected(file, index), moveItem()"
                                 @swipedown="setSelected(file, index), deleteItem()"
-                                @dbltap="dbltap()"
+                                @dbltap="dbltap"
                                 @hold="setSelected(file, index), imageEditor()">
 
                                 {{-- lock file --}}
@@ -491,7 +495,7 @@ class="__box-lock-icon icon"
                                 <div v-if="!fileTypeIs(file, 'folder')"
                                     class="__box-copy-link icon"
                                     @click.stop="copyLink(file.path)"
-                                    :title="linkCopied ? '{{ trans('MediaManager::messages.copy.copied') }}' : '{{ trans('MediaManager::messages.copy.to_cp') }}'"
+                                    :title="linkCopied ? trans('copied') : trans('to_cp')"
                                     v-tippy="{arrow: true, hideOnClick: false}"
                                     @hidden="linkCopied = false">
                                     <icon name="clone" scale="0.9"></icon>
@@ -539,11 +543,11 @@ class="__box-copy-link icon"
                 {{-- ====================================================================== --}}
 
                 {{-- info sidebar --}}
-                <transition name="slide" mode="out-in" appear>
+                <transition name="mm-slide" mode="out-in" appear>
                     <div class="__stack-sidebar is-hidden-touch" v-if="toggleInfo">
                         {{-- preview --}}
                         <div class="__sidebar-preview">
-                            <transition name="slide" mode="out-in" appear>
+                            <transition name="mm-slide" mode="out-in" appear>
                                 {{-- no selection --}}
                                 <div key="none-selected" class="__sidebar-none-selected" v-if="!selectedFile">
                                     <span @click="reset()" class="link"><icon name="power-off" scale="3.2"></icon></span>
@@ -628,7 +632,7 @@ class="link"
                             class="__sidebar-info"
                             :style="selectedFile ? 'background-color: white' : ''">
 
-                            <transition name="list" mode="out-in" appear>
+                            <transition name="mm-list" mode="out-in" appear>
                                 <div :key="selectedFile.name" v-if="selectedFile">
                                     {{-- audio extra info --}}
                                     <template v-if="selectedFileIs('audio') && selectedFilePreview">
@@ -750,7 +754,7 @@ class="__sidebar-info"
                             </transition>
 
                             {{-- items count --}}
-                            <transition-group tag="div" name="counter" mode="out-in" class="__sidebar-count">
+                            <transition-group tag="div" name="mm-counter" mode="out-in" class="__sidebar-count">
                                 {{-- all --}}
                                 <div key="1" v-if="allItemsCount">
                                     <p class="title is-1">@{{ allItemsCount }}</p>
@@ -760,7 +764,7 @@ class="__sidebar-info"
                                 {{-- search --}}
                                 <div key="2" v-if="searchItemsCount !== null && searchItemsCount >= 0">
                                     <p class="title is-1">@{{ searchItemsCount }}</p>
-                                    <p class="heading">{{ trans('MediaManager::messages.found') }}</p>
+                                    <p class="heading">@{{ trans('found') }}</p>
                                 </div>
 
                                 {{-- bulk --}}
@@ -792,7 +796,7 @@ class="__sidebar-info"
                 {{-- directories breadCrumb --}}
                 <div class="level-left">
                     <nav class="breadcrumb is-hidden-touch" v-if="!restrictModeIsOn()">
-                        <transition-group tag="ul" name="list" mode="out-in">
+                        <transition-group tag="ul" name="mm-list" mode="out-in">
                             <li key="library-bc">
                                 <a v-if="folders.length > 0 && !(isBulkSelecting() || isLoading)"
                                     class="p-l-0"
@@ -824,7 +828,7 @@ class="p-l-0"
                         v-tippy
                         title="t"
                         v-if="allItemsCount">
-                        <transition :name="toggleInfo ? 'info-out' : 'info-in'" mode="out-in">
+                        <transition :name="toggleInfo ? 'mm-info-out' : 'mm-info-in'" mode="out-in">
                             <div :key="toggleInfo ? 1 : 2" class="__stack-sidebar-toggle has-text-link">
                                 <template v-if="toggleInfo">
                                     <span>{{ trans('MediaManager::messages.close') }}</span>
@@ -857,7 +861,7 @@ class="p-l-0"
                 class="modal mm-animated fadeIn is-active __modal-preview">
                 <div class="modal-background link" @click="toggleModal()"></div>
                 <div class="mm-animated fadeInDown __modal-content-wrapper">
-                    <transition :name="imageSlideDirection == 'next' ? 'img-nxt' : 'img-prv'" mode="out-in">
+                    <transition :name="imageSlideDirection == 'next' ? 'mm-img-nxt' : 'mm-img-prv'" mode="out-in">
                         <div class="modal-content" :key="selectedFile.path">
                             {{-- card v --}}
                             @include('MediaManager::cards.vertical')
@@ -1004,13 +1008,13 @@ class="button is-warning"
                 <div class="modal-card mm-animated fadeInDown">
                     <header class="modal-card-head is-warning">
                         <p class="modal-card-title">
-                            <transition :name="useCopy ? 'info-in' : 'info-out'" mode="out-in">
+                            <transition :name="useCopy ? 'mm-info-in' : 'mm-info-out'" mode="out-in">
                                 <span class="icon" :key="useCopy ? 1 : 2">
                                     <icon :name="useCopy ? 'clone' : 'share'"></icon>
                                 </span>
                             </transition>
 
-                            <transition name="list" mode="out-in">
+                            <transition name="mm-list" mode="out-in">
                                 <span key="1" v-if="useCopy">{{ trans('MediaManager::messages.copy.file_folder') }}</span>
                                 <span key="2" v-else>{{ trans('MediaManager::messages.move.file_folder') }}</span>
                             </transition>
@@ -1070,7 +1074,7 @@ class="button is-warning"
                                             class="button is-warning"
                                             :disabled="isLoading || !moveToPath"
                                             :class="{'is-loading': isLoading}">
-                                            <transition :name="useCopy ? 'img-prv' : 'img-nxt'" mode="out-in">
+                                            <transition :name="useCopy ? 'mm-img-prv' : 'mm-img-nxt'" mode="out-in">
                                                 <span key="1" v-if="useCopy">{{ trans('MediaManager::messages.copy.main') }}</span>
                                                 <span key="2" v-else>{{ trans('MediaManager::messages.move.main') }}</span>
                                             </transition>
diff --git a/src/resources/views/cards/vertical.blade.php b/src/resources/views/cards/vertical.blade.php
index b85efc8..53fc9bd 100644
--- a/src/resources/views/cards/vertical.blade.php
+++ b/src/resources/views/cards/vertical.blade.php
@@ -53,7 +53,7 @@ class="image">
                 <p class="title is-marginless">
                     <span class="link"
                         @click="copyLink(selectedFile.path)"
-                        :title="linkCopied ? '{{ trans('MediaManager::messages.copy.copied') }}' : '{{ trans('MediaManager::messages.copy.to_cp') }}'"
+                        :title="linkCopied ? trans('copied') : trans('to_cp')"
                         v-tippy="{arrow: true, hideOnClick: false, followCursor: true}"
                         @hidden="linkCopied = false">
                         @{{ selectedFile.name }}