Skip to content

Commit

Permalink
🎨 [Frontend] Improve Notification texts and Bell's UX (#6661)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Nov 6, 2024
1 parent 9c6068d commit db3aacf
Show file tree
Hide file tree
Showing 13 changed files with 246 additions and 102 deletions.
6 changes: 6 additions & 0 deletions services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
}
// "Starting..." page
this._hideLoadingPage();

// since all the resources (templates, users, orgs...) were already loaded, notifications can be built
osparc.data.Resources.get("notifications")
.then(notifications => {
osparc.notification.Notifications.getInstance().addNotifications(notifications);
});
})
.catch(err => {
console.error(err);
Expand Down
48 changes: 23 additions & 25 deletions services/static-webserver/client/source/class/osparc/desktop/MainPageDesktop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,31 +26,29 @@ qx.Class.define("osparc.desktop.MainPageDesktop", {
this._add(osparc.notification.RibbonNotifications.getInstance());

const navBar = new osparc.navigation.NavigationBar();
navBar.populateLayout()
.then(() => {
// exclude some items from the navigation bar
navBar.getChildControl("dashboard-label").exclude();
navBar.getChildControl("dashboard-button").exclude();
navBar.getChildControl("notifications-button").exclude();
navBar.getChildControl("help").exclude();

// exclude all the menu entries except "log-out" from user menu
const userMenuButton = navBar.getChildControl("user-menu");
const userMenu = userMenuButton.getMenu();
// eslint-disable-next-line no-underscore-dangle
const userMenuEntries = userMenu._getCreatedChildControls();
Object.entries(userMenuEntries).forEach(([id, userMenuEntry]) => {
if (!["mini-profile-view", "po-center", "log-out"].includes(id)) {
userMenuEntry.exclude();
}
});
// exclude also the separators
userMenu.getChildren().forEach(child => {
if (child.classname === "qx.ui.menu.Separator") {
child.exclude();
}
});
});
navBar.populateLayout();
// exclude some items from the navigation bar
navBar.getChildControl("dashboard-label").exclude();
navBar.getChildControl("dashboard-button").exclude();
navBar.getChildControl("notifications-button").exclude();
navBar.getChildControl("help").exclude();

// exclude all the menu entries except "log-out" from user menu
const userMenuButton = navBar.getChildControl("user-menu");
const userMenu = userMenuButton.getMenu();
// eslint-disable-next-line no-underscore-dangle
const userMenuEntries = userMenu._getCreatedChildControls();
Object.entries(userMenuEntries).forEach(([id, userMenuEntry]) => {
if (!["mini-profile-view", "po-center", "log-out"].includes(id)) {
userMenuEntry.exclude();
}
});
// exclude also the separators
userMenu.getChildren().forEach(child => {
if (child.classname === "qx.ui.menu.Separator") {
child.exclude();
}
});
this._add(navBar);

osparc.MaintenanceTracker.getInstance().startTracker();
Expand Down
14 changes: 6 additions & 8 deletions services/static-webserver/client/source/class/osparc/info/CommentUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,14 +117,12 @@ qx.Class.define("osparc.info.CommentUI", {
const commentContent = this.getChildControl("comment-content");
commentContent.setValue(this.__comment["contents"]);

osparc.store.Store.getInstance().getUser(this.__comment["user_id"])
.then(user => {
if (user) {
const userSource = osparc.utils.Avatar.getUrl(user["login"], 32);
thumbnail.setSource(userSource);
userName.setValue(user["label"]);
}
});
const user = osparc.store.Store.getInstance().getUser(this.__comment["user_id"])
if (user) {
const userSource = osparc.utils.Avatar.getUrl(user["login"], 32);
thumbnail.setSource(userSource);
userName.setValue(user["label"]);
}
}
}
});
12 changes: 2 additions & 10 deletions services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,16 +92,8 @@ qx.Class.define("osparc.navigation.NavigationBar", {
__tabButtons: null,

populateLayout: function() {
return new Promise(resolve => {
osparc.data.Resources.get("notifications")
.then(notifications => {
osparc.notification.Notifications.getInstance().addNotifications(notifications);
this.__buildLayout();
osparc.WindowSizeTracker.getInstance().addListener("changeCompactVersion", () => this.__navBarResized(), this);
resolve();
})
.catch(err => console.error(err));
});
this.__buildLayout();
osparc.WindowSizeTracker.getInstance().addListener("changeCompactVersion", () => this.__navBarResized(), this);
},

__buildLayout: function() {
Expand Down
16 changes: 16 additions & 0 deletions services/static-webserver/client/source/class/osparc/notification/Notification.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@ qx.Class.define("osparc.notification.Notification", {

this.set({
id: notificationObj.id,
resourceId: notificationObj.resource_id ? notificationObj.resource_id : null,
category: notificationObj.category,
actionablePath: notificationObj.actionable_path,
title: notificationObj.title,
text: notificationObj.text,
userFromId: notificationObj.user_from_id ? notificationObj.user_from_id : null,
date: new Date(notificationObj.date),
read: ["true", "True", true].includes(notificationObj.read)
});
Expand All @@ -40,6 +42,13 @@ qx.Class.define("osparc.notification.Notification", {
event: "changeId"
},

resourceId: {
check: "String",
init: null,
nullable: true,
event: "changeResourceId"
},

category: {
check: [
"NEW_ORGANIZATION",
Expand Down Expand Up @@ -74,6 +83,13 @@ qx.Class.define("osparc.notification.Notification", {
event: "changeText"
},

userFromId: {
check: "Number",
init: null,
nullable: true,
event: "changeUserFromId"
},

date: {
check: "Date",
init: null,
Expand Down
141 changes: 97 additions & 44 deletions services/static-webserver/client/source/class/osparc/notification/NotificationUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,37 +112,102 @@ qx.Class.define("osparc.notification.NotificationUI", {
return control || this.base(arguments, id);
},

__applyNotification: function(notification) {
const icon = this.getChildControl("icon");
notification.bind("category", icon, "source", {
converter: value => {
let source = "";
switch (value) {
case "NEW_ORGANIZATION":
source = "@FontAwesome5Solid/users/14";
break;
case "STUDY_SHARED":
source = "@FontAwesome5Solid/file/14";
break;
case "TEMPLATE_SHARED":
source = "@FontAwesome5Solid/copy/14";
break;
case "ANNOTATION_NOTE":
source = "@FontAwesome5Solid/file/14";
break;
case "WALLET_SHARED":
source = "@MaterialIcons/account_balance_wallet/14";
break;
__applyNotification: async function(notification) {
console.log("notification", notification);
let resourceId = null;
if (notification.getResourceId()) {
resourceId = notification.getResourceId();
} else if (notification.getActionablePath()) {
// extract it from the actionable path
const actionablePath = notification.getActionablePath();
resourceId = actionablePath.split("/")[1];
}
const userFromId = notification.getUserFromId();

let source = "";
let title = "";
let description = "";
switch (notification.getCategory()) {
case "NEW_ORGANIZATION":
source = "@FontAwesome5Solid/users/14";
if (resourceId) {
const group = await osparc.store.Store.getInstance().getGroup(resourceId);
description = "You're now member of '" + group["name"] + "'";
}
return source;
}
});
break;
case "STUDY_SHARED":
source = "@FontAwesome5Solid/file/14";
if (resourceId) {
const params = {
url: {
"studyId": resourceId
}
};
const study = await osparc.data.Resources.getOne("studies", params);
const studyAlias = osparc.product.Utils.getStudyAlias({
firstUpperCase: true
});
if (study) {
title = `${studyAlias} '${study["name"]}'`;
}
}
if (userFromId) {
const user = osparc.store.Store.getInstance().getUser(userFromId);
if (user) {
description = "was shared by " + user["label"];
}
}
break;
case "TEMPLATE_SHARED":
source = "@FontAwesome5Solid/copy/14";
if (resourceId) {
const template = osparc.store.Store.getInstance().getTemplate(resourceId);
const templateAlias = osparc.product.Utils.getTemplateAlias({
firstUpperCase: true
});
if (template) {
title = `${templateAlias} '${template["name"]}'`;
}
}
if (userFromId) {
const user = osparc.store.Store.getInstance().getUser(userFromId);
if (user) {
description = "was shared by " + user["label"];
}
}
break;
case "ANNOTATION_NOTE":
source = "@FontAwesome5Solid/file/14";
if (resourceId) {
const params = {
url: {
"studyId": resourceId
}
};
const study = await osparc.data.Resources.getOne("studies", params);
if (study) {
title = `Note added in '${study["name"]}'`;
}
}
if (userFromId) {
const user = osparc.store.Store.getInstance().getUser(userFromId);
if (user) {
description = "was added by " + user["label"];
}
}
break;
case "WALLET_SHARED":
source = "@MaterialIcons/account_balance_wallet/14";
break;
}
const icon = this.getChildControl("icon");
icon.setSource(source);

const title = this.getChildControl("title");
notification.bind("title", title, "value");
const titleLabel = this.getChildControl("title");
titleLabel.setValue(title ? title : notification.getTitle());

const text = this.getChildControl("text");
notification.bind("text", text, "value");
const descriptionLabel = this.getChildControl("text");
descriptionLabel.setValue(description ? description : notification.getText());

const date = this.getChildControl("date");
notification.bind("date", date, "value", {
Expand All @@ -166,23 +231,11 @@ qx.Class.define("osparc.notification.NotificationUI", {
}

this.fireEvent("notificationTapped");
osparc.notification.Notifications.markAsRead(notification);
this.__openActionablePath(notification);
},

if (notification.isRead() === false) {
// set as read
const params = {
url: {
notificationId: notification.getId()
},
data: {
"read": true
}
};
osparc.data.Resources.fetch("notifications", "patch", params)
.then(() => notification.setRead(true))
.catch(() => notification.setRead(false));
}

// open actionable path
__openActionablePath: function(notification) {
const actionablePath = notification.getActionablePath();
const items = actionablePath.split("/");
const resourceId = items.pop();
Expand Down
Loading

0 comments on commit db3aacf

Please sign in to comment.