feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile

- Base: wintercms/winter branch 1.2 (full framework)
- Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS
- Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication
- Partials: hero (offline-first), features, modes (offline/nube toggle),
  screenshots, pricing (3 planes), comparison, FAQ, CTA
- Plugin VivesPOS.Site with ContactForm
- Dockerfile: PHP 8.2 Apache, port 80, healthcheck
- Added winter/wn-pages, blog, sitemap, seo plugins
- Active theme set to vivespos

modules/backend/widgets/mediamanager/partials/_body.php

@@ -0,0 +1,70 @@
+<div
+    data-control="media-manager"
+    class="layout"
+    data-alias="<?= $this->alias ?>"
+    data-upload-handler="<?= $this->getEventHandler('onUpload') ?>"
+    data-delete-empty="<?= e(trans('backend::lang.media.delete_empty')) ?>"
+    data-delete-confirm="<?= e(trans('backend::lang.media.delete_confirm')) ?>"
+    data-move-empty="<?= e(trans('backend::lang.media.move_empty')) ?>"
+    data-select-single-image="<?= e(trans('backend::lang.media.select_single_image')) ?>"
+    data-selection-not-image="<?= e(trans('backend::lang.media.selection_not_image')) ?>"
+    data-bottom-toolbar="<?= $this->bottomToolbar ? 'true' : 'false' ?>"
+    data-crop-and-insert-button="<?= $this->cropAndInsertButton ? 'true' : 'false' ?>"
+    data-read-only="<?= $this->readOnly ? 'true' : 'false'; ?>"
+    tabindex="0"
+>
+
+    <?= $this->makePartial('toolbar') ?>
+
+    <?= (!$this->readOnly) ? $this->makePartial('upload-progress') : '' ?>
+
+    <div class="layout-row whiteboard">
+        <div class="layout">
+            <div class="layout-row">
+                <div class="layout-cell panel w-200 border-right" data-control="left-sidebar">
+                    <?= $this->makePartial('left-sidebar') ?>
+                </div>
+                <div class="layout-cell">
+                    <div class="layout">
+
+                        <div class="layout-row min-size">
+                            <?= $this->makePartial('folder-toolbar') ?>
+                        </div>
+                        <div class="layout-row">
+                            <!-- Main area -->
+                            <div class="layout">
+                                <div class="layout-row">
+                                    <div class="layout">
+                                        <!-- Main area - list -->
+                                        <div data-control="item-list">
+                                            <div class="control-scrollpad">
+                                                <div class="scroll-wrapper"> <!-- This element is required for the scrollpad control -->
+                                                    <div id="<?= $this->getId('item-list') ?>" >
+                                                        <?= $this->makePartial('item-list') ?>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="layout-cell w-300 panel border-left no-padding <?= !$sidebarVisible ? 'hide' : null ?>" data-control="preview-sidebar">
+                                            <!-- Right sidebar -->
+                                            <?= $this->makePartial('right-sidebar') ?>
+                                        </div>
+
+                                    </div>
+                                </div>
+
+                                <div class="layout-row min-size hide" data-control="bottom-toolbar">
+                                    <?= $this->makePartial('bottom-toolbar') ?>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <?= $this->makePartial('new-folder-form') ?>
+</div>

modules/backend/widgets/mediamanager/partials/_bottom-toolbar.php

@@ -0,0 +1,30 @@
+<div class="panel no-padding-bottom border-top">
+    <div class="form-buttons">
+        <div class="pull-right">
+            <button
+                type="button"
+                data-command="popup-command"
+                data-popup-command="insert"
+                class="btn btn-primary">
+                <?= e(trans('backend::lang.media.insert')) ?>
+            </button>
+
+            <?php if (!$this->readOnly): ?>
+                <button
+                    type="button"
+                    data-command="popup-command"
+                    data-popup-command="crop-and-insert"
+                    class="btn btn-primary hide">
+                    <?= e(trans('backend::lang.media.crop_and_insert')) ?>
+                </button>
+            <?php endif; ?>
+
+            <button
+                type="button"
+                data-dismiss="popup"
+                class="btn btn-default no-margin-right">
+                <?= e(trans('backend::lang.form.cancel')) ?>
+            </button>
+        </div>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_crop-tool-image-area.php

@@ -0,0 +1,33 @@
+<div class="layout" 
+    data-control="media-manager-crop-tool"
+    <?php if ($dimensions): ?>
+    data-image-width="<?= $dimensions[0] ?>"
+    data-image-height="<?= $dimensions[1] ?>"
+    <?php endif ?>
+>
+    <div class="layout-row min-size ruler-container horizontal hide">
+        <div class="layout-cell">
+            <div class="layout-relative">
+                <div class="ruler" data-control="h-ruler"></div>
+            </div>
+        </div>
+    </div>
+    <div class="layout-row">
+        <div class="layout">
+            <div class="layout-row">
+                <div class="layout-cell ruler-container vertical hide">
+                    <div class="layout-relative">
+                        <div class="ruler" data-control="v-ruler"></div>
+                    </div>
+                </div>
+                <div class="layout-cell">
+                    <div class="layout-relative">
+                        <div class="image_area">
+                            <img src="<?= $imageUrl ?>"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_crop-toolbar.php

