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/cms/widgets/assetlist/assets/css/assetlist.css

@@ -0,0 +1,63 @@
+.control-assetlist p.no-data{padding:22px;margin:0;color:#666;font-size:14px;text-align:center;font-weight:400;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
+.control-assetlist p.parent,
+.control-assetlist ul li{font-weight:300;line-height:150%;margin-bottom:0}
+.control-assetlist p.parent.active a,
+.control-assetlist ul li.active a{background:#ddd;position:relative}
+.control-assetlist p.parent.active a:after,
+.control-assetlist ul li.active a:after{position:absolute;height:100%;width:4px;left:0;top:0;background:#2da7c7;display:block;content:' '}
+.control-assetlist p.parent a.link,
+.control-assetlist ul li a.link{display:block;position:relative;word-wrap:break-word;padding:10px 50px 10px 20px;outline:none;font-weight:400;color:#405261;font-size:14px}
+.control-assetlist p.parent a.link:hover,
+.control-assetlist ul li a.link:hover,
+.control-assetlist p.parent a.link:focus,
+.control-assetlist ul li a.link:focus,
+.control-assetlist p.parent a.link:active,
+.control-assetlist ul li a.link:active{text-decoration:none}
+.control-assetlist p.parent a.link span,
+.control-assetlist ul li a.link span{display:block}
+.control-assetlist p.parent a.link span.description,
+.control-assetlist ul li a.link span.description{color:#8f8f8f;font-size:12px;font-weight:400;word-wrap:break-word}
+.control-assetlist p.parent a.link span.description strong,
+.control-assetlist ul li a.link span.description strong{color:#405261;font-weight:400}
+.control-assetlist p.parent.directory a.link,
+.control-assetlist ul li.directory a.link,
+.control-assetlist p.parent.parent a.link,
+.control-assetlist ul li.parent a.link{padding-left:40px}
+.control-assetlist p.parent.directory a.link:after,
+.control-assetlist ul li.directory a.link:after,
+.control-assetlist p.parent.parent a.link:after,
+.control-assetlist ul li.parent a.link:after{display:block;position:absolute;width:10px;height:10px;top:10px;left:20px;font-family:"Font Awesome 6 Free";font-weight:900;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;text-rendering:auto;content:"\f07b";color:#a1aab1;font-size:14px}
+.control-assetlist p.parent.parent a.link,
+.control-assetlist ul li.parent a.link{padding-left:41px;background-color:#fff;word-wrap:break-word}
+.control-assetlist p.parent.parent a.link:before,
+.control-assetlist ul li.parent a.link:before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:1px;background:#ecf0f1}
+.control-assetlist p.parent.parent a.link:after,
+.control-assetlist ul li.parent a.link:after{font-size:13px;color:#103141;width:18px;height:18px;top:11px;left:22px;opacity:0.5;filter:alpha(opacity=50);font-family:"Font Awesome 6 Free";font-weight:900;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;text-rendering:auto;content:"\f053"}
+.control-assetlist p.parent a.link:hover{background:#ddd !important}
+.control-assetlist p.parent a.link:hover:after{opacity:1;filter:alpha(opacity=100)}
+.control-assetlist p.parent a.link:hover:before{display:none}
+.control-assetlist ul{padding:0;margin:0}
+.control-assetlist ul li{font-weight:300;line-height:150%;position:relative;list-style:none}
+.control-assetlist ul li.active a.link,
+.control-assetlist ul li a.link:hover{background:#ddd}
+.control-assetlist ul li.active a.link{position:relative}
+.control-assetlist ul li.active a.link:after{position:absolute;height:100%;width:4px;left:0;top:0;background:#2da7c7;display:block;content:' '}
+.control-assetlist ul li div.controls{position:absolute;right:45px;top:10px}
+.control-assetlist ul li div.controls .dropdown{width:14px;height:21px}
+.control-assetlist ul li div.controls .dropdown.open a.control{display:block!important}
+.control-assetlist ul li div.controls .dropdown.open a.control:before{visibility:visible;display:block}
+.control-assetlist ul li div.controls a.control{color:#405261;font-size:14px;visibility:hidden;overflow:hidden;width:14px;height:21px;display:none;text-decoration:none;cursor:pointer;opacity:0.5;filter:alpha(opacity=50)}
+.control-assetlist ul li div.controls a.control:before{visibility:visible;display:block;margin-right:0}
+.control-assetlist ul li div.controls a.control:hover{opacity:1;filter:alpha(opacity=100)}
+.control-assetlist ul li:hover{background:#ddd}
+.control-assetlist ul li:hover div.controls,
+.control-assetlist ul li:hover a.control{display:block!important}
+.control-assetlist ul li:hover div.controls>a.control,
+.control-assetlist ul li:hover a.control>a.control{display:block!important}
+.control-assetlist ul li .checkbox{position:absolute;top:-5px;right:-5px}
+.control-assetlist ul li .checkbox label{margin-right:0}
+.control-assetlist ul li .checkbox label:before{border-color:#ccc}
+.control-assetlist div.list-container{position:relative;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
+.control-assetlist div.list-container.animate ul{-webkit-transition:all 0.2s ease;transition:all 0.2s ease}
+.control-assetlist div.list-container.goForward ul{-webkit-transform:translate(-350px,0);-ms-transform:translate(-350px,0);transform:translate(-350px,0)}
+.control-assetlist div.list-container.goBackward ul{-webkit-transform:translate(350px,0);-ms-transform:translate(350px,0);transform:translate(350px,0)}

modules/cms/widgets/assetlist/assets/js/assetlist.js

@@ -0,0 +1,184 @@
+/*
+ * Asset list
+ */
++function ($) { "use strict";
+
+    var AssetList = function (form, alias) {
+        this.$form = $(form)
+        this.alias = alias
+
+
+        this.$form.on('ajaxSuccess', $.proxy(this.onAjaxSuccess, this))
+        this.$form.on('click', 'ul.list > li.directory > a', $.proxy(this.onDirectoryClick, this))
+        this.$form.on('click', 'ul.list > li.file > a', $.proxy(this.onFileClick, this))
+        this.$form.on('click', 'p.parent > a', $.proxy(this.onDirectoryClick, this))
+        this.$form.on('click', 'a[data-control=delete-asset]', $.proxy(this.onDeleteClick, this))
+        this.$form.on('oc.list.setActiveItem', $.proxy(this.onSetActiveItem, this))
+
+        this.setupUploader()
+    }
+
+    // Event handlers
+    // =================
+
+    AssetList.prototype.onDirectoryClick = function(e) {
+        this.gotoDirectory(
+            $(e.currentTarget).data('path'),
+            $(e.currentTarget).parent().hasClass('parent')
+        )
+
+        return false;
+    }
+
+    AssetList.prototype.gotoDirectory = function(path, gotoParent) {
+        var $container = $('div.list-container', this.$form),
+            self = this
+
+        if (gotoParent !== undefined && gotoParent)
+            $container.addClass('goBackward')
+        else
+            $container.addClass('goForward')
+
+        $.wn.stripeLoadIndicator.show()
+        this.$form.request(this.alias+'::onOpenDirectory', {
+            data: {
+                path: path,
+                d: 0.2
+            },
+            complete: function() {
+                self.updateUi()
+                $container.trigger('oc.scrollbar.gotoStart')
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                $container.removeClass('goForward goBackward')
+                alert(jqXHR.responseText.length ? jqXHR.responseText : jqXHR.statusText)
+            }
+        }).always(function(){
+            $.wn.stripeLoadIndicator.hide()
+        })
+    }
+
+    AssetList.prototype.onDeleteClick = function(e) {
+        var $el = $(e.currentTarget),
+            self = this
+
+        if (!confirm($el.data('confirmation')))
+            return false
+
+        this.$form.request(this.alias+'::onDeleteFiles', {
+            success: function(data) {
+                if (data.error !== undefined && $.type(data.error) === 'string' && data.error.length)
+                    $.wn.flashMsg({text: data.error, 'class': 'error'})
+            },
+            complete: function() {
+                self.refresh()
+            }
+        })
+
+        return false
+    }
+
+    AssetList.prototype.onAjaxSuccess = function() {
+        this.updateUi()
+    }
+
+    AssetList.prototype.onUploadFail = function(file, message) {
+        if (file.xhr.status === 413) {
+            message = 'Server rejected the file because it was too large, try increasing post_max_size';
+        }
+        if (!message) {
+            message = 'Error uploading file'
+        }
+
+        $.wn.alert(message)
+
+        this.refresh()
+    }
+
+    AssetList.prototype.onUploadSuccess = function(file, data) {
+        if (data !== 'success') {
+            $.wn.alert(data)
+        }
+    }
+
+    AssetList.prototype.onUploadComplete = function(file, data) {
+        $.wn.stripeLoadIndicator.hide()
+        this.refresh()
+    }
+
+    AssetList.prototype.onUploadStart = function() {
+        $.wn.stripeLoadIndicator.show()
+    }
+
+    AssetList.prototype.onFileClick = function(event) {
+        var $link = $(event.currentTarget),
+            $li = $link.parent()
+
+        var e = $.Event('open.oc.list', {relatedTarget: $li.get(0), clickEvent: event})
+        this.$form.trigger(e, this)
+
+        if (e.isDefaultPrevented())
+            return false;
+    }
+
+    AssetList.prototype.onSetActiveItem = function(event, dataId) {
+        $('ul li.file', this.$form).removeClass('active')
+        if (dataId)
+            $('ul li.file[data-id="'+dataId+'"]', this.$form).addClass('active')
+    }
+
+    // Service functions
+    // =================
+
+    AssetList.prototype.updateUi = function() {
+        $('button[data-control=asset-tools]', self.$form).trigger('oc.triggerOn.update')
+    }
+
+    AssetList.prototype.refresh = function() {
+        var self = this;
+
+        this.$form.request(this.alias+'::onRefresh', {
+            complete: function() {
+                self.updateUi()
+            }
+        })
+    }
+
+    AssetList.prototype.setupUploader = function() {
+        var self = this,
+            $link = $('[data-control="upload-assets"]', this.$form),
+            uploaderOptions = {
+                method: 'POST',
+                url: window.location,
+                paramName: 'file_data',
+                previewsContainer: $('<div />').get(0),
+                clickable: $link.get(0),
+                timeout: 0,
+                headers: {}
+            }
+
+        /*
+         * Add CSRF token to headers
+         */
+        var token = $('meta[name="csrf-token"]').attr('content')
+        if (token) {
+            uploaderOptions.headers['X-CSRF-TOKEN'] = token
+        }
+
+        var dropzone = new Dropzone($('<div />').get(0), uploaderOptions)
+        dropzone.on('error', $.proxy(self.onUploadFail, self))
+        dropzone.on('success', $.proxy(self.onUploadSuccess, self))
+        dropzone.on('complete', $.proxy(self.onUploadComplete, self))
+        dropzone.on('sending', function(file, xhr, formData) {
+            $.each(self.$form.serializeArray(), function (index, field) {
+                formData.append(field.name, field.value)
+            })
+            xhr.setRequestHeader('X-WINTER-REQUEST-HANDLER', self.alias + '::onUpload')
+            self.onUploadStart()
+        })
+    }
+
+    $(document).ready(function(){
+        new AssetList($('#asset-list-container').closest('form'), $('#asset-list-container').data('alias'))
+    })
+}(window.jQuery);

modules/cms/widgets/assetlist/assets/less/assetlist.less

@@ -0,0 +1,236 @@
+@import "../../../../../backend/assets/less/core/boot.less";
+
+.control-assetlist {
+    p.no-data {
+        padding: 22px;
+        margin: 0;
+        color: @color-filelist-norecords-text;
+        font-size: 14px;
+        text-align: center;
+        font-weight: 400;
+        .border-radius(@border-radius-base);
+    }
+
+    p.parent, ul li {
+        font-weight: 300;
+        line-height: 150%;
+        margin-bottom: 0;
+
+        &.active a {
+            background: @color-list-active;
+            position: relative;
+            &:after {
+                position: absolute;
+                height: 100%;
+                width: 4px;
+                left: 0;
+                top: 0;
+                background: @color-list-active-border;
+                display: block;
+                content: ' ';
+            }
+        }
+
+        a.link {
+            display: block;
+            position: relative;
+            word-wrap: break-word;
+            padding: 10px 50px 10px 20px;
+            outline: none;
+            font-weight: 400;
+            color: @color-text-title;
+            font-size: 14px;
+
+            &:hover, &:focus, &:active {text-decoration: none;}
+
+            span {
+                display: block;
+
+                &.description {
+                    color: @color-text-description;
+                    font-size: 12px;
+                    font-weight: 400;
+                    word-wrap: break-word;
+
+                    strong {
+                        color: @color-text-title;
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+
+        &.directory, &.parent {
+            a.link {
+                padding-left: 40px;
+
+                &:after {
+                    display: block;
+                    position: absolute;
+                    width: 10px;
+                    height: 10px;
+                    top: 10px;
+                    left: 20px;
+                    .icon(@folder);
+                    color: @color-list-icon;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &.parent {
+            a.link {
+                padding-left: 41px;
+                background-color: @color-list-parent-bg;
+                word-wrap: break-word;
+
+                &:before {
+                    content: '';
+                    height: 1px;
+                    display: block;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 1px;
+                    background: #ecf0f1;
+                }
+
+
+                &:after {
+                    font-size: 13px;
+                    color: @color-list-nav-arrow;
+                    width: 18px;
+                    height: 18px;
+                    top: 11px;
+                    left: 22px;
+                    .opacity(0.5);
+                    .icon(@chevron-left);
+                }
+            }
+        }
+    }
+
+    p.parent a.link:hover {
+        background: @color-list-active!important;
+
+        &:after {
+            .opacity(1);
+        }
+
+        &:before {
+            display: none;
+        }
+    }
+
+    ul {
+        padding: 0;
+        margin: 0;
+
+        li {
+            font-weight: 300;
+            line-height: 150%;
+            position: relative;
+            list-style: none;
+
+            &.active a.link, a.link:hover {background: @color-list-active;}
+            &.active a.link {
+                position: relative;
+                &:after {
+                    position: absolute;
+                    height: 100%;
+                    width: 4px;
+                    left: 0;
+                    top: 0;
+                    background: @color-list-active-border;
+                    display: block;
+                    content: ' ';
+                }
+            }
+
+            div.controls {
+                position: absolute;
+                right: 45px;
+                top: 10px;
+
+                .dropdown {
+                    width: 14px;
+                    height: 21px;
+
+                    &.open a.control {
+                        display: block!important; 
+                        &:before {
+                            visibility: visible;
+                            display: block;
+                        }
+                    }
+                }
+
+                a.control {
+                    color: @color-text-title;
+                    font-size: 14px;
+                    visibility: hidden;
+                    overflow: hidden;
+                    width: 14px;
+                    height: 21px;
+                    display: none;
+                    text-decoration: none;
+                    cursor: pointer;
+                    .opacity(0.5);
+                    &:before {
+                        visibility: visible;
+                        display: block;
+                        margin-right: 0;
+                    }
+
+                    &:hover {
+                        .opacity(1);
+                    }
+                }
+            }
+
+            &:hover {
+                background: @color-list-active;
+                div.controls, a.control {
+                    display: block!important;
+
+                    > a.control {
+                        display: block!important;
+                    }
+                }
+            }
+
+            .checkbox {
+                position: absolute;
+                top: -5px;
+                right: -5px;
+
+                label {
+                    margin-right: 0;
+
+                    &:before {
+                        border-color: @color-filelist-cb-border;
+                    }
+                }
+            }
+        }
+    }
+
+    div.list-container {
+        position: relative;
+        .translate(0, 0);
+
+        &.animate ul {
+            .transition(all 0.2s ease);
+        }
+
+        &.goForward ul {
+            .translate(-350px, 0);
+        }
+
+        &.goBackward ul {
+            .translate(350px, 0);
+        }
+
+    }
+}

modules/cms/widgets/assetlist/partials/_body.php

@@ -0,0 +1,9 @@
+<?= $this->makePartial('toolbar') ?>
+<div class="layout-row" id="asset-list-container" data-alias="<?= $this->alias ?>">
+    <div class="layout-cell">
+        <div class="layout-relative">
+           <?= $this->makePartial('files', ['data'=>$data]) ?>
+        </div>
+    </div>
+</div>
+<input type="hidden" name="theme" value="<?= e($this->theme->getDirName()) ?>">

modules/cms/widgets/assetlist/partials/_files.php

@@ -0,0 +1,7 @@
+<div class="layout-absolute">
+    <div class="control-scrollbar" data-control="scrollbar">
+        <div class="control-assetlist" data-control="assetlist" id="<?= $this->getId('asset-list') ?>">
+            <?= $this->makePartial('items', ['items'=>$data]) ?>
+        </div>
+    </div>
+</div>

modules/cms/widgets/assetlist/partials/_items.php

@@ -0,0 +1,69 @@
+<?php
+$searchMode = $this->isSearchMode();
+
+if (($upPath = $this->getUpPath()) !== null && !$searchMode):
+    ?>
+    <p class="parent">
+        <a href="<?= $upPath ?>" data-path="<?= $upPath ?>" class="link"><?= $this->getCurrentRelativePath() ?></a>
+    </p>
+<?php endif ?>
+<div class="list-container animate">
+    <?php if ($items): ?>
+        <ul class="list">
+            <?php foreach ($items as $item):
+                $dataId = 'asset-'.$this->theme->getDirName().'-'.ltrim($item->path, '/');
+                ?>
+                <li
+                    class="<?= $item->type ?>"
+                    <?php if ($item->editable): ?>
+                        data-editable
+                    <?php endif ?>
+                    data-item-path="<?= e(ltrim($item->path, '/')) ?>"
+                    data-item-theme="<?= e($this->theme->getDirName()) ?>"
+                    data-item-type="asset" data-id="<?= e($dataId) ?>"
+                >
+                    <a class="link" target="_blank" data-path="<?= $item->path ?>" href="<?= $this->getThemeFileUrl($item->path) ?>">
+                        <?= e($item->name) ?>
+
+                        <?php if ($searchMode): ?>
+                            <span class="description">
+                                <?= e(dirname($item->path)) ?>
+                            </span>
+                        <?php endif ?>
+                    </a>
+
+                    <div class="controls">
+                        <a
+                            href="javascript:;"
+                            class="control icon btn-primary wn-icon-terminal"
+                            title="<?= e(trans('cms::lang.asset.rename')) ?>"
+                            data-control="popup"
+                            data-request-data="renamePath: '<?= e($item->path) ?>'"
+                            data-handler="<?= $this->getEventHandler('onLoadRenamePopup') ?>"
+                        ><?= e(trans('cms::lang.asset.rename')) ?></a>
+                    </div>
+
+                    <input type="hidden" name="file[<?= e($item->path) ?>]" value="0"/>
+                    <div class="checkbox custom-checkbox nolabel">
+                        <?php $cbId = 'cb'.md5($item->path) ?>
+                        <input
+                            id="<?= $cbId ?>"
+                            type="checkbox"
+                            name="file[<?= e($item->path) ?>]"
+                            <?= $this->isItemSelected($item->path) ? 'checked' : null ?>
+                            data-request="<?= $this->getEventHandler('onSelect') ?>"
+                            value="1">
+                        <label for="<?= $cbId ?>"><?= e(trans('cms::lang.asset.select')) ?></label>
+                    </div>
+
+                </li>
+            <?php endforeach ?>
+        </ul>
+    <?php else: ?>
+        <p class="no-data"><?= e(trans($this->noRecordsMessage)) ?></p>
+    <?php endif ?>
+</div>
+
+<?php if (!isset($nested)): ?>
+    <input type="hidden" name="theme" value="<?= e($this->theme->getDirName()) ?>">
+<?php endif ?>

modules/cms/widgets/assetlist/partials/_move_form.php

@@ -0,0 +1,41 @@
+<?= Form::open([
+    'data-request'=>$this->getEventHandler('onMove'),
+    'data-request-success'=>"\$(this).trigger('close.oc.popup')",
+    'data-stripe-load-indicator'=>1,
+    'id'=>'asset-move-popup-form'
+]) ?>
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="popup">&times;</button>
+        <h4 class="modal-title"><?= e(trans('cms::lang.asset.move_popup_title')) ?></h4>
+    </div>
+    <div class="modal-body">
+        <div class="form-group">
+            <label><?= e(trans('cms::lang.asset.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 ($directories as $path => $directory): ?>
+                    <option value="<?= e($path) ?>"><?= e($directory) ?></option>
+                <?php endforeach ?>
+            </select>
+        </div>
+
+        <input type="hidden" name="theme" value="<?= e($this->theme->getDirName()) ?>">
+        <input type="hidden" name="selectedList" value="<?= e($selectedList) ?>">
+    </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::close() ?>

modules/cms/widgets/assetlist/partials/_new_dir_form.php

@@ -0,0 +1,43 @@
+<?= Form::open([
+    'data-request'=>$this->getEventHandler('onNewDirectory'),
+    'data-request-success'=>"\$(this).trigger('close.oc.popup')",
+    'data-stripe-load-indicator'=>1,
+    'id'=>'asset-new-dir-popup-form'
+]) ?>
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="popup">&times;</button>
+        <h4 class="modal-title"><?= e(trans('cms::lang.asset.directory_popup_title')) ?></h4>
+    </div>
+    <div class="modal-body">
+        <div class="form-group">
+            <label><?= e(trans('cms::lang.asset.directory_name')) ?></label>
+            <input
+                type="text"
+                name="name"
+                value=""
+                class="form-control"
+                autocomplete="off" />
+        </div>
+
+        <input type="hidden" name="theme" value="<?= e($this->theme->getDirName()) ?>">
+    </div>
+    <div class="modal-footer">
+        <button
+            type="submit"
+            class="btn btn-primary">
+            <?= e(trans('backend::lang.form.create')) ?>
+        </button>
+        <button
+            type="button"
+            class="btn btn-default"
+            data-dismiss="popup">
+            <?= e(trans('backend::lang.form.cancel')) ?>
+        </button>
+    </div>
+    <script>
+        setTimeout(
+            function(){ $('#asset-new-dir-popup-form input.form-control').focus() },
+            310
+        )
+    </script>
+<?= Form::close() ?>

modules/cms/widgets/assetlist/partials/_rename_form.php

@@ -0,0 +1,43 @@
+<?= Form::ajax($this->getEventHandler('onApplyName'), [
+    'success' => "\$el.trigger('close.oc.popup');",
+    'data-stripe-load-indicator' => 1,
+    'id' => 'asset-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" />
+        </div>
+
+        <input type="hidden" name="originalPath" value="<?= e($originalPath) ?>" />
+        <input type="hidden" name="theme" value="<?= e($this->theme->getDirName()) ?>" />
+    </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(){ $('#asset-rename-popup-form input.form-control').focus() },
+            310
+        )
+    </script>
+<?= Form::close() ?>

modules/cms/widgets/assetlist/partials/_toolbar.php

@@ -0,0 +1,78 @@
+<div class="layout-row min-size">
+    <div class="control-toolbar toolbar-padded">
+
+        <!-- Control Panel -->
+        <div class="toolbar-item" data-calculate-width>
+            <div class="btn-group">
+                <div class="dropdown last">
+                    <button type="button" class="btn btn-default wn-icon-plus"
+                        data-control="create-asset"
+                        data-toggle="dropdown"
+                        ><?= e(trans('cms::lang.sidebar.add')) ?></button>
+
+                    <ul class="dropdown-menu offset-left" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>">
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="create-template" class="wn-icon-file-text-o"><?= e(trans('cms::lang.asset.create_file')) ?></a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="upload-assets" class="wn-icon-upload"><?= e(trans('cms::lang.asset.upload_files')) ?></a></li>
+                        <li role="presentation" class="divider"></li>
+                        <li role="presentation"><a
+                            role="menuitem"
+                            tabindex="-1"
+                            href="javascript:;"
+                            class="wn-icon-folder-o"
+                            data-control="popup"
+                            data-handler="<?= $this->getEventHandler('onLoadNewDirPopup') ?>"
+                        ><?= e(trans('cms::lang.asset.create_directory')) ?></a></li>
+                    </ul>
+                </div>
+
+                <div class="dropdown hide"
+                    id="<?= $this->getId('tools-button') ?>"
+                    data-trigger-action="show"
+                    data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]"
+                    data-trigger-condition="checked">
+                    <button type="button" class="btn btn-default empty wn-icon-wrench last"
+                        data-toggle="dropdown"
+                        data-control="asset-tools"
+                        ></button>
+
+                    <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_operation_title')) ?>">
+                        <li role="presentation"><a
+                            role="menuitem"
+                            tabindex="-1"
+                            href="javascript:;"
+                            data-control="delete-asset"
+                            data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
+                            class="wn-icon-trash-o"
+                        ><?= e(trans('cms::lang.asset.delete')) ?></a></li>
+
+                        <li role="presentation"><a
+                            role="menuitem"
+                            tabindex="-1"
+                            href="javascript:;"
+                            class="wn-icon-angle-double-right"
+                            data-control="popup"
+                            data-handler="<?= $this->getEventHandler('onLoadMovePopup') ?>"
+                        ><?= e(trans('cms::lang.asset.move')) ?></a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Asset Search -->
+        <div class="relative toolbar-item loading-indicator-container size-input-text">
+            <input
+                type="text"
+                name="search"
+                value="<?= e($this->getSearchTerm()) ?>"
+                class="form-control icon search" autocomplete="off"
+                placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>"
+                data-track-input
+                data-load-indicator
+                data-load-indicator-opaque
+                data-request-success="$('<?= '#'.$this->getId('tools-button') ?>').trigger('oc.triggerOn.update')"
+                data-request="<?= $this->getEventHandler('onSearch') ?>"
+            />
+        </div>
+
+    </div>
+</div>