merge develop

2018-07-09 17:50:07 +01:00
parent 6299e188a4 e61317284b
commit efdc5430d7
176 changed files with 7536 additions and 3400 deletions
@@ -34,6 +34,7 @@
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EncryptedEventDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
@@ -41,6 +42,7 @@
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss";
+@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/directory/_NetworkDropdown.scss";
@import "./views/elements/_AccessibleButton.scss";
@@ -16,7 +16,7 @@ limitations under the License.

 .mx_ContextualMenu_wrapper {
    position: fixed;
-    z-index: 2000;
+    z-index: 5000;
 }

 .mx_ContextualMenu_background {
@@ -26,7 +26,7 @@ limitations under the License.
    width: 100%;
    height: 100%;
    opacity: 1.0;
-    z-index: 2000;
+    z-index: 5000;
 }

 .mx_ContextualMenu {
@@ -37,7 +37,7 @@ limitations under the License.
    position: absolute;
    padding: 6px;
 	font-size: 14px;
-    z-index: 2001;
+    z-index: 5001;
 }

 .mx_ContextualMenu.mx_ContextualMenu_right {
@@ -113,6 +113,8 @@ limitations under the License.
 }

 .mx_RoomStatusBar_connectionLostBar {
+    display: flex;
+
    margin-top: 19px;
    min-height: 58px;
 }
@@ -132,6 +134,7 @@ limitations under the License.
    color: $primary-fg-color;
    font-size: 13px;
    opacity: 0.5;
+    padding-bottom: 20px;
 }

 .mx_RoomStatusBar_resend_link {
@@ -91,6 +91,10 @@ limitations under the License.
    background-color: $accent-color;
 }

+.mx_RoomSubList_label .mx_RoomSubList_badge:hover {
+    filter: brightness($focus-brightness);
+}
+
 /*
 .collapsed .mx_RoomSubList_badge {
    display: none;
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_TagPanel {
    flex: 0 0 60px;
    background-color: $tertiary-accent-color;
-    cursor: pointer;

    display: flex;
    flex-direction: column;
@@ -25,7 +24,11 @@ limitations under the License.
    justify-content: space-between;
 }

-.mx_TagPanel .mx_TagPanel_clearButton {
+.mx_TagPanel_items_selected {
+    cursor: pointer;
+}
+
+.mx_TagPanel .mx_TagPanel_clearButton_container {
    /* Constant height within flex mx_TagPanel */
    height: 70px;
    width: 60px;
@@ -23,6 +23,10 @@ limitations under the License.
    padding-bottom: 12px;
 }

+.mx_CreateRoomDialog_input_container {
+    padding-right: 20px;
+}
+
 .mx_CreateRoomDialog_input {
    font-size: 15px;
    border-radius: 3px;
@@ -30,4 +34,5 @@ limitations under the License.
    padding: 9px;
    color: $primary-fg-color;
    background-color: $primary-bg-color;
+    width: 100%;
 }
@@ -0,0 +1,23 @@
+/*
+Copyright 2018 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_DeactivateAccountDialog .mx_Dialog_content {
+    margin-bottom: 30px;
+}
+
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
+    margin-top: 60px;
+}
@@ -14,8 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_DevTools_content {
+    margin: 10px 0;
+}
+
 .mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
    margin-bottom: 10px;
+    width: 100%;
 }

 .mx_DevTools_label_left {
@@ -38,7 +43,6 @@ limitations under the License.

 .mx_DevTools_inputLabelCell
 {
-    padding-bottom: 21px;
    display: table-cell;
    font-weight: bold;
    padding-right: 24px;
@@ -46,7 +50,6 @@ limitations under the License.

 .mx_DevTools_inputCell {
    display: table-cell;
-    padding-bottom: 21px;
    width: 240px;
 }

@@ -62,6 +65,14 @@ limitations under the License.
    font-size: 16px;
 }

+.mx_DevTools_textarea {
+    font-size: 12px;
+    max-width: 624px;
+    min-height: 250px;
+    padding: 10px;
+    width: 100%;
+}
+
 .mx_DevTools_tgl {
    display: none;

@@ -0,0 +1,89 @@
+/*
+Copyright 2018 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ShareDialog {
+    // this is to center the content
+    padding-right: 58px;
+}
+
+.mx_ShareDialog hr {
+    margin-top: 25px;
+    margin-bottom: 25px;
+    border-color: $light-fg-color;
+}
+
+.mx_ShareDialog_content {
+    margin: 10px 0;
+}
+
+.mx_ShareDialog_matrixto {
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    border: solid 1px $light-fg-color;
+    margin-bottom: 10px;
+    margin-top: 30px;
+    padding: 10px;
+}
+
+.mx_ShareDialog_matrixto a {
+    text-decoration: none;
+}
+
+.mx_ShareDialog_matrixto_link {
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_ShareDialog_matrixto_copy {
+    flex-shrink: 0;
+    cursor: pointer;
+    margin-left: 20px;
+    display: inherit;
+}
+.mx_ShareDialog_matrixto_copy > div {
+    background-image: url($copy-button-url);
+    margin-left: 5px;
+    width: 20px;
+    height: 20px;
+}
+
+.mx_ShareDialog_split {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mx_ShareDialog_qrcode_container {
+    float: left;
+    background-color: #ffffff;
+    padding: 5px; // makes qr code more readable in dark theme
+    border-radius: 5px;
+    height: 256px;
+    width: 256px;
+    margin-right: 64px;
+}
+
+.mx_ShareDialog_social_container {
+    display: inline-block;
+    width: 299px;
+}
+
+.mx_ShareDialog_social_icon {
+    display: inline-grid;
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
@@ -4,6 +4,7 @@

 .mx_UserPill,
 .mx_RoomPill,
+.mx_GroupPill,
 .mx_AtRoomPill {
    border-radius: 16px;
    display: inline-block;
@@ -13,7 +14,8 @@
 }

 .mx_EventTile_body .mx_UserPill,
-.mx_EventTile_body .mx_RoomPill {
+.mx_EventTile_body .mx_RoomPill,
+.mx_EventTile_body .mx_GroupPill {
    cursor: pointer;
 }

@@ -39,14 +41,25 @@

 /* More specific to override `.markdown-body a` color */
 .mx_EventTile_content .markdown-body a.mx_RoomPill,
