Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/modal-widgets

 Conflicts:
	src/@types/global.d.ts
	src/FromWidgetPostMessageApi.js
	src/WidgetMessaging.js
	src/widgets/WidgetApi.ts
This commit is contained in:
Michael Telatynski
2020-10-19 19:46:07 +01:00
171 changed files with 5309 additions and 4610 deletions
@@ -48,7 +48,6 @@ limitations under the License.
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
padding-left: 40px;
padding-right: 80px;
}
-50
View File
@@ -1,50 +0,0 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations 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_SetMxIdDialog .mx_Dialog_title {
padding-right: 40px;
}
.mx_SetMxIdDialog_input_group {
display: flex;
}
.mx_SetMxIdDialog_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: $font-15px;
width: 100%;
max-width: 280px;
}
.mx_SetMxIdDialog_input.error,
.mx_SetMxIdDialog_input.error:focus {
border: 1px solid $warning-color;
}
.mx_SetMxIdDialog_input_group .mx_Spinner {
height: 37px;
padding-left: 10px;
justify-content: flex-start;
}
.mx_SetMxIdDialog .success {
color: $accent-color;
}
@@ -1,34 +0,0 @@
/*
Copyright 2017 Vector Creations 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_SetPasswordDialog_change_password input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: $font-15px;
max-width: 280px;
margin-bottom: 10px;
}
.mx_SetPasswordDialog_change_password_button {
margin-top: 68px;
}
.mx_SetPasswordDialog .mx_Dialog_content {
margin-bottom: 0px;
}
@@ -36,7 +36,6 @@ limitations under the License.
}
.mx_Dialog_title {
text-align: center;
margin-bottom: 24px;
}
}
@@ -0,0 +1,55 @@
/*
Copyright 2020 The Matrix.org Foundation 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_MJitsiWidgetEvent {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
&::before {
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $composer-e2e-icon-color; // XXX: Variable abuse
margin-top: 4px;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
.mx_MJitsiWidgetEvent_title {
font-weight: 600;
font-size: $font-15px;
grid-column: 2;
grid-row: 1;
}
.mx_MJitsiWidgetEvent_subtitle {
grid-column: 2;
grid-row: 2;
}
.mx_MJitsiWidgetEvent_title,
.mx_MJitsiWidgetEvent_subtitle {
overflow-wrap: break-word;
}
}
+1 -2
View File
@@ -40,6 +40,7 @@ limitations under the License.
width: 20px;
margin: 12px;
top: 0;
border-radius: 10px;
&::before {
content: "";
@@ -55,7 +56,6 @@ limitations under the License.
}
.mx_BaseCard_back {
border-radius: 4px;
left: 0;
&::before {
@@ -66,7 +66,6 @@ limitations under the License.
}
.mx_BaseCard_close {
border-radius: 10px;
right: 0;
&::before {
+3 -88
View File
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$MiniAppTileHeight: 114px;
$MiniAppTileHeight: 200px;
.mx_AppsDrawer {
margin: 5px 5px 5px 18px;
@@ -50,10 +50,6 @@ $MiniAppTileHeight: 114px;
}
}
.mx_AppsDrawer_hidden {
display: none;
}
.mx_AppsContainer {
display: flex;
flex-direction: row;
@@ -78,21 +74,7 @@ $MiniAppTileHeight: 114px;
font-size: $font-12px;
}
.mx_AddWidget_button_full_width {
max-width: 960px;
}
.mx_SetAppURLDialog_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-hairline-color;
background-color: $primary-bg-color;
font-size: $font-15px;
}
.mx_AppTile {
max-width: 960px;
width: 50%;
border: 5px solid $widget-menu-bar-bg-color;
border-radius: 4px;
@@ -105,7 +87,6 @@ $MiniAppTileHeight: 114px;
}
.mx_AppTileFullWidth {
max-width: 960px;
width: 100%;
margin: 0;
padding: 0;
@@ -116,7 +97,6 @@ $MiniAppTileHeight: 114px;
}
.mx_AppTile_mini {
max-width: 960px;
width: 100%;
margin: 0;
padding: 0;
@@ -220,9 +200,10 @@ $MiniAppTileHeight: 114px;
}
.mx_AppTileBody_mini {
height: 112px;
height: $MiniAppTileHeight;
width: 100%;
overflow: hidden;
border-radius: 8px;
}
.mx_AppTile .mx_AppTileBody,
@@ -248,72 +229,6 @@ $MiniAppTileHeight: 114px;
display: block;
}
.mx_AppTileMenuBarWidgetPadding {
margin-right: 5px;
}
.mx_AppIconTile {
background-color: $lightbox-bg-color;
border: 1px solid rgba(0, 0, 0, 0);
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 3px;
margin: 5px;
display: inline-block;
}
.mx_AppIconTile.mx_AppIconTile_active {
color: $accent-color;
border-color: $accent-color;
}
.mx_AppIconTile:hover {
border: 1px solid $accent-color;
box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
}
.mx_AppIconTile_content {
padding: 2px 16px;
height: 60px;
overflow: hidden;
}
.mx_AppIconTile_content h4 {
margin-top: 5px;
margin-bottom: 2px;
}
.mx_AppIconTile_content p {
margin-top: 0;
margin-bottom: 5px;
font-size: smaller;
}
.mx_AppIconTile_image {
padding: 10px;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
}
.mx_AppIconTile_imageContainer {
text-align: center;
width: 100%;
background-color: white;
border-radius: 3px 3px 0 0;
height: 155px;
display: flex;
justify-content: center;
align-items: center;
}
form.mx_Custom_Widget_Form div {
margin-top: 10px;
margin-bottom: 10px;
}
.mx_AppPermissionWarning {
text-align: center;
background-color: $widget-menu-bar-bg-color;
+1 -1
View File
@@ -70,7 +70,7 @@ limitations under the License.
}
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
background: $groupFilterPanel-bg-color;
margin-bottom: 16px;
}
+15 -5
View File
@@ -96,11 +96,21 @@ limitations under the License.
}
.mx_MemberList_invite span {
background-image: url('$(res)/img/element-icons/room/invite.svg');
background-repeat: no-repeat;
background-position: center left;
background-size: 20px;
padding: 8px 0 8px 25px;
padding: 8px 0;
display: inline-flex;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-image: url('$(res)/img/element-icons/room/invite.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px;
width: 20px;
height: 20px;
margin-right: 5px;
}
}
.mx_MemberList_inviteCommunity span {
+1 -1
View File
@@ -217,7 +217,7 @@ limitations under the License.
}
}
&.mx_MessageComposer_hangup::before {
&.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
background-color: $warning-color;
}
}
@@ -16,6 +16,7 @@ limitations under the License.
.mx_AvatarSetting_avatar {
width: 90px;
min-width: 90px; // so it doesn't get crushed by the flexbox in languages with longer words
height: 90px;
margin-top: 8px;
position: relative;
@@ -84,6 +85,7 @@ limitations under the License.
.mx_AvatarSetting_avatarPlaceholder {
display: block;
height: 90px;
width: inherit;
border-radius: 90px;
cursor: pointer;
}
+13 -3
View File
@@ -23,9 +23,16 @@ limitations under the License.
z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
cursor: pointer;
// Disable pointer events for Jitsi widgets to function. Direct
// calls have their own cursor and behaviour, but we need to make
// sure the cursor hits the iframe for Jitsi which will be at a
// different level.
pointer-events: none;
.mx_CallPreview {
pointer-events: initial; // restore pointer events so the user can leave/interact
cursor: pointer;
.mx_VideoView {
width: 350px;
}
@@ -37,7 +44,7 @@ limitations under the License.
}
.mx_AppTile_persistedWrapper div {
min-width: 300px;
min-width: 350px;
}
.mx_IncomingCallBox {
@@ -45,11 +52,14 @@ limitations under the License.
background-color: $primary-bg-color;
padding: 8px;
pointer-events: initial; // restore pointer events so the user can accept/decline
cursor: pointer;
.mx_IncomingCallBox_CallerInfo {
display: flex;
direction: row;
img {
img, .mx_BaseAvatar_initial {
margin: 8px;
}