Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/17686
Conflicts: src/components/views/avatars/RoomAvatar.tsx test/stores/SpaceStore-test.ts test/test-utils.js
This commit is contained in:
Michael Telatynski
commit
de42a00ca4
104 changed files with 2492 additions and 2123 deletions
|
|
@ -16,22 +16,45 @@ limitations under the License.
|
|||
|
||||
.mx_ReplyThread {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mx_ReplyThread .mx_DateSeparator {
|
||||
font-size: 1em !important;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 1px;
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
.mx_ReplyThread_show {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
blockquote.mx_ReplyThread {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 8px;
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid $blockquote-bar-color;
|
||||
border-left: 4px solid $button-bg-color;
|
||||
|
||||
.mx_ReplyThread_show {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color1 {
|
||||
border-left-color: $username-variant1-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color2 {
|
||||
border-left-color: $username-variant2-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color3 {
|
||||
border-left-color: $username-variant3-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color4 {
|
||||
border-left-color: $username-variant4-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color5 {
|
||||
border-left-color: $username-variant5-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color6 {
|
||||
border-left-color: $username-variant6-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color7 {
|
||||
border-left-color: $username-variant7-color;
|
||||
}
|
||||
|
||||
&.mx_ReplyThread_color8 {
|
||||
border-left-color: $username-variant8-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ limitations under the License.
|
|||
width: $font-16px;
|
||||
}
|
||||
|
||||
> input[type=radio] {
|
||||
input[type=radio] {
|
||||
// Remove the OS's representation
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -112,6 +112,12 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_innerLabel {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_outlined {
|
||||
|
|
|
|||
77
res/css/views/elements/_TagComposer.scss
Normal file
77
res/css/views/elements/_TagComposer.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/*
|
||||
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_TagComposer {
|
||||
.mx_TagComposer_input {
|
||||
display: flex;
|
||||
|
||||
.mx_Field {
|
||||
flex: 1;
|
||||
margin: 0; // override from field styles
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
min-width: 70px;
|
||||
padding: 0; // override from button styles
|
||||
margin-left: 16px; // distance from <Field>
|
||||
}
|
||||
|
||||
.mx_Field, .mx_Field input, .mx_AccessibleButton {
|
||||
// So they look related to each other by feeling the same
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TagComposer_tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px; // this plus 12px from the tags makes 24px from the input
|
||||
|
||||
.mx_TagComposer_tag {
|
||||
padding: 6px 8px 8px 12px;
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
margin-top: 12px;
|
||||
|
||||
// Cheaty way to get an opacified variable colour background
|
||||
&::before {
|
||||
content: '';
|
||||
border-radius: 20px;
|
||||
background-color: $tertiary-fg-color;
|
||||
opacity: 0.15;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Pass through the pointer otherwise we have effectively put a whole div
|
||||
// on top of the component, which makes it hard to interact with buttons.
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
background-image: url('$(res)/img/subtract.svg');
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,12 +83,12 @@ limitations under the License.
|
|||
mask-size: cover;
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
|
||||
background-color: $message-body-panel-icon-fg-color;
|
||||
width: 13px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 9px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
37
res/css/views/messages/_MImageReplyBody.scss
Normal file
37
res/css/views/messages/_MImageReplyBody.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
Copyright 2020 Tulir Asokan <tulir@maunium.net>
|
||||
|
||||
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_MImageReplyBody {
|
||||
display: flex;
|
||||
|
||||
.mx_MImageBody_thumbnail_container {
|
||||
flex: 1;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.mx_MImageReplyBody_info {
|
||||
flex: 1;
|
||||
|
||||
.mx_MImageReplyBody_sender {
|
||||
grid-area: sender;
|
||||
}
|
||||
|
||||
.mx_MImageReplyBody_filename {
|
||||
grid-area: filename;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -198,8 +198,9 @@ $irc-line-height: $font-18px;
|
|||
.mx_ReplyThread {
|
||||
margin: 0;
|
||||
.mx_SenderProfile {
|
||||
order: unset;
|
||||
max-width: unset;
|
||||
width: unset;
|
||||
max-width: var(--name-width);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,28 +22,34 @@ limitations under the License.
|
|||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
|
||||
.mx_ReplyPreview_section {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
|
||||
.mx_ReplyPreview_header {
|
||||
margin: 8px;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_tile {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_cancel {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_clear {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_section {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_header {
|
||||
margin: 12px;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_cancel {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview_clear {
|
||||
clear: both;
|
||||
}
|
||||
|
|
|
|||
119
res/css/views/rooms/_ReplyTile.scss
Normal file
119
res/css/views/rooms/_ReplyTile.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/*
|
||||
Copyright 2020 Tulir Asokan <tulir@maunium.net>
|
||||
|
||||
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_ReplyTile {
|
||||
position: relative;
|
||||
padding: 2px 0;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-16px;
|
||||
|
||||
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
|
||||
mask-image: url("$(res)/img/element-icons/speaker.svg");
|
||||
}
|
||||
|
||||
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
|
||||
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
|
||||
}
|
||||
|
||||
.mx_MFileBody {
|
||||
.mx_MFileBody_info {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.mx_MFileBody_download {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_RedactedBody {
|
||||
padding: 4px 0 2px 20px;
|
||||
|
||||
&::before {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
|
||||
.mx_EventTile_content {
|
||||
$reply-lines: 2;
|
||||
$line-height: $font-22px;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $reply-lines;
|
||||
line-height: $line-height;
|
||||
|
||||
.mx_EventTile_body.mx_EventTile_bigEmoji {
|
||||
line-height: $line-height !important;
|
||||
font-size: $font-14px !important; // Override the big emoji override
|
||||
}
|
||||
|
||||
// Hide line numbers
|
||||
.mx_EventTile_lineNumbers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hack to cut content in <pre> tags too
|
||||
.mx_EventTile_pre_container > pre {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $reply-lines;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote,
|
||||
.markdown-body dl,
|
||||
.markdown-body ol,
|
||||
.markdown-body p,
|
||||
.markdown-body pre,
|
||||
.markdown-body table,
|
||||
.markdown-body ul {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ReplyTile_info {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.mx_SenderProfile {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-17px;
|
||||
|
||||
display: inline-block; // anti-zalgo, with overflow hidden
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// truncate long display names
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
|
@ -193,6 +193,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconCopyLink::before {
|
||||
mask-image: url('$(res)/img/element-icons/link.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile_iconInvite::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/invite.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2015 - 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.
|
||||
|
|
@ -14,82 +14,79 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_UserNotifSettings_tableRow {
|
||||
display: table-row;
|
||||
}
|
||||
.mx_UserNotifSettings {
|
||||
color: $primary-fg-color; // override from default settings page styles
|
||||
|
||||
.mx_UserNotifSettings_inputCell {
|
||||
display: table-cell;
|
||||
padding-bottom: 8px;
|
||||
padding-right: 8px;
|
||||
width: 16px;
|
||||
}
|
||||
.mx_UserNotifSettings_pushRulesTable {
|
||||
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-top: 40px;
|
||||
|
||||
.mx_UserNotifSettings_labelCell {
|
||||
padding-bottom: 8px;
|
||||
width: 400px;
|
||||
display: table-cell;
|
||||
}
|
||||
tr > th {
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_pushRulesTableWrapper {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
tr > th:first-child {
|
||||
text-align: left;
|
||||
font-size: $font-18px;
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_pushRulesTable {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
tr > th:nth-child(n + 2) {
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-12px;
|
||||
vertical-align: middle;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_pushRulesTable thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
tr > td:nth-child(n + 2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_pushRulesTable tbody th {
|
||||
font-weight: 400;
|
||||
}
|
||||
tr > td {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
// Override StyledRadioButton default styles
|
||||
.mx_RadioButton {
|
||||
justify-content: center;
|
||||
|
||||
.mx_UserNotifSettings_keywords {
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
}
|
||||
.mx_RadioButton_content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_devicesTable td {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.mx_RadioButton_spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserNotifSettings_notifTable {
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
.mx_UserNotifSettings_floatingSection {
|
||||
margin-top: 40px;
|
||||
|
||||
.mx_UserNotifSettings_notifTable .mx_Spinner {
|
||||
position: absolute;
|
||||
}
|
||||
& > div:first-child { // section header
|
||||
font-size: $font-18px;
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
||||
.mx_NotificationSound_soundUpload {
|
||||
display: none;
|
||||
}
|
||||
> table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-top: 8px;
|
||||
|
||||
.mx_NotificationSound_browse {
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
tr > td:first-child {
|
||||
// Just for a bit of spacing
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NotificationSound_save {
|
||||
margin-left: 5px;
|
||||
color: white;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
.mx_UserNotifSettings_clearNotifsButton {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mx_NotificationSound_resetSound {
|
||||
margin-top: 5px;
|
||||
color: white;
|
||||
border: $warning-color;
|
||||
background-color: $warning-color;
|
||||
.mx_TagComposer {
|
||||
margin-top: 35px; // lots of distance from the last line of the table
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue