mirror of https://github.com/vector-im/riot-web
Improve general style per design direction
parent
d1e7c79333
commit
c322761abb
|
@ -27,6 +27,7 @@ import { presentableTextForFile } from "../../../utils/FileUtils";
|
|||
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { FileDownloader } from "../../../utils/FileDownloader";
|
||||
import TextWithTooltip from "../elements/TextWithTooltip";
|
||||
|
||||
export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
|
||||
|
||||
|
@ -202,9 +203,12 @@ export default class MFileBody extends React.Component<IProps, IState> {
|
|||
placeholder = (
|
||||
<AccessibleButton className="mx_MediaBody mx_MFileBody_info" onClick={this.onPlaceholderClick}>
|
||||
<span className="mx_MFileBody_info_icon" />
|
||||
<span className="mx_MFileBody_info_filename">
|
||||
{ presentableTextForFile(content, _t("Attachment"), false) }
|
||||
</span>
|
||||
<TextWithTooltip
|
||||
className="mx_MFileBody_info_filename"
|
||||
tooltip={presentableTextForFile(content, _t("Attachment"), false)}
|
||||
>
|
||||
{ presentableTextForFile(content, _t("Attachment"), true, true) }
|
||||
</TextWithTooltip>
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -26,12 +26,14 @@ import { _t } from '../languageHandler';
|
|||
* @param {IMediaEventContent} content The "content" key of the matrix event.
|
||||
* @param {string} fallbackText The fallback text
|
||||
* @param {boolean} withSize Whether to include size information. Default true.
|
||||
* @param {boolean} shortened Ensure the extension of the file name is visible. Default false.
|
||||
* @return {string} the human readable link text for the attachment.
|
||||
*/
|
||||
export function presentableTextForFile(
|
||||
content: IMediaEventContent,
|
||||
fallbackText = _t("Attachment"),
|
||||
withSize = true,
|
||||
shortened = false,
|
||||
): string {
|
||||
let text = fallbackText;
|
||||
if (content.body && content.body.length > 0) {
|
||||
|
@ -40,6 +42,21 @@ export function presentableTextForFile(
|
|||
text = content.body;
|
||||
}
|
||||
|
||||
// We shorten to 15 characters somewhat arbitrarily, and assume most files
|
||||
// will have a 3 character (plus full stop) extension. The goal is to knock
|
||||
// the label down to 15-25 characters, not perfect accuracy.
|
||||
if (shortened && text.length > 19) {
|
||||
const parts = text.split('.');
|
||||
let fileName = parts.slice(0, parts.length - 1).join('.').substring(0, 15);
|
||||
const extension = parts[parts.length - 1];
|
||||
|
||||
// Trim off any full stops from the file name to avoid a case where we
|
||||
// add an ellipsis that looks really funky.
|
||||
fileName = fileName.replace(/\.*$/g, '');
|
||||
|
||||
text = `${fileName}...${extension}`;
|
||||
}
|
||||
|
||||
if (content.info && content.info.size && withSize) {
|
||||
// If we know the size of the file then add it as human readable
|
||||
// string to the end of the link text so that the user knows how
|
||||
|
|
Loading…
Reference in New Issue