@@ -0,0 +1,40 @@
+<?php
+$selectionModes = [
+    Backend\Widgets\MediaManager::SELECTION_MODE_NORMAL => trans('backend::lang.media.selection_mode_normal'),
+    Backend\Widgets\MediaManager::SELECTION_MODE_FIXED_RATIO => trans('backend::lang.media.selection_mode_fixed_ratio'),
+    Backend\Widgets\MediaManager::SELECTION_MODE_FIXED_SIZE => trans('backend::lang.media.selection_mode_fixed_size')
+];
+
+$sizeDisabledAttr = $currentSelectionMode == Backend\Widgets\MediaManager::SELECTION_MODE_NORMAL ? 'disabled="disabled"' : null;
+?>
+
+<div class="control-toolbar toolbar-padded">
+    <div class="toolbar-item toolbar-primary">
+        <div data-control="toolbar">
+            <label class="standalone"><?= e(trans('backend::lang.media.image_size')) ?> <span data-label="width"><?= $dimensions[0] ?></span> x <span data-label="height"><?= $dimensions[1] ?></span></label>
+
+            <div class="btn-group offset-right">
+                <button type="button" class="btn btn-primary standalone" data-command="resize"
+                ><?= e(trans('backend::lang.media.resize')) ?></button>
+
+                <button type="button" class="btn btn-primary wn-icon-undo empty" data-command="undo-resizing"></button>
+            </div>
+
+            <label for="mmcropimagewidth"><?= e(trans('backend::lang.media.selection_mode')) ?></label>
+            <select name="selectionMode" class="form-control custom-select w-150" data-control="selection-mode">
+                <?php foreach ($selectionModes as $mode => $name): ?>
+                    <option <?= $mode == $currentSelectionMode ? 'selected="selected"' : null ?> value="<?= $mode ?>"><?= e($name) ?></option>
+                <?php endforeach ?>
+            </select>
+
+            <label for="mmcropimagewidth"><?= e(trans('backend::lang.media.width')) ?></label>
+            <input id="mmcropimagewidth" type="text" class="form-control w-100" data-control="crop-width-input" name="selectionWidth" value="<?= e($currentSelectionWidth) ?>" <?= $sizeDisabledAttr ?>/>
+
+            <label for="mmcropimageheight"><?= e(trans('backend::lang.media.height')) ?></label>
+            <input id="mmcropimageheight" type="text" class="form-control w-100" data-control="crop-height-input" name="selectionHeight" value="<?= e($currentSelectionHeight) ?>" <?= $sizeDisabledAttr ?>/>
+
+            <label class="standalone hide" data-label="selection-size"><?= e(trans('backend::lang.media.selected_size')) ?> <span data-label="selection-width"></span> x <span data-label="selection-height"></span></label>
+
+        </div>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_filters.php

@@ -0,0 +1,64 @@
+<h3 class="section"><?= e(trans('backend::lang.media.display')) ?></h3>
+
+<ul class="nav nav-stacked selector-group">
+    <li
+        role="presentation"
+        <?php if ($currentFilter == Backend\Widgets\MediaManager::FILTER_ALL): ?>
+            class="active"
+        <?php endif ?>
+    >
+        <a href="#" data-command="set-filter" data-filter="<?= Backend\Widgets\MediaManager::FILTER_ALL ?>">
+            <i class="icon-recycle"></i>
+
+            <?= e(trans('backend::lang.media.filter_all')) ?>
+        </a>
+    </li>
+    <li
+        role="presentation"
+        <?php if ($currentFilter == System\Classes\MediaLibraryItem::FILE_TYPE_IMAGE): ?>
+            class="active"
+        <?php endif ?>
+    >
+        <a href="#" data-command="set-filter" data-filter="<?= System\Classes\MediaLibraryItem::FILE_TYPE_IMAGE ?>">
+            <i class="icon-picture-o"></i>
+
+            <?= e(trans('backend::lang.media.filter_images')) ?>
+        </a>
+    </li>
+    <li
+        role="presentation"
+        <?php if ($currentFilter == System\Classes\MediaLibraryItem::FILE_TYPE_VIDEO): ?>
+            class="active"
+        <?php endif ?>
+    >
+        <a href="#" data-command="set-filter" data-filter="<?= System\Classes\MediaLibraryItem::FILE_TYPE_VIDEO ?>">
+            <i class="icon-video-camera"></i>
+
+            <?= e(trans('backend::lang.media.filter_video')) ?>
+        </a>
+    </li>
+    <li
+        role="presentation"
+        <?php if ($currentFilter == System\Classes\MediaLibraryItem::FILE_TYPE_AUDIO): ?>
+            class="active"
+        <?php endif ?>
+    >
+        <a href="#" data-command="set-filter" data-filter="<?= System\Classes\MediaLibraryItem::FILE_TYPE_AUDIO ?>">
+            <i class="icon-volume-up"></i>
+
+            <?= e(trans('backend::lang.media.filter_audio')) ?>
+        </a>
+    </li>
+    <li
+        role="presentation"
+        <?php if ($currentFilter == System\Classes\MediaLibraryItem::FILE_TYPE_DOCUMENT): ?>
+            class="active"
+        <?php endif ?>
+    >
+        <a href="#" data-command="set-filter" data-filter="<?= System\Classes\MediaLibraryItem::FILE_TYPE_DOCUMENT ?>">
+            <i class="icon-file"></i>
+
+            <?= e(trans('backend::lang.media.filter_documents')) ?>
+        </a>
+    </li>
+</ul>

