imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
 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
commit 00b1a03a3e
171 changed files with 5309 additions and 4610 deletions
Download patch file Download diff file Expand all files Collapse all files

8
res/css/_common.scss
View file

@ -208,12 +208,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 0;
}
/* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
// These are magic constants which are excluded from tinting, to let themes
// (which only have CSS, unlike skins) tell the app what their non-tinted
// colourscheme is by inspecting the stylesheet DOM.
@ -262,7 +256,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
font-weight: 300;
font-size: $font-15px;
position: relative;
padding: 25px 30px 30px 30px;
padding: 24px;
max-height: 80%;
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
border-radius: 8px;

5
res/css/_components.scss
View file

@ -26,7 +26,7 @@
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_GroupFilterPanel.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserMenu.scss";
@ -82,8 +82,6 @@
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_ServerOfflineDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@ -142,6 +140,7 @@
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
@import "./views/messages/_MJitsiWidgetEvent.scss";
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";

2
res/css/structures/_CustomRoomTagPanel.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
}
.mx_CustomRoomTagPanel {
background-color: $tagpanel-bg-color;
background-color: $groupFilterPanel-bg-color;
max-height: 40vh;
}

34
res/css/structures/_TagPanel.scss → res/css/structures/_GroupFilterPanel.scss
View file

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_TagPanel {
.mx_GroupFilterPanel {
flex: 1;
background-color: $tagpanel-bg-color;
background-color: $groupFilterPanel-bg-color;
cursor: pointer;
display: flex;
@ -26,49 +26,49 @@ limitations under the License.
min-height: 0;
}
.mx_TagPanel_items_selected {
.mx_GroupFilterPanel_items_selected {
cursor: pointer;
}
.mx_TagPanel .mx_TagPanel_divider {
.mx_GroupFilterPanel .mx_GroupFilterPanel_divider {
height: 0px;
width: 90%;
border: none;
border-bottom: 1px solid $tagpanel-divider-color;
border-bottom: 1px solid $groupFilterPanel-divider-color;
}
.mx_TagPanel .mx_TagPanel_scroller {
.mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
flex-grow: 1;
width: 100%;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer {
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 6px;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
.mx_GroupFilterPanel .mx_GroupFilterPanel_tagTileContainer > div {
margin: 6px 0;
}
.mx_TagPanel .mx_TagTile {
.mx_GroupFilterPanel .mx_TagTile {
// opacity: 0.5;
position: relative;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_prototype {
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
padding: 3px;
}
.mx_TagPanel .mx_TagTile:focus,
.mx_TagPanel .mx_TagTile:hover,
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
.mx_GroupFilterPanel .mx_TagTile:focus,
.mx_GroupFilterPanel .mx_TagTile:hover,
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected {
// opacity: 1;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
background-color: $primary-bg-color;
border-radius: 6px;
}
@ -108,7 +108,7 @@ limitations under the License.
}
}
.mx_TagPanel .mx_TagTile_plus {
.mx_GroupFilterPanel .mx_TagTile_plus {
margin-bottom: 12px;
height: 32px;
width: 32px;
@ -132,7 +132,7 @@ limitations under the License.
}
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
height: 100%;
background-color: $accent-color;
@ -142,7 +142,7 @@ limitations under the License.
border-radius: 0 3px 3px 0;
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
.mx_GroupFilterPanel .mx_TagTile.mx_AccessibleButton:focus {
filter: none;
}

22
res/css/structures/_LeftPanel.scss
View file

@ -14,29 +14,29 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$tagPanelWidth: 56px; // only applies in this file, used for calculations
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
.mx_LeftPanel {
background-color: $roomlist-bg-color;
min-width: 260px;
max-width: 50%;
// Create a row-based flexbox for the TagPanel and the room list
// Create a row-based flexbox for the GroupFilterPanel and the room list
display: flex;
.mx_LeftPanel_tagPanelContainer {
.mx_LeftPanel_GroupFilterPanelContainer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: $tagPanelWidth;
flex-basis: $groupFilterPanelWidth;
height: 100%;
// Create another flexbox so the TagPanel fills the container
// Create another flexbox so the GroupFilterPanel fills the container
display: flex;
// TagPanel handles its own CSS
// GroupFilterPanel handles its own CSS
}
&:not(.mx_LeftPanel_hasTagPanel) {
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
.mx_LeftPanel_roomListContainer {
width: 100%;
}
@ -45,7 +45,7 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel_roomListContainer {
width: calc(100% - $tagPanelWidth);
width: calc(100% - $groupFilterPanelWidth);
background-color: $roomlist-bg-color;
// Create another flexbox (this time a column) for the room list components
@ -169,10 +169,10 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
&.mx_LeftPanel_hasTagPanel {
width: calc(68px + $tagPanelWidth) !important;
&.mx_LeftPanel_hasGroupFilterPanel {
width: calc(68px + $groupFilterPanelWidth) !important;
}
&:not(.mx_LeftPanel_hasTagPanel) {
&:not(.mx_LeftPanel_hasGroupFilterPanel) {
width: 68px !important;
}

4
res/css/structures/_RoomDirectory.scss
View file

@ -133,6 +133,10 @@ limitations under the License.
.mx_RoomDirectory_topic {
cursor: initial;
color: $light-fg-color;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.mx_RoomDirectory_alias {

21
res/css/structures/_TabbedView.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_TabbedView {
margin: 0;
padding: 0 0 0 58px;
padding: 0 0 0 16px;
display: flex;
flex-direction: column;
position: absolute;
@ -25,6 +25,7 @@ limitations under the License.
bottom: 0;
left: 0;
right: 0;
margin-top: 8px;
}
.mx_TabbedView_tabLabels {
@ -35,13 +36,13 @@ limitations under the License.
}
.mx_TabbedView_tabLabel {
display: flex;
align-items: center;
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: $font-14px;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
padding: 8px 0;
border-radius: 8px;
font-size: $font-13px;
position: relative;
}
@ -51,9 +52,8 @@ limitations under the License.
}
.mx_TabbedView_maskedIcon {
margin-left: 6px;
margin-right: 9px;
margin-top: 1px;
margin-left: 8px;
margin-right: 16px;
width: 16px;
height: 16px;
display: inline-block;
@ -65,10 +65,9 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 22px;
height: 16px;
mask-position: center;
content: '';
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {

1
res/css/views/dialogs/_RoomSettingsDialog.scss
View file

@ -48,7 +48,6 @@ limitations under the License.
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
padding-left: 40px;
padding-right: 80px;
}

50
res/css/views/dialogs/_SetMxIdDialog.scss
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;
}

34
res/css/views/dialogs/_SetPasswordDialog.scss
View file

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

1
res/css/views/dialogs/_SettingsDialog.scss
View file

@ -36,7 +36,6 @@ limitations under the License.
}
.mx_Dialog_title {
text-align: center;
margin-bottom: 24px;
}
}

55
res/css/views/messages/_MJitsiWidgetEvent.scss Normal file
View file

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

3
res/css/views/right_panel/_BaseCard.scss
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 {

91
res/css/views/rooms/_AppsDrawer.scss
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;

2
res/css/views/rooms/_MemberInfo.scss
View file

@ -70,7 +70,7 @@ limitations under the License.
}
.mx_MemberInfo_avatar {
background: $tagpanel-bg-color;
background: $groupFilterPanel-bg-color;
margin-bottom: 16px;
}

20
res/css/views/rooms/_MemberList.scss
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 {

2
res/css/views/rooms/_MessageComposer.scss
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;
}
}

2
res/css/views/settings/_AvatarSetting.scss
View file

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

16
res/css/views/voip/_CallContainer.scss
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;
}