add notification remove icon (sans functionality)

.js-remove is seeking a job in the click-binding business.

app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco

@@ -3,7 +3,7 @@
   <a href="<%- @item.link %>" class="activity-body">
     <span class="activity-message">
       <span class="activity-text">
-        <%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %>
+        <%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> <strong><%= @item.title %></strong><% end %>
       </span>
       <%- @humanTime(@item.created_at, false, 'activity-time') %>
     </span>

app/assets/javascripts/app/views/widget/online_notification_content.jst.eco

@@ -1,17 +1,22 @@
 <% if @items.length: %>
   <% for item in @items: %>
-  <div class="activity-entry<% if item.seen: %> is-inactive<% end %>">
+  <div class="activity-entry activity-entry--removeable<% if item.seen: %> is-inactive<% end %>">
     <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
       <%- item.created_by.avatar() %>
     </a>
-    <a href="<%- item.link %>" class="activity-body js-locationVerify">
-      <span class="activity-message">
+    <div class="activity-body">
+      <a class="activity-message js-locationVerify" href="<%- item.link %>">
         <span class="activity-text">
-          <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
+          <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> <strong><%= item.title %></strong><% end %>
         </span>
         <%- @humanTime(item.created_at, false, 'activity-time') %>
-      </span>
-    </a>
+      </a>
+      <div class="activity-remove js-remove">
+        <div class="activity-remove-icon-holder">
+          <%- @Icon('diagonal-cross') %>
+        </div>
+      </div>
+    </div>
   </div>
   <% end %>
 <% else: %>

app/assets/stylesheets/zammad.scss

@@ -3120,7 +3120,9 @@ footer {
 
     .popover-content {
       flex: 1;
-      overflow-y: scroll;
+      padding-left: 0;
+      padding-right: 0;
+      overflow-y: auto;
     }
 
     &.is-overflowing .popover-notificationsHeader {
@@ -3373,11 +3375,37 @@ footer {
     margin-right: 26px;
   }
 
+  .activity-entries {
+    margin: 0 -17px;
+  }
+
   .activity-entry {
     display: flex;
+    padding: 0 17px;
     
     &.is-inactive {
-      opacity: 0.5;
+      // opacity: 0.5;
+    }
+
+    &.activity-entry--removeable {
+      padding-right: 0;
+    }
+
+    &:not(:hover) .activity-remove {
+      opacity: 0;
+    }
+
+    &:not(:last-child) .activity-body:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      border-bottom: 1px solid #f2f2f3;
+    }
+
+    &.activity-entry--removeable:not(:last-child) .activity-body:after {
+      right: 17px;
     }
   }
 
@@ -3388,7 +3416,6 @@ footer {
   }
 
   .activity-body {
-    color: #444a4f;
     padding: 16px 0 16px 2px;
     position: relative;
     display: flex;
@@ -3396,27 +3423,14 @@ footer {
     min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
   }
 
-  .activity-entry:not(:last-child) .activity-body:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    right: 30px;
-    left: 0;
-    border-bottom: 1px solid #f2f2f3;
-  }
-
-  .activity-body:hover {
-    color: #444a4f;
-    text-decoration: none;
-  }
-
-    .activity-body:hover .activity-text {
-      text-decoration: underline;
-    }
-
   .activity-message {
+    color: #444a4f;
     flex: 1;
     min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
+    
+    &:hover .activity-text {
+      text-decoration: underline;
+    }
   }
 
   .activity-time {
@@ -3425,8 +3439,38 @@ footer {
     display: block;
   }
 
-  .activity .priority.icon:after {
-    background: white;
+  .activity-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding-left: 10px;
+    padding-right: 27px;
+    
+    .activity-remove-icon-holder {
+      width: 19px;
+      height: 19px;
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: hsl(0,0%,80%);
+    }
+    
+    .icon {
+      fill: white;
+      width: 9px;
+      height: 9px;
+    }
+
+    &:hover {
+      .activity-remove-icon-holder {
+        background: #972e29;
+      }
+      .icon {
+        opacity: 1;
+      }
+    }
   }
 
 .form-inline {
@@ -3549,6 +3593,11 @@ footer {
 
 .ticketZoom {
   background: #f8f9fa;
+  /* 
+    force ticket zoom to show scrollbars 
+    because we offset the tabs bar when the os shows scrollbars
+  */
+  min-height: 101%;
 }
 
 .ticketZoom-controls {