modules/backend/widgets/mediamanager/partials/_folder-path.php

@@ -0,0 +1,13 @@
+<ul class="tree-path">
+    <li class="root"><a href="javascript:;" data-type="media-item" data-item-type="folder" data-path="/" data-clear-search="true"><?= e(trans('backend::lang.media.library')) ?></a></li>
+
+    <?php if (!$searchMode): ?>
+        <?php foreach ($pathSegments as $folder => $path): ?>
+            <?php if ($path != '/'): ?>
+                <li><a href="javascript:;" data-type="media-item" data-item-type="folder" data-path="<?= e($path) ?>"><?= basename($folder) ?></a></li>
+            <?php endif ?>
+        <?php endforeach?>
+    <?php else: ?>
+        <li><a href="javascript:;" data-type="media-item"><?= e(trans('backend::lang.media.search')) ?></a></li>
+    <?php endif ?>
+</ul>

modules/backend/widgets/mediamanager/partials/_folder-toolbar.php

@@ -0,0 +1,16 @@
+<div class="panel padding-less border-bottom triangle-down">
+    <div class="layout">
+        <div class="layout-cell">
+            <div class="layout-row" id="<?= $this->getId('folder-path') ?>">
+                <?= $this->makePartial('folder-path') ?>
+            </div>
+        </div>
+        <div class="layout-cell">
+            <button
+                type="button"
+                data-command="toggle-sidebar"
+                class="wn-icon-sign-out btn-icon pull-right larger <?= !$sidebarVisible ? 'sidebar-hidden' : null ?>">
+            </button>
+        </div>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_generic-list.php

@@ -0,0 +1,63 @@
+<?php
+    $listElementId = $this->getId('item-list');
+?>
+
+<ul class="media-list <?= $listClass ?>">
+    <?php if (count($items) > 0 || !$isRootFolder): ?>
+        <?php if (!$isRootFolder && !$searchMode): ?>
+            <li tabindex="0" data-type="media-item" data-item-type="folder" data-root data-path="<?= e(dirname($currentFolder)) ?>">
+                <div class="icon-container folder">
+                    <div class="icon-wrapper"><i class="icon-arrow-turn-up"></i></div>
+                </div>
+                <div class="info">
+                    <h4 title="<?= e(trans('backend::lang.media.return_to_parent')) ?>"><?= e(trans('backend::lang.media.return_to_parent_label')) ?></h4>
+                </div>
+            </li>
+        <?php endif ?>
+
+        <?php foreach ($items as $item): ?>
+            <?php
+                $itemType = $item->getFileType();
+            ?>
+            <li data-type="media-item"
+                data-item-type="<?= $item->type ?>"
+                data-path="<?= e($item->path) ?>"
+                data-title="<?= e(basename($item->path)) ?>"
+                data-size="<?= e($item->sizeToString()) ?>"
+                data-size-bytes="<?= $item->size ?>"
+                data-last-modified="<?= e($item->lastModifiedAsString()) ?>"
+                data-last-modified-ts="<?= $item->lastModified ?>"
+                data-public-url="<?= e($item->publicUrl) ?>"
+                data-document-type="<?= e($itemType) ?>"
+                data-folder="<?= e(dirname($item->path)) ?>"
+                tabindex="0"
+            >
+                <?= $this->makePartial('item-icon', ['itemType'=>$itemType, 'item'=>$item]) ?>
+
+                <div class="info">
+                    <h4 title="<?= e(basename($item->path)) ?>">
+                        <?= e(basename($item->path)) ?>
+
+                        <?php if (!$this->readOnly): ?>
+                            <a
+                                href="#"
+                                data-rename
+                                data-control="popup"
+                                data-z-index="1200"
+                                data-request-data="path: '<?= e($item->path) ?>', listId: '<?= $listElementId ?>', type: '<?= $item->type ?>'"
+                                data-handler="<?= $this->getEventHandler('onLoadRenamePopup') ?>"
+                            ><i data-rename-control class="icon-terminal"></i></a>
+                        <?php endif; ?>
+                    </h4>
+                    <p class="size"><?= e($item->sizeToString()) ?></p>
+                </div>
+            </li>
+        <?php endforeach ?>
+    <?php endif ?>
+
+    <?php if (count($items) == 0 && $searchMode): ?>
+        <li class="no-data">
+            <?= e(trans('backend::lang.media.no_files_found')) ?>
+        </li>
+    <?php endif ?>
+</ul>

modules/backend/widgets/mediamanager/partials/_image-crop-popup-body.php

@@ -0,0 +1,42 @@
+<?= Form::open(['class'=>'layout', 'onsubmit'=>'return false']) ?>
+    <div class="layout-row min-size">
+        <?= $this->makePartial('crop-toolbar') ?>
+    </div>
+    <div class="layout-row whiteboard">
+        <?= $this->makePartial('crop-tool-image-area') ?>
+    </div>
+    <div class="layout-row min-size whiteboard">
+        <div class="panel no-padding-bottom border-top">
+            <div class="form-buttons">
+                <div class="pull-right">
+                    <button
+                        type="button"
+                        data-command="insert"
+                        class="btn btn-primary">
+                        <?= e(trans('backend::lang.media.crop_and_insert')) ?>
+                    </button>
+
+                    <button
+                        type="button"
+                        data-dismiss="popup"
+                        class="btn btn-default no-margin-right">
+                        <?= e(trans('backend::lang.form.cancel')) ?>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <input type="hidden" name="path" value="<?= e($path) ?>">
+
+    <input type="hidden" data-control="dimension-width" value="<?= $dimensions[0] ?>">
+    <input type="hidden" data-control="dimension-height" value="<?= $dimensions[1] ?>">
+
+    <input type="hidden" data-control="original-width" value="<?= $dimensions[0] ?>">
+    <input type="hidden" data-control="original-height" value="<?= $dimensions[1] ?>">
+
+    <input type="hidden" data-control="original-ratio" value="<?= $originalRatio ?>">
+    <input type="hidden" data-control="original-url" value="<?= e($imageUrl) ?>">
+
+    <?= $this->makePartial('resize-image-form') ?>
+<?= Form::close() ?>

modules/backend/widgets/mediamanager/partials/_item-icon.php

@@ -0,0 +1,45 @@
+<div class="icon-container <?= $itemType ?>">
+    <div class="icon-wrapper">
+        <?php
+            $itemIconClass = $this->itemTypeToIconClass($item, $itemType);
+            $extension = substr(strtolower(pathinfo($item->path, PATHINFO_EXTENSION)), 0, 4) ?? '???';
+
+        if ($itemIconClass == 'icon-file'): ?>
+            <svg class="file-icon" viewBox="0 0 250 250" xml:space="preserve">
+                <path d="M62.5,0c-8.594,0 -15.625,7.031 -15.625,15.625l0,218.75c0,8.594 7.031,15.625 15.625,15.625l156.25,0c8.594,0 15.625,-7.031 15.625,-15.625l0,-171.875l-62.5,-62.5l-109.375,0Z" style="fill:#e2e5e7;fill-rule:nonzero;"/>
+                <path d="M187.5,62.5l46.875,0l-62.5,-62.5l0,46.875c0,8.594 7.031,15.625 15.625,15.625Z" style="fill:#b0b7bd;fill-rule:nonzero;"/>
+                <path d="M234.375,109.375l-46.875,-46.875l46.875,0l0,46.875Z" style="fill:#cad1d8;fill-rule:nonzero;"/>
+                <path d="M195.313,210.938l-148.438,-0.001l0,7.813l148.438,0c4.296,0 7.812,-3.516 7.812,-7.813l-0,-7.812c-0,4.297 -3.516,7.813 -7.813,7.813Z" style="fill:#cad1d8;fill-rule:nonzero;"/>
+                <!-- Colour label -->
+                <path class="file-icon-label file-icon-<?= $extension ?>" d="M203.125,203.125c0,4.297 -3.516,7.813 -7.813,7.813l-171.875,-0c-4.296,-0 -7.812,-3.516 -7.812,-7.813l-0,-78.125c-0,-4.297 3.516,-7.813 7.812,-7.813l171.875,0.001c4.297,-0.001 7.813,3.515 7.813,7.812l0,78.125Z"/>
+                <!-- Extension text node -->
+                <text class="file-icon-extension" x="43%" y="170px" dominant-baseline="middle" text-anchor="middle"><?= strtoupper($extension) ?></text>
+            </svg>
+        <?php else :?>
+            <i class="<?= $itemIconClass ?>"></i>
+        <?php endif ?>
+    </div>
+    <?php if (
+        $itemType == System\Classes\MediaLibraryItem::FILE_TYPE_IMAGE
+        && $thumbnailUrl = $this->getResizedImageUrl($item->path, $thumbnailParams)
+    ): ?>
+        <div>
+            <?php if (!$thumbnailUrl): ?>
+                <div
+                    class="image-placeholder"
+                    data-width="<?= $thumbnailParams['width'] ?>"
+                    data-height="<?= $thumbnailParams['height'] ?>"
+                    data-path="<?= e($item->path) ?>"
+                    data-last-modified="<?= $item->lastModified ?>"
+                    id="<?= $this->getPlaceholderId($item) ?>"
+                >
+                    <div class="icon-wrapper"><i class="<?= $this->itemTypeToIconClass($item, $itemType) ?>"></i></div>
+                </div>
+            <?php else: ?>
+                <?= $this->makePartial('thumbnail-image', [
+                    'imageUrl' => $thumbnailUrl,
+                ]) ?>
+            <?php endif ?>
+        </div>
+    <?php endif ?>
+</div>

modules/backend/widgets/mediamanager/partials/_item-list.php

@@ -0,0 +1,17 @@
+<div class="panel no-padding padding-top">
+    <input type="hidden" data-type="current-folder" value="<?= e($currentFolder) ?>"/>
+    <input type="hidden" data-type="search-mode" value="<?= $searchMode ? 'true' : 'false' ?>"/>
+    <div class="list-container">
+        <?php if (count($items) == 0 && $isRootFolder && !$searchMode): ?>
+            <div class="empty-library"><?= e(trans('backend::lang.media.empty_library')) ?></div>
+        <?php endif ?>
+
+        <?php if ($viewMode == Backend\Widgets\MediaManager::VIEW_MODE_GRID): ?>
+            <?= $this->makePartial('list-grid') ?>
+        <?php elseif ($viewMode == Backend\Widgets\MediaManager::VIEW_MODE_LIST): ?>
+            <?= $this->makePartial('list-list') ?>
+        <?php else: ?>
+            <?= $this->makePartial('list-tiles') ?>
+        <?php endif ?>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_item-sidebar-preview.php

@@ -0,0 +1,50 @@
+<div data-control="media-preview-container"></div>
+
+<script type="text/template" data-control="audio-template">
+    <div class="panel no-padding-bottom">
+        <audio src="{src}" controls>
+            <div class="media-player-fallback panel-embedded">Your browser doesn't support HTML5 audio.</div>
+        </audio>
+    </div>
+</script>
+
+<script type="text/template" data-control="video-template">
+    <video src="{src}" controls poster="<?= Url::asset('modules/backend/widgets/mediamanager/assets/images/video-poster.png') ?>">
+        <div class="panel media-player-fallback">Your browser doesn't support HTML5 video.</div>
+    </video>
+</script>
+
+<script type="text/template" data-control="image-template">
+    <div class="sidebar-image-placeholder-container"><div class="sidebar-image-placeholder" data-path="{path}" data-last-modified="{last-modified}" data-loading="true" data-control="sidebar-thumbnail"></div></div>
+</script>
+
+<script type="text/template" data-control="document-template">
+    <div class="sidebar-document-placeholder-container"><div class="sidebar-document-placeholder" data-path="{path}" data-last-modified="{last-modified}" data-control="sidebar-document"></div></div>
+</script>
+
+<script type="text/template" data-control="no-selection-template">
+    <div class="sidebar-image-placeholder-container">
+        <div class="sidebar-image-placeholder no-border">
+            <i class="icon-crop"></i>
+            <p><?= e(trans('backend::lang.media.nothing_selected')) ?></p>
+        </div>
+    </div>
+</script>
+
+<script type="text/template" data-control="multi-selection-template">
+    <div class="sidebar-image-placeholder-container">
+        <div class="sidebar-image-placeholder no-border">
+            <i class="icon-asterisk"></i>
+            <p><?= e(trans('backend::lang.media.multiple_selected')) ?></p>
+        </div>
+    </div>
+</script>
+
+<script type="text/template" data-control="go-up">
+    <div class="sidebar-image-placeholder-container">
+        <div class="sidebar-image-placeholder no-border">
+            <i class="icon-level-up"></i>
+            <p><?= e(trans('backend::lang.media.return_to_parent')) ?></p>
+        </div>
+    </div>
+</script>

modules/backend/widgets/mediamanager/partials/_left-sidebar.php

@@ -0,0 +1,7 @@
+<?php if ($this->getFilterDisplay()): ?>
+    <div id="<?= $this->getId('filters') ?>">
+        <?= $this->makePartial('filters') ?>
+    </div>
+<?php endif; ?>
+
+<?= $this->makePartial('sorting') ?>

modules/backend/widgets/mediamanager/partials/_list-grid.php

