cloudron-box/src/views/notifications.html

<div class="content">

  <div class="text-left">
    <h1>Notifications <button class="btn btn-primary btn-outline pull-right" ng-click="notifications.clearAll()" ng-disabled="clearAllBusy"><i class="fa fa-circle-notch fa-spin" ng-show="clearAllBusy"></i><i class="fa fa-check" ng-hide="clearAllBusy"></i> Clear All</button></h1>
  </div>

  <div class="col-lg-12 text-center" ng-show="notifications.busy">
    <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
  </div>

  <div class="card" ng-hide="notifications.busy || notifications.notifications.length">
    <div class="row">
      <div class="col-xs-12">
          <h3 class="text-center" style="margin: 20px;">All Caught Up!</h3>
      </div>
    </div>
  </div>

  <div class="card notification-item" ng-repeat="notification in notifications.notifications">
    <div class="row">
      <div class="col-xs-12" ng-click="notification.isCollapsed = !notification.isCollapsed" ng-class="{ 'notification-details': notification.detailsShown }">
        {{ notification.title }} <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
        <button class="btn btn-xs btn-success pull-right" ng-hide="notification.acknowledged" ng-click="notifications.ack(notification)" uib-tooltip="Clear"><i class="fa fa-check"></i></button>

        <div uib-collapse="notification.isCollapsed">
          <br/>
          {{ notification.message }}<br/>
          <!-- <br/> -->
          <!-- <button class="btn btn-primary" ng-show="notification.action" ng-click="notifications.action(notification)"><i class="fa fa-arrow-right"></i> Goto View</button> -->
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-12 text-center" ng-hide="notifications.all">
    <button class="btn btn-outline btn-default" ng-click="notifications.showOld()">Show older Notifications</button>
  </div>
</div>