🎨🐛 Frontend: Notifications support products (#5604)

ITISFoundation · Apr 9, 2024 · 82be0e2 · 82be0e2
1 parent c96582c
commit 82be0e2
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 126 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/notification/Notifications.js b/services/static-webserver/client/source/class/osparc/notification/Notifications.js
@@ -25,64 +25,87 @@ qx.Class.define("osparc.notification.Notifications", {
   },
 
   statics: {
-    __newOrganizationObj: function(userId, orgId) {
+    __newNotificationBase: function(userId) {
       return {
         "user_id": userId.toString(),
+        "date": new Date().toISOString(),
+        "product": osparc.product.Utils.getProductName()
+      };
+    },
+
+    __newOrganizationObj: function(userId, orgId) {
+      const baseNotification = this.__newNotificationBase(userId);
+      const specNotification = {
         "category": "NEW_ORGANIZATION",
         "actionable_path": "organization/"+orgId,
         "title": "New organization",
-        "text": "You're now member of a new Organization",
-        "date": new Date().toISOString()
+        "text": "You're now member of a new Organization"
+      };
+      return {
+        ...baseNotification,
+        ...specNotification
       };
     },
 
     __newStudyObj: function(userId, studyId) {
       const study = osparc.product.Utils.getStudyAlias({
         firstUpperCase: true
       });
-      return {
-        "user_id": userId.toString(),
+      const baseNotification = this.__newNotificationBase(userId);
+      const specNotification = {
         "category": "STUDY_SHARED",
         "actionable_path": "study/"+studyId,
         "title": `${study} shared`,
-        "text": `A ${study} was shared with you`,
-        "date": new Date().toISOString()
+        "text": `A ${study} was shared with you`
+      };
+      return {
+        ...baseNotification,
+        ...specNotification
       };
     },
 
     __newTemplateObj: function(userId, templateId) {
       const template = osparc.product.Utils.getTemplateAlias({
         firstUpperCase: true
       });
-      return {
-        "user_id": userId.toString(),
+      const baseNotification = this.__newNotificationBase(userId);
+      const specNotification = {
         "category": "TEMPLATE_SHARED",
         "actionable_path": "template/"+templateId,
         "title": `${template} shared`,
-        "text": `A ${template} was shared with you`,
-        "date": new Date().toISOString()
+        "text": `A ${template} was shared with you`
+      };
+      return {
+        ...baseNotification,
+        ...specNotification
       };
     },
 
     __newAnnotationNoteObj: function(userId, studyId) {
-      return {
-        "user_id": userId.toString(),
+      const baseNotification = this.__newNotificationBase(userId);
+      const specNotification = {
         "category": "ANNOTATION_NOTE",
         "actionable_path": "study/"+studyId,
         "title": "Note added",
-        "text": "A Note was added for you",
-        "date": new Date().toISOString()
+        "text": "A Note was added for you"
+      };
+      return {
+        ...baseNotification,
+        ...specNotification
       };
     },
 
     __newWalletObj: function(userId, walletId) {
-      return {
-        "user_id": userId.toString(),
+      const baseNotification = this.__newNotificationBase(userId);
+      const specNotification = {
         "category": "WALLET_SHARED",
         "actionable_path": "wallet/"+walletId,
         "title": "Credits shared",
-        "text": "A Credit account was shared with you",
-        "date": new Date().toISOString()
+        "text": "A Credit account was shared with you"
+      };
+      return {
+        ...baseNotification,
+        ...specNotification
       };
     },
 

diff --git a/services/static-webserver/client/source/class/osparc/theme/Appearance.js b/services/static-webserver/client/source/class/osparc/theme/Appearance.js
@@ -1083,22 +1083,22 @@ qx.Theme.define("osparc.theme.Appearance", {
       EditLabel
     ---------------------------------------------------------------------------
     */
-    "editlabel": {},
-    "editlabel/label": {
-      include: "atom/label",
+    "editlabel-label": {
+      include: "label",
       style: state => ({
-        decorator: state.hovered && state.editable ? "border-editable" : null,
+        decorator: state.hovered && state.editable ? "border-editable" : "rounded",
         marginLeft: state.hovered && state.editable ? 0 : 1,
-        padding: [2, state.hovered && state.editable ? 2 : 3, 2, 2],
-        cursor: state.editable ? "text" : "auto"
+        padding: 5,
+        cursor: state.editable ? "text" : "auto",
+        backgroundColor: "input_background"
       })
     },
-    "editlabel/input": {
+
+    "editlabel-input": {
       include: "textfield",
-      style: state => ({
-        paddingTop: 4,
-        paddingLeft: 3,
-        minWidth: 80,
+      style: () => ({
+        padding: 5,
+        minWidth: 120,
         backgroundColor: "transparent"
       })
     },