Perspective Update Notification

Just found the capability to enable update notifications in Perspective which is super helpful. It doesn't seem like it but thought I'd ask -- are there any options for customizing this notification? For example, making it draggable or resizable? What about not requiring a timeout length (user can accept the update at any time)?

At this time, there is no option to customize the notification within the Project Properties panel.

As the notification is purely HTML, you absolutely have the option to modify the CSS in use to style the notification or set its dimensions/position.

This is the HTML in use for the Notification:

<div class="notification-wrapper no-print" style="top: 0px; z-index: 13000;">
   <div class="notification">
      <div class="notification-body body-expandable">
         <div class="notification-icon-wrapper">
            <svg class="notification-icon update-icon" fill="#39C16C">
               <symbol viewBox="0 0 24 24" id="project-update">
                  <g id="Layer_2" data-name="Layer 2">
                     <g id="Layer_1-2" data-name="Layer 1">
                        <path fill="none" d="M0,0H24V24H0Z"></path>
                        <path d="M12,16l4-4H13V3H11v9H8ZM21,3H15V5h6V19H3V5H9V3H3A2,2,0,0,0,1,5V19a2,2,0,0,0,2,2H21a2,2,0,0,0,2-2V5A2,2,0,0,0,21,3Z"></path>
                     </g>
                  </g>
               </symbol>
               <use xlink:href="#project-update"></use>
            </svg>
         </div>
         <div class="notification-content content-expandable">
            <p class="message-summary notification-head message-success">Project Update</p>
            <span class="notification-time notification-head">&nbsp;&nbsp;•&nbsp;&nbsp;a few seconds ago&nbsp;</span>
            <svg class="expand-icon material-icons md-16">
               <use xlink:href="/res/perspective/icons/material-icons.svg#expand_less"></use>
            </svg>
            <br>
            <p class="message-detail">This project has been changed. Please save your work, this session will automatically update in <b>15</b> seconds.</p>
         </div>
      </div>
      <div class="notification-actions">
         <div class="notification-action-item">UPDATE</div>
      </div>
   </div>
</div>

I don't see any settings applied which would prevent your custom application of settings, which could be done at the project level with the Advanced stylesheet.css resource, or at the Gateway level within the theme files.

2 Likes

This is very helpful, thank you!

1 Like