acha-framework/src/frontend/core/scripts/directives/file-explorer/template.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<div class="af-file-explorer-preview af-component {{mode}}">
    <div class="clearfix details-tape">
        <div class="details name">
            <span class="details-text">
                {{:: 'general.name'|translate}}
            </span>
            <i class="af-icon af-icon-chevron_up"></i>
            <div class="show-settings">
                <i ng-click="vm.showSort('namePlate', $event)"
                   class="af-icon af-icon-chevron_down"></i>
                <ul ng-if="vm.namePlate" class="details-menu">
                    <li ng-click="vm.onSort('name', true, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortAscending'|translate}}
                            </span>
                        </a>
                    </li>
                    <li ng-click="vm.onSort('name', false, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortDescending'|translate}}
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="details date-modified">
            <span class="details-text">
                {{:: 'general.dateModified'|translate}}
            </span>
            <div class="show-settings">
                <i class="af-icon af-icon-chevron_down"></i>
                <ul ng-if="vm.datePlate" class="details-menu">
                    <li ng-click="vm.onSort('date', true, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortAscending'|translate}}
                            </span>
                        </a>
                    </li>
                    <li ng-click="vm.onSort('date', false, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortDescending'|translate}}
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="details type">
            <span class="details-text">
                {{:: 'general.type'|translate}}
            </span>
            <div class="show-settings">
                <i class="af-icon af-icon-chevron_down"></i>
                <ul ng-if="vm.typePlate" class="details-menu">
                    <li ng-click="vm.onSort('type', true, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortAscending'|translate}}
                            </span>
                        </a>
                    </li>
                    <li ng-click="vm.onSort('type', false, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortDescending'|translate}}
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="details size">
            <span class="details-text">
                {{:: 'general.size'|translate}}
            </span>
            <div class="show-settings">
                <i class="af-icon af-icon-chevron_down"></i>
                <ul ng-if="vm.sizePlate" class="details-menu">
                    <li ng-click="vm.onSort('size', true, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortAscending'|translate}}
                            </span>
                        </a>
                    </li>
                    <li ng-click="vm.onSort('size', false, $event)">
                        <a href="javascript:void(0)">
                            <i></i>
                            <span>
                                {{:: 'general.sortDescending'|translate}}
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <ul class="details-mode" ng-click="vm.unSelect()">
        <li ng-if="path !== '/'"
            ng-dblclick="vm.onParent()"
            class="clearfix folder">
            <div class="details name folder-item">
                <i class="af-icon-50 af-icon-folder"></i>
                <span>..</span>
            </div>
            <span class="details date-modified">
                &nbsp;
            </span>
            <span class="details type">&nbsp;</span>
            <span class="details size">&nbsp;</span>
        </li>
        <li ng-if="newFolder"
            ng-dblclick="vm.onNewFolder()"
            class="clearfix folder new-folder">
            <div class="details name folder-item">
                <i class="af-icon-50 af-icon-new-folder"></i>
                <input type="text"
                       ng-if="!vm.creating"
                       ng-click="vm.prevent($event)"
                       ng-dblclick="vm.prevent($event)"
                       ng-model="vm.newFolder"
                       on-enter="vm.onNewFolder()">
                <i ng-if="vm.creating" class="fa fa-spin fa-spinner"></i>
            </div>
            <span class="details date-modified">
                &nbsp;
            </span>
            <span class="details type">&nbsp;</span>
            <span class="details size">&nbsp;</span>
        </li>
        <li ng-repeat="item in items|filter:search"
            ng-dblclick="vm.onDoubleClick(item, $event)"
            ng-click="vm.onClick(item, $event)"
            class="clearfix {{::item.folder?'folder':'file'}}  {{item.selected?'selected':''}}">
            <div class="details name {{::item.folder?'folder':'file'}}-item">
                <i class="af-icon-50 {{::vm.getIcon(item)}}"></i>
                <i ng-if="item.updating" class="fa fa-spinner fa-spin"></i>
                <span ng-if="!item.editting">{{::item.name}}</span>
                <input type="text"
                       ng-if="item.editting&&!item.updating"
                       ng-click="vm.prevent($event)"
                       ng-dblclick="vm.prevent($event)"
                       ng-model="item.newName"
                       on-enter="vm.onRename(item)">
            </div>
            <span class="details date-modified">
                {{::item.date|cultured_date}}
            </span>
            <span class="details type">{{vm.getExtention(item)}}</span>
            <span class="details size">{{::item.size | human_size}}</span>
        </li>
    </ul>
</div>