diff --git a/www/notifications/app-notifications.less b/www/notifications/app-notifications.less index e9f05cf0d..543b2550e 100644 --- a/www/notifications/app-notifications.less +++ b/www/notifications/app-notifications.less @@ -13,6 +13,12 @@ display: flex; flex-flow: column; + .cp-clickable { + cursor: pointer; + &:hover { + background-color: rgba(0,0,0,0.1); + } + } .cp-app-notifications-panel { display: flex; @@ -22,10 +28,37 @@ width: 100%; .cp-app-notifications-panel-titlebar { - padding: 1rem 1rem; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; border-radius: 5px 5px 0 0; background-color: #777; color: white; + + .cp-app-notifications-panel-title { + flex-grow: 1; + margin: 1rem 1rem; + } + + .cp-app-notifications-panel-titlebar-buttons { + align-self: stretch; + flex-shrink: 0; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: stretch; + + .cp-app-notifications-dismissall { + align-self: stretch; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 3rem; + } + } } .cp-app-notifications-panel-list { @@ -50,10 +83,6 @@ .cp-notification-content { flex-grow: 1; - cursor: pointer; - &:hover { - background-color: #eee; - } p { margin: 1rem 1rem; } @@ -67,12 +96,7 @@ justify-content: center; align-items: center; border-left: 1px solid #ccc; - background-color: white; - cursor: pointer; width: 3rem; - &:hover { - background-color: rgba(0, 0, 0, 0.1); - } } } } diff --git a/www/notifications/inner.js b/www/notifications/inner.js index fbc97552b..bb998a44e 100644 --- a/www/notifications/inner.js +++ b/www/notifications/inner.js @@ -63,9 +63,11 @@ define([ create['all'] = function () { var key = 'all'; var $div = makeBlock(key); + var dismissAll = h("div.cp-app-notifications-dismissall.cp-clickable", { title: Messages.dismissAll || "Dismiss All" }, h("span.fa.fa-trash")); + var titleButtons = h("div.cp-app-notifications-panel-titlebar-buttons", dismissAll); var notifsTitlebar = h('div.cp-app-notifications-panel-titlebar', [ h("span.cp-app-notifications-panel-title", (Messages.notifications || "Notifications") + " - " + key), - h("div.cp-app-notifications-panel-titlebar-buttons") + titleButtons ]); var notifsList = h("div.cp-app-notifications-panel-list"); var notifsPanel = h("div.cp-app-notifications-panel", [ @@ -107,7 +109,7 @@ define([ Object.keys(categories).forEach(function (key) { var $category = $('
', {'class': 'cp-sidebarlayout-category'}).appendTo($categories); if (key === 'all') { $category.append($('', {'class': 'fa fa-bars'})); } - if (key === 'friends') { $category.append($('', {'class': 'fa fa-user-plus'})); } + if (key === 'friends') { $category.append($('', {'class': 'fa fa-user'})); } if (key === 'pads') { $category.append($('', {'class': 'cptools cptools-pad'})); } if (key === active) {