@@ -0,0 +1,70 @@
+<?php
+    $listElementId = $this->getId('item-list');
+?>
+
+<table class="table data">
+    <col />
+    <col width="130px" />
+    <col width="130px" />
+
+    <tbody class="icons clickable">
+        <?php if (count($items) > 0 || !$isRootFolder): ?>
+            <?php if (!$isRootFolder && !$searchMode): ?>
+                <tr data-type="media-item" data-item-type="folder" data-root data-path="<?= e(dirname($currentFolder)) ?>" tabindex="0">
+                    <td><i class="icon-arrow-turn-up"></i>..</td>
+                    <td></td>
+                    <td></td>
+                </tr>
+            <?php endif ?>
+
+            <?php foreach ($items as $item):
+                $itemType = $item->getFileType();
+                ?>
+
+                <tr data-type="media-item"
+                    data-item-type="<?= $item->type ?>"
+                    data-path="<?= e($item->path) ?>"
+                    data-title="<?= e(basename($item->path)) ?>"
+                    data-size="<?= e($item->sizeToString()) ?>"
+                    data-size-bytes="<?= $item->size ?>"
+                    data-last-modified="<?= e($item->lastModifiedAsString()) ?>"
+                    data-last-modified-ts="<?= $item->lastModified ?>"
+                    data-public-url="<?= e($item->publicUrl) ?>"
+                    data-document-type="<?= e($itemType) ?>"
+                    data-folder="<?= e(dirname($item->path)) ?>"
+                    tabindex="0"
+                >
+                    <td>
+                        <div class="item-title no-wrap-text">
+                            <i class="<?= $this->itemTypeToIconClass($item, $itemType) ?>"></i> <?= e(basename($item->path)) ?>
+
+                            <?php if (!$this->readOnly): ?>
+                                <a
+                                    href="#"
+                                    data-rename
+                                    data-control="popup"
+                                    data-request-data="path: '<?= e($item->path) ?>', listId: '<?= $listElementId ?>', type: '<?= $item->type ?>'"
+                                    data-handler="<?= $this->getEventHandler('onLoadRenamePopup') ?>"
+                                    data-z-index="1200"
+                                ><i data-rename-control class="icon-terminal"></i></a>
+                            <?php endif; ?>
+                        </div>
+                    </td>
+                    <td><?= e($item->sizeToString()) ?></td>
+                    <td><?= e($item->lastModifiedAsString()) ?></td>
+                    <?php if ($searchMode): ?>
+                        <td title="<?= e(dirname($item->path)) ?>">
+                            <div class="no-wrap-text"><?= e(dirname($item->path)) ?></div>
+                        </td>
+                    <?php endif ?>
+                </tr>
+            <?php endforeach ?>
+        <?php endif ?>
+    </tbody>
+</table>
+
+<?php if (count($items) == 0 && $searchMode): ?>
+    <p class="no-data">
+        <?= e(trans('backend::lang.media.no_files_found')) ?>
+    </p>
+<?php endif ?>

modules/backend/widgets/mediamanager/partials/_list-list.php

@@ -0,0 +1 @@
+<?= $this->makePartial('generic-list', ['listClass' => 'list']) ?>

modules/backend/widgets/mediamanager/partials/_list-tiles.php

@@ -0,0 +1 @@
+<?= $this->makePartial('generic-list', ['listClass' => 'tiles']) ?>

modules/backend/widgets/mediamanager/partials/_move-form.php

@@ -0,0 +1,35 @@
+<?= Form::open() ?>
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="popup">&times;</button>
+        <h4 class="modal-title"><?= e(trans('backend::lang.media.move_popup_title')) ?></h4>
+    </div>
+    <div class="modal-body">
+        <div class="form-group">
+            <label><?= e(trans('backend::lang.media.move_destination')) ?></label>
+            <select
+                class="form-control custom-select"
+                name="dest"
+                data-placeholder="<?= e(trans('backend::lang.media.move_please_select')) ?>">
+                <option></option>
+                <?php foreach ($folders as $path => $folder): ?>
+                    <option value="<?= e($path) ?>"><?= e($folder) ?></option>
+                <?php endforeach ?>
+            </select>
+
+            <input type="hidden" name="originalPath" value="<?= e($originalPath) ?>">
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button
+            type="submit"
+            class="btn btn-primary">
+            <?= e(trans('backend::lang.media.move_button')) ?>
+        </button>
+        <button
+            type="button"
+            class="btn btn-default"
+            data-dismiss="popup">
+            <?= e(trans('backend::lang.form.cancel')) ?>
+        </button>
+    </div>
+</form>

modules/backend/widgets/mediamanager/partials/_new-folder-form.php

@@ -0,0 +1,32 @@
+<script type="text/template" data-control="new-folder-template">
+    <?= Form::open() ?>
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="popup">&times;</button>
+            <h4 class="modal-title"><?= e(trans('backend::lang.media.new_folder_title')) ?></h4>
+        </div>
+        <div class="modal-body">
+            <div class="form-group">
+                <label><?= e(trans('backend::lang.media.folder_name')) ?></label>
+                <input
+                    type="text"
+                    class="form-control"
+                    name="name"
+                    value=""
+                    autocomplete="off" />
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button
+                type="submit"
+                class="btn btn-primary">
+                <?= e(trans('backend::lang.form.apply')) ?>
+            </button>
+            <button
+                type="button"
+                class="btn btn-default"
+                data-dismiss="popup">
+                <?= e(trans('backend::lang.form.cancel')) ?>
+            </button>
+        </div>
+    </form>
+</script>

modules/backend/widgets/mediamanager/partials/_popup-body.php

@@ -0,0 +1,3 @@
+<?= Form::open(['class'=>'layout', 'onsubmit'=>'return false']) ?>
+    <?= $this->render() ?>
+<?= Form::close() ?>

modules/backend/widgets/mediamanager/partials/_rename-form.php

