ode-csslib-panda-manche/dist/template/timeline/notifications.html

Panda theme by Open Digital Education

<!-- <app-title>
	<h1><a data-reload><i class="notification"></i><span translate content="timeline.title"></span></a></h1>
</app-title>
<div data-ng-controller="FlashMessages" class="twelve cell">
    <div class="flashmsg" ng-repeat="message in messages.all"
        ng-class="message.color"
        ng-style="{ 'background-color': message.customColor }">
        <i class="close-2x right-magnet" tooltip="timeline.mark.flashmsg" ng-click="markMessage(message)"></i>
        <div bind-html="message.contents[currentLanguage]"></div>
    </div>
</div>

<article data-ng-controller="Timeline" class="twelve cell reduce-block-eight">
	<div class="row line filters">
		<ul>
			<li class="legend" translate content="filters.title"></li>
			<li>
				<label class="checkbox small-text">
					<input type="checkbox" ng-model="notificationTypes.noFilter" ng-change="removeFilter()" />
					<span translate content="filters.all"></span>
				</label>
			</li>
			<li ng-repeat="type in notificationTypes.all">
				<label class="checkbox small-text">
					<input type="checkbox" ng-model="type.selected" ng-change="type.apply()" />
					<span translate content="[[type.data.toLowerCase()]]"></span>
				</label>
			</li>
		</ul>
	</div>
	<div data-notificationid="[[notification._id]]" data-ng-repeat="notification in notifications.all" class="row line notifications notification">
		<div class="twelve cell vertical-spacing-twice" ng-class="{ 'unread': isUnRead(notification) }">
			<div class="row">
				<div class="notification-date">
					<em class="low-importance right-magnet">[[formatDate(notification.date.$date)]]</em>
				</div>
				<div class="cell twelve">
					<div class="row">
						<div class="two cell fixed-block height-two">
							<div class="fixed twelve cell">
								<div class="fluid twelve cell clip">
									<i class="system-avatar" ng-if="!notification.sender"> </i>
									<img ng-src="/userbook/avatar/[[notification.sender]]?thumbnail=100x100" ng-if="notification.sender" />
								</div>
							</div>
						</div>
						<div class="ten cell horizontal-spacing">
							<p class="inline" bind-html="notification.message"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="notification-actions" ng-class="{'opened': notification.opened}" ng-if="showActions()">
			<div class="opener" ng-click="toggleNotification(notification,$event)">
				<span class="symbol">◀</span>
			</div>
			<div class="actions">
				<div ng-repeat="(name, action) in actions" ng-show="!action.condition || action.condition(notification)" class="action [[ name ]]">
					<i></i>
					<a ng-click="action.action(notification)" ng-disabled="notification[action.doneProperty]">
						[[ notification[action.doneProperty] ? lang.translate(action.doneLabel) : lang.translate(action.label) ]]
					</a>
				</div>
			</div>
		</div>
	</div>
</article> -->

<div data-ng-controller="FlashMessages" class="twelve cell">
  <div
    class="flashmsg"
    ng-repeat="message in messages.all"
    ng-class="message.color"
    ng-style="{ 'background-color': message.customColor }"
  >
    <i
      class="close-2x right-magnet"
      tooltip="timeline.mark.flashmsg"
      ng-click="markMessage(message)"
    ></i>
    <div bind-html="message.contents[currentLanguage]"></div>
    <div
      ng-if="message.signature"
      style="font-style: italic"
      ng-style="{'color': message.signatureColor}"
    >
      <p></p>
      [[ message.signature ]]
    </div>
  </div>
</div>

<app-title>
  <h1 data-reload class="application-title">
    <i class="exclamation-mark"></i>
    <i18n
      pulsar="{ index: 0, i18n: 'timeline.pulsar.notifications', position: 'center right', className: 'pulse-notifications'}"
      >timeline.title</i18n
    >
  </h1>
</app-title>

