Unminify CSS and apply suggestions from the design team

pull/21833/head
Jaiwanth 2021-06-03 12:40:00 +05:30
parent f84ae4a173
commit 183166c460
4 changed files with 19525 additions and 14 deletions

View File

@ -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())
);
}

View File

@ -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",

View File

@ -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