@@ -0,0 +1,56 @@
+<?= Form::ajax($this->getEventHandler('onApplyName'), [
+    'success' => "\$el.trigger('close.oc.popup'); \$('#".$listId."').trigger('mediarefresh');",
+    'data-stripe-load-indicator' => 1,
+    'id' => 'media-rename-popup-form'
+]) ?>
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="popup">&times;</button>
+        <h4 class="modal-title"><?= e(trans('backend::lang.media.rename_popup_title')) ?></h4>
+    </div>
+    <div class="modal-body">
+        <div class="form-group">
+            <label><?= e(trans('backend::lang.media.rename_new_name')) ?></label>
+            <input
+                type="text"
+                name="name"
+                value="<?= e($name) ?>"
+                class="form-control"
+                autocomplete="off"
+                default-focus />
+        </div>
+
+        <input type="hidden" name="originalName" value="<?= e($name) ?>">
+        <input type="hidden" name="type" value="<?= e($type) ?>">
+        <input type="hidden" name="originalPath" value="<?= e($originalPath) ?>" />
+    </div>
+    <div class="modal-footer">
+        <button
+            type="submit"
+            class="btn btn-primary">
+            <?= e(trans('backend::lang.form.apply')) ?>
+        </button>
+        <button
+            type="button"
+            class="btn btn-default"
+            data-dismiss="popup">
+            <?= e(trans('backend::lang.form.cancel')) ?>
+        </button>
+    </div>
+    <script>
+        setTimeout(
+            function(){ $('#media-rename-popup-form input.form-control').focus() },
+            310
+        )
+
+        $('#media-rename-popup-form').on('oc.beforeRequest', function(ev){
+            var originalName = $('#media-rename-popup-form [name=originalName]').val(),
+                newName = $.trim($('#media-rename-popup-form [name=name]').val())
+
+            if (originalName == newName || newName.length == 0) {
+                alert('Please enter a new name')
+
+                ev.preventDefault()
+            }
+        })
+    </script>
+<?= Form::close() ?>

modules/backend/widgets/mediamanager/partials/_resize-image-form.php

@@ -0,0 +1,31 @@
+<script type="text/template" data-control="resize-template">
+    <?= Form::open() ?>
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="popup">&times;</button>
+            <h4 class="modal-title"><?= e(trans('backend::lang.media.resize_image')) ?></h4>
+        </div>
+        <div class="modal-body">
+            <div class="form-group span-left">
+                <label><?= e(trans('backend::lang.media.width')) ?></label>
+                <input type="text" class="form-control" name="width" value="" />
+            </div>
+            <div class="form-group span-right">
+                <label><?= e(trans('backend::lang.media.height')) ?></label>
+                <input type="text" class="form-control" name="height" value="" />
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button
+                type="submit"
+                class="btn btn-primary">
+                <?= e(trans('backend::lang.form.apply')) ?>
+            </button>
+            <button
+                type="button"
+                class="btn btn-default"
+                data-dismiss="popup">
+                <?= e(trans('backend::lang.form.cancel')) ?>
+            </button>
+        </div>
+    </form>
+</script>

modules/backend/widgets/mediamanager/partials/_right-sidebar.php

@@ -0,0 +1,26 @@
+<?= $this->makePartial('item-sidebar-preview') ?>
+
+<div class="panel hide" data-control="sidebar-labels">
+    <label><?= e(trans('backend::lang.media.title')) ?></label>
+    <p data-label="title"></p>
+
+    <table class="name-value-list">
+        <tr>
+            <th><?= e(trans('backend::lang.media.size')) ?></th>
+            <td data-label="size"></td>
+        </tr>
+        <tr>
+            <th><?= e(trans('backend::lang.media.public_url')) ?></th>
+            <td><a href="#" data-label="public-url" target="_blank"><?= e(trans('backend::lang.media.click_here')) ?></a></td>
+        </tr>
+        <tr data-control="last-modified">
+            <th><?= e(trans('backend::lang.media.last_modified')) ?></th>
+            <td data-label="last-modified"></td>
+        </tr>
+
+        <tr data-control="item-folder" class="hide">
+            <th><?= e(trans('backend::lang.media.folder')) ?></th>
+            <td><a href="#" data-type="media-item" data-item-type="folder" data-label="folder" data-clear-search="true"></a></td>
+        </tr>
+    </table>
+</div>

modules/backend/widgets/mediamanager/partials/_sorting.php

@@ -0,0 +1,46 @@
+<?php
+$sortModes = [
+    System\Classes\MediaLibrary::SORT_BY_TITLE => trans('backend::lang.media.title'),
+    System\Classes\MediaLibrary::SORT_BY_SIZE => trans('backend::lang.media.size'),
+    System\Classes\MediaLibrary::SORT_BY_MODIFIED => trans('backend::lang.media.last_modified')
+];
+
+$sortDirections = [
+    System\Classes\MediaLibrary::SORT_DIRECTION_ASC => trans('backend::lang.media.direction_asc'),
+    System\Classes\MediaLibrary::SORT_DIRECTION_DESC => trans('backend::lang.media.direction_desc')
+];
+?>
+
+<div class="sidebar-group">
+    <h3 class="section"><?= e(trans('backend::lang.media.order_by')) ?></h3>
+
+    <select
+        name="sorting"
+        class="form-control custom-select select-no-search"
+        data-control="sorting"
+        data-sort="by">
+        <?php foreach ($sortModes as $code => $title): ?>
+            <option
+                <?= $code == $sortBy ? 'selected="selected"' : '' ?>
+                value="<?= $code ?>"
+            ><?= e($title) ?></option>
+        <?php endforeach ?>
+    </select>
+</div>
+
+<div class="sidebar-group">
+    <h3 class="section"><?= e(trans('backend::lang.media.direction')) ?></h3>
+
+    <select
+        name="sorting"
+        class="form-control custom-select select-no-search"
+        data-control="sorting"
+        data-sort="direction">
+        <?php foreach ($sortDirections as $code => $title): ?>
+            <option
+                <?= $code == $sortDirection ? 'selected="selected"' : '' ?>
+                value="<?= $code ?>"
+            ><?= e($title) ?></option>
+        <?php endforeach ?>
+    </select>
+</div>

