allow markup in instructions
This commit is contained in:
parent
732b8a48ff
commit
42994c4474
4 changed files with 28 additions and 7 deletions
|
@ -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 => {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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}`)];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue