PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
First wave of E2E visuals
This commit is contained in:
Matthew Hodgson 2016-09-12 17:20:23 +01:00 committed by GitHub
commit 9e5d090ddb
9 changed files with 115 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

12
src/skins/vector/img/e2e-blocked.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 883 B

23
src/skins/vector/img/e2e-unencrypted.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

12
src/skins/vector/img/e2e-verified.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
src/skins/vector/img/e2e-warning.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB