osb/spark/resources/views/modals/notifications.blade.php

119 lines
5.9 KiB
PHP
Raw Normal View History

2017-11-03 05:26:07 +00:00
<!-- Notifications Modal -->
<spark-notifications
:notifications="notifications"
:has-unread-announcements="hasUnreadAnnouncements"
:loading-notifications="loadingNotifications" inline-template>
<div>
<div class="modal docked docked-right" id="modal-notifications" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<div class="btn-group">
<button class="btn btn-default" :class="{'active': showingNotifications}" @click="showNotifications" style="width: 50%;">
Notifications
</button>
<button class="btn btn-default" :class="{'active': showingAnnouncements}" @click="showAnnouncements" style="width: 50%;">
Announcements <i class="fa fa-circle text-danger p-l-xs" v-if="hasUnreadAnnouncements"></i>
</button>
</div>
</div>
<div class="modal-body">
<!-- Informational Messages -->
<div class="notification-container" v-if="loadingNotifications">
<i class="fa fa-btn fa-spinner fa-spin"></i>Loading Notifications
</div>
<div class="notification-container" v-if=" ! loadingNotifications && activeNotifications.length == 0">
<div class="alert alert-warning m-b-none">
We don't have anything to show you right now! But when we do,
we'll be sure to let you know. Talk to you soon!
</div>
</div>
<!-- List Of Notifications -->
<div class="notification-container" v-if="showingNotifications && hasNotifications">
<div class="notification" v-for="notification in notifications.notifications">
<!-- Notification Icon -->
<figure>
<img v-if="notification.creator" :src="notification.creator.photo_url" class="spark-profile-photo">
<span v-else class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i :class="['fa', 'fa-stack-1x', 'fa-inverse', notification.icon]"></i>
</span>
</figure>
<!-- Notification -->
<div class="notification-content">
<div class="meta">
<p class="title">
<span v-if="notification.creator">
@{{ notification.creator.name }}
</span>
<span v-else>
{{ Spark::product() }}
</span>
</p>
<div class="date">
@{{ notification.created_at | relative }}
</div>
</div>
<div class="notification-body" v-html="notification.parsed_body"></div>
<!-- Notification Action -->
<a :href="notification.action_url" class="btn btn-primary" v-if="notification.action_text">
@{{ notification.action_text }}
</a>
</div>
</div>
</div>
<!-- List Of Announcements -->
<div class="notification-container" v-if="showingAnnouncements && hasAnnouncements">
<div class="notification" v-for="announcement in notifications.announcements">
<!-- Notification Icon -->
<figure>
<img :src="announcement.creator.photo_url" class="spark-profile-photo">
</figure>
<!-- Announcement -->
<div class="notification-content">
<div class="meta">
<p class="title">@{{ announcement.creator.name }}</p>
<div class="date">
@{{ announcement.created_at | relative }}
</div>
</div>
<div class="notification-body" v-html="announcement.parsed_body"></div>
<!-- Announcement Action -->
<a :href="announcement.action_url" class="btn btn-primary" v-if="announcement.action_text">
@{{ announcement.action_text }}
</a>
</div>
</div>
</div>
</div>
<!-- Modal Actions -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</spark-notifications>