diff --git a/services/static-webserver/client/source/class/osparc/conversation/AddMessage.js b/services/static-webserver/client/source/class/osparc/conversation/AddMessage.js index 89fc5f3db4fe..b2c1314d3cf9 100644 --- a/services/static-webserver/client/source/class/osparc/conversation/AddMessage.js +++ b/services/static-webserver/client/source/class/osparc/conversation/AddMessage.js @@ -85,6 +85,10 @@ qx.Class.define("osparc.conversation.AddMessage", { control = new osparc.editor.MarkdownEditor(); control.addListener("textChanged", () => this.__addCommentPressed(), this); control.setCompact(true); + control.getChildControl("text-area").set({ + maxLength: osparc.data.model.Conversation.MAX_CONTENT_LENGTH, + }); + // make it visually connected to the button control.getChildControl("text-area").getContentElement().setStyles({ "border-top-right-radius": "0px", // no roundness there to match the arrow button }); diff --git a/services/static-webserver/client/source/class/osparc/data/model/Conversation.js b/services/static-webserver/client/source/class/osparc/data/model/Conversation.js index 4c871a42e58c..6f59640c9e14 100644 --- a/services/static-webserver/client/source/class/osparc/data/model/Conversation.js +++ b/services/static-webserver/client/source/class/osparc/data/model/Conversation.js @@ -58,6 +58,9 @@ qx.Class.define("osparc.data.model.Conversation", { CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated", CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted", }, + + MAX_TITLE_LENGTH: 50, + MAX_CONTENT_LENGTH: 4096, }, properties: { @@ -256,9 +259,8 @@ qx.Class.define("osparc.data.model.Conversation", { renameConversation: function(newName) { osparc.store.ConversationsSupport.getInstance().renameConversation(this.getConversationId(), newName) - .then(() => { - this.setName(newName); - }); + .then(() => this.setName(newName)) + .catch(err => osparc.FlashMessenger.logError(err)); }, patchExtraContext: function(extraContext) { diff --git a/services/static-webserver/client/source/class/osparc/study/ConversationPage.js b/services/static-webserver/client/source/class/osparc/study/ConversationPage.js index e4c0338314b3..582d0190d79b 100644 --- a/services/static-webserver/client/source/class/osparc/study/ConversationPage.js +++ b/services/static-webserver/client/source/class/osparc/study/ConversationPage.js @@ -111,7 +111,9 @@ qx.Class.define("osparc.study.ConversationPage", { visibility: osparc.data.model.Study.canIWrite(this.__studyData["accessRights"]) ? "visible" : "excluded", }); renameButton.addListener("execute", () => { - const titleEditor = new osparc.widget.Renamer(tabButton.getLabel()); + const titleEditor = new osparc.widget.Renamer(tabButton.getLabel()).set({ + maxChars: osparc.data.model.Conversation.MAX_TITLE_LENGTH, + }); titleEditor.addListener("labelChanged", e => { titleEditor.close(); const newLabel = e.getData()["newLabel"]; diff --git a/services/static-webserver/client/source/class/osparc/support/ConversationPage.js b/services/static-webserver/client/source/class/osparc/support/ConversationPage.js index 109534f488e1..d7c1b87036c6 100644 --- a/services/static-webserver/client/source/class/osparc/support/ConversationPage.js +++ b/services/static-webserver/client/source/class/osparc/support/ConversationPage.js @@ -301,7 +301,9 @@ qx.Class.define("osparc.support.ConversationPage", { if (oldName === "null") { oldName = ""; } - const renamer = new osparc.widget.Renamer(oldName); + const renamer = new osparc.widget.Renamer(oldName).set({ + maxChars: osparc.data.model.Conversation.MAX_TITLE_LENGTH, + }); renamer.addListener("labelChanged", e => { renamer.close(); const newLabel = e.getData()["newLabel"]; diff --git a/services/static-webserver/client/source/class/osparc/widget/Renamer.js b/services/static-webserver/client/source/class/osparc/widget/Renamer.js index a5c1929b363f..e43e6fd48460 100644 --- a/services/static-webserver/client/source/class/osparc/widget/Renamer.js +++ b/services/static-webserver/client/source/class/osparc/widget/Renamer.js @@ -40,8 +40,8 @@ qx.Class.define("osparc.widget.Renamer", { construct: function(oldLabel = "", subtitle = "", winTitle) { this.base(arguments, winTitle || this.tr("Rename")); - const maxWidth = 350; - const minWidth = 200; + const maxWidth = 400; + const minWidth = 250; const labelWidth = oldLabel ? Math.min(Math.max(parseInt(oldLabel.length*4), minWidth), maxWidth) : minWidth; this.set({ layout: new qx.ui.layout.VBox(5), @@ -63,66 +63,93 @@ qx.Class.define("osparc.widget.Renamer", { "labelChanged": "qx.event.type.Data" }, + properties: { + maxChars: { + check: "Number", + init: 50, + apply: "__applyMaxChars", + } + }, + members: { - __save: null, + _createChildControlImpl: function(id) { + let control; + switch (id) { + case "main-layout": + control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)); + this.add(control); + break; + case "text-field": + control = new qx.ui.form.TextField().set({ + placeholder: this.tr("Type text"), + allowGrowX: true + }); + this.getChildControl("main-layout").add(control, { + flex: 1 + }); + break; + case "save-button": + control = new qx.ui.form.Button(this.tr("Save")).set({ + appearance: "form-button", + padding: [1, 5] + }); + this.getChildControl("main-layout").add(control); + break; + case "subtitle": + control = new qx.ui.basic.Label().set({ + font: "text-12" + }); + this.add(control); + break; + } + return control || this.base(arguments, id); + }, __populateNodeLabelEditor: function(oldLabel, labelWidth) { - const nodeLabelEditor = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)); - - // Create a text field in which to edit the data - const labelEditor = new qx.ui.form.TextField(oldLabel).set({ - placeholder: this.tr("Type text"), - allowGrowX: true, - minWidth: labelWidth + const textField = this.getChildControl("text-field").set({ + value: oldLabel, + minWidth: labelWidth, }); - nodeLabelEditor.add(labelEditor, { - flex: 1 - }); - - this.addListener("appear", e => { - labelEditor.focus(); - if (labelEditor.getValue()) { - labelEditor.setTextSelection(0, labelEditor.getValue().length); - } - }, this); - // Create the "Save" button to close the cell editor - const save = this.__save = new qx.ui.form.Button(this.tr("Save")); - save.set({ - appearance: "form-button", - padding: [1, 5] - }); - save.addListener("execute", e => { - const newLabel = labelEditor.getValue(); + const saveButton = this.getChildControl("save-button"); + saveButton.addListener("execute", () => { + const newLabel = textField.getValue(); const data = { newLabel }; this.fireDataEvent("labelChanged", data); }, this); - nodeLabelEditor.add(save); - this.add(nodeLabelEditor); + this.addListener("appear", () => { + textField.focus(); + if (textField.getValue()) { + textField.setTextSelection(0, textField.getValue().length); + } + }, this); + }, + + __applyMaxChars: function(value) { + this.getChildControl("text-field").setMaxLength(value); + + this.__addSubtitle(this.tr("%1 characters max", value)); }, - __addSubtitle: function(subtitleLabel) { - if (subtitleLabel) { - const subtitle = new qx.ui.basic.Label(subtitleLabel).set({ - font: "text-12" - }); - this.add(subtitle); + __addSubtitle: function(subtitleText) { + if (subtitleText) { + this.getChildControl("subtitle").setValue(subtitleText); } }, __attachEventHandlers: function() { let command = new qx.ui.command.Command("Enter"); - command.addListener("execute", e => { - this.__save.execute(); + command.addListener("execute", () => { + this.getChildControl("save-button").execute(); command.dispose(); command = null; }); let commandEsc = new qx.ui.command.Command("Esc"); - commandEsc.addListener("execute", e => { + commandEsc.addListener("execute", () => { this.close(); commandEsc.dispose(); commandEsc = null;