rbondesson
d791e3fe8a
* Refactor MFileBody using MVVM and move to shared component * Simplyfing rendering properties * Create a first version of view model for the component * Simplifying component properties and make it possible to override module css using data-* attributes * Create a MBodyFactory in element-web and use it to render MFileBodyView from MessageEvent * Use <MediaBody instead of <button to support legacy rendering * Updated styling and comments * Refactoring className from snapshot to component property * Rename MFileBody* to FileBody* * Rename MFileBody* to FileBody* * Refactoring render branches to allow for displaying nothing * Fix styling issues * Fix lint errors * Fix for css selectors in playwright tests * Remove the MFileBody component and change all callers to use MBodyFactory:FileBodyView * Remove unused strings in element-web * Revert to render text in story iframes * Fix for prettier error * Fix playwright test css selectors * Apply legacy styling in element-web * Add legacy styling for mx_MFileBody * Restore file * Change from <div to <button * Calculate span width ad update screenshots * Remove width calculation and update snapshots * Fix for letter-spacing and better content in story * Updated playwright screenshots * Updated snapshots * Fixing Sonar errors/warnings * Removed extra parentheses * Changes after review * Change border-radius to px and updated snapshots * Fix typo in description * And another typo fix * Changes after review
422 lines
13 KiB
Plaintext
422 lines
13 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`FileBodyView > matches snapshot for audio-info story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
class="mx_MediaBody mediaBody"
|
|
data-type="info"
|
|
>
|
|
<button
|
|
aria-label="voice-message.ogg"
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2m11.122-5.536a1 1 0 0 1 1.414 0A5 5 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 3 3 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415"
|
|
/>
|
|
<path
|
|
d="M16.95 5.636a1 1 0 0 1 1.414 0A8.98 8.98 0 0 1 21 12a8.98 8.98 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.98 6.98 0 0 0 19 12a6.98 6.98 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
voice-message.ogg
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for decryption-pending-download story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
data-type="download"
|
|
>
|
|
<button
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
|
/>
|
|
</svg>
|
|
Download file
|
|
</button>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for default story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
class="mx_MediaBody mediaBody"
|
|
data-type="info"
|
|
>
|
|
<button
|
|
aria-label="spec.pdf"
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
spec.pdf
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
data-type="download"
|
|
>
|
|
<a
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
href="https://example.org/download/spec.pdf"
|
|
rel="noreferrer noopener"
|
|
role="link"
|
|
tabindex="0"
|
|
target="_blank"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
|
/>
|
|
</svg>
|
|
Download file
|
|
</a>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for encrypted-iframe-download story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
data-type="download"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
style="display: none;"
|
|
>
|
|
<a
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="link"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<iframe
|
|
aria-hidden="true"
|
|
sandbox="allow-scripts allow-downloads"
|
|
src="usercontent/"
|
|
title="Download title"
|
|
/>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for export story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<a
|
|
href="https://example.org/spec.pdf"
|
|
>
|
|
<div
|
|
class="mx_MediaBody mediaBody"
|
|
data-type="info"
|
|
>
|
|
<button
|
|
aria-label="spec.pdf"
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
spec.pdf
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for invalid story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
class="mx_MediaBody mediaBody"
|
|
data-type="info"
|
|
>
|
|
<button
|
|
aria-label="spec.pdf"
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
spec.pdf
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</span>
|
|
<span
|
|
class="content invalid"
|
|
>
|
|
Invalid file
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for long-filename-download story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
data-type="download"
|
|
>
|
|
<a
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
href="https://example.org/download/spec.pdf"
|
|
rel="noreferrer noopener"
|
|
role="link"
|
|
tabindex="0"
|
|
target="_blank"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
|
/>
|
|
</svg>
|
|
a very long filename that show no ellipsis.pdf
|
|
</a>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for long-filename-info story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
class="mx_MediaBody mediaBody"
|
|
data-type="info"
|
|
>
|
|
<button
|
|
aria-label="a very long filename to show ellipsis.pdf"
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
a very long filename to show ellipsis.pdf
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for unencrypted-download story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
data-type="download"
|
|
>
|
|
<a
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
href="https://example.org/download/spec.pdf"
|
|
rel="noreferrer noopener"
|
|
role="link"
|
|
tabindex="0"
|
|
target="_blank"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
|
|
/>
|
|
</svg>
|
|
Download file
|
|
</a>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`FileBodyView > matches snapshot for video-info story 1`] = `
|
|
<div>
|
|
<span
|
|
class="content"
|
|
>
|
|
<div
|
|
class="mx_MediaBody mediaBody"
|
|
data-type="info"
|
|
>
|
|
<button
|
|
aria-label="clip.mp4"
|
|
class="_button_13vu4_8 _has-icon_13vu4_60"
|
|
data-kind="secondary"
|
|
data-size="sm"
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="currentColor"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
clip.mp4
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|