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

Merge remote-tracking branch 'upstream/develop' into task/colors-4

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-10-15 15:23:32 +02:00
commit 71eeb836d9
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
133 changed files with 4235 additions and 1730 deletions
Download patch file Download diff file Expand all files Collapse all files

4
res/css/_components.scss
View file

@ -39,6 +39,7 @@
@import "./structures/_ViewSource.scss";
@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";
@import "./structures/auth/_SetupEncryptionBody.scss";
@import "./views/audio_messages/_AudioPlayer.scss";
@import "./views/audio_messages/_PlayPauseButton.scss";
@import "./views/audio_messages/_PlaybackContainer.scss";
@ -73,6 +74,7 @@
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./views/dialogs/_CommunityPrototypeInviteDialog.scss";
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
@ -201,6 +203,7 @@
@import "./views/right_panel/_UserInfo.scss";
@import "./views/right_panel/_VerificationPanel.scss";
@import "./views/right_panel/_WidgetCard.scss";
@import "./views/right_panel/_ThreadPanel.scss";
@import "./views/room_settings/_AliasSettings.scss";
@import "./views/rooms/_AppsDrawer.scss";
@import "./views/rooms/_Autocomplete.scss";
@ -269,6 +272,7 @@
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/spaces/_SpaceBasicSettings.scss";
@import "./views/spaces/_SpaceChildrenPicker.scss";
@import "./views/spaces/_SpaceCreateMenu.scss";
@import "./views/spaces/_SpacePublicShare.scss";
@import "./views/terms/_InlineTermsAgreement.scss";

1
res/css/structures/_BackdropPanel.scss
View file

@ -34,4 +34,5 @@ limitations under the License.
z-index: 0;
pointer-events: none;
overflow: hidden;
user-select: none;
}

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

@ -79,6 +79,10 @@ limitations under the License.
}
}
.mx_RightPanel_threadsButton::before {
mask-image: url('$(res)/img/element-icons/room/thread.svg');
}
.mx_RightPanel_notifsButton::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
mask-position: center;

11
res/css/structures/_SpaceRoomView.scss
View file

@ -422,7 +422,7 @@ $SpaceRoomViewInnerWidth: 428px;
.mx_SpaceRoomView_inviteTeammates {
// XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
padding: 58px 16px 16px;
padding: 16px;
position: relative;
border-radius: 8px;
background-color: $header-panel-bg-color;
@ -465,8 +465,13 @@ $SpaceRoomViewInnerWidth: 428px;
}
}
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
color: $accent-color;
&::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
background-color: $accent-color;
}
}
}
}

13
res/css/structures/auth/_CompleteSecurity.scss
View file

@ -33,6 +33,19 @@ limitations under the License.
margin: 0 auto;
}
.mx_CompleteSecurity_skip {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 18px;
height: 18px;
background-color: $dialog-close-fg-color;
cursor: pointer;
position: absolute;
right: 24px;
}
.mx_CompleteSecurity_body {
font-size: $font-15px;
}

24
res/css/structures/auth/_SetupEncryptionBody.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2021 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_SetupEncryptionBody_reset {
color: $light-fg-color;
margin-top: $font-14px;
a.mx_SetupEncryptionBody_reset_link:is(:link, :hover, :visited) {
color: $warning-color;
}
}

4
res/css/views/auth/_AuthBody.scss
View file

@ -58,10 +58,6 @@ limitations under the License.
background-color: $authpage-body-bg-color;
}
.mx_Field label {
color: $authpage-primary-color;
}
.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field input:focus + label,

2
res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file

