docs/docs-web/src/main/webapp/src/partial/share/share.html

<div class="row">
  <div class="col-md-10">
    <div>
      <div class="pull-right">
        <div class="dropdown" uib-dropdown>
          <button class="btn btn-default" uib-dropdown-toggle>
            <span class="fas fa-cloud-download-alt"></span>
            {{ 'export' | translate }}
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li>
              <a ng-href="../api/file/zip?id={{ document.id }}&share={{ $stateParams.shareId }}">
                <span class="fas fa-download"></span>
                {{ 'document.view.download_files' | translate }}
              </a>
            </li>
            <li>
              <a href ng-click="exportPdf()">
                <span class="fas fa-file-pdf"></span>
                {{ 'document.view.export_pdf' | translate }}
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="page-header">
        <h1>
          {{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small>
        </h1>
        <ul class="list-inline">
          <li ng-repeat="tag in document.tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span></li>
        </ul>
      </div>
    </div>

    <p class="well-sm" ng-bind-html="document.description"></p>
    <dl class="dl-horizontal">
      <dt ng-if="document.subject">{{ 'document.subject' | translate }}</dt>
      <dd ng-if="document.subject">{{ document.subject }}</dd>
      <dt ng-if="document.identifier">{{ 'document.identifier' | translate }}</dt>
      <dd ng-if="document.identifier">{{ document.identifier }}</dd>
      <dt ng-if="document.publisher">{{ 'document.publisher' | translate }}</dt>
      <dd ng-if="document.publisher">{{ document.publisher }}</dd>
      <dt ng-if="document.format">{{ 'document.format' | translate }}</dt>
      <dd ng-if="document.format">{{ document.format }}</dd>
      <dt ng-if="document.source">{{ 'document.source' | translate }}</dt>
      <dd ng-if="document.source">{{ document.source }}</dd>
      <dt ng-if="document.type">{{ 'document.type' | translate }}</dt>
      <dd ng-if="document.type">{{ document.type }}</dd>
      <dt ng-if="document.coverage">{{ 'document.coverage' | translate }}</dt>
      <dd ng-if="document.coverage">{{ document.coverage }}</dd>
      <dt ng-if="document.rights">{{ 'document.rights' | translate }}</dt>
      <dd ng-if="document.rights">{{ document.rights }}</dd>
      <dt>{{ 'document.contributors' | translate }}</dt>
      <dd>
        <span ng-repeat="contributor in document.contributors">
          <span class="btn btn-link btn-xs">
            <a href="mailto:{{ contributor.email }}">
              {{ contributor.username }}
            </a>
          </span>
        </span>
      </dd>
      <dt ng-if="false" ng-repeat-start="meta in document.metadata"></dt>
      <dt ng-if="meta.value != null">{{ meta.name }}</dt>
      <dd ng-if="meta.value != null && (meta.type == 'STRING' || meta.type == 'INTEGER' || meta.type == 'FLOAT')">{{ meta.value }}</dd>
      <dd ng-if="meta.value != null && meta.type == 'DATE'">{{ meta.value | date: dateFormat }}</dd>
      <dd ng-if="meta.value != null && meta.type == 'BOOLEAN'">{{ meta.value ? 'yes' : 'no' | translate }}</dd>
      <dd ng-if="false" ng-repeat-end></dd>
    </dl>

    <!-- Display mode (list or grid) -->
    <div class="btn-group mt-10 mb-10 pull-right">
          <span class="btn btn-default" ng-class="{ active: displayMode == 'list' }"
                uib-tooltip="{{ 'document.view.content.display_mode_list' | translate }}"
                tooltip-append-to-body="true"
                ng-click="displayMode = 'list'">
            <span class="fas fa-list"></span>
          </span>
      <span class="btn btn-default" ng-class="{ active: displayMode == 'grid' }"
            uib-tooltip="{{ 'document.view.content.display_mode_grid' | translate }}"
            tooltip-append-to-body="true"
            ng-click="displayMode = 'grid'">
            <span class="fas fa-th"></span>
          </span>
    </div>

    <div class="clearfix"></div>

    <!-- List of files -->
    <div class="row" ng-show="files.length > 0">
      <!-- Grid view -->
      <div ng-show="displayMode == 'grid'">
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 text-center" ng-repeat="file in files">
          <div class="thumbnail">
            <a class="file-thumbnail" ng-click="openFile(file)"
               uib-tooltip="{{ file.mimetype }} | {{ file.size | filesize }}" tooltip-placement="top">
              <img ng-src="../api/file/{{ file.id }}/data?size=thumb&share={{ $stateParams.shareId }}" />
            </a>

            <div class="file-info">
              <div></div>
              <div class="v-align file-name" ng-if="file.name" title="{{ file.name }} (v{{ file.version + 1 }}.0)">{{ file.name }}</div>
              <div></div>
            </div>
          </div>
        </div>
      </div>

      <!-- List view -->
      <table ng-show="displayMode == 'list'" class="table table-hover table-files">
        <thead>
        <tr>
          <th width="3%"></th>
          <th>Filename</th>
          <th>Type</th>
          <th>Size</th>
          <th width="10%">Version</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="file in files">
          <td class="pointer" ng-click="openFile(file)">
            <div class="thumbnail-list">
              <img ng-src="../api/file/{{ file.id }}/data?size=thumb&share={{ $stateParams.shareId }}" />
            </div>
          </td>
          <td class="pointer" ng-click="openFile(file)">
            {{ file.name }}
          </td>
          <td>{{ file.mimetype }}</td>
          <td>{{ file.size | filesize }}</td>
          <td>v{{ file.version + 1 }}.0</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div ui-view="file"></div>
  </div>

  <div class="col-md-2">
    <p class="page-header">
      <span class="fas fa-comments"></span>
      {{ 'document.view.comments' | translate }}
    </p>

    <div ng-show="!comments || comments.length == 0" class="text-center text-muted">
      <h1 class="fas fa-comments"></h1>
      <p ng-show="!comments && !commentsError">{{ 'loading' | translate }}</p>
      <p ng-show="comments.length == 0">{{ 'document.view.no_comments' | translate }}</p>
      <p ng-show="!comments && commentsError">{{ 'document.view.error_loading_comments' | translate }}</p>
    </div>

    <div ng-repeat="comment in comments" class="media" style="overflow: hidden">
      <div class="pull-left">
        <img ng-src="https://www.gravatar.com/avatar/{{ comment.creator_gravatar }}?s=40&d=identicon" class="media-object" />
      </div>
      <div class="media-body">
        <strong>{{ comment.creator }}</strong>
        <p>
          {{ comment.content }}<br />
          <span class="text-muted">{{ comment.create_date | date: 'yyyy-MM-dd' }}</span>
        </p>
      </div>
    </div>
  </div>
</div>