-.mx_RoomPill {
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_RoomPill,
+.mx_GroupPill {
    color: $accent-fg-color;
    background-color: $rte-room-pill-color;
    padding-right: 5px;
 }

+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_GroupPill {
+    color: $accent-fg-color;
+    background-color: $rte-group-pill-color;
+    padding-right: 5px;
+}
+
 .mx_UserPill .mx_BaseAvatar,
 .mx_RoomPill .mx_BaseAvatar,
+.mx_GroupPill .mx_BaseAvatar,
 .mx_AtRoomPill .mx_BaseAvatar {
    position: relative;
    left: -3px;
@@ -20,5 +20,29 @@ limitations under the License.
 }

 .mx_MImageBody_thumbnail {
-    max-width: 100%;
-}
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+.mx_MImageBody_thumbnail_container {
+    // Prevent the padding-bottom (added inline in MImageBody.js) from
+    // affecting elements below the container.
+    overflow: hidden;
+
+    // Make sure the _thumbnail is positioned relative to the _container
+    position: relative;
+}
+
+.mx_MImageBody_thumbnail_spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+}
+
+// Inner img and TintableSvg should be centered around 0, 0
+.mx_MImageBody_thumbnail_spinner > * {
+    transform: translate(-50%, -50%);
+}
@@ -14,33 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MStickerBody {
-  display: block;
-  margin-right: 34px;
-  min-height: 110px;
-  padding: 20px 0;
+.mx_MStickerBody_wrapper {
+    padding: 20px 0px;
 }

-.mx_MStickerBody_image_container {
-  display: inline-block;
-  position: relative;
-}
-
-.mx_MStickerBody_image {
-  max-width: 100%;
-  opacity: 0;
-}
-
-.mx_MStickerBody_image_visible {
-  opacity: 1;
-}
-
-.mx_MStickerBody_placeholder {
-  position: absolute;
-  opacity: 1;
-}
-
-.mx_MStickerBody_placeholder_invisible {
-  transition: 500ms;
-  opacity: 0;
+.mx_MStickerBody_tooltip {
+    position: absolute;
+    top: 50%;
 }
@@ -17,8 +17,3 @@ limitations under the License.
 .mx_MTextBody {
    white-space: pre-wrap;
 }
-
-.mx_MTextBody pre{
-  overflow-y: auto;
-  max-height: 30vh;
-}
@@ -391,6 +391,7 @@ limitations under the License.
 .mx_EventTile_content .markdown-body pre {
    overflow-x: overlay;
    overflow-y: visible;
+    max-height: 30vh;
 }

 .mx_EventTile_content .markdown-body code {
@@ -399,6 +400,12 @@ limitations under the License.
    color: #333;
 }

+.mx_EventTile_pre_container {
+    // For correct positioning of _copyButton (See TextualBody)
+    position: relative;
+}
+
+// Inserted adjacent to <pre> blocks, (See TextualBody)
 .mx_EventTile_copyButton {
    position: absolute;
    display: inline-block;
@@ -412,7 +419,6 @@ limitations under the License.
 }

 .mx_EventTile_body pre {
-    position: relative;
    border: 1px solid transparent;
 }

@@ -421,7 +427,7 @@ limitations under the License.
    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }

-.mx_EventTile_body pre:hover .mx_EventTile_copyButton
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
 {
    visibility: visible;
 }
@@ -70,6 +70,7 @@ limitations under the License.
    flex: 1;
    display: flex;
    flex-direction: column;
+    cursor: text;
 }

 .mx_MessageComposer_input {
@@ -25,26 +25,29 @@ limitations under the License.
    background-color: $event-selected-color;
 }

-.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+.mx_PinnedEventTile .mx_PinnedEventTile_sender,
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
    color: #868686;
    font-size: 0.8em;
    vertical-align: top;
-    display: block;
+    display: inline-block;
    padding-bottom: 3px;
 }

-.mx_PinnedEventTile .mx_EventTile_content {
-    margin-left: 50px;
-    position: relative;
-    top: 0;
-    left: 0;
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+    padding-left: 15px;
+    display: none;
 }

-.mx_PinnedEventTile .mx_BaseAvatar {
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
    float: left;
    margin-right: 10px;
 }

+.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
+    display: inline-block;
+}
+
 .mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
    display: block;
 }
@@ -63,5 +66,12 @@ limitations under the License.

 .mx_PinnedEventTile_gotoButton {
    display: inline-block;
-    font-size: 0.8em;
+    font-size: 0.7em; // Smaller text to avoid conflicting with the layout
 }
+
+.mx_PinnedEventTile_message {
+    margin-left: 50px;
+    position: relative;
+    top: 0;
+    left: 0;
+}
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="612px" height="612px" viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
+<path stroke="#76CFA6"  fill="#76CFA6" stroke-width="40" stroke-miterlimit="10" d="M517.593,435.2c-9.204,0-17.093,7.053-17.811,16.257
+	c-8.247,99.33-91.8,176.786-193.401,176.786c-106.98,0-194.119-86.54-194.119-192.923c0-104.71,84.389-190.294,189.098-192.924
+	c2.75-0.12,4.901,2.032,4.901,4.781v60.124c0,15.061,16.614,24.146,29.404,16.137l114.989-80.444
+	c11.953-7.53,11.953-24.862,0-32.393l-114.869-79.369c-12.79-8.009-29.405,1.076-29.405,16.137v54.626
+	c0,2.629-2.032,4.781-4.661,4.781C176.929,209.286,76.522,310.649,76.522,435.32c0,126.225,102.917,228.424,229.858,228.424
+	c120.487,0,219.221-91.681,229.022-209.299C536.359,444.046,527.992,435.2,517.593,435.2L517.593,435.2z"/>
+</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" opacity="0.4">
+    <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>
@@ -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="#f44">
+        <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>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 481.6 481.6" style="enable-background:new 0 0 481.6 481.6;" xml:space="preserve" width="16px" height="16px">
+<g>
+	<path stroke="#76CFA6" stroke-width="5" d="M381.6,309.4c-27.7,0-52.4,13.2-68.2,33.6l-132.3-73.9c3.1-8.9,4.8-18.5,4.8-28.4c0-10-1.7-19.5-4.9-28.5l132.2-73.8   c15.7,20.5,40.5,33.8,68.3,33.8c47.4,0,86.1-38.6,86.1-86.1S429,0,381.5,0s-86.1,38.6-86.1,86.1c0,10,1.7,19.6,4.9,28.5   l-132.1,73.8c-15.7-20.6-40.5-33.8-68.3-33.8c-47.4,0-86.1,38.6-86.1,86.1s38.7,86.1,86.2,86.1c27.8,0,52.6-13.3,68.4-33.9   l132.2,73.9c-3.2,9-5,18.7-5,28.7c0,47.4,38.6,86.1,86.1,86.1s86.1-38.6,86.1-86.1S429.1,309.4,381.6,309.4z M381.6,27.1   c32.6,0,59.1,26.5,59.1,59.1s-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1S349.1,27.1,381.6,27.1z M100,299.8   c-32.6,0-59.1-26.5-59.1-59.1s26.5-59.1,59.1-59.1s59.1,26.5,59.1,59.1S132.5,299.8,100,299.8z M381.6,454.5   c-32.6,0-59.1-26.5-59.1-59.1c0-32.6,26.5-59.1,59.1-59.1s59.1,26.5,59.1,59.1C440.7,428,414.2,454.5,381.6,454.5z" fill="#76cfa6"/>
+</g>
+</svg>
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
+<rect width="100%" height="100%" fill="#FFFFFF"/>
+<path d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"/>
+<path d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8
+	c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5
+	c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3
+	c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1
+	c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9
+	c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1
+	v107.6h-50.9V169.2H166.3z"/>
+<path d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"/>
+</svg>
@@ -97,6 +97,7 @@ $voip-accept-color: #80f480;
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 $rte-room-pill-color: #aaa;
+$rte-group-pill-color: #aaa;

 // ********************