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

Presentation for inline link

src/skins/vector/css/common.css

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

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

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

src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css

@@ -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 {
+.mx_LinkPreviewWidget:before {
-    -webkit-flex: 0 0 100px;
+    position: absolute;
-    flex: 0 0 100px;
+    z-index: 1;
-    margin-left: 15px;
+    content: '\0020';
-    text-align: center;
+    top: 0;
-    cursor: pointer;
+    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;
+    margin-bottom: 10px;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
 }
 
 .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 {
+.mx_LinkPreviewWidget_image {
-    margin-top: 8px;
+    margin-top: 10px;
-    white-space: normal;
+    margin-bottom: 10px;
-    word-break: break-word;
 }
 
-.mx_LinkPreviewWidget_cancel {
+.mx_LinkPreviewWidget_image img {
-    visibility: hidden;
     cursor: pointer;
-    -webkit-flex: 0 0 40px;
-    flex: 0 0 40px;
-}
-
-.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
-    visibility: visible;
 }

src/skins/vector/img/icon-link.svg

@@ -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>