diff --git a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
index a998599f5..d9d7da867 100644
--- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
@@ -1,4 +1,7 @@
class App.OnlineNotificationWidget extends App.Controller
+ elements:
+ '.js-toggleNavigation': 'toggle'
+
constructor: ->
super
@@ -38,10 +41,10 @@ class App.OnlineNotificationWidget extends App.Controller
@el.find('.activity-counter').remove()
return
- if @el.find('.logo .activity-counter')[0]
- @el.find('.logo .activity-counter').html(count)
+ if @el.find('.js-toggleNavigation .activity-counter')[0]
+ @el.find('.js-toggleNavigation .activity-counter').html(count)
else
- @el.find('.logo').append('
-
- <%- item.created_by.avatar() %>
-
-
-
-
- <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
-
- ?
-
-
+
+
+
- <% end %>
-<% else: %>
-
- <%- @T("No unread Notifications for you. :) ") %>
-
-<% end %>
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/widget/online_notification_content.jst.eco b/app/assets/javascripts/app/views/widget/online_notification_content.jst.eco
new file mode 100644
index 000000000..d9d41fba8
--- /dev/null
+++ b/app/assets/javascripts/app/views/widget/online_notification_content.jst.eco
@@ -0,0 +1,21 @@
+<% if @items.length: %>
+ <% for item in @items: %>
+
+ <% end %>
+<% else: %>
+
+ <%- @T("No unread Notifications for you. :) ") %>
+
+<% end %>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco b/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco
new file mode 100644
index 000000000..6a0f33942
--- /dev/null
+++ b/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco
@@ -0,0 +1,5 @@
+
+ <%- @T( 'Notifications' ) %>
+ <%= @counter %>
+ <%- @T( 'Mark all as read' ) %>
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 7e7d545a5..7beee665e 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -571,7 +571,8 @@ h5 {
}
label,
-.checkbox.form-group label {
+.checkbox.form-group label,
+.label {
text-transform: uppercase;
color: hsl(0,0%,60%);
display: block;
@@ -579,6 +580,8 @@ label,
font-weight: normal;
letter-spacing: 0.1em;
margin-bottom: 4px;
+ text-align: left;
+ padding: 0;
}
fieldset {
@@ -2091,8 +2094,13 @@ footer {
margin-top: -3px;
&.loading {
- width: 14px;
- height: 14px;
+ width: 10px;
+ height: 10px;
+ border-radius: 100%;
+ position: relative;
+ &:after {
+ @extend .priority.icon:after;
+ }
}
&.error {
@@ -2202,12 +2210,12 @@ footer {
}
.search {
- padding: 14px 15px 10px 10px;
+ padding: 14px 2px 10px 10px;
border-bottom: 1px solid rgba(240, 250, 255, .05);
}
.search-holder {
- margin-right: 15px;
+ margin-right: 2px;
position: relative;
transition: 240ms;
}
@@ -2249,12 +2257,13 @@ footer {
}
.search .logo {
- width: 41px;
+ width: 67px;
height: 36px;
- background: image_url("/assets/images/logo.svg");
+ background: image_url("/assets/images/logo.svg") no-repeat center;
transition: 240ms;
position: relative;
@extend .u-clickable;
+ @extend .zIndex-5;
}
.logo .activity-counter {
@@ -2627,18 +2636,18 @@ footer {
border: none;
z-index: 1110;
box-shadow: 0 1px 14px rgba(0,8,14,.25);
+ // max-height: calc(100vh - 20px);
}
.popover-title {
border: none;
background: none;
- padding: 20px 17px 4px;
+ padding: 21px 17px 4px;
}
.popover-content {
padding: 0 17px 10px;
- max-height: 600px;
- overflow-y: scroll;
+ overflow-y: auto;
}
.popover.right { margin-left: 4px; }
@@ -2697,6 +2706,43 @@ footer {
margin-bottom: 8px;
}
+ .popover--notifications {
+ @extend .zIndex-5;
+
+ &.is-visible {
+ @extend .vertical;
+ }
+ }
+
+ .popover-notificationsHeader {
+ @extend .horizontal;
+ @extend .end;
+ @extend .popover-title;
+ padding-bottom: 29px;
+
+ .popover-title {
+ @extend h1;
+ padding: 0;
+ line-height: 1;
+ }
+ }
+
+ .popover-notificationsCounter {
+ color: #e25253;
+ padding-left: 3px;
+ }
+
+ .popover-notificationsMarkRead {
+ @extend .btn;
+ @extend .btn--subtle;
+ @extend .align-right;
+ padding: 5px 0 0;
+
+ &:hover {
+ padding: 5px 0 0;
+ }
+ }
+
.stat-widgets {
margin: 0 -7px 20px;
}
@@ -3200,14 +3246,14 @@ footer {
right: 0;
top: -30px;
height: 30px;
- background: linear-gradient(transparent, white);
+ background: linear-gradient(rgba(255,255,255,0), white);
}
}
.customer .textBubble-overflowContainer {
background: #e5f0f5;
&:before {
- background: linear-gradient(transparent, #e5f0f5);
+ background: linear-gradient(hsla(199,44%,93%,0), hsl(199,44%,93%));
}
}