diff --git a/README.md b/README.md index a0b4f9b..c5d6964 100644 --- a/README.md +++ b/README.md @@ -66,8 +66,7 @@ new Vue({ - bulk selection - change item/s visibility - [cache requests](https://github.com/ctf0/Laravel-Media-Manager/wiki/Customization-&--Optimization#starting-from-v240-any-call-to-the-server-will-be-cached) -- dynamically hide [files](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Files-With-Extension) -- dynamically hide [folders](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Folders) +- dynamically hide [files](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Files-With-Extension) / [folders](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Folders) - toggle between `random/original` names for uploaded files - download selected ["including bulk selection"](https://github.com/ctf0/Laravel-Media-Manager/wiki/Download-Files-as-a-ZipFile) - directly copy selected file link @@ -75,7 +74,7 @@ new Vue({ + [from modal](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal) + [with any wysiwyg editor](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-With-Any-WYSIWYG-Editor) - auto scroll to selected item when using (left/up, right/down, home, end) -- [lock/unlock](https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-&-Folder) selected files/folders **"sqLite must be installed"** +- [lock/unlock](https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-&-Folder) selected files/folders ***"sqLite must be installed"*** - search - filter by + folder @@ -133,7 +132,7 @@ new Vue({ | select first | | home | | | | select last | | end | | | | open folder | | enter | ** | | - | go to prev dir | folderName *(breadcrumb)* | backspace | * | swipe right | + | go to prev dir | folderName *(breadcrumb)* | backspace | * | swipe right *(files container)* | - events @@ -143,7 +142,7 @@ new Vue({ | | modal-show | when modal is showen | | | modal-hide | when modal is hidden | | | file_selected *(when inside modal)* | get selected file url | - | | multi_file_selected *(when inside modal)* | get bulk selected files url | + | | multi_file_selected *(when inside modal)* | get bulk selected files urls | | | folder_selected *(when inside modal)* | get selected folder path | | [Laravel][lara] | | | | | MMFileUploaded($file_path) | get uploaded file full [path][path] | @@ -219,13 +218,12 @@ return [ 'hide_files_ext' => true, /* - * load image preview when item is clicked + * load image preview only when item is clicked ? */ 'lazy_load_image_on_click' => false, /* - * automatically invalidate cache after ? - * in "Minutes" + * automatically invalidate cache after "in Minutes" */ 'cacheExpiresAfter'=> 60, ]; diff --git a/logs/v3.0.0.txt b/logs/v3.0.0.txt deleted file mode 100644 index 194edbd..0000000 --- a/logs/v3.0.0.txt +++ /dev/null @@ -1,8 +0,0 @@ -- use a unique id for the zip progress tracking to avoid issues with multiple download of the same zip at the same time - -- add auto invalidate cache option, note that to keep things as performance friendly while making sure the cache invalidation updates as regularly as possible, every time the user navigate into a folder the invalidation check will fire. - -- add new enhancement to stop scrolling the main page when the manager scroll has reached the end “i focken hated that” - -- updated resources -- update readme \ No newline at end of file diff --git a/logs/v3.0.1.txt b/logs/v3.0.1.txt new file mode 100644 index 0000000..65ec3dc --- /dev/null +++ b/logs/v3.0.1.txt @@ -0,0 +1,12 @@ +- separate lock&link icon click events from the file box +- fix btns being disabled after cache deletion and refetching +- fix dbl selection happens when going up a dir +- select first item when lazy loading is active & first item is a folder +- fix sidebar info not having correct bg color when empty +- allow zipping files with duplicate names +- standardize animation +- preserve search across navigation “a temp solution until global search is implemented” +- re-worked how the cache gets cleared through the different operations, so you get accurate info no matter how deep the current dir is +- cache is now also checked for invalidation when going up a dir +- fix issue of missing “$randId” when using the modal view +- cleanup \ No newline at end of file diff --git a/src/Controllers/MediaController.php b/src/Controllers/MediaController.php index 0d469ff..14dee6c 100755 --- a/src/Controllers/MediaController.php +++ b/src/Controllers/MediaController.php @@ -54,10 +54,7 @@ public function __construct(Carbon $carbon) */ public function index() { - return view('MediaManager::media')->with([ - 'randId' => uniqid(), - 'cacheExp' => array_get($this->config, 'cacheExpiresAfter'), - ]); + return view('MediaManager::media'); } /** diff --git a/src/Controllers/OpsTrait.php b/src/Controllers/OpsTrait.php index 16f5010..5f2ff9b 100644 --- a/src/Controllers/OpsTrait.php +++ b/src/Controllers/OpsTrait.php @@ -200,14 +200,17 @@ protected function storeFile($item, $upload_path, $file_name) */ protected function download($name, $id, $list, $type) { - $cacheName = "$name-$id"; + return response()->stream(function () use ($name, $list, $type, $id) { + // track changes + $cacheName = "$name-$id"; + $counter = 100 / count($list); + $store = $this->zipCacheStore; + $store->forever("$cacheName.progress", 0); - // track changes - $counter = 100 / count($list); - $store = $this->zipCacheStore; - $store->forever("$cacheName.progress", 0); + // name duplication + $names = []; + $order = 0; - return response()->stream(function () use ($name, $list, $type, $counter, $store, $cacheName) { $zip = new ZipStream("$name.zip", [ 'content_type' => 'application/octet-stream', ]); @@ -221,6 +224,18 @@ protected function download($name, $id, $list, $type) $streamRead = @fopen($file['path'], 'r'); } + // check if file name was used b4 + $name_only = pathinfo($file, PATHINFO_FILENAME); + $ext_only = pathinfo($file, PATHINFO_EXTENSION); + + if (in_array($file_name, $names)) { + ++$order; + $file_name = "{$name_only}_{$order}.{$ext_only}"; + } else { + $names[] = $file_name; + } + + // add to zip if ($streamRead) { $store->increment("$cacheName.progress", round($counter, 2)); $zip->addFileFromStream($file_name, $streamRead); diff --git a/src/DiskStorageServiceProvider.php b/src/DiskStorageServiceProvider.php index 4a54729..17ce964 100644 --- a/src/DiskStorageServiceProvider.php +++ b/src/DiskStorageServiceProvider.php @@ -10,6 +10,13 @@ use League\Flysystem\Cached\CachedAdapter; use League\Flysystem\Cached\Storage\Adapter; +/** + * create a dynamic filesystem disk with cache capabilities. + * + * 1- install: composer require league/flysystem-cached-adapter + * 2- register: DiskStorageServiceProvider + * 3- usage: app('filesystem')->disk('ctf0-media'). + */ class DiskStorageServiceProvider extends ServiceProvider { /** diff --git a/src/resources/assets/js/components/media.vue b/src/resources/assets/js/components/media.vue index 85bd279..3b4d4bb 100644 --- a/src/resources/assets/js/components/media.vue +++ b/src/resources/assets/js/components/media.vue @@ -42,8 +42,7 @@ export default { 'zipProgressRoute', 'uploadPanelImgList', 'hideExt', - 'hidePath', - 'cacheExp' + 'hidePath' ], data() { return { @@ -105,7 +104,6 @@ export default { this.preSaved() this.getFiles(this.folders, null, this.selectedFile) }) - }, mounted() { this.fileUpload() @@ -153,17 +151,13 @@ export default { if (this.allItemsCount) { this.navigation(e) - if ( - key == 'space' && - e.target == document.body && - ( - this.selectedFileIs('video') || - this.selectedFileIs('audio') || - this.selectedFileIs('image') || - this.selectedFileIs('pdf') || - this.selectedFileIs('text') - ) - ) { + if (key == 'space' && e.target == document.body && ( + this.selectedFileIs('video') || + this.selectedFileIs('audio') || + this.selectedFileIs('image') || + this.selectedFileIs('pdf') || + this.selectedFileIs('text') + )) { e.preventDefault() // play-pause media @@ -285,6 +279,7 @@ export default { /* end of short cuts */ refresh() { + this.resetInput('searchFor') this.getFiles(this.folders, null, this.selectedFile ? this.selectedFile.name : null) }, moveItem() { @@ -344,4 +339,4 @@ export default { }, render() {} } - + \ No newline at end of file diff --git a/src/resources/assets/js/modules/bulk.js b/src/resources/assets/js/modules/bulk.js index c51e6da..86c0b0f 100644 --- a/src/resources/assets/js/modules/bulk.js +++ b/src/resources/assets/js/modules/bulk.js @@ -41,8 +41,10 @@ export default { this.resetInput(['selectedFile', 'currentFileIndex']) - if (!this.isBulkSelecting() && !this.config.lazyLoad) { - file ? this.setSelected(file, index) : this.selectFirst() + if (!this.isBulkSelecting()) { + !this.config.lazyLoad + ? file ? this.setSelected(file, index) : this.selectFirst() + : this.lazySelectFirst() } }, blkSlctAll() { @@ -108,4 +110,4 @@ export default { } } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/cache.js b/src/resources/assets/js/modules/cache.js index b193e39..39e5f1f 100644 --- a/src/resources/assets/js/modules/cache.js +++ b/src/resources/assets/js/modules/cache.js @@ -2,8 +2,9 @@ import addMinutes from 'date-fns/add_minutes' import getTime from 'date-fns/get_time' import { Store, get, set, del, clear, keys } from 'idb-keyval' +const DBNAME = 'ctf0-Media_Manager' const cacheStore = new Store( - 'ctf0-Media_Manager', // db + DBNAME, // db 'laravel-media-manager' // store ) @@ -11,15 +12,15 @@ export default { methods: { // local storage getLs() { - return this.$ls.get('ctf0-Media_Manager', {}) + return this.$ls.get(DBNAME, {}) }, updateLs(obj) { let storage = Object.assign(this.getLs(), obj) - this.$ls.set('ctf0-Media_Manager', storage) + this.$ls.set(DBNAME, storage) }, removeLs() { this.folders = [] - this.$ls.remove('ctf0-Media_Manager') + this.$ls.remove(DBNAME) }, preSaved() { let ls = this.getLs() @@ -37,7 +38,7 @@ export default { return get(key, cacheStore) }, cacheResponse(val) { - let date = getTime(addMinutes(new Date(), this.cacheExp)) + let date = getTime(addMinutes(new Date(), this.config.cacheExp)) val = Object.assign(val, {expire: date}) return set(this.cacheName, val, cacheStore).catch((err) => { @@ -46,20 +47,31 @@ export default { }, removeCachedResponse(destination = null) { let cacheName = this.cacheName - let extra + let items = [] - if (destination) { - extra = destination == '../' - // go up - ? cacheName.split('/').length > 2 ? cacheName.replace(/\/[^/]+$/, '') : 'root_' - // go down - : cacheName == 'root_' ? `/${destination}` : `${cacheName}${destination}` + // current path only + if (!destination) { + return this.deleteCache(cacheName) } - // avoid clearing twice - let items = destination - ? extra == cacheName ? [cacheName] : [extra, cacheName] - : [cacheName] + // up & down + destination == '../' + ? false + : cacheName = cacheName == 'root_' + ? `/${destination}` + : `${cacheName}${destination}` + + let arr = cacheName.split('/').filter((e) => e) + let i = arr.length - 1 + for (i; i >= 0; i--) { + items.push(cacheName) // add current + arr.pop() // remove last + cacheName = `/${arr.join('/')}` // regroup remaining + } + + if (!items.includes('root_')) { + items.push('root_') + } items.forEach((one) => { return this.deleteCache(one) @@ -92,7 +104,7 @@ export default { keys.map((key) => { this.getCachedResponse(key).then((item) => { if (item.expire < now) { - return this.deleteCache(key) + this.deleteCache(key) } }) }) @@ -101,4 +113,4 @@ export default { }) } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/computed.js b/src/resources/assets/js/modules/computed.js index 69e7929..031114f 100644 --- a/src/resources/assets/js/modules/computed.js +++ b/src/resources/assets/js/modules/computed.js @@ -95,4 +95,4 @@ export default { return folders.length ? '/' + folders.join('/') : 'root_' } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/events.js b/src/resources/assets/js/modules/events.js index 39577fa..b709e9c 100644 --- a/src/resources/assets/js/modules/events.js +++ b/src/resources/assets/js/modules/events.js @@ -40,6 +40,7 @@ EventHub.listen('ajax-error-show', () => { /** * body movin animation + * you can remove it / replace it, do what you want */ function bm(el, name) { bodymovin.loadAnimation({ @@ -53,4 +54,4 @@ function bm(el, name) { progressiveLoad: true } }) -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/filtration.js b/src/resources/assets/js/modules/filtration.js index 148f972..0abdac9 100644 --- a/src/resources/assets/js/modules/filtration.js +++ b/src/resources/assets/js/modules/filtration.js @@ -56,8 +56,10 @@ export default { this.resetInput(['selectedFile', 'currentFileIndex']) } - if (!this.isBulkSelecting() && !this.config.lazyLoad) { - this.selectFirst() + if (!this.isBulkSelecting()) { + !this.config.lazyLoad + ? this.selectFirst() + : this.lazySelectFirst() } if (this.searchFor) { @@ -88,4 +90,4 @@ export default { }) } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/form.js b/src/resources/assets/js/modules/form.js index 1d8c2cb..81498c4 100644 --- a/src/resources/assets/js/modules/form.js +++ b/src/resources/assets/js/modules/form.js @@ -107,7 +107,7 @@ export default { /* Main */ getFiles(folders = '/', prev_folder = null, prev_file = null) { - this.resetInput(['searchFor', 'sortBy', 'currentFilterName', 'selectedFile', 'currentFileIndex']) + this.resetInput(['sortBy', 'currentFilterName', 'selectedFile', 'currentFileIndex']) this.noFiles('hide') if (!this.loading_files) { @@ -130,8 +130,6 @@ export default { // or make the call if nothing found .catch((err) => { - // console.warn('localforage.getItem', err) - axios.post(this.filesRoute, { folder: folders, dirs: this.folders @@ -179,7 +177,7 @@ export default { }) } - // check for hidden folders in files + // check for hidden folders if (this.hidePath.length) { this.files.items = this.files.items.filter((e) => { return !this.checkForHiddenPath(e) @@ -188,56 +186,66 @@ export default { // we have files if (this.allItemsCount) { - this.toggleLoading() this.loadingFiles('hide') + this.isLoading = false this.toggleInfo = true - this.$nextTick(() => { - // lazy loading is not active - if (!this.config.lazyLoad) { - // check for prev opened folder - if (prev_folder) { - this.files.items.some((e, i) => { - if (e.name == prev_folder) { - return this.setSelected(e, i) - } - }) + // check for prev opened folder + if (prev_folder) { + this.files.items.some((e, i) => { + if (e.name == prev_folder) { + return this.currentFileIndex = i } + }) + } - // check for prev selected file - if (prev_file) { - this.files.items.some((e, i) => { - if (e.name == prev_file) { - return this.setSelected(e, i) - } - }) - } + // lazy loading is not active + if (!this.config.lazyLoad) { + // check for prev selected file + if (prev_file) { + this.files.items.some((e, i) => { + if (e.name == prev_file) { + return this.currentFileIndex = i + } + }) + } - // if no prevs found - if (!this.selectedFile) { - this.selectFirst() - } + // if no prevs found + if (!this.currentFileIndex) { + this.selectFirst() + } + } else { + // lazy loading is active & first file is a folder + if (this.fileTypeIs(this.allFiles[0], 'folder')) { + this.selectFirst() } + } - // scroll to prev selected item + // scroll & click on prev selected item + this.$nextTick(() => { let curIndex = this.currentFileIndex if (curIndex) { - let t = setInterval(() => { - if (document.readyState === 'complete') { - this.scrollToFile(this.$refs[`file_${curIndex}`]) - clearInterval(t) - } - }, 500) - } - - // scroll to breadcrumb item - if (this.$refs.bc) { - let name = folders.split('/').pop() - let count = document.getElementById(`${name ? name : 'library'}-bc`).offsetLeft - this.$refs.bc.$el.scrollBy({top: 0, left: count, behavior: 'smooth'}) + if (document.readyState === 'complete') { + this.scrollToFile(this.$refs[`file_${curIndex}`]) + } else { + let t = setInterval(() => { + if (document.readyState === 'complete') { + this.scrollToFile(this.$refs[`file_${curIndex}`]) + clearInterval(t) + } + }, 500) + } } }) + // scroll to breadcrumb item + if (this.$refs.bc) { + let name = folders.split('/').pop() + let count = document.getElementById(`${name ? name : 'library'}-bc`).offsetLeft + this.$refs.bc.$el.scrollBy({top: 0, left: count, behavior: 'smooth'}) + } + + if (this.searchFor) {this.updateSearchCount()} return this.dirsListCheck(dirs) } @@ -298,7 +306,7 @@ export default { } this.showNotif(`${this.trans('create_success')} "${data.new_folder_name}" at "${path}"`) - this.removeCachedResponse() + this.removeCachedResponse('../') this.getFiles(this.folders, data.new_folder_name) }).catch((err) => { @@ -339,10 +347,12 @@ export default { this.showNotif(`${this.trans('rename_success')} "${filename}" to "${data.new_filename}"`) this.updateItemName(this.selectedFile, filename, data.new_filename) - this.removeCachedResponse() if (this.selectedFileIs('folder')) { this.updateDirsList() + this.removeCachedResponse('../') + } else { + this.removeCachedResponse() } }).catch((err) => { @@ -406,17 +416,13 @@ export default { this.$refs['success-audio'].play() this.removeCachedResponse(destination) - if (copy) { - this.removeCachedResponse('../') - } - this.isBulkSelecting() ? this.blkSlct() : error ? false - : this.config.lazyLoad - ? false - : this.selectFirst() + : !this.config.lazyLoad + ? this.selectFirst() + : this.lazySelectFirst() }).catch((err) => { console.error(err) @@ -454,9 +460,9 @@ export default { this.$refs['success-audio'].play() this.isBulkSelecting() ? this.blkSlct() - : this.config.lazyLoad - ? false - : this.selectFirst() + : !this.config.lazyLoad + ? this.selectFirst() + : this.lazySelectFirst() this.$nextTick(() => { if (data.fullCacheClear) { @@ -523,7 +529,13 @@ export default { state: state }).then(({data}) => { this.showNotif(data.message) - this.removeCachedResponse() + + if (this.selectedFileIs('folder')) { + this.removeCachedResponse('../') + } else { + this.removeCachedResponse() + } + }).catch((err) => { console.error(err) this.ajaxError() @@ -603,4 +615,4 @@ export default { } } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/image.js b/src/resources/assets/js/modules/image.js index 1da0424..7ba25f5 100644 --- a/src/resources/assets/js/modules/image.js +++ b/src/resources/assets/js/modules/image.js @@ -16,7 +16,7 @@ export default { }, // lazy - lazyImageActive(item) { + lazyImageActivate(item) { this.$nextTick(() => { let img = this.$refs[item] @@ -28,8 +28,14 @@ export default { } }) }, + lazySelectFirst() { + if (this.fileTypeIs(this.allFiles[0], 'folder')) { + return this.selectFirst() + } + }, imageIsCached(url) { // TODO + // check if img is in browser cache and show it return false } } diff --git a/src/resources/assets/js/modules/selected.js b/src/resources/assets/js/modules/selected.js index 131fa34..2765649 100644 --- a/src/resources/assets/js/modules/selected.js +++ b/src/resources/assets/js/modules/selected.js @@ -55,7 +55,7 @@ export default { // normal selection this.selectedFile = file this.currentFileIndex = index - this.lazyImageActive(file.path) + this.lazyImageActivate(file.path) // bulk selection if (this.isBulkSelecting()) { @@ -98,16 +98,17 @@ export default { let prev_folder_name = this.folders[index] this.folders = this.folders.splice(0, index) - this.getFiles(this.folders, prev_folder_name) + this.invalidateCache().then(() => { + this.getFiles(this.folders, prev_folder_name) + }) } }, goToPrevFolder() { let length = this.folders.length - let newSelected = length - 1 return length == 0 ? false - : this.goToFolder(newSelected) + : this.goToFolder(length - 1) }, /* Navigation */ @@ -184,4 +185,4 @@ export default { } } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/utils.js b/src/resources/assets/js/modules/utils.js index 2102c21..8968c8d 100644 --- a/src/resources/assets/js/modules/utils.js +++ b/src/resources/assets/js/modules/utils.js @@ -69,9 +69,9 @@ export default { this.resetInput('bulkList', []) this.resetInput('searchFor') - if (!this.config.lazyLoad) { - this.selectFirst() - } + !this.config.lazyLoad + ? this.selectFirst() + : this.lazySelectFirst() }, /* Resolve */ @@ -187,4 +187,4 @@ export default { this.$copyText(path) } } -} +} \ No newline at end of file diff --git a/src/resources/assets/js/modules/watch.js b/src/resources/assets/js/modules/watch.js index 4abb0c1..c12ea6c 100644 --- a/src/resources/assets/js/modules/watch.js +++ b/src/resources/assets/js/modules/watch.js @@ -108,8 +108,10 @@ export default { this.resetInput('sortBy') } - if (!this.isBulkSelecting() && !this.config.lazyLoad) { - this.selectFirst() + if (!this.isBulkSelecting()) { + !this.config.lazyLoad + ? this.selectFirst() + : this.lazySelectFirst() } } }, @@ -121,8 +123,10 @@ export default { // search searchFor(val) { - if (!this.isBulkSelecting() && !this.config.lazyLoad) { - this.selectFirst() + if (!this.isBulkSelecting()) { + !this.config.lazyLoad + ? this.selectFirst() + : this.lazySelectFirst() } if (!val) { @@ -148,4 +152,4 @@ export default { } } } -} +} \ No newline at end of file diff --git a/src/resources/assets/sass/extra/animation.scss b/src/resources/assets/sass/extra/animation.scss index ca56721..f08b247 100644 --- a/src/resources/assets/sass/extra/animation.scss +++ b/src/resources/assets/sass/extra/animation.scss @@ -3,7 +3,7 @@ $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-in-out; + transition: all 0.25s ease-out; } } diff --git a/src/resources/assets/sass/media.scss b/src/resources/assets/sass/media.scss index 89ed976..0c64d3e 100644 --- a/src/resources/assets/sass/media.scss +++ b/src/resources/assets/sass/media.scss @@ -43,7 +43,7 @@ position: relative; overflow: hidden; cursor: pointer; - transition: all 0.3s ease-in-out; + transition: all 0.25s ease-out; border-radius: 5px; background-color: $black; background-repeat: repeat; @@ -56,7 +56,7 @@ width: 25vw; height: 25vw; content: ''; - transition: all 0.3s ease-in-out; + transition: all 0.25s ease-out; transform: translate(-50%, -50%); opacity: 0.9; border-radius: 100vw; @@ -98,7 +98,7 @@ .circle, .anchor { - transition: all 0.3s; + transition: all 0.25s ease-out; } .circle { @@ -163,7 +163,7 @@ width: 100%; padding: 1rem 0 0; list-style: none; - transition: all 0.25s ease-in-out; + transition: all 0.25s ease-out; li { position: relative; @@ -229,7 +229,7 @@ } a { - transition: all 0.25s ease-in-out; + transition: all 0.25s ease-out; color: $blue; box-shadow: $shadow_3; @@ -305,7 +305,7 @@ .media-manager__stack-container, .media-manager__stack-sidebar { - transition: all 0.25s ease-in; + transition: all 0.25s ease-out; } // left "files list" @@ -317,7 +317,7 @@ left: 20%; overflow: scroll; padding: 0.7rem; - transition: left 0.5s ease-in-out; + transition: left 0.25s ease-out; } .__stack-sidebar-hidden { @@ -338,7 +338,7 @@ max-width: 244px; min-height: 95px; max-height: 95px; - transition: all 0.25s ease-in-out; + transition: all 0.25s ease-out; } } @@ -350,7 +350,7 @@ margin: 0.7rem; padding: 0.7rem; cursor: pointer; - transition: all 0.25s ease-in-out; + transition: all 0.25s ease-out; color: darken($active_theme, 55%); border: 1px solid darken($active_theme, 3%); border-radius: 4px; @@ -522,7 +522,7 @@ display: flex; flex-direction: column; width: 20%; - transition: all 0.5s ease-in-out; + transition: all 0.25s ease-out; border-right: 1px solid darken($active_theme, 5%); .__sidebar-preview { @@ -570,8 +570,9 @@ display: flex; flex: 1 0 auto; flex-direction: column; - transition: background 0.8s ease-in-out; + transition: background 0.25s ease-out; word-break: break-all; + background-color: $active_theme; > div { padding: 0.75rem; @@ -619,7 +620,7 @@ &:not(:only-of-type) { flex: 1; - transition: all 0.3s ease-in-out; + transition: all 0.25s ease-out; } &:only-of-type { @@ -758,7 +759,7 @@ $editorBtns: rgba(darken($active_theme, 70%), 0.8); .btn-plain { padding: 0.7rem; - transition: all 0.3s; + transition: all 0.25s ease-out; color: white; &:hover, diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php index 6bdbb06..437474a 100644 --- a/src/resources/views/_manager.blade.php +++ b/src/resources/views/_manager.blade.php @@ -1,6 +1,7 @@ {{-- mobile breadCrumb --}} @php $alt_breadcrumb = true; + $randId = uniqid(); @endphp {{-- component --}} @@ -10,8 +11,8 @@ 'hideFilesExt' => config('mediaManager.hide_files_ext') ? true : false, 'lazyLoad' => config('mediaManager.lazy_load_image_on_click') ? true : false, 'imageTypes' => config('mediaManager.image_extended_mimes'), + 'cacheExp' => config('mediaManager.cacheExpiresAfter'), ]) }}" - :cache-exp="{{ $cacheExp }}" :in-modal="{{ isset($modal) ? 'true' : 'false' }}" :hide-ext="{{ isset($hideExt) ? json_encode($hideExt) : '[]' }}" :hide-path="{{ isset($hidePath) ? json_encode($hidePath) : '[]' }}" @@ -55,7 +56,8 @@ ref="upload" :disabled="isLoading" @click="toggleUploadPanel()" - v-tippy title="u"> + v-tippy + title="u"> {{ trans('MediaManager::messages.upload') }} @@ -81,7 +83,8 @@ @@ -183,7 +191,8 @@ class="button" :class="{'is-warning' : bulkSelectAll}" v-show="isBulkSelecting()" :disabled="searchItemsCount == 0 || isLoading" - v-tippy title="a"> + v-tippy + title="a">