diff --git a/src/open/ClientView.js b/src/open/ClientView.js index 17721c7..3cf76e5 100644 --- a/src/open/ClientView.js +++ b/src/open/ClientView.js @@ -16,7 +16,7 @@ limitations under the License. import {TemplateView} from "../utils/TemplateView.js"; import {copy} from "../utils/copy.js"; -import {text} from "../utils/html.js"; +import {text, tag} from "../utils/html.js"; function formatPlatforms(platforms) { return platforms.reduce((str, p, i, all) => { @@ -26,6 +26,16 @@ function formatPlatforms(platforms) { }, ""); } +function renderInstructions(parts) { + return parts.map(p => { + if (p.type === "code") { + return tag.code(p.text); + } else { + return text(p); + } + }); +} + export class ClientView extends TemplateView { render(t, vm) { @@ -66,7 +76,8 @@ class InstallClientView extends TemplateView { render(t, vm) { const children = []; - if (vm.textInstructions) { + const textInstructions = vm.textInstructions; + if (textInstructions) { const copyButton = t.button({ className: "copy", onClick: evt => { @@ -78,7 +89,7 @@ class InstallClientView extends TemplateView { } } }); - children.push(t.p({className: "instructions"}, [t.code(vm.textInstructions), copyButton])); + children.push(t.p({className: "instructions"}, renderInstructions(textInstructions).concat(copyButton))); } const actions = t.div({className: "actions"}, vm.actions.map(a => { diff --git a/src/open/ClientViewModel.js b/src/open/ClientViewModel.js index dd2fb43..9e4d6f1 100644 --- a/src/open/ClientViewModel.js +++ b/src/open/ClientViewModel.js @@ -110,7 +110,11 @@ export class ClientViewModel extends ViewModel { } get textInstructions() { - return this._client.getLinkInstructions(this._proposedPlatform, this._link); + let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link); + if (!Array.isArray(instructions)) { + instructions = [instructions]; + } + return instructions; } get copyString() { diff --git a/src/open/clients/Nheko.js b/src/open/clients/Nheko.js index 2f860ee..0aa35ad 100644 --- a/src/open/clients/Nheko.js +++ b/src/open/clients/Nheko.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {Maturity, Platform, LinkKind, FlathubLink} from "../types.js"; +import {Maturity, Platform, LinkKind, FlathubLink, style} from "../types.js"; /** * Information on how to deep link to a given matrix client. @@ -33,8 +33,8 @@ export class Nheko { getLinkInstructions(platform, link) { switch (link.kind) { - case LinkKind.User: return `Type /invite ${link.identifier}`; - case LinkKind.Room: return `Type /join ${link.identifier}`; + case LinkKind.User: return [`Type `, style.code(`/invite ${link.identifier}`)]; + case LinkKind.Room: return [`Type `, style.code(`/join ${link.identifier}`)]; } } diff --git a/src/open/types.js b/src/open/types.js index 52472d6..26c3e48 100644 --- a/src/open/types.js +++ b/src/open/types.js @@ -109,3 +109,9 @@ export class WebsiteLink { return `Download from ${new URL(this._url).hostname}`; } } + +export const style = { + code(text) { + return {type: "code", text}; + } +}