<div data-ng-controller="Timeline" class="twelve cell">
  <div
    ng-if="!isEmpty()"
    class="row drop-down-block"
    ng-class="{slided: display.slide}"
  >
    <div
      class="drop-down-label"
      ng-if="filtered.notificationTypes.length > 0"
      ng-click="display.slide = !display.slide"
      pulsar-highlight="1"
    >
      <i class="arrow"></i>
      <label
        pulsar="{ index: 1, i18n: 'timeline.pulsar.filters', position: 'bottom center', className: 'pulse-filters'}"
      >
        <i18n>filters.title</i18n>
      </label>
    </div>

    <div
      class="drop-down-info"
      ng-model="notificationTypes"
      ng-if="filtered.notificationTypes.length > 0"
    >
      <span><i18n>filters.unactives</i18n></span
      ><span> [[unactivesFilters()]]</span>
    </div>

    <div class="drop-down-content" slide="display.slide">
      <div class="chips">
        <label
          class="chip multiselect"
          ng-if="filtered.notificationTypes.length > 0"
        >
          <span><i18n>filters.all.none</i18n></span>
          <input
            type="checkbox"
            ng-model="notificationTypes"
            ng-change="allFilters()"
          />
        </label>
        <label
          class="chip [[type.data.toLowerCase()]]"
          ng-class="{ selected: type.selected }"
          ng-repeat="type in (filtered.notificationTypes = notificationTypes.all)"
        >
          <i class="[[type.data.toLowerCase()]] type"></i>
          <span>[[suffixTitle(type.data.toLowerCase())]]</span>
          <input
            type="checkbox"
            ng-model="type.selected"
            ng-change="switchFilter(type)"
          />
        </label>
      </div>
      <div
        class="drop-up-label"
        ng-click="display.slide = !display.slide"
        ng-if="filtered.notificationTypes.length > 0"
      >
        <label>
          <i18n>filters.close</i18n>
        </label>
        <i class="arrow"></i>
      </div>
    </div>
  </div>

  <!--EMPTY BUT NOT ALL FILTERS SELECTED-->
  <div
    ng-if="notifications.all.length === 0 && notificationTypes.length() !== notificationTypes.selection().length"
  >
    <div class="emptyscreen" ng-if="isCache() && !showSeeMoreOnEmpty()">
      <h2 class="emptyscreen-header">
        <i18n>empty.timeline.notifications.noresults.title</i18n>
      </h2>
      <img
        class="emptyscreen-image__mini"
        src="/assets/themes/entcore-css-lib/images/empty-filters.svg"
      />
      <p class="emptyscreen-footer">
        <i18n>empty.timeline.notifications.noresults</i18n>
      </p>
    </div>
    <div class="info tuto" ng-if="isCache() && showSeeMoreOnEmpty()">
      <b
        ><span><i></i><i18n>timeline.empty.cache</i18n></span></b
      >
    </div>
  </div>
  <!--EMPTY BUT ALL FILTERS SELECTED-->
  <div
    ng-if="notifications.all.length === 0 && notificationTypes.length() === notificationTypes.selection().length && notifications.lastPage"
  >
    <div class="emptyscreen" ng-if="isCache() && !showSeeMoreOnEmpty()">
      <h2 class="emptyscreen-header">
        <i18n>empty.timeline.notifications.title</i18n>
      </h2>
      <img
        class="emptyscreen-image__mini"
        src="/timeline/public/img/empty-timeline.svg"
      />
      <p class="emptyscreen-footer">
        <i18n>empty.timeline.notifications</i18n>
      </p>
    </div>
    <div class="info tuto" ng-if="isCache() && showSeeMoreOnEmpty()">
      <b
        ><span><i></i><i18n>timeline.empty.cache</i18n></span></b
      >
    </div>
  </div>

  <!-- Emptyscreen: no notifications -->
  <div class="emptyscreen" ng-if="isEmpty() && !switchingFilters && !isCache()">
    <h2 class="emptyscreen-header">
      <i18n>empty.timeline.notifications.title</i18n>
    </h2>
    <img
      class="emptyscreen-image__mini"
      src="/timeline/public/img/empty-timeline.svg"
    />
    <p class="emptyscreen-footer">
      <i18n>empty.timeline.notifications</i18n>
    </p>
  </div>

  <!-- Emptyscreen: no results with filters -->
  <div
    class="emptyscreen"
    ng-if="noResultsWithFilters() && !switchingFilters && !isCache()"
  >
    <h2 class="emptyscreen-header">
      <i18n>empty.timeline.notifications.noresults.title</i18n>
    </h2>
    <img
      class="emptyscreen-image__mini"
      src="/assets/themes/entcore-css-lib/images/empty-filters.svg"
    />
    <p class="emptyscreen-footer">
      <i18n>empty.timeline.notifications.noresults</i18n>
    </p>
  </div>

  <!-- Emptyscreen: no filters selected -->
  <div
    class="emptyscreen"
    ng-if="noFiltersSelected() && !switchingFilters && !isCache()"
  >
    <h2 class="emptyscreen-header">
      <i18n>empty.timeline.notifications.nofilters.title</i18n>
    </h2>
    <img
      class="emptyscreen-image__mini"
      src="/assets/themes/entcore-css-lib/images/empty-filters.svg"
    />
    <p class="emptyscreen-footer">
      <i18n>empty.timeline.notifications.nofilters</i18n>
    </p>
  </div>

  <div
    data-notificationid="[[notification._id]]"
    data-ng-repeat="notification in notifications.all track by notification._id"
    class="row notification [[notification.type.toLowerCase()]]"
    bottom-scroll="loadPage()"
  >
    <article ng-class="{ 'unread': isUnRead(notification) }">
      <div class="row">
        <div class="avatar">
          <i class="system-avatar" ng-if="!notification.sender"></i>
          <img
            ng-src="/userbook/avatar/[[notification.sender]]?thumbnail=100x100"
            ng-if="notification.sender"
          />
          <i class="sticker app type [[notification.type.toLowerCase()]]"></i>
        </div>
        <div class="content horizontal-spacing">
          <p class="inline" bind-html="notification.message"></p>
        </div>
      </div>
      <div class="notification-date">
        <em class="low-importance right-magnet"
          >[[formatDate(notification.date.$date)]]</em
        >
      </div>
    </article>
    <div
      class="notification-actions"
      ng-class="{'opened': notification.opened}"
      ng-if="showActions(notification)"
    >
      <div class="opener" ng-click="toggleNotification(notification,$event)">
        <i class="left-open"></i>
      </div>
      <div class="actions">
        <div
          ng-repeat="(name, action) in actions"
          ng-show="!action.condition || action.condition(notification)"
          class="action [[ name ]]"
        >
          <i class="[[name]]"></i>
          <a
            ng-click="action.action(notification)"
            ng-disabled="notification[action.doneProperty]"
          >
            [[ notification[action.doneProperty] ?
            lang.translate(action.doneLabel) : lang.translate(action.label) ]]
          </a>
        </div>
      </div>
    </div>
  </div>
  <!--SHOW MORE -->
  <div ng-if="showSeeMore()" style="text-align: center">
    <a ng-click="loadPage()"><i18n>timeline.seeold</i18n></a>
  </div>
  <div
    ng-if="showSeeMoreOnEmpty()"
    style="justify-content: center; display: flex"
  >
    <button ng-click="forceLoadPage()"><i18n>timeline.historyold</i18n></button>
  </div>
  <lightbox
    show="display.confirmReport"
    on-close="display.confirmReport = false"
  >
    <h2><i18n>timeline.confirm.report</i18n></h2>
    <p>
      <i18n>timeline.confirm.report.text</i18n>
    </p>
    <div class="row">
      <button
        ng-click="doReport(notification); display.confirmReport = false"
        class="right-magnet"
      >
        <i18n>timeline.action.report</i18n>
      </button>
      <button
        type="button"
        ng-click="display.confirmReport = false"
        class="right-magnet cancel"
      >
        <i18n>cancel</i18n>
      </button>
    </div>
  </lightbox>

  <div class="row notification" ng-show="notifications.loading">
    <h1 class="reduce-block-eight nomargin"><i18n>loading</i18n></h1>
  </div>
</div>