diff --git a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js b/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js index 64f6cbbf155..35394892d26 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js +++ b/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,9 +244,9 @@ 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"), }) } @@ -260,9 +254,9 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", { __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"), }); } @@ -270,8 +264,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", { __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); } }, diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/DateAndBy.js b/services/static-webserver/client/source/class/osparc/ui/basic/DateAndBy.js new file mode 100644 index 00000000000..aa312c49b69 --- /dev/null +++ b/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]); + } + }, + } +});