@ -75,7 +75,7 @@ limitations under the License.
@mixin ProgressBarBorderRadius 8px;
}
.mx_AddExistingToSpace_progressText {
.mx_AddExistingToSpaceDialog_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;

66
res/css/views/dialogs/_ConfirmSpaceUserActionDialog.scss Normal file
View file

@ -0,0 +1,66 @@
/*
Copyright 2021 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_ConfirmSpaceUserActionDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
padding: 24px 32px;
}
}
.mx_ConfirmSpaceUserActionDialog {
width: 440px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 520px;
.mx_Dialog_content {
margin: 12px 0;
flex-grow: 1;
overflow-y: auto;
}
.mx_ConfirmUserActionDialog_reasonField {
margin-bottom: 12px;
}
.mx_ConfirmSpaceUserActionDialog_warning {
position: relative;
border-radius: 8px;
padding: 12px 8px 12px 42px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: '';
position: absolute;
left: 10px;
top: calc(50% - 8px); // vertical centering
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
mask-position: center;
}
}
}

16
res/css/views/dialogs/_ConfirmUserActionDialog.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ConfirmUserActionDialog .mx_Dialog_content {
.mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user {
min-height: 48px;
margin-bottom: 24px;
}
@ -22,10 +22,10 @@ limitations under the License.
.mx_ConfirmUserActionDialog_avatar {
float: left;
margin-right: 20px;
margin-top: -2px;
}
.mx_ConfirmUserActionDialog_name {
padding-top: 2px;
font-size: $font-18px;
}
@ -37,16 +37,4 @@ limitations under the License.
font-size: $font-14px;
color: $primary-content;
background-color: $background;
border-radius: 3px;
border: solid 1px $input-border-color;
line-height: $font-36px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 24px;
width: 90%;
}

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

@ -74,6 +74,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
margin-top: -13px; // match height of buttons to prevent height changing
.mx_ProgressBar {
height: 8px;

22
res/css/views/dialogs/_LeaveSpaceDialog.scss
View file

@ -27,33 +27,13 @@ limitations under the License.
display: flex;
flex-direction: column;
flex-wrap: nowrap;
max-height: 520px;
height: 520px;
.mx_Dialog_content {
flex-grow: 1;
margin: 0;
overflow-y: auto;
.mx_RadioButton + .mx_RadioButton {
margin-top: 16px;
}
.mx_SearchBox {
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
border-radius: 8px;
}
.mx_LeaveSpaceDialog_noResults {
display: block;
margin-top: 24px;
}
.mx_LeaveSpaceDialog_section {
margin: 16px 0;
}
.mx_LeaveSpaceDialog_section_warning {
position: relative;
border-radius: 8px;

18
res/css/views/dialogs/_RoomUpgradeWarningDialog.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2019 - 2021 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.
@ -17,6 +17,22 @@ limitations under the License.
.mx_RoomUpgradeWarningDialog {
max-width: 38vw;
width: 38vw;
.mx_RoomUpgradeWarningDialog_progress {
.mx_ProgressBar {
height: 8px;
width: 100%;
@mixin ProgressBarBorderRadius 8px;
}
.mx_RoomUpgradeWarningDialog_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
}
}
}
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {

1
res/css/views/elements/_Field.scss
View file

@ -100,7 +100,6 @@ limitations under the License.
color 0.25s ease-out 0.1s,
transform 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
color: $primary-content;
background-color: transparent;
font-size: $font-14px;
transform: translateY(0);

152
res/css/views/right_panel/_ThreadPanel.scss Normal file
View file

@ -0,0 +1,152 @@
/*
Copyright 2021 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_ThreadPanel {
display: flex;
flex-direction: column;
.mx_BaseCard_header {
padding: 6px 0;
.mx_BaseCard_close {
margin-top: 15px;
}
}
.mx_AccessibleButton.mx_BaseCard_back {
display: none;
}
&__header {
width: calc(100% - 40px);
display: flex;
flex: 1;
justify-content: space-between;
span:first-of-type {
font-weight: 600;
font-size: 15px;
line-height: 18px;
color: $secondary-content;
}
.mx_AccessibleButton {
font-size: 12px;
color: $secondary-content;
}
.mx_ContextualMenu_wrapper {
// It's added here due to some weird error if I pass it directly in the style, even though it's a numeric value, so it's being passed 0 instead.
// The error: react_devtools_backend.js:2526 Warning: `NaN` is an invalid value for the `top` css style property.
top: 43px;
}
.mx_ContextualMenu {
position: initial;
span:first-of-type {
font-weight: 600;
font-size: 12px;
color: $primary-content;
}
font-size: 12px;
color: $secondary-content;
}
.mx_ThreadPanel_Header_FilterOptionItem {
display: flex;
flex-grow: 1;
justify-content: space-between;
flex-direction: column;
overflow: visible;
width: 100%;
padding: 20px;
padding-left: 30px;
position: relative;
&:hover {
background-color: $event-selected-color;
}
&[aria-selected="true"] {
&::before {
content: "";
width: 12px;
height: 12px;
grid-column: 1;
grid-row: 1;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 22px;
left: 10px;
background-color: $primary-content;
}
}
}
}
.mx_RoomView_messageListWrapper {
background-color: $background;
border-radius: 8px;
padding-top: 8px;
padding-bottom: 12px;
}
.mx_ScrollPanel {
.mx_RoomView_MessageList {
padding: 0;
}
}
.mx_EventTile, .mx_EventListSummary {
// Account for scrollbar when hovering
width: calc(100% - 3px);
margin: 0 2px;
.mx_MessageTimestamp {
// We need to add !important here due to some enormous selectors overriding it anyways
// See: _EventTile.scss:241
left: unset !important;
right: 0 !important;
top: 16px;
}
.mx_EventTile_line.mx_EventTile_line {
position: unset;
}
.mx_ThreadInfo {
position: relative;
padding-right: 11px;
&::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -16px;
height: 1px;
width: 100%;
border-bottom: 1px solid $message-action-bar-border-color;
}
}
.mx_DateSeparator {
display: none;
}
}
}

4
res/css/views/rooms/_MessageComposer.scss
View file

@ -252,6 +252,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
}
.mx_MessageComposer_poll::before {
mask-image: url('$(res)/img/element-icons/room/composer/poll.svg');
}
.mx_MessageComposer_voiceMessage::before {
mask-image: url('$(res)/img/voip/mic-on-mask.svg');
}

25
res/css/views/rooms/_RoomSublist.scss
View file

@ -22,6 +22,12 @@ limitations under the License.
display: none;
}
&:not(.mx_RoomSublist_minimized) {
.mx_RoomSublist_headerContainer {
height: auto;
}
}
.mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy
display: flex;
@ -41,9 +47,7 @@ limitations under the License.
// The combined height must be set in the LeftPanel component for sticky headers
// to work correctly.
padding-bottom: 8px;
// Allow the container to collapse on itself if its children
// are not in the normal document flow
max-height: 24px;
height: 24px;
color: $roomlist-header-color;
.mx_RoomSublist_stickable {
@ -172,14 +176,6 @@ limitations under the License.
}
}
// In the general case, we reserve space for each sublist header to prevent
// scroll jumps when they become sticky. However, that leaves a gap when
// scrolled to the top above the first sublist (whose header can only ever
// stick to top), so we make sure to exclude the first visible sublist.
&:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_headerContainer {
height: 24px;
}
.mx_RoomSublist_resizeBox {
position: relative;
@ -395,7 +391,7 @@ limitations under the License.
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 288px;
height: 240px;
&::before {
background: $roomsublist-skeleton-ui-bg;
@ -410,3 +406,8 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
}
}
.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
width: 32px; // cut off the horizontal lines in the svg
margin-left: 10px; // align with sublist + buttons
}

28
res/css/views/settings/_DevicesPanel.scss
View file

@ -15,23 +15,26 @@ limitations under the License.
*/
.mx_DevicesPanel {
display: table;
table-layout: fixed;
width: 880px;
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
border-spacing: 10px;
}
.mx_DevicesPanel_header {
display: table-header-group;
font-weight: bold;
}
.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
height: 48px; // make this tall so the table doesn't move down when the delete button appears
width: 20%;
}
.mx_DevicesPanel_header > div {
display: table-cell;
.mx_DevicesPanel_header th {
padding: 0px;
text-align: left;
vertical-align: middle;
}
@ -43,16 +46,9 @@ limitations under the License.
width: 30%;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
width: 20%;
}
.mx_DevicesPanel_device {
display: table-row;
}
.mx_DevicesPanel_device > div {
display: table-cell;
.mx_DevicesPanel_device td {
vertical-align: baseline;
padding: 0px;
}
.mx_DevicesPanel_myDevice {

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

@ -67,5 +67,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link {
padding-left: 0; // to align with left side
padding-right: 0;
margin-right: 10px;
}
}

7
res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
View file

@ -14,13 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SecurityUserSettingsTab .mx_DevicesPanel {
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
}
.mx_SecurityUserSettingsTab_deviceInfo {
display: table;
padding-left: 0;

35
res/css/views/spaces/_SpaceChildrenPicker.scss Normal file
View file

@ -0,0 +1,35 @@
/*
Copyright 2021 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_SpaceChildrenPicker {
margin: 16px 0;
.mx_RadioButton + .mx_RadioButton {
margin-top: 16px;
}
.mx_SearchBox {
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
border-radius: 8px;
}
.mx_SpaceChildrenPicker_noResults {
display: block;
margin-top: 24px;
}
}