Add ability to customize toolbox titles (#3488) (#3489)

Author: dclaux

source/nodejs/adaptivecards-designer-app/src/app.ts

@@ -13,6 +13,16 @@ window.onload = function() {
     // Uncomment to enabled preview features such as data binding
     // ACDesigner.GlobalSettings.previewFeaturesEnabled = true;
 
+    // Uncomment to configure default toolbox titles
+    /*
+    ACDesigner.Strings.toolboxes.cardEditor.title = "Custom title";
+    ACDesigner.Strings.toolboxes.cardStructure.title = "Custom title";
+    ACDesigner.Strings.toolboxes.dataStructure.title = "Custom title";
+    ACDesigner.Strings.toolboxes.propertySheet.title = "Custom title";
+    ACDesigner.Strings.toolboxes.sampleDataEditor.title = "Custom title";
+    ACDesigner.Strings.toolboxes.toolPalette.title = "Custom title";
+    */
+
 	ACDesigner.CardDesigner.onProcessMarkdown = (text: string, result: { didProcess: boolean, outputHtml: string }) => {
 		result.outputHtml = new markdownit().render(text);
 		result.didProcess = true;
@@ -33,6 +43,7 @@ window.onload = function() {
 	hostContainers.push(new ACDesigner.ToastContainer("Windows Notifications (Preview)", "containers/toast-container.css"));
 
     let designer = new ACDesigner.CardDesigner(hostContainers);
+
     designer.sampleCatalogueUrl = window.location.origin + "/sample-catalogue.json";
     designer.attachTo(document.getElementById("designerRootHost"));
 

source/nodejs/adaptivecards-designer/README.md

@@ -202,6 +202,14 @@ For advanced configuration of the designer use the following APIs.
 
 ```js
 
+    // Configure toolbox titles
+    ACDesigner.Strings.toolboxes.cardEditor.title = "Custom card editor title";
+    ACDesigner.Strings.toolboxes.cardStructure.title = "Custom card structure title";
+    ACDesigner.Strings.toolboxes.dataStructure.title = "Custom data structure title";
+    ACDesigner.Strings.toolboxes.propertySheet.title = "Custom property sheet title";
+    ACDesigner.Strings.toolboxes.sampleDataEditor.title = "Custom sample data editor title";
+    ACDesigner.Strings.toolboxes.toolPalette.title = "Custom tool palette title";
+
 	/* Add the default Microsoft Host Apps 	*/ 
 
 	hostContainers.push(new ACDesigner.WebChatContainer("Bot Framework WebChat", "containers/webchat-container.css"));

source/nodejs/adaptivecards-designer/src/adaptivecards-designer-standalone.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+export * from "./strings";
 export * from "./shared";
 export * from "./containers/host-container";
 export * from "./containers/default/default-container";

source/nodejs/adaptivecards-designer/src/card-designer.ts

@@ -19,6 +19,7 @@ import { Toolbox, IToolboxCommand } from "./tool-box";
 import { FieldDefinition } from "./data";
 import { DataTreeItem } from "./data-treeitem";
 import { BaseTreeItem } from "./base-tree-item";
+import { Strings } from "./strings";
 import * as Shared from "./shared";
 
 export class CardDesigner {
@@ -883,7 +884,7 @@ export class CardDesigner {
         let toolPaletteHost = document.createElement("div");
         toolPaletteHost.className = "acd-dockedPane";
 
-        this._toolPaletteToolbox = new Toolbox("toolPalette", "Card Elements");
+        this._toolPaletteToolbox = new Toolbox("toolPalette", Strings.toolboxes.toolPalette.title);
         this._toolPaletteToolbox.content = toolPaletteHost;
 
         let toolPalettePanel = new SidePanel(
@@ -896,10 +897,10 @@ export class CardDesigner {
         toolPalettePanel.attachTo(document.getElementById("toolPalettePanel"));
 
         // JSON editors panel
-        this._cardEditorToolbox = new Toolbox("cardEditor", "Card Payload Editor");
+        this._cardEditorToolbox = new Toolbox("cardEditor", Strings.toolboxes.cardEditor.title);
         this._cardEditorToolbox.content = document.createElement("div");
         this._cardEditorToolbox.content.style.padding = "8px";
-        this._cardEditorToolbox.content.innerText = "Loading editor...";
+        this._cardEditorToolbox.content.innerText = Strings.loadingEditor;
 
         this._jsonEditorsPanel = new SidePanel(
             "jsonEditorPanel",
@@ -918,10 +919,10 @@ export class CardDesigner {
         this._jsonEditorsPanel.addToolbox(this._cardEditorToolbox);
 
         if (Shared.GlobalSettings.previewFeaturesEnabled) {
-            this._sampleDataEditorToolbox = new Toolbox("sampleDataEditor", "Sample Data Editor");
+            this._sampleDataEditorToolbox = new Toolbox("sampleDataEditor", Strings.toolboxes.sampleDataEditor.title);
             this._sampleDataEditorToolbox.content = document.createElement("div");
             this._sampleDataEditorToolbox.content.style.padding = "8px";
-            this._sampleDataEditorToolbox.content.innerText = "Loading editor...";
+            this._sampleDataEditorToolbox.content.innerText = Strings.loadingEditor;
             this._sampleDataEditorToolbox.commands = [
                 {
                     title: "Copy the structure of this data into the Data Structure toolbox",
@@ -941,7 +942,7 @@ export class CardDesigner {
         let propertySheetHost = document.createElement("div");
         propertySheetHost.className = "acd-propertySheet-host";
 
-        this._propertySheetToolbox = new Toolbox("propertySheet", "Element Properties");
+        this._propertySheetToolbox = new Toolbox("propertySheet", Strings.toolboxes.propertySheet.title);
         this._propertySheetToolbox.content = propertySheetHost;
 
         let propertySheetPanel = new SidePanel(
@@ -959,7 +960,7 @@ export class CardDesigner {
         let treeViewHost = document.createElement("div");
         treeViewHost.className = "acd-treeView-host";
 
-        this._treeViewToolbox = new Toolbox("treeView", "Card Structure");
+        this._treeViewToolbox = new Toolbox("treeView", Strings.toolboxes.cardStructure.title);
         this._treeViewToolbox.content = treeViewHost;
 
         let treeViewPanel = new SidePanel(
@@ -975,7 +976,7 @@ export class CardDesigner {
             let dataExplorerHost = document.createElement("div");
             dataExplorerHost.className = "acd-treeView-host";
 
-            this._dataToolbox = new Toolbox("data", "Data Structure");
+            this._dataToolbox = new Toolbox("data", Strings.toolboxes.dataStructure.title);
             this._dataToolbox.content = dataExplorerHost;
 
             treeViewPanel.addToolbox(this._dataToolbox);

source/nodejs/adaptivecards-designer/src/strings.ts

@@ -0,0 +1,23 @@
+export class Strings {
+    static readonly toolboxes = {
+        toolPalette: {
+            title: "Card Elements"
+        },
+        cardEditor: {
+            title: "Card Payload Editor"
+        },
+        sampleDataEditor: {
+            title: "Sample Data Editor"
+        },
+        propertySheet: {
+            title: "Element Properties"
+        },
+        cardStructure: {
+            title: "Card Structure"
+        },
+        dataStructure: {
+            title: "Data Structure"
+        }
+    };
+    static loadingEditor = "Loading editor...";
+}