mcms-node-eshop/public/eshop.app/Components/editItem/mediaFiles.directive.html

Eshop module for mcms-node

<mcms-tabs class="tabbable" id="productMediaOptions">
    <ul class="nav nav-tabs tab-bricky" id="myTabs">
        <tab-button state="thumb" class="active"><i class="green fa fa-home"></i> Thumb</tab-button>
        <tab-button state="images">Images</tab-button>
        <tab-button state="documents">Documents</tab-button>
    </ul>
</mcms-tabs>
<div class="tabbable">
<div class="tab-content">
    <div id="thumb" class="tab-pane active">
        <img ng-src="{{ VM.Product.thumb.copies.big_thumb.imageUrl || '/assets/img/no-image.png' }}" class="img-responsive" />
        <upload-box
                ng-model="VM.Product.thumb" config="VM.uploadConfig"
                ng-if="VM.Product.id" callback="VM.onUploadDone(file,response)"
                auto-start="true" progress-bar="true"
                accept-select="{{ VM.uploadOptions.acceptSelect }}"
                accept="{{ VM.uploadOptions.accept }}"></upload-box>

    </div><!-- END TAB -->

    <div id="images" class="tab-pane ">

        <upload-box
                ng-model="VM.Product.mediaFiles.images" config="VM.uploadConfigMulti"
                ng-if="VM.Product.id" callback="VM.onUploadMultiDone(file,response)"
                auto-start="true" progress-bar="true" multiple="true"
                accept-select="{{ VM.uploadOptions.acceptSelect }}"
                accept="{{ VM.uploadOptions.accept }}"></upload-box>

        <ul as-sortable="VM.sortableOptions" ng-model="VM.Product.mediaFiles.images" class="list-unstyled ">
            <li ng-repeat="image in VM.Product.mediaFiles.images track by $index"
                as-sortable-item class="as-sortable-item" style="margin-bottom: 10px">
                <div as-sortable-item-handle class="as-sortable-item-handle">
                    <div class="row">
                        <div class="col-md-3"><img ng-src="{{ image.thumb.imageUrl || '/assets/img/no-image.png' }}"/></div>
                        <div class="col-md-3"><input type="text" class="form-control" ng-model="image.alt" placeholder="alt"></div>
                        <div class="col-md-3"><input type="text" class="form-control" ng-model="image.title" placeholder="title"></div>
                        <div class="col-md-3"><select-box ng-model="image.active" class="form-control"></select-box></div>
                    </div>

                </div>
            </li>
        </ul>
    </div><!-- END TAB -->


    <div id="documents" class="tab-pane ">
        Docs
    </div>
</div>
</div>