119 lines
5.9 KiB
PHP
119 lines
5.9 KiB
PHP
|
<!-- 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>
|