cloudron-box/src/components/filetree.html

<!-- Modal new directory -->
<div class="modal fade" id="{{ 'newDirectoryModal-' + $id }}" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'filemanager.newDirectoryDialog.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <form role="form" name="newDirectoryForm" ng-submit="newDirectory.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': newDirectory.error || (newDirectoryForm.directoryName.$dirty && newDirectoryForm.directoryName.$invalid) }">
            <input type="text" class="form-control" id="inputDirectoryName" name="directoryName" ng-model="newDirectory.name" required autofocus>
            <div class="control-label" ng-show="newDirectory.error === 'exists'">{{ 'filemanager.newDirectory.errorAlreadyExists' | tr }}</div>
          </div>
          <input class="ng-hide" type="submit" ng-disabled="newDirectoryForm.$invalid || newDirectory.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
        <button type="button" class="btn btn-primary" ng-click="newDirectory.submit()" ng-disabled="newDirectory.busy"><i class="fa fa-circle-notch fa-spin" ng-show="newDirectory.busy"></i> {{ 'filemanager.newDirectoryDialog.create' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal new file -->
<div class="modal fade" id="{{ 'newFileModal-' + $id }}" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ 'filemanager.newFileDialog.title' | tr }}</h4>
      </div>
      <div class="modal-body">
        <form role="form" name="newFileForm" ng-submit="newFile.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': newFile.error || (newFileForm.fileName.$dirty && newFileForm.fileName.$invalid) }">
            <input type="text" class="form-control" id="inputFileName" name="fileName" ng-model="newFile.name" required autofocus>
            <div class="control-label" ng-show="newFile.error === 'exists'">{{ 'filemanager.newFile.errorAlreadyExists' | tr }}</div>
          </div>
          <input class="ng-hide" type="submit" ng-disabled="newFileForm.$invalid || newFile.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
        <button type="button" class="btn btn-primary" ng-click="newFile.submit()" ng-disabled="newFile.busy"><i class="fa fa-circle-notch fa-spin" ng-show="newFile.busy"></i> {{ 'filemanager.newFileDialog.create' | tr }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal image/video viewer -->
<div class="modal fade" id="{{ 'mediaViewerModal-' + $id }}" tabindex="-1" role="dialog">
  <div class="modal-dialog" style="max-width: 1280px; max-height: calc(100% - 60px);">
    <div class="modal-content" style="height: 100%; height: 100%; display: flex; background-color: #000; background-clip: border-box;">
      <img ng-show="mediaViewer.type === 'image'" ng-src="{{ mediaViewer.src }}" style="display: block; margin: auto; max-width: 100%; max-height: 100%;" />
      <video ng-show="mediaViewer.type === 'video'" controls preload="auto" autoplay ng-src="{{ mediaViewer.src | trustUrl}}" style="display: block; margin: auto; max-width: 100%; max-height: 100%;"></video>
    </div>
  </div>
</div>

<!-- Modal chown entry -->
<div class="modal fade" id="{{ 'chownEntryModal-' + $id }}" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- TODO remove fileName later once all translations have been updated -->
        <h4 class="modal-title">{{ 'filemanager.chownDialog.title' | tr:{ fileName: selected[0].fileName } }}</h4>
      </div>
      <div class="modal-body">
        <form role="form" name="chownEntryForm" ng-submit="chownEntry.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': (chownEntryForm.newOwner.$dirty && chownEntry.error) }">
            <label class="control-label">{{ 'filemanager.chownDialog.newOwner' | tr }}</label>
            <div class="control-label" for="inputNewOwner" ng-show="chownEntry.error">{{ chownEntry.error }}</div>
            <select class="form-control" id="inputNewOwner" name="newOwner" ng-model="chownEntry.newOwner" ng-options="a.value as a.name for a in owners" ng-disabled="chownEntry.busy"></select>
          </div>
          <div class="form-group" ng-show="chownEntry.showRecursiveOption">
            <input type="checkbox" id="inputNewOwnerRecursive" ng-model="chownEntry.recursive">
            <label class="control-label" for="inputNewOwnerRecursive">{{ 'filemanager.chownDialog.recursiveCheckbox' | tr }}</label>
          </div>
          <input class="ng-hide" type="submit" ng-disabled="chownEntryForm.$invalid || chownEntry.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
        <button type="button" class="btn btn-primary" ng-click="chownEntry.submit()" ng-hide="chownEntry.error" ng-disabled="chownEntry.busy"><i class="fa fa-circle-notch fa-spin" ng-show="chownEntry.busy"></i> {{ 'filemanager.chownDialog.change' | tr }}</button>
      </div>
    </div>
  </div>
</div>


<!-- main content -->

<div class="toolbar">
  <div class="btn-group" role="group" style="display: block;">
    <!-- TODO figure out why a line break in code between the two buttons results in a gap visually without any margin/padding set -->
    <button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="busy || cwd === '/'"><i class="fas fa-arrow-left"></i></button><button class="btn btn-primary" ng-disabled="busy" ng-click="refresh()"><i class="fas fa-redo"></i></button>
  </div>
  <div class="btn-group path-parts" role="group">
    <button class="btn btn-default" ng-disabled="busy || cwd === '/'" ng-click="changeDirectory('/')" ng-drop="drop($event, '/')" ng-dragleave="dragExit($event, '/')" ng-dragover="dragEnter($event, '/')"><i class="fas fa-home"></i> {{ rootDirLabel }} </button><button class="btn btn-default" ng-disabled="busy || part.path === cwd" ng-click="changeDirectory(part.path)" ng-drop="drop($event, part.path)" ng-dragleave="dragExit($event, part.path)" ng-dragover="dragEnter($event, part.path)" ng-repeat="part in cwdParts">{{ part.name }}</button>
  </div>
  <div style="display: block;">
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i> {{ 'filemanager.toolbar.new' | tr }}</button>
      <ul class="dropdown-menu">
        <li><a class="hand" ng-click="newFile.show()">{{ 'filemanager.toolbar.newFile' | tr }}</a></li>
        <li><a class="hand" ng-click="newDirectory.show()">{{ 'filemanager.toolbar.newFolder' | tr }}</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-upload"></i> {{ 'filemanager.toolbar.upload' | tr }}</button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a class="hand" ng-click="onUploadFile()">{{ 'filemanager.toolbar.uploadFile' | tr }}</a></li>
        <li><a class="hand" ng-click="onUploadFolder()">{{ 'filemanager.toolbar.uploadFolder' | tr }}</a></li>
      </ul>
    </div>

  </div>
</div>

<div class="file-list-header">
  <table class="table" style="margin: 0;">
    <thead>
      <tr>
        <th style="width: 42px">&nbsp;</th>
        <th style="">{{ 'filemanager.list.name' | tr }}</th>
        <th style="width:100px">{{ 'filemanager.list.owner' | tr }}</th>
        <th style="width: 80px">{{ 'filemanager.list.size' | tr }}</th>
        <th style="width:100px">{{ 'filemanager.list.mtime' | tr }}</th>
        <th style="width: 45px;">&nbsp;</th>
      </tr>
    </thead>
  </table>
</div>

<div class="file-list" ng-class="{ 'entry-hovered': dropToBody, 'busy': busy }" context-menu="menuOptionsBlank" ng-mousedown="select($event, null)">
  <table class="table table-hover" style="margin: 0;">
    <tbody>
      <tr ng-show="busy">
        <td colspan="6"><center><h2><i class="fa fa-circle-notch fa-spin"></i></h2></center></td>
      </tr>
      <tr ng-show="!busy && entries.length === 0">
        <td colspan="" class="text-center">{{ 'filemanager.list.empty' | tr }}</td>
      </tr>
      <tr ng-hide="busy" entry-hashkey="{{ entry['$$hashKey'] }}" ng-repeat="entry in entries" draggable="true" ng-dragstart="dragStart($event, entry)" ng-drop="drop($event, entry)" context-menu="menuOptions" model="entry" ng-dragleave="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered, 'entry-selected': isSelected(entry) }">
        <td style="width: 42px; height: 42px" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)" class="text-center">
          <i ng-show="!entry.previewUrl" class="fas fa-lg {{ entry.icon }}" ng-class="{ 'text-primary': entry.isDirectory && !isSelected(entry) }"></i>
          <img ng-show="entry.previewUrl" ng-src="{{ entry.previewUrl }}" height="42" width="42" style="object-fit: cover;"/>
        </td>
        <td class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)">{{ entry.fileName }}<span ng-show="entry.isSymbolicLink" class="text-muted" style="margin-left: 20px;">{{ 'filemanager.list.symlink' | tr:{ target: entry.target } }}</span></td>
        <td style="width:100px" class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)">{{ entry.uid | prettyOwner }}</td>
        <td style="width: 80px" class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)">{{ entry.size | prettyByteSize }}</td>
        <td style="width:100px" class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)" uib-tooltip="{{ entry.mtime | prettyLongDate }}" tooltip-append-to-body="true">{{ entry.mtime | prettyDate }}</td>
        <td style="width: 45px">
          <button type="button" class="btn btn-xs btn-default context-menu-action" context-menu="menuOptions" model="entry" context-menu-on="click" ng-click="onEntryContextMenu($event, entry)"><i class="fas fa-ellipsis-h"></i></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>