allow markup in instructions

This commit is contained in:
Bruno Windels 2020-12-07 14:35:08 +01:00
parent 732b8a48ff
commit 42994c4474
4 changed files with 28 additions and 7 deletions

View file

@ -16,7 +16,7 @@ limitations under the License.
import {TemplateView} from "../utils/TemplateView.js"; import {TemplateView} from "../utils/TemplateView.js";
import {copy} from "../utils/copy.js"; import {copy} from "../utils/copy.js";
import {text} from "../utils/html.js"; import {text, tag} from "../utils/html.js";
function formatPlatforms(platforms) { function formatPlatforms(platforms) {
return platforms.reduce((str, p, i, all) => { 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 { export class ClientView extends TemplateView {
render(t, vm) { render(t, vm) {
@ -66,7 +76,8 @@ class InstallClientView extends TemplateView {
render(t, vm) { render(t, vm) {
const children = []; const children = [];
if (vm.textInstructions) { const textInstructions = vm.textInstructions;
if (textInstructions) {
const copyButton = t.button({ const copyButton = t.button({
className: "copy", className: "copy",
onClick: evt => { 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 => { const actions = t.div({className: "actions"}, vm.actions.map(a => {

View file

@ -110,7 +110,11 @@ export class ClientViewModel extends ViewModel {
} }
get textInstructions() { 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() { get copyString() {

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. 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. * Information on how to deep link to a given matrix client.
@ -33,8 +33,8 @@ export class Nheko {
getLinkInstructions(platform, link) { getLinkInstructions(platform, link) {
switch (link.kind) { switch (link.kind) {
case LinkKind.User: return `Type /invite ${link.identifier}`; case LinkKind.User: return [`Type `, style.code(`/invite ${link.identifier}`)];
case LinkKind.Room: return `Type /join ${link.identifier}`; case LinkKind.Room: return [`Type `, style.code(`/join ${link.identifier}`)];
} }
} }

View file

@ -109,3 +109,9 @@ export class WebsiteLink {
return `Download from ${new URL(this._url).hostname}`; return `Download from ${new URL(this._url).hostname}`;
} }
} }
export const style = {
code(text) {
return {type: "code", text};
}
}