From 64dedef2c729ea30566e0bb098f5e1186d3c5987 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 21:55:57 +0100 Subject: [PATCH 1/4] fix wordwrap on new panels --- .../vector/css/matrix-react-sdk/structures/FilePanel.css | 4 ++-- .../css/matrix-react-sdk/structures/NotificationPanel.css | 2 ++ .../css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css index 5e58d33e..2d2fe31c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css +++ b/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 { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css index 2a42e35f..36d62a81 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css +++ b/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 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css index ed470c00..2e2d9f80 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css +++ b/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 { From dd4617a7c61fd14c1f39b15bdf21732daaf4596e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 23:01:28 +0100 Subject: [PATCH 2/4] bring back small avatars for info msgs otherwise the design breaks --- .../vector/css/matrix-react-sdk/views/rooms/EventTile.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 432bdc28..38f65a10 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -36,7 +36,7 @@ limitations under the License. .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { top: 8px; - left: 44px; + left: 65px; } .mx_EventTile_continuation { @@ -87,6 +87,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; From 5775552bab546e9300e59fb1aac8991aab737841 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 01:38:03 +0100 Subject: [PATCH 3/4] css for e2e look & feel --- .../views/rooms/EventTile.css | 49 ++++++++++++++++--- .../views/rooms/MessageComposer.css | 5 ++ 2 files changed, 46 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 38f65a10..ae503511 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -43,14 +43,6 @@ limitations under the License. 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; @@ -126,6 +118,10 @@ limitations under the License. color: #fff; } +.mx_EventTile_encrypting { + color: #abddbc ! important; +} + .mx_EventTile_sending { color: #ddd; } @@ -231,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 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 45bc39cf..6c7ac4dc 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/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; From 695930efa566280fa623ef8fd77a19a4c7404508 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 16:50:53 +0100 Subject: [PATCH 4/4] e2e icons --- src/skins/vector/img/e2e-blocked.svg | 12 ++++++++++++ src/skins/vector/img/e2e-unencrypted.svg | 23 +++++++++++++++++++++++ src/skins/vector/img/e2e-verified.svg | 12 ++++++++++++ src/skins/vector/img/e2e-warning.svg | 12 ++++++++++++ 4 files changed, 59 insertions(+) create mode 100644 src/skins/vector/img/e2e-blocked.svg create mode 100644 src/skins/vector/img/e2e-unencrypted.svg create mode 100644 src/skins/vector/img/e2e-verified.svg create mode 100644 src/skins/vector/img/e2e-warning.svg diff --git a/src/skins/vector/img/e2e-blocked.svg b/src/skins/vector/img/e2e-blocked.svg new file mode 100644 index 00000000..0ab2c6ef --- /dev/null +++ b/src/skins/vector/img/e2e-blocked.svg @@ -0,0 +1,12 @@ + + + + 2805649B-D39D-43EA-A357-659EF9B97BA4 + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/e2e-unencrypted.svg b/src/skins/vector/img/e2e-unencrypted.svg new file mode 100644 index 00000000..14672236 --- /dev/null +++ b/src/skins/vector/img/e2e-unencrypted.svg @@ -0,0 +1,23 @@ + + + + 16F5F38E-A6A3-472A-BC13-13F0F12876CF + Created with sketchtool. + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/e2e-verified.svg b/src/skins/vector/img/e2e-verified.svg new file mode 100644 index 00000000..b65f50b2 --- /dev/null +++ b/src/skins/vector/img/e2e-verified.svg @@ -0,0 +1,12 @@ + + + + 48BF5D32-306C-4B20-88EB-24B1F743CAC9 + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/e2e-warning.svg b/src/skins/vector/img/e2e-warning.svg new file mode 100644 index 00000000..8a55f199 --- /dev/null +++ b/src/skins/vector/img/e2e-warning.svg @@ -0,0 +1,12 @@ + + + + CCDDE6F6-B552-48FD-AD54-6939841CA2DD + Created with sketchtool. + + + + + + + \ No newline at end of file