diff --git a/modules/cms/widgets/MediaManager.php b/modules/cms/widgets/MediaManager.php index 913ba6d87..ac941906b 100644 --- a/modules/cms/widgets/MediaManager.php +++ b/modules/cms/widgets/MediaManager.php @@ -349,6 +349,13 @@ class MediaManager extends WidgetBase ]; } + public function onSetSidebarVisible() + { + $visible = Input::get('visible'); + + $this->setSidebarVisible($visible); + } + // // Methods for th internal use // @@ -378,6 +385,7 @@ class MediaManager extends WidgetBase $this->vars['sortBy'] = $sortBy; $this->vars['searchMode'] = $searchMode; $this->vars['searchTerm'] = $searchTerm; + $this->vars['sidebarVisible'] = $this->getSidebarVisible(); } protected function listFolderItems($folder, $filter, $sortBy) @@ -452,6 +460,16 @@ class MediaManager extends WidgetBase return $this->getSession('media_sort_by', MediaLibrary::SORT_BY_TITLE); } + protected function setSidebarVisible($visible) + { + return $this->putSession('sideba_visible', !!$visible); + } + + protected function getSidebarVisible() + { + return $this->getSession('sideba_visible', true); + } + protected function itemTypeToIconClass($item, $itemType) { if ($item->type == MediaLibraryItem::TYPE_FOLDER) diff --git a/modules/cms/widgets/mediamanager/assets/css/mediamanager.css b/modules/cms/widgets/mediamanager/assets/css/mediamanager.css index 1c3341ca0..06676f7ba 100644 --- a/modules/cms/widgets/mediamanager/assets/css/mediamanager.css +++ b/modules/cms/widgets/mediamanager/assets/css/mediamanager.css @@ -380,6 +380,11 @@ div[data-control="media-manager"] .upload-progress .progress-controls .controls div[data-control="media-manager"] .dz-preview { display: none; } +div[data-control="media-manager"] button[data-command="toggle-sidebar"].sidebar-hidden { + -webkit-transform: rotate(180deg) translate(0, 0); + -ms-transform: rotate(180deg) translate(0, 0); + transform: rotate(180deg) translate(0, 0); +} body:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover .icon-container { background: #4da7e8 !important; border-color: #2581b8; @@ -404,3 +409,8 @@ body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hove body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover .icon-container { border-right-color: #4da7e8 !important; } +@media (max-width: 1280px) { + div[data-control="media-manager"] .media-list.list li { + width: 230px; + } +} diff --git a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js index 0af71e03b..aa905d49e 100644 --- a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js +++ b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js @@ -287,7 +287,29 @@ // MediaManager.prototype.isPreviewSidebarVisible = function() { - return true + return !this.$el.find('[data-control="preview-sidebar"]').hasClass('hide') + } + + MediaManager.prototype.toggleSidebar = function(ev) { + var isVisible = this.isPreviewSidebarVisible(), + $sidebar = this.$el.find('[data-control="preview-sidebar"]'), + $button = $(ev.target) + + if (!isVisible) { + $sidebar.removeClass('hide') + this.updateSidebarPreview() + $button.removeClass('sidebar-hidden') + } + else { + $sidebar.addClass('hide') + $button.addClass('sidebar-hidden') + } + + this.$form.request(this.options.alias+'::onSetSidebarVisible', { + data: { + visible: (isVisible ? 0 : 1) + } + }) } MediaManager.prototype.updateSidebarMediaPreview = function(items) { @@ -929,6 +951,9 @@ case 'move': this.moveItems(ev) break; + case 'toggle-sidebar': + this.toggleSidebar(ev) + break; } return false diff --git a/modules/cms/widgets/mediamanager/assets/less/mediamanager.less b/modules/cms/widgets/mediamanager/assets/less/mediamanager.less index ff391fc8d..593857a2c 100644 --- a/modules/cms/widgets/mediamanager/assets/less/mediamanager.less +++ b/modules/cms/widgets/mediamanager/assets/less/mediamanager.less @@ -448,6 +448,12 @@ div[data-control="media-manager"] { .dz-preview { display: none; } + + button[data-command="toggle-sidebar"] { + &.sidebar-hidden { + .transform( ~'rotate(180deg) translate(0, 0)' ); + } + } } body:not(.no-select) { @@ -464,4 +470,16 @@ body:not(.no-select) { } } } +} + +@media (max-width: 1280px) { + div[data-control="media-manager"] { + .media-list { + &.list { + li { + width: 230px; + } + } + } + } } \ No newline at end of file diff --git a/modules/cms/widgets/mediamanager/partials/_body.htm b/modules/cms/widgets/mediamanager/partials/_body.htm index 8d5874b4a..115d8b342 100644 --- a/modules/cms/widgets/mediamanager/partials/_body.htm +++ b/modules/cms/widgets/mediamanager/partials/_body.htm @@ -41,7 +41,7 @@ -