Unminify CSS and apply suggestions from the design team
parent
f84ae4a173
commit
183166c460
|
@ -141,7 +141,7 @@ export function formatFullDateNoDay(date: Date) {
|
||||||
return (
|
return (
|
||||||
date.getFullYear() +
|
date.getFullYear() +
|
||||||
"-" +
|
"-" +
|
||||||
pad(date.getMonth()) +
|
pad(date.getMonth() + 1) +
|
||||||
"-" +
|
"-" +
|
||||||
pad(date.getDate()) +
|
pad(date.getDate()) +
|
||||||
_t(" at ") +
|
_t(" at ") +
|
||||||
|
@ -152,3 +152,13 @@ export function formatFullDateNoDay(date: Date) {
|
||||||
pad(date.getSeconds())
|
pad(date.getSeconds())
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function formatFullDateNoDayNoTime(date: Date) {
|
||||||
|
return (
|
||||||
|
date.getFullYear() +
|
||||||
|
"/" +
|
||||||
|
pad(date.getMonth() + 1) +
|
||||||
|
"/" +
|
||||||
|
pad(date.getDate())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
@ -725,6 +725,9 @@
|
||||||
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
|
"Invite to %(spaceName)s": "Invite to %(spaceName)s",
|
||||||
"Share your public space": "Share your public space",
|
"Share your public space": "Share your public space",
|
||||||
"Unknown App": "Unknown App",
|
"Unknown App": "Unknown App",
|
||||||
|
"%(creatorName)s created this room.": "%(creatorName)s created this room.",
|
||||||
|
"This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ": "This is the start of export of <b>%(roomName)s</b>.\n Exported by %(exporterDetails)s at %(exportDate)s. ",
|
||||||
|
"Topic: %(topic)s": "Topic: %(topic)s",
|
||||||
"Help us improve %(brand)s": "Help us improve %(brand)s",
|
"Help us improve %(brand)s": "Help us improve %(brand)s",
|
||||||
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
|
"Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.",
|
||||||
"Yes": "Yes",
|
"Yes": "Yes",
|
||||||
|
|
|
@ -9,7 +9,7 @@ import { Exporter } from "./Exporter";
|
||||||
import { renderToStaticMarkup } from 'react-dom/server'
|
import { renderToStaticMarkup } from 'react-dom/server'
|
||||||
import { Layout } from "../../settings/Layout";
|
import { Layout } from "../../settings/Layout";
|
||||||
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
|
import { shouldFormContinuation } from "../../components/structures/MessagePanel";
|
||||||
import { formatFullDateNoDay, wantsDateSeparator } from "../../DateUtils";
|
import { formatFullDateNoDay, formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils";
|
||||||
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
|
import { RoomPermalinkCreator } from "../permalinks/Permalinks";
|
||||||
import * as ponyfill from "web-streams-polyfill/ponyfill"
|
import * as ponyfill from "web-streams-polyfill/ponyfill"
|
||||||
import * as Avatar from "../../Avatar";
|
import * as Avatar from "../../Avatar";
|
||||||
|
@ -19,6 +19,9 @@ import exportCSS from "./exportCSS";
|
||||||
import exportJS from "./exportJS";
|
import exportJS from "./exportJS";
|
||||||
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
|
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
|
||||||
import exportIcons from "./exportIcons";
|
import exportIcons from "./exportIcons";
|
||||||
|
import { _t } from "../../languageHandler";
|
||||||
|
import { MatrixClientPeg } from "../../MatrixClientPeg";
|
||||||
|
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||||||
|
|
||||||
export default class HTMLExporter extends Exporter {
|
export default class HTMLExporter extends Exporter {
|
||||||
protected zip: JSZip;
|
protected zip: JSZip;
|
||||||
|
@ -32,21 +35,22 @@ export default class HTMLExporter extends Exporter {
|
||||||
this.permalinkCreator = new RoomPermalinkCreator(this.room);
|
this.permalinkCreator = new RoomPermalinkCreator(this.room);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected async getRoomAvatar() {
|
protected async getRoomAvatar(avatarSide: number) {
|
||||||
let blob: Blob;
|
let blob: Blob;
|
||||||
const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
|
const avatarUrl = Avatar.avatarUrlForRoom(this.room, avatarSide, avatarSide, "crop");
|
||||||
|
const avatarPath = `room/avatar${avatarSide}.png`;
|
||||||
if (avatarUrl) {
|
if (avatarUrl) {
|
||||||
const image = await fetch(avatarUrl);
|
const image = await fetch(avatarUrl);
|
||||||
blob = await image.blob();
|
blob = await image.blob();
|
||||||
this.zip.file("room.png", blob);
|
this.zip.file(avatarPath, blob);
|
||||||
}
|
}
|
||||||
const avatar = (
|
const avatar = (
|
||||||
<BaseAvatar
|
<BaseAvatar
|
||||||
width={32}
|
width={avatarSide}
|
||||||
height={32}
|
height={avatarSide}
|
||||||
name={this.room.name}
|
name={this.room.name}
|
||||||
title={this.room.name}
|
title={this.room.name}
|
||||||
url={blob ? "room.png" : null}
|
url={blob ? avatarPath : null}
|
||||||
resizeMethod={"crop"}
|
resizeMethod={"crop"}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -54,7 +58,32 @@ export default class HTMLExporter extends Exporter {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected async wrapHTML(content: string, room: Room) {
|
protected async wrapHTML(content: string, room: Room) {
|
||||||
const roomAvatar = await this.getRoomAvatar();
|
const roomAvatar32 = await this.getRoomAvatar(32);
|
||||||
|
const exportDate = formatFullDateNoDayNoTime(new Date());
|
||||||
|
const cli = MatrixClientPeg.get();
|
||||||
|
const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
|
||||||
|
const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
|
||||||
|
const exporter = cli.getUserId();
|
||||||
|
const exporterName = room?.getMember(exporter)?.rawDisplayName;
|
||||||
|
const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic
|
||||||
|
|| room.topic || "";
|
||||||
|
const createdText = _t("%(creatorName)s created this room.", {
|
||||||
|
creatorName,
|
||||||
|
});
|
||||||
|
|
||||||
|
const exportedText = _t(`This is the start of export of <b>%(roomName)s</b>.
|
||||||
|
Exported by %(exporterDetails)s at %(exportDate)s. `, {
|
||||||
|
exportDate,
|
||||||
|
roomName: room.name,
|
||||||
|
exporterDetails: `<a href="https://matrix.to/#/${exporter}" target="_blank" rel="noopener noreferrer">
|
||||||
|
${exporterName ? `<b>${ exporterName }</b>(${ exporter })` : `<b>${ exporter }</b>`}
|
||||||
|
</a>`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
|
||||||
|
const roomAvatar52 = await this.getRoomAvatar(52);
|
||||||
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
@ -79,7 +108,7 @@ export default class HTMLExporter extends Exporter {
|
||||||
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
|
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
|
||||||
<div class="mx_RoomHeader_avatar">
|
<div class="mx_RoomHeader_avatar">
|
||||||
<div class="mx_DecoratedRoomAvatar">
|
<div class="mx_DecoratedRoomAvatar">
|
||||||
${roomAvatar}
|
${roomAvatar32}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx_RoomHeader_name">
|
<div class="mx_RoomHeader_name">
|
||||||
|
@ -91,7 +120,7 @@ export default class HTMLExporter extends Exporter {
|
||||||
${room.name}
|
${room.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx_RoomHeader_topic" dir="auto"></div>
|
<div class="mx_RoomHeader_topic" dir="auto"> ${topic} </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx_MainSplit">
|
<div class="mx_MainSplit">
|
||||||
|
@ -113,6 +142,12 @@ export default class HTMLExporter extends Exporter {
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
role="list"
|
role="list"
|
||||||
>
|
>
|
||||||
|
<div class="mx_NewRoomIntro">
|
||||||
|
${roomAvatar52}
|
||||||
|
<h2> ${room.name} </h2>
|
||||||
|
<p> ${createdText} <br/><br/> ${exportedText} </p>
|
||||||
|
<p> ${topicText} </p>
|
||||||
|
</div>
|
||||||
${content}
|
${content}
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue