Merge branch 'develop' into jryans/4s-new-key-backup

res/css/views/context_menus/_WidgetContextMenu.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2019 The Matrix.org Foundaction C.I.C.
+
+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_WidgetContextMenu {
+    padding: 6px;
+
+    .mx_WidgetContextMenu_option {
+        padding: 3px 6px 3px 6px;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    .mx_WidgetContextMenu_separator {
+        margin-top: 0;
+        margin-bottom: 0;
+        border-bottom-style: none;
+        border-left-style: none;
+        border-right-style: none;
+        border-top-style: solid;
+        border-top-width: 1px;
+        border-color: $menu-border-color;
+    }
+}

res/css/views/dialogs/_TermsDialog.scss

@@ -16,10 +16,10 @@ limitations under the License.
 
 /*
  * To avoid visual glitching of two modals stacking briefly, we customise the
- * terms dialog sizing when it will appear for the integrations manager so that
+ * terms dialog sizing when it will appear for the integration manager so that
  * it gets the same basic size as the IM's own modal.
  */
-.mx_TermsDialog_forIntegrationsManager .mx_Dialog {
+.mx_TermsDialog_forIntegrationManager .mx_Dialog {
     width: 60%;
     height: 70%;
     box-sizing: border-box;

res/css/views/messages/_MKeyVerificationRequest.scss

@@ -25,7 +25,7 @@ limitations under the License.
         width: 12px;
         height: 16px;
         content: "";
-        mask: url("$(res)/img/e2e/normal.svg");
+        mask-image: url("$(res)/img/e2e/normal.svg");
         mask-repeat: no-repeat;
         mask-size: 100%;
         margin-top: 4px;
@@ -33,7 +33,7 @@ limitations under the License.
     }
 
     &.mx_KeyVerification_icon_verified::after {
-        mask: url("$(res)/img/e2e/verified.svg");
+        mask-image: url("$(res)/img/e2e/verified.svg");
         background-color: $accent-color;
     }
 

res/css/views/right_panel/_UserInfo.scss

@@ -195,6 +195,8 @@ limitations under the License.
     .mx_UserInfo_devices {
         .mx_UserInfo_device {
             display: flex;
+            margin: 8px 0;
+
 
             &.mx_UserInfo_device_verified {
                 .mx_UserInfo_device_trusted {
@@ -210,6 +212,7 @@ limitations under the License.
             .mx_UserInfo_device_name {
                 flex: 1;
                 margin-right: 5px;
+                word-break: break-word;
             }
         }
 

res/css/views/rooms/_AppsDrawer.scss

@@ -153,40 +153,12 @@ $AppsDrawerBodyHeight: 273px;
     background-color: $accent-color;
 }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
-    mask-image: url('$(res)/img/feather-customised/widget/refresh.svg');
-    mask-size: 100%;
-}
-
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
     mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
 }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot {
-    mask-image: url('$(res)/img/feather-customised/widget/camera.svg');
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
-    mask-image: url('$(res)/img/feather-customised/widget/edit.svg');
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
-    mask-image: url('$(res)/img/feather-customised/widget/bin.svg');
-    background-color: $warning-color;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel {
-    mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg');
-}
-
-/* delete ? */
-.mx_AppTileMenuBarWidget {
-    cursor: pointer;
-    width: 10px;
-    height: 10px;
-    padding: 1px;
-    transition-duration: 500ms;
-    border: 1px solid transparent;
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
+    mask-image: url('$(res)/img/icon_context.svg');
 }
 
 .mx_AppTileMenuBarWidgetDelete {
@@ -294,49 +266,61 @@ form.mx_Custom_Widget_Form div {
 
 .mx_AppPermissionWarning {
     text-align: center;
-    background-color: $primary-bg-color;
+    background-color: $widget-menu-bar-bg-color;
     display: flex;
     height: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    font-size: 16px;
 }
 
-.mx_AppPermissionWarningImage {
-    margin: 10px 0;
+.mx_AppPermissionWarning_row {
+    margin-bottom: 12px;
 }
 
-.mx_AppPermissionWarningImage img {
-    width: 100px;
+.mx_AppPermissionWarning_smallText {
+    font-size: 12px;
 }
 
-.mx_AppPermissionWarningText {
-    max-width: 90%;
-    margin: 10px auto 10px auto;
-    color: $primary-fg-color;
+.mx_AppPermissionWarning_bolder {
+    font-weight: 600;
 }
 
-.mx_AppPermissionWarningTextLabel {
-    font-weight: bold;
-    display: block;
+.mx_AppPermissionWarning h4 {
+    margin: 0;
+    padding: 0;
 }
 
-.mx_AppPermissionWarningTextURL {
+.mx_AppPermissionWarning_helpIcon {
+    margin-top: 1px;
+    margin-right: 2px;
+    width: 10px;
+    height: 10px;
     display: inline-block;
-    max-width: 100%;
-    color: $accent-color;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
 }
 
-.mx_AppPermissionButton {
-    border: none;
-    padding: 5px 20px;
-    border-radius: 5px;
-    background-color: $button-bg-color;
-    color: $button-fg-color;
-    cursor: pointer;
+.mx_AppPermissionWarning_helpIcon::before {
+    display: inline-block;
+    background-color: $accent-color;
+    mask-repeat: no-repeat;
+    mask-size: 12px;
+    width: 12px;
+    height: 12px;
+    mask-position: center;
+    content: '';
+    vertical-align: middle;
+    mask-image: url('$(res)/img/feather-customised/help-circle.svg');
+}
+
+.mx_AppPermissionWarning_tooltip {
+    @mixin mx_Tooltip_dark;
+
+    ul {
+        list-style-position: inside;
+        padding-left: 2px;
+        margin-left: 0;
+    }
 }
 
 .mx_AppLoading {

res/css/views/rooms/_E2EIcon.scss

@@ -22,21 +22,6 @@ limitations under the License.
     display: block;
 }
 
-.mx_E2EIcon_verified::before, .mx_E2EIcon_warning::before {
-    content: "";
-    display: block;
-    /* the symbols in the shield icons are cut out to make it themeable with css masking.
-    if they appear on a different background than white, the symbol wouldn't be white though, so we
-    add a rectangle here below the masked element to shine through the symbol cut-out.
-    hardcoding white and not using a theme variable as this would probably be white for any theme. */
-    background-color: white;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 .mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
     content: "";
     display: block;
@@ -49,23 +34,11 @@ limitations under the License.
     mask-size: contain;
 }
 
-.mx_E2EIcon_verified::before {
-    /* white rectangle below checkmark of shield */
-    margin: 25% 28% 38% 25%;
-}
-
-
 .mx_E2EIcon_verified::after {
     mask-image: url('$(res)/img/e2e/verified.svg');
     background-color: $accent-color;
 }
 
-
-.mx_E2EIcon_warning::before {
-    /* white rectangle below "!" of shield */
-    margin: 18% 40% 25% 40%;
-}
-
 .mx_E2EIcon_warning::after {
     mask-image: url('$(res)/img/e2e/warning.svg');
     background-color: $warning-color;

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -25,6 +25,7 @@ limitations under the License.
     width: 12px;
     height: 12px;
     mask-repeat: no-repeat;
+    mask-size: 100%;
 }
 .mx_MemberDeviceInfo_icon_blacklisted {
     mask-image: url('$(res)/img/e2e/blacklisted.svg');

res/css/views/rooms/_MessageComposer.scss

@@ -23,10 +23,6 @@ limitations under the License.
     padding-left: 84px;
 }
 
-.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon {
-    padding-left: 109px;
-}
-
 .mx_MessageComposer_replaced_wrapper {
     margin-left: auto;
     margin-right: auto;
@@ -78,10 +74,10 @@ limitations under the License.
 .mx_MessageComposer_e2eIcon.mx_E2EIcon {
     position: absolute;
     left: 60px;
-
-    &::after {
-        background-color: $composer-e2e-icon-color;
-    }
+    width: 16px;
+    height: 16px;
+    margin-right: 0; // Counteract the E2EIcon class
+    margin-left: 3px; // Counteract the E2EIcon class
 }
 
 .mx_MessageComposer_noperm_error {

res/css/views/settings/_IntegrationManager.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_IntegrationsManager .mx_Dialog {
+.mx_IntegrationManager .mx_Dialog {
     width: 60%;
     height: 70%;
     overflow: hidden;
@@ -23,22 +23,22 @@ limitations under the License.
     max-height: initial;
 }
 
-.mx_IntegrationsManager iframe {
+.mx_IntegrationManager iframe {
     background-color: #fff;
     border: 0px;
     width: 100%;
     height: 100%;
 }
 
-.mx_IntegrationsManager_loading h3 {
+.mx_IntegrationManager_loading h3 {
     text-align: center;
 }
 
-.mx_IntegrationsManager_error {
+.mx_IntegrationManager_error {
     text-align: center;
     padding-top: 20px;
 }
 
-.mx_IntegrationsManager_error h3 {
+.mx_IntegrationManager_error h3 {
     color: $warning-color;
 }

res/css/views/settings/_SetIntegrationManager.scss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SetIntegrationManager .mx_Field_input {
-    @mixin mx_Settings_fullWidthField;
-}
-
 .mx_SetIntegrationManager {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -32,6 +28,10 @@ limitations under the License.
     padding-left: 5px;
 }
 
-.mx_SetIntegrationManager_tooltip {
-    @mixin mx_Settings_tooltip;
+.mx_SetIntegrationManager .mx_ToggleSwitch {
+    display: inline-block;
+    float: right;
+    top: 9px;
+
+    @mixin mx_Settings_fullWidthField;
 }