Skip to content

Commit e2f0683

Browse files
odeimaizodeimaiz
authored
🐛🎨 [Frontend] RTC: UX fixes (#8179)
1 parent bca1a27 commit e2f0683

File tree

13 files changed

+114
-76
lines changed

13 files changed

+114
-76
lines changed

‎services/static-webserver/client/source/class/osparc/conversation/AddMessage.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,13 @@ qx.Class.define("osparc.conversation.AddMessage", {
9191
}
9292
case "comment-field":
9393
control = new osparc.editor.MarkdownEditor();
94+
control.addListener("keydown", e => {
95+
if (e.isCtrlPressed() && e.getKeyIdentifier() === "Enter") {
96+
this.__addComment();
97+
e.stopPropagation();
98+
e.preventDefault();
99+
}
100+
}, this);
94101
control.getChildControl("buttons").exclude();
95102
const layout = this.getChildControl("add-comment-layout");
96103
layout.add(control, {

‎services/static-webserver/client/source/class/osparc/dashboard/CardBase.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,6 @@ qx.Class.define("osparc.dashboard.CardBase", {
2424
construct: function() {
2525
this.base(arguments);
2626

27-
if (osparc.utils.DisabledPlugins.isRTCEnabled()) {
28-
// "IN_USE" is not a blocker anymore
29-
const inUseIdx = qx.util.PropertyUtil.getProperties(osparc.dashboard.CardBase).blocked.check.indexOf("IN_USE");
30-
if (inUseIdx > -1) {
31-
qx.util.PropertyUtil.getProperties(osparc.dashboard.CardBase).blocked.check.splice(inUseIdx, 1);
32-
}
33-
}
34-
3527
[
3628
"pointerover",
3729
"focus"

‎services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -410,9 +410,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
410410

411411
resourcesList.forEach(study => {
412412
const state = study["state"];
413-
const projectLocked = osparc.study.Utils.state.isProjectLocked(state);
414413
const projectStatus = osparc.study.Utils.state.getProjectStatus(state);
415-
if (projectLocked && projectStatus === "CLOSING") {
414+
if (projectStatus === "CLOSING") {
416415
// websocket might have already notified that the state was closed.
417416
// But the /projects calls response got after the ws message. Ask again to make sure
418417
const delay = 2000;
@@ -887,6 +886,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
887886
requestParams.accessRights = "public";
888887
break;
889888
case osparc.dashboard.StudyBrowser.CONTEXT.FUNCTIONS:
889+
delete requestParams.orderBy; // functions are not ordered yet
890+
requestParams.includeExtras = "true";
890891
break;
891892
case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PROJECTS: {
892893
requestParams.type = "user";

‎services/static-webserver/client/source/class/osparc/desktop/MainPage.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ qx.Class.define("osparc.desktop.MainPage", {
257257
// these operations need to be done after template creation
258258
osparc.store.Study.getInstance().addCollaborators(templateData, templateAccessRights);
259259
if (templateType) {
260-
osparc.store.Study.getInstance().patchTemplateType(templateData["uuid"], templateType)
260+
osparc.store.Study.getInstance().patchTemplateType(templateData, templateType)
261261
.then(() => {
262262
if (tutorialBrowser && templateType === osparc.data.model.StudyUI.TUTORIAL_TYPE) {
263263
tutorialBrowser.reloadResources(false);
@@ -309,7 +309,7 @@ qx.Class.define("osparc.desktop.MainPage", {
309309
const currentStudy = store.getCurrentStudy();
310310
while (currentStudy.isLocked()) {
311311
await osparc.utils.Utils.sleep(1000);
312-
osparc.store.Study.getInstance().getStudyState(studyId);
312+
osparc.store.Study.getInstance().fetchStudyState(studyId);
313313
}
314314
this.__loadingPage.setMessages([]);
315315
this.__openSnapshot(studyId, snapshotId);
@@ -355,7 +355,7 @@ qx.Class.define("osparc.desktop.MainPage", {
355355
const currentStudy = store.getCurrentStudy();
356356
while (currentStudy.isLocked()) {
357357
await osparc.utils.Utils.sleep(1000);
358-
osparc.store.Study.getInstance().getStudyState(studyId);
358+
osparc.store.Study.getInstance().fetchStudyState(studyId);
359359
}
360360
this.__loadingPage.setMessages([]);
361361
this.__openIteration(iterationUuid);

‎services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -442,16 +442,17 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
442442

443443
this.__addTopBarSpacer(topBar);
444444

445-
const commentsButton = new qx.ui.form.Button().set({
445+
const conversationButton = new qx.ui.form.Button().set({
446446
appearance: "form-button-outlined",
447447
toolTipText: this.tr("Conversations"),
448448
icon: "@FontAwesome5Solid/comments/16",
449449
marginRight: 10,
450450
marginTop: 7,
451451
...osparc.navigation.NavigationBar.BUTTON_OPTIONS
452452
});
453-
commentsButton.addListener("execute", () => osparc.study.Conversations.popUpInWindow(study.serialize()));
454-
topBar.add(commentsButton);
453+
osparc.study.Conversations.makeButtonBlink(conversationButton);
454+
conversationButton.addListener("execute", () => osparc.study.Conversations.popUpInWindow(study.serialize()));
455+
topBar.add(conversationButton);
455456

456457
const startAppButtonTB = this.__startAppButtonTB = new qx.ui.form.Button().set({
457458
appearance: "form-button-outlined",

‎services/static-webserver/client/source/class/osparc/info/StudyLarge.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ qx.Class.define("osparc.info.StudyLarge", {
9595
if (selected) {
9696
saveBtn.setFetching(true);
9797
const templateType = selected.getModel();
98-
osparc.store.Study.getInstance().patchTemplateType(this.getStudy().getUuid(), templateType)
98+
osparc.store.Study.getInstance().patchTemplateType(this.getStudy().serialize(), templateType)
9999
.then(() => osparc.FlashMessenger.logAs(this.tr("Template type updated, please reload"), "INFO"))
100100
.catch(err => osparc.FlashMessenger.logError(err))
101101
.finally(() => saveBtn.setFetching(false));

‎services/static-webserver/client/source/class/osparc/jobs/JobsButton.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,17 +66,17 @@ qx.Class.define("osparc.jobs.JobsButton", {
6666
textColor: osparc.navigation.NavigationBar.BG_COLOR,
6767
});
6868
this._add(control, {
69-
bottom: 10,
70-
right: 2
69+
bottom: -4,
70+
right: -4,
7171
});
7272
break;
7373
case "is-active-icon":
7474
control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/8").set({
7575
textColor: "strong-main",
7676
});
7777
this._add(control, {
78-
bottom: 12,
79-
right: 4
78+
bottom: -2,
79+
right: -2,
8080
});
8181
break;
8282
}
@@ -109,6 +109,7 @@ qx.Class.define("osparc.jobs.JobsButton", {
109109
},
110110

111111
__updateJobsButton: function(isActive) {
112+
isActive = true;
112113
this.getChildControl("icon");
113114
[
114115
this.getChildControl("is-active-icon-outline"),

‎services/static-webserver/client/source/class/osparc/notification/NotificationsButton.js‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ qx.Class.define("osparc.notification.NotificationsButton", {
4545
let control;
4646
switch (id) {
4747
case "icon": {
48-
control = new qx.ui.basic.Image();
48+
control = new qx.ui.basic.Image("@FontAwesome5Regular/bell/22");
4949
const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
5050
alignY: "middle",
5151
})).set({
@@ -57,6 +57,24 @@ qx.Class.define("osparc.notification.NotificationsButton", {
5757
});
5858
break;
5959
}
60+
case "is-active-icon-outline":
61+
control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/12").set({
62+
textColor: osparc.navigation.NavigationBar.BG_COLOR,
63+
});
64+
this._add(control, {
65+
bottom: -4,
66+
right: -4,
67+
});
68+
break;
69+
case "is-active-icon":
70+
control = new qx.ui.basic.Image("@FontAwesome5Solid/circle/8").set({
71+
textColor: "strong-main",
72+
});
73+
this._add(control, {
74+
bottom: -2,
75+
right: -2,
76+
});
77+
break;
6078
case "number":
6179
control = new qx.ui.basic.Label().set({
6280
backgroundColor: "error",
@@ -82,16 +100,15 @@ qx.Class.define("osparc.notification.NotificationsButton", {
82100
const notifications = notificationManager.getNotifications();
83101
notifications.forEach(notification => notification.addListener("changeRead", () => this.__updateButton(), this));
84102

85-
const nUnreadNotifications = notifications.filter(notification => notification.getRead() === false).length;
86-
const icon = this.getChildControl("icon");
87-
icon.set({
88-
source: nUnreadNotifications > 0 ? "@FontAwesome5Solid/bell/22" : "@FontAwesome5Regular/bell/22",
89-
textColor: nUnreadNotifications > 0 ? "strong-main" : "text"
90-
});
91-
const number = this.getChildControl("number");
92-
number.set({
93-
value: nUnreadNotifications.toString(),
94-
visibility: nUnreadNotifications > 0 ? "visible" : "excluded"
103+
let nUnreadNotifications = notifications.filter(notification => notification.getRead() === false).length;
104+
nUnreadNotifications = 5;
105+
[
106+
this.getChildControl("is-active-icon-outline"),
107+
this.getChildControl("is-active-icon"),
108+
].forEach(control => {
109+
control.set({
110+
visibility: nUnreadNotifications > 0 ? "visible" : "excluded"
111+
});
95112
});
96113
},
97114

‎services/static-webserver/client/source/class/osparc/store/Study.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ qx.Class.define("osparc.store.Study", {
178178
return osparc.data.Resources.fetch("studies", "updateMetadata", params);
179179
},
180180

181-
getStudyState: function(studyId) {
181+
fetchStudyState: function(studyId) {
182182
osparc.data.Resources.fetch("studies", "state", {
183183
url: {
184184
"studyId": studyId

‎services/static-webserver/client/source/class/osparc/study/Conversations.js‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,39 @@ qx.Class.define("osparc.study.Conversations", {
5252
PROJECT_ANNOTATION: "PROJECT_ANNOTATION",
5353
},
5454

55+
CHANNELS: {
56+
CONVERSATION_CREATED: "conversation:created",
57+
CONVERSATION_UPDATED: "conversation:updated",
58+
CONVERSATION_DELETED: "conversation:deleted",
59+
CONVERSATION_MESSAGE_CREATED: "conversation:message:created",
60+
CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated",
61+
CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted",
62+
},
63+
5564
popUpInWindow: function(studyData, openConversationId = null) {
5665
const conversations = new osparc.study.Conversations(studyData, openConversationId);
5766
const title = qx.locale.Manager.tr("Conversations");
5867
const viewWidth = 600;
5968
const viewHeight = 700;
60-
const win = osparc.ui.window.Window.popUpInWindow(conversations, title, viewWidth, viewHeight);
69+
const win = osparc.ui.window.Window.popUpInWindow(conversations, title, viewWidth, viewHeight).set({
70+
maxHeight: viewHeight,
71+
});
6172
win.addListener("close", () => {
6273
conversations.destroy();
6374
}, this);
6475
return win;
6576
},
77+
78+
makeButtonBlink: function(button) {
79+
const socket = osparc.wrapper.WebSocket.getInstance();
80+
Object.values(osparc.study.Conversations.CHANNELS).forEach(eventName => {
81+
socket.on(eventName, () => {
82+
if (button) {
83+
osparc.utils.Utils.makeButtonBlink(button);
84+
}
85+
});
86+
});
87+
},
6688
},
6789

6890
members: {
@@ -95,20 +117,20 @@ qx.Class.define("osparc.study.Conversations", {
95117
const socket = osparc.wrapper.WebSocket.getInstance();
96118

97119
[
98-
"conversation:created",
99-
"conversation:updated",
100-
"conversation:deleted",
120+
this.self().CHANNELS.CONVERSATION_CREATED,
121+
this.self().CHANNELS.CONVERSATION_UPDATED,
122+
this.self().CHANNELS.CONVERSATION_DELETED,
101123
].forEach(eventName => {
102124
const eventHandler = conversation => {
103125
if (conversation) {
104126
switch (eventName) {
105-
case "conversation:created":
127+
case this.self().CHANNELS.CONVERSATION_CREATED:
106128
this.__addConversationPage(conversation);
107129
break;
108-
case "conversation:updated":
130+
case this.self().CHANNELS.CONVERSATION_UPDATED:
109131
this.__updateConversationName(conversation);
110132
break;
111-
case "conversation:deleted":
133+
case this.self().CHANNELS.CONVERSATION_DELETED:
112134
this.__removeConversationPage(conversation["conversationId"]);
113135
break;
114136
}
@@ -119,23 +141,23 @@ qx.Class.define("osparc.study.Conversations", {
119141
});
120142

121143
[
122-
"conversation:message:created",
123-
"conversation:message:updated",
124-
"conversation:message:deleted",
144+
this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED,
145+
this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED,
146+
this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED,
125147
].forEach(eventName => {
126148
const eventHandler = message => {
127149
if (message) {
128150
const conversationId = message["conversationId"];
129151
const conversationPage = this.__getConversationPage(conversationId);
130152
if (conversationPage) {
131153
switch (eventName) {
132-
case "conversation:message:created":
154+
case this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED:
133155
conversationPage.addMessage(message);
134156
break;
135-
case "conversation:message:updated":
157+
case this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED:
136158
conversationPage.updateMessage(message);
137159
break;
138-
case "conversation:message:deleted":
160+
case this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED:
139161
conversationPage.deleteMessage(message);
140162
break;
141163
}

0 commit comments

Comments
 (0)