Merge pull request #2163 from vector-im/matthew/e2e

First wave of E2E visuals

src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css

@@ -60,7 +60,7 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
     flex: 1 1 auto;
     color: #747474;
-    word-break: break-all;
+    word-wrap: break-word;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@@ -88,7 +88,7 @@ limitations under the License.
     font-size: 11px;
     opacity: 1.0;
     color: #acacac;
-    word-break: break-all;
+    word-wrap: break-word;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {

src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css

@@ -44,6 +44,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
     font-size: 14px;
+    word-wrap: break-word;
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -62,6 +63,7 @@ limitations under the License.
     font-size: 12px;
     display: inline;
     padding-left: 0px;
+    word-wrap: break-word;
 }
 
 .mx_NotificationPanel .mx_EventTile_senderDetails {

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

@@ -36,21 +36,13 @@ limitations under the License.
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
     top: 8px;
-    left: 44px;
+    left: 65px;
 }
 
 .mx_EventTile_continuation {
     padding-top: 0px ! important;
 }
 
-.mx_EventTile_verified {
-    background-color: #eaf5f0;
-}
-
-.mx_EventTile_unverified {
-    background-color: #ffa0a0;
-}
-
 .mx_EventTile .mx_SenderProfile {
     color: #454545;
     opacity: 0.5;
@@ -87,6 +79,10 @@ limitations under the License.
     line-height: 22px;
 }
 
+.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 83px;
+}
+
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px ! important;
@@ -122,6 +118,10 @@ limitations under the License.
     color: #fff;
 }
 
+.mx_EventTile_encrypting {
+    color: #abddbc ! important;
+}
+
 .mx_EventTile_sending {
     color: #ddd;
 }
@@ -227,6 +227,43 @@ limitations under the License.
     overflow-y: hidden;
 }
 
+/* End to end encryption stuff */
+
+.mx_EventTile_e2eIcon {
+    display: block;
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    z-index: 2;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    padding-left: 60px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: #76cfa5 5px solid;
+}
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: #e8bf37 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
+    left: 3px;
+}
+
+.mx_EventTile_verified .mx_EventTile_e2eIcon {
+    display: none;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
+    display: block;
+    left: 41px;
+}
+
 /* Various markdown overrides */
 
 .mx_EventTile_content .markdown-body {

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

@@ -50,7 +50,7 @@ limitations under the License.
 .mx_LinkPreviewWidget_description {
     margin-top: 8px;
     white-space: normal;
-    word-break: break-word;
+    word-wrap: break-word;
 }
 
 .mx_LinkPreviewWidget_cancel {

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

@@ -46,6 +46,11 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_MessageComposer_e2eIcon {
+    position: absolute;
+    left: 46px;
+}
+
 .mx_MessageComposer_noperm_error {
     width: 100%;
     height: 60px;

src/skins/vector/img/e2e-blocked.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>2805649B-D39D-43EA-A357-659EF9B97BA4</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-301.000000, -328.000000)" fill="#BA6363">
+            <path d="M307,340 C310.313708,340 313,337.313708 313,334 C313,330.686292 310.313708,328 307,328 C303.686292,328 301,330.686292 301,334 C301,337.313708 303.686292,340 307,340 Z M304,333 L310,333 L310,335 L304,335 L304,333 Z" id="blocked_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-unencrypted.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>16F5F38E-A6A3-472A-BC13-13F0F12876CF</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.200000003">
+        <g id="typing-indicator" transform="translate(-301.000000, -141.000000)" fill="#000000">
+            <g id="unencrypted_icon" transform="translate(301.000000, 141.000000)">
+                <g id="Lock-Copy" transform="translate(0.000000, 4.000000)">
+                    <g id="Layer_1">
+                        <polygon id="Shape" points="1.33333333 0.666666667 0 0.666666667 0 8 5 8 10 8 10 0.666666667 8.66666667 0.666666667"></polygon>
+                    </g>
+                </g>
+                <g id="Lock-Copy-2" transform="translate(6.000000, 0.000000)">
+                    <g id="Layer_1">
+                        <path d="M7.66666667,3.66666667 C7.66666667,1.63333333 6.03333333,0 4,0 C1.96666667,0 0.333333333,1.63333333 0.333333333,3.66666667 L0.333333333,4.66666667 L7.66666667,4.66666667 L7.66666667,3.66666667 Z M1.66666667,4.66666667 L1.66666667,3.66666667 C1.66666667,2.36666667 2.7,1.33333333 4,1.33333333 C5.3,1.33333333 6.33333333,2.36666667 6.33333333,3.66666667 L6.33333333,4.66666667 L4,4.66666667 L1.66666667,4.66666667 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-verified.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>48BF5D32-306C-4B20-88EB-24B1F743CAC9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-301.000000, -172.000000)" fill="#76CFA6">
+            <path d="M309.666667,175.666667 C309.666667,173.633333 308.033333,172 306,172 C303.966667,172 302.333333,173.633333 302.333333,175.666667 L302.333333,176.666667 L301,176.666667 L301,184 L306,184 L311,184 L311,176.666667 L309.666667,176.666667 L309.666667,175.666667 Z M306,176.666667 L303.666667,176.666667 L303.666667,175.666667 C303.666667,174.366667 304.7,173.333333 306,173.333333 C307.3,173.333333 308.333333,174.366667 308.333333,175.666667 L308.333333,176.666667 L306,176.666667 L306,176.666667 Z" id="verified_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-warning.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>CCDDE6F6-B552-48FD-AD54-6939841CA2DD</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-299.000000, -294.000000)" fill="#E9BF37">
+            <path d="M313.568455,304.982113 L306.898576,294.310305 C306.776309,294.117108 306.563606,294 306.334971,294 C306.106335,294 305.893632,294.117108 305.771366,294.310305 L299.101486,304.982113 C298.971497,305.189962 298.966004,305.452367 299.087182,305.665474 C299.20836,305.87858 299.436676,306.008036 299.681766,306.002604 L313.021525,306.002604 C313.260642,305.995965 313.477893,305.861783 313.590891,305.650946 C313.703889,305.440108 313.695328,305.184904 313.568455,304.982113 L313.568455,304.982113 Z M307.018633,304.00164 L305.684657,304.00164 L305.684657,302.667664 L307.018633,302.667664 L307.018633,304.00164 Z M307.018633,301.333689 L305.684657,301.333689 L305.684657,297.998749 L307.018633,297.998749 L307.018633,301.333689 Z" id="unverified_icon"></path>
+        </g>
+    </g>
+</svg>