dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simple notification UI

This commit is contained in:
ClemDee 2019-06-26 14:33:38 +02:00
parent a62f2ff003
commit 2d6e8754be
3 changed files with 97 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
customize.dist/src/less2/include/colortheme.less
View File

@ -135,9 +135,9 @@
@colortheme_admin-color: #FFF;
@colortheme_admin-warn: #ffae00;
@colortheme_notifications-bg: #7c0404;
@colortheme_notifications-color: #FFF;
@colortheme_notifications-warn: #ffae00;
@colortheme_notifications-bg: #4ae397;
@colortheme_notifications-color: #000;
@colortheme_notifications-warn: #e34a85;
@colortheme_support-bg: #42d1f4;
@colortheme_support-color: #000;

66
www/notifications/app-notifications.less
View File

@ -12,5 +12,71 @@
display: flex;
flex-flow: column;
.cp-app-notifications-panel {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
.cp-app-notifications-panel-titlebar {
padding: 1rem 1rem;
border-radius: 5px 5px 0 0;
background-color: #777;
color: white;
}
.cp-app-notifications-panel-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
overflow: hidden;
.cp-notification {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
&:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.cp-notification-content {
flex-grow: 1;
cursor: pointer;
&:hover {
background-color: #eee;
}
p {
margin: 1rem 1rem;
}
}
.cp-notification-dismiss {
align-self: stretch;
flex-shrink: 0;
display: flex;
flex-direction: column;
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);
}
}
}
}
}
}

33
www/notifications/inner.js
View File

@ -37,7 +37,10 @@ define([
],
'friends': [
'cp-notifications-friend-requests',
]
],
'pads': [
'cp-notifications-shared-app',
],
};
var create = {};
@ -60,8 +63,27 @@ define([
create['all'] = function () {
var key = 'all';
var $div = makeBlock(key);
var notif = h("div");
$div.append(notif);
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")
]);
var notifsList = h("div.cp-app-notifications-panel-list");
var notifsPanel = h("div.cp-app-notifications-panel", [
notifsTitlebar,
notifsList
]);
$(notifsPanel).append(notifsList);
$div.append(notifsPanel);
common.mailbox.subscribe(["notifications"], {
onMessage: function (data, el) {
console.log("data : ", data);
if (el) {
$(notifsList).prepend(el);
}
},
onViewed: function () {}
});
// common.mailbox.dismiss(data)
return $div;
};
@ -84,8 +106,9 @@ define([
common.setHash(active);
Object.keys(categories).forEach(function (key) {
var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
if (key === 'stats') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
if (key === 'all') { $category.append($('<span>', {'class': 'fa fa-bars'})); }
if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user-plus'})); }
if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-pad'})); }
if (key === active) {
$category.addClass('cp-leftside-active');