diff --git a/source/nodejs/adaptivecards-designer-app/src/app.ts b/source/nodejs/adaptivecards-designer-app/src/app.ts index 020327736b..1a3e8f37dc 100644 --- a/source/nodejs/adaptivecards-designer-app/src/app.ts +++ b/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")); diff --git a/source/nodejs/adaptivecards-designer/README.md b/source/nodejs/adaptivecards-designer/README.md index 71b9e0968c..d31b5d81fe 100644 --- a/source/nodejs/adaptivecards-designer/README.md +++ b/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")); diff --git a/source/nodejs/adaptivecards-designer/src/adaptivecards-designer-standalone.ts b/source/nodejs/adaptivecards-designer/src/adaptivecards-designer-standalone.ts index 35d5c90902..c9b7f98b55 100644 --- a/source/nodejs/adaptivecards-designer/src/adaptivecards-designer-standalone.ts +++ b/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"; diff --git a/source/nodejs/adaptivecards-designer/src/card-designer.ts b/source/nodejs/adaptivecards-designer/src/card-designer.ts index 92b98b4d88..34ad3a3180 100644 --- a/source/nodejs/adaptivecards-designer/src/card-designer.ts +++ b/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); diff --git a/source/nodejs/adaptivecards-designer/src/strings.ts b/source/nodejs/adaptivecards-designer/src/strings.ts new file mode 100644 index 0000000000..a90ae2d9c5 --- /dev/null +++ b/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..."; +} \ No newline at end of file