modules/backend/widgets/mediamanager/partials/_thumbnail-image.php

@@ -0,0 +1,6 @@
+<?php if ($imageUrl): ?>
+    <img src="<?= $imageUrl ?>"/>
+<?php else: ?>
+    <i class="icon-chain-broken" title="<?= e(trans('backend::lang.media.thumbnail_error')) ?>"></i>
+    <p class="thumbnail-error-message"><?= e(trans('backend::lang.media.thumbnail_error')) ?></p>
+<?php endif ?>

modules/backend/widgets/mediamanager/partials/_toolbar.php

@@ -0,0 +1,42 @@
+<div class="layout-row min-size">
+    <div class="control-toolbar toolbar-padded">
+        <div class="toolbar-item toolbar-primary">
+            <div data-control="toolbar">
+                <?php if (!$this->readOnly): ?>
+                    <div class="btn-group offset-right">
+                        <button type="button" class="btn btn-primary wn-icon-upload" data-control="upload"><?= e(trans('backend::lang.media.upload')) ?></button>
+                        <button type="button" class="btn btn-primary wn-icon-folder" data-command="create-folder"><?= e(trans('backend::lang.media.add_folder')) ?></button>
+                    </div>
+                <?php endif; ?>
+
+                <button type="button" class="btn btn-default wn-icon-refresh empty offset-right" data-command="refresh"></button>
+
+                <?php if (!$this->readOnly): ?>
+                    <div class="btn-group offset-right">
+                        <button type="button" class="btn btn-default wn-icon-reply-all" data-command="move"><?= e(trans('backend::lang.media.move')) ?></button>
+                        <button type="button" class="btn btn-default wn-icon-trash" data-command="delete"><?= e(trans('backend::lang.media.delete')) ?></button>
+                    </div>
+                <?php endif; ?>
+
+                <div class="btn-group offset-right" id="<?= $this->getId('view-mode-buttons') ?>">
+                    <?= $this->makePartial('view-mode-buttons') ?>
+                </div>
+            </div>
+        </div>
+        <div class="toolbar-item" data-calculate-width>
+            <div class="relative loading-indicator-container size-input-text">
+                <input
+                    type="text"
+                    name="search"
+                    value="<?= e($searchTerm) ?>"
+                    class="form-control icon search growable"
+                    placeholder="<?= e(trans('backend::lang.media.search')) ?>"
+                    data-control="search"
+                    autocomplete="off"
+                    data-load-indicator
+                    data-load-indicator-opaque
+                />
+            </div>
+        </div>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_upload-progress.php

@@ -0,0 +1,24 @@
+<div class="layout-row min-size hide" data-control="upload-ui">
+    <div class="layout">
+        <div class="upload-progress">
+            <h5 
+                data-label="file-number-and-progress"
+                data-message-template="<?= e(trans('backend::lang.media.uploading_file_num')) ?> &lt;span&gt;:percents&lt;/span&gt;"
+                data-success-template="<?= e(trans('backend::lang.media.uploading_complete')) ?>"
+                data-error-template="<?= e(trans('backend::lang.media.uploading_error')) ?>"
+            ></h5>
+
+            <div class="progress-controls">
+                <div class="progress">
+                    <div class="progress-bar" role="progressbar" style="width: 0;" data-control="upload-progress-bar">
+                    </div>
+                </div>
+
+                <div class="controls">
+                    <a href="#" data-command="cancel-uploading"><i class="icon-times-circle" title=""></i></a>
+                    <a class="hide" href="#" data-command="close-uploader"><i class="icon-check-circle" title=""></i></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

modules/backend/widgets/mediamanager/partials/_view-mode-buttons.php

@@ -0,0 +1,18 @@
+<button
+    type="button"
+    class="btn btn-default wn-icon-align-justify empty <?= $viewMode == Backend\Widgets\MediaManager::VIEW_MODE_GRID ? 'on' : '' ?>"
+    data-command="change-view"
+    data-view="<?= Backend\Widgets\MediaManager::VIEW_MODE_GRID ?>">
+</button>
+<button
+    type="button"
+    class="btn btn-default wn-icon-th empty <?= $viewMode == Backend\Widgets\MediaManager::VIEW_MODE_LIST ? 'on' : '' ?>"
+    data-command="change-view"
+    data-view="<?= Backend\Widgets\MediaManager::VIEW_MODE_LIST ?>">
+</button>
+<button
+    type="button"
+    class="btn btn-default wn-icon-th-large empty <?= $viewMode == Backend\Widgets\MediaManager::VIEW_MODE_TILES ? 'on' : '' ?>"
+    data-command="change-view"
+    data-view="<?= Backend\Widgets\MediaManager::VIEW_MODE_TILES ?>">
+</button>