Notifications 9.8

Proposal 2 - Event Center

by risherry

HTML

<link rel="stylesheet" href="https://playground.xwiki.org/xwiki/webjars/wiki%3Aplayground/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<ul class="dropdown-menu" style="display: block; position: relative;">
  <li class="notifications-watchlist-header">
    <div class="clearfix">
      <div class="col-xs-6">
        <p><strong>Watchlist</strong></p>
      </div>
      <div class="col-xs-6 text-right">
        <a href="/xwiki/bin/view/XWiki/risherry?category=watchlist"><span class="fa fa-cog"></span> Settings</a>
      </div>
    </div>
  </li>
  <li class="notifications-watchlist-item">
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-tmWatchDocument bootstrap-switch-small bootstrap-switch-animate" style="width: 90px;" data-original-title="" title="">
      <div class="bootstrap-switch-container" style="width: 131px; margin-left: -43px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 43px;">ON</span><span class="bootstrap-switch-label" style="width: 45px;"><span class="fa fa-file"></span></span><span class="bootstrap-switch-handle-off bootstrap-switch-default"
        style="width: 43px;">OFF</span>
        <input type="checkbox" id="tmWatchDocument">
      </div>
    </div>
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-id-tmWatchSpace bootstrap-switch-small bootstrap-switch-animate" style="width: 90px;" data-original-title="" title="">
      <div class="bootstrap-switch-container" style="width: 131px; margin-left: -43px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 43px;">ON</span><span...

CSS

body {
  font-family: Open Sans, sans-serif;
}

.notification-event-details {
  //display: none !important;
}

#tmNotifications ul {
  padding-bottom: 0;
}

.notifications-area {
  /*margin-top: 10px;*/
  min-height: 20px;
  /* 320px is the width of the smallest smartphones right now, so we don't use a larger width */
  min-width: 320px;
  overflow: hidden;
}

.notification-icon {
  font-size: 2em;
  text-align: center;
}

.notification-event,
.notifications-load-more {
  border-top: 1px dashed #E8E8E8;
}

.notification-event-unread {
  background-color: #F5F5F5;
}

.notifications-load-more {
  min-height: 2em;
  cursor: pointer;
}

.notifications-load-more:hover {
  background-color: #eeeeee;
}

.notifications-load-more p {
  margin: 0;
  padding: 0.7em;
}

.notification-event-read-button {
  position: absolute;
  right: 5px;
  z-index: 1;
}

.notifications-count {
  background-color: red;
  opacity: 0.9;
  position: absolute;
  margin-left: 1.6em;
  top: 0;
}

@media (min-width: 768px) {
  .notifications-count {
    top: 3px;
  }
}

.notifications-header-uix {
  text-align: right;
}

.notification-event-details {
  font-size: 0.8em;
  margin-top: 10px;
}

.notification-event-details td {
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 8px 0 0;
}

.notification-event-details td:first-of-type {
    width: 28%;
    padding-right: 4%;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70px;
}

.notification-event-details td:last-of-type {
    max-width: 20px;
}

.notification-event-details .noitems {
  font-size: inherit;
}

.notification-event-user > img {
  max-height: 15px;
  max-width: 15px;
}

.notifications-toggles .bootstrap-switch .bootstrap-switch-label {
  background-image: linear-gradient(#FFFFFF, #ECECEC 50%);
  color: #4D5860;
}


/***** -------------------- ****/

.dropdown-menu {
  width: 322px;
  margin: 0;
  padding-bottom: 0;
}

.notifications-watchlist-item {
  text-align: center;
}

.notifications-watchlist-item...

JavaScript

Go to "Result" tab