Change export bundle filename format, light theme for all exports and import jszip after export cta
This commit is contained in:
Jaiwanth
parent
94e4fb71c1
commit
d1e3d35d40
7 changed files with 178 additions and 135 deletions
|
|
@ -22,9 +22,9 @@ import { decryptFile } from "../DecryptFile";
|
|||
import { mediaFromContent } from "../../customisations/Media";
|
||||
import { formatFullDateNoDay } from "../../DateUtils";
|
||||
import { Direction, MatrixClient } from "matrix-js-sdk";
|
||||
import JSZip from "jszip";
|
||||
import { saveAs } from "file-saver";
|
||||
import { _t } from "../../languageHandler";
|
||||
import SdkConfig from "../../SdkConfig";
|
||||
|
||||
type BlobFile = {
|
||||
name: string;
|
||||
|
|
@ -71,7 +71,9 @@ export default abstract class Exporter {
|
|||
}
|
||||
|
||||
protected async downloadZIP(): Promise<string | void> {
|
||||
const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
|
||||
const brand = SdkConfig.get().brand;
|
||||
const filename = `${brand} - Chat Export -${formatFullDateNoDay(new Date())}.zip`;
|
||||
const { default: JSZip } = await import('jszip');
|
||||
|
||||
const zip = new JSZip();
|
||||
// Create a writable stream to the directory
|
||||
|
|
|
|||
|
|
@ -16,13 +16,12 @@ limitations under the License.
|
|||
|
||||
/* eslint-disable max-len, camelcase */
|
||||
|
||||
import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
|
||||
import customCSS from "!!raw-loader!./exportCustomCSS.css";
|
||||
|
||||
const getExportCSS = async (): Promise<string> => {
|
||||
const theme = new ThemeWatcher().getEffectiveTheme();
|
||||
const stylesheets: string[] = [];
|
||||
document.querySelectorAll('link[rel="stylesheet"]').forEach((e: any) => {
|
||||
if (e.href.endsWith("bundle.css") || e.href.endsWith(`theme-${theme}.css`)) {
|
||||
if (e.href.endsWith("bundle.css") || e.href.endsWith("theme-light.css")) {
|
||||
stylesheets.push(e.href);
|
||||
}
|
||||
});
|
||||
|
|
@ -45,100 +44,6 @@ const getExportCSS = async (): Promise<string> => {
|
|||
"font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
|
||||
);
|
||||
|
||||
const customCSS = `
|
||||
#snackbar {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -125px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
font-size: 17px;
|
||||
padding: 6px 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.43;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.01071em;
|
||||
}
|
||||
|
||||
#snackbar.mx_show {
|
||||
visibility: visible;
|
||||
-webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
|
||||
animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
a.mx_reply_anchor{
|
||||
cursor: pointer;
|
||||
color: #238cf5;
|
||||
}
|
||||
|
||||
a.mx_reply_anchor:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mx_snackbar_fadein {
|
||||
from {bottom: 0; opacity: 0;}
|
||||
to {bottom: 30px; opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes mx_snackbar_fadein {
|
||||
from {bottom: 0; opacity: 0;}
|
||||
to {bottom: 30px; opacity: 1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mx_snackbar_fadeout {
|
||||
from {bottom: 30px; opacity: 1;}
|
||||
to {bottom: 0; opacity: 0;}
|
||||
}
|
||||
|
||||
@keyframes mx_snackbar_fadeout {
|
||||
from {bottom: 30px; opacity: 1;}
|
||||
to {bottom: 0; opacity: 0;}
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
|
||||
.mx_Export_EventWrapper:target {
|
||||
background: ${theme == 'light' ? "white" : "#15191E"};
|
||||
animation: mx_event_highlight_animation 2s linear;
|
||||
}
|
||||
|
||||
@keyframes mx_event_highlight_animation {
|
||||
0%,100% {
|
||||
background: ${theme == 'light' ? "white" : "#15191E"};
|
||||
}
|
||||
50% {
|
||||
background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReplyThread_Export {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_RedactedBody {
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
img {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_MatrixChat{
|
||||
max_width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
return CSS + customCSS;
|
||||
};
|
||||
|
||||
|
|
|
|||
138
src/utils/exportUtils/exportCustomCSS.css
Normal file
138
src/utils/exportUtils/exportCustomCSS.css
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
/*
|
||||
This file is raw-imported (imported as plain text) for the export bundle, which is the reason for the .css format and the colours being hard-coded hard-coded.
|
||||
*/
|
||||
|
||||
#snackbar {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -125px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
font-size: 17px;
|
||||
padding: 6px 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
|
||||
segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.43;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.01071em;
|
||||
}
|
||||
|
||||
#snackbar.mx_show {
|
||||
visibility: visible;
|
||||
-webkit-animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
|
||||
animation: mx_snackbar_fadein 0.5s, mx_snackbar_fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
a.mx_reply_anchor {
|
||||
cursor: pointer;
|
||||
color: #238cf5;
|
||||
}
|
||||
|
||||
a.mx_reply_anchor:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mx_snackbar_fadein {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_snackbar_fadein {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mx_snackbar_fadeout {
|
||||
from {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_snackbar_fadeout {
|
||||
from {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
|
||||
.mx_Export_EventWrapper:target {
|
||||
background: white;
|
||||
animation: mx_event_highlight_animation 2s linear;
|
||||
}
|
||||
|
||||
@keyframes mx_event_highlight_animation {
|
||||
0%,
|
||||
100% {
|
||||
background: white;
|
||||
}
|
||||
50% {
|
||||
background: #e3e2df;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReplyThread_Export {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_RedactedBody {
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
img {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_MatrixChat {
|
||||
max-width: 100%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue