merge develop

res/css/_components.scss

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

res/css/structures/_ContextualMenu.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 {

res/css/structures/_RoomStatusBar.scss

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

res/css/structures/_RoomSubList.scss

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

res/css/structures/_TagPanel.scss

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

res/css/views/dialogs/_CreateRoomDialog.scss

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

res/css/views/dialogs/_DeactivateAccountDialog.scss

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

res/css/views/dialogs/_DevtoolsDialog.scss

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

res/css/views/dialogs/_ShareDialog.scss

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

res/css/views/elements/_RichText.scss

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

res/css/views/messages/_MImageBody.scss

@@ -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%);
+}

res/css/views/messages/_MStickerBody.scss

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

res/css/views/messages/_MTextBody.scss

@@ -17,8 +17,3 @@ limitations under the License.
 .mx_MTextBody {
     white-space: pre-wrap;
 }
-
-.mx_MTextBody pre{
-  overflow-y: auto;
-  max-height: 30vh;
-}

res/css/views/rooms/_EventTile.scss

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

res/css/views/rooms/_MessageComposer.scss

@@ -70,6 +70,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    cursor: text;
 }
 
 .mx_MessageComposer_input {

res/css/views/rooms/_PinnedEventTile.scss

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