[skip ci] DateAndBy

Author: odeimaiz

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

@@ -127,14 +127,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
           control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
           this._add(control, osparc.dashboard.FolderButtonBase.POS.SUBTITLE);
           break;
-        case "date-text":
-          control = new qx.ui.basic.Label().set({
-            font: "text-12",
-          });
-          this.getChildControl("subtitle-layout").add(control);
-          break;
-        case "last-touching":
-          control = osparc.info.StudyUtils.createLastTouchedBy();
+        case "date-by":
+          control = new osparc.ui.basic.DateAndBy();
           this.getChildControl("subtitle-layout").add(control);
           break;
         case "menu-button": {
@@ -250,28 +244,28 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
 
     __applyLastModified: function(value) {
       if (value) {
-        const label = this.getChildControl("date-text");
-        label.set({
-          value: osparc.utils.Utils.formatDateAndTime(value),
+        const dateBy = this.getChildControl("date-by");
+        dateBy.set({
+          date: value,
           toolTipText: this.tr("Last modified"),
         })
       }
     },
 
     __applyTrashedAt: function(value) {
       if (value && value.getTime() !== new Date(0).getTime()) {
-        const label = this.getChildControl("date-text");
-        label.set({
-          value: osparc.utils.Utils.formatDateAndTime(value),
+        const dateBy = this.getChildControl("date-by");
+        dateBy.set({
+          date: value,
           toolTipText: this.tr("Moved to the bin"),
         });
       }
     },
 
     __applyTrashedBy: function(gid) {
       if (gid) {
-        const atom = this.getChildControl("last-touching");
-        osparc.dashboard.CardBase.addHintFromGids(atom, [gid]);
+        const dateBy = this.getChildControl("date-by");
+        dateBy.setGid(gid);
       }
     },
 

services/static-webserver/client/source/class/osparc/ui/basic/DateAndBy.js

@@ -0,0 +1,94 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Widget that shows a date followed by "by (user_icon)"
+ */
+qx.Class.define("osparc.ui.basic.DateAndBy", {
+  extend: qx.ui.core.Widget,
+
+  construct: function() {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.HBox(5));
+
+    this.set({
+      alignY: "middle",
+    });
+  },
+
+  properties: {
+    date: {
+      check: "Date",
+      nullable: true,
+      apply: "__applyDate",
+    },
+
+    gid: {
+      check: "Number",
+      nullable: true,
+      apply: "__applyGid",
+    },
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "date-text":
+          control = new qx.ui.basic.Label().set({
+            textColor: "contrasted-text-dark",
+            alignY: "middle",
+            rich: true,
+            font: "text-12",
+            allowGrowY: false
+          });
+          this._addAt(control, 0);
+          break;
+        case "last-touching":
+          new qx.ui.basic.Atom().set({
+            alignY: "middle",
+            allowGrowX: false,
+            allowShrinkX: false,
+            label: "by",
+            font: "text-12",
+            icon: osparc.dashboard.CardBase.SHARED_USER,
+            iconPosition: "right",
+          });
+          this._addAt(control, 1);
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __applyDate: function(value) {
+      if (value) {
+        const label = this.getChildControl("date-text");
+        label.set({
+          value: osparc.utils.Utils.formatDateAndTime(value),
+        });
+      }
+    },
+
+    __applyGid: function(gid) {
+      if (gid) {
+        const atom = this.getChildControl("last-touching");
+        osparc.dashboard.CardBase.addHintFromGids(atom, [gid]);
+      }
+    },
+  }
+});