Merge pull request #1799 from ribot/feature-inline-link-preview

Presentation for inline link
pull/1809/head
Matthew Hodgson 2016-07-15 13:51:54 +01:00 committed by GitHub
commit 6607bee91a
4 changed files with 51 additions and 36 deletions

View File

@ -46,6 +46,14 @@ h2 {
margin-bottom: 16px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover,
a:link,
a:visited {

View File

@ -64,16 +64,12 @@ limitations under the License.
margin-right: 95px;
}
/* all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
horizontal scrollbars occasionally appearing, like in
/* Removed hidden overflow in order to have hanging elements
in the message stream gutters. This may re-introduce
https://github.com/vector-im/vector-web/issues/1154
*/
*/
.mx_EventTile_content {
display: block;
overflow-y: hidden;
overflow-x: hidden;
}
/* Various markdown overrides */

View File

@ -15,51 +15,47 @@ limitations under the License.
*/
.mx_LinkPreviewWidget {
position: relative;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
display: -webkit-flex;
display: flex;
border-left: 4px solid #ddd;
color: #888;
}
.mx_LinkPreviewWidget_image {
-webkit-flex: 0 0 100px;
flex: 0 0 100px;
margin-left: 15px;
text-align: center;
cursor: pointer;
.mx_LinkPreviewWidget:before {
position: absolute;
z-index: 1;
content: '\0020';
top: 0;
left: -15px;
width: 1px;
height: 100%;
background-color: #dddddd;
}
.mx_LinkPreviewWidget_indicator {
position: absolute;
z-index: 1;
top: 2px;
left: -40px;
}
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
margin-bottom: 10px;
}
.mx_LinkPreviewWidget_title {
display: inline;
font-weight: bold;
}
.mx_LinkPreviewWidget_siteName {
display: inline;
opacity: 0.5;
font-size: 13px;
line-height: 18px;
}
.mx_LinkPreviewWidget_description {
margin-top: 8px;
white-space: normal;
word-break: break-word;
.mx_LinkPreviewWidget_image {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_LinkPreviewWidget_cancel {
visibility: hidden;
.mx_LinkPreviewWidget_image img {
cursor: pointer;
-webkit-flex: 0 0 40px;
flex: 0 0 40px;
}
.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
visibility: visible;
}

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="12px" height="15px" viewBox="0 0 12 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>F06866DA-05C9-4E9B-93BD-F25D93FF5A0B</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
<g id="02_19a-Notification-panel" transform="translate(-262.000000, -233.000000)" stroke="#000000">
<g id="icon_link" transform="translate(262.000000, 233.000000)">
<path d="M9.95890881,3.86367071 C9.95890881,2.18051719 8.59444328,0.816051666 6.91128976,0.816051666 C5.22813624,0.816051666 3.86367071,2.18051719 3.86367071,3.86367071 L3.86367071,6.87379824 M3.86367071,6.91128976 C3.86367071,8.59444328 5.22813624,9.95890881 6.91128976,9.95890881 C8.59444328,9.95890881 9.95890881,8.59444328 9.95890881,6.91128976 L9.95890881,3.68060995" id="Combined-Shape-Copy" transform="translate(6.911290, 5.387480) rotate(-315.000000) translate(-6.911290, -5.387480) "></path>
<path d="M8.43509929,8.43509929 C8.43509929,6.75194576 7.07063376,5.38748024 5.38748024,5.38748024 C3.70432671,5.38748024 2.33986119,6.75194576 2.33986119,8.43509929 L2.33986119,11.4452268 M2.33986119,11.4827183 C2.33986119,13.1658719 3.70432671,14.5303374 5.38748024,14.5303374 C7.07063376,14.5303374 8.43509929,13.1658719 8.43509929,11.4827183 L8.43509929,8.25203852" id="Combined-Shape-Copy-2" transform="translate(5.387480, 9.958909) rotate(-315.000000) translate(-5.387480, -9.958909) "></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB