Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

markdown: Add icons before links for common file types. 

When links (usually in form of list of files) are one after the other
in a message, it gets hard to distinguish one from the other, since the
beginnings are not well defined.

Now every attachment of a common file type will have a file type based
icon preceding it, and other external links will have an external link
icon. This way it will now be easier to distinguish multiple links /
attachments, and as an added benefit, also gauge their type visually.

Fixes: #21603
This commit is contained in:
N-Shar-ma 2022-08-30 23:15:16 +05:30
parent 74e4b01580
commit 844c387bb4
1 changed files with 60 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/styles/rendered_markdown.css
View File

@ -298,6 +298,61 @@
}
}
/* setup for icons before links of common file types */
a::before {
font-family: FontAwesome;
margin-left: 5px;
margin-right: 3px;
}
/* external link icon */
a[target="_blank"]::before {
content: "\f08e";
}
/* pdf file icon */
a[href$=".pdf"]::before {
content: "\f1c1";
}
/* image file icon */
a[href$=".png"]::before,
a[href$=".jpeg"]::before,
a[href$=".jpg"]::before,
a[href$=".gif"]::before {
content: "\f03e";
}
/* video file icon */
a[href$=".mp4"]::before,
a[href$=".mov"]::before {
content: "\f1c8";
}
/* audio file icon */
a[href$=".mp3"]::before {
content: "\f1c7";
}
/* text file icon */
a[href$=".txt"]::before,
a[href$=".doc"]::before,
a[href$=".docx"]::before {
content: "\f1c2";
}
/* ppt file icon */
a[href$=".ppt"]::before,
a[href$=".pptx"]::before {
content: "\f1c4";
}
/* compressed file icon */
a[href$=".zip"]::before,
a[href$=".tar"]::before {
content: "\f1c6";
}
/* embedded link previews */
.message_inline_image_title {
font-weight: bold;
@ -349,6 +404,11 @@
display: block;
height: 100%;
width: 100%;
/* do not show icon in preview */
&::before {
display: none;
}
}
}