Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into travis/blurhash
Conflicts: package.json src/ContentMessages.tsx yarn.lock
This commit is contained in:
Michael Telatynski
commit
660a849cdd
235 changed files with 10534 additions and 4471 deletions
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_DecoratedRoomAvatar, .mx_ExtraTile {
|
||||
position: relative;
|
||||
contain: content;
|
||||
|
||||
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
|
||||
|
|
|
|||
159
res/css/views/dialogs/_ForwardDialog.scss
Normal file
159
res/css/views/dialogs/_ForwardDialog.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
Copyright 2021 Robin Townsend <robin@robin.town>
|
||||
|
||||
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_ForwardDialog {
|
||||
width: 520px;
|
||||
color: $primary-fg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-height: 0;
|
||||
height: 80vh;
|
||||
|
||||
> h3 {
|
||||
margin: 0 0 6px;
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
> .mx_ForwardDialog_preview {
|
||||
max-height: 30%;
|
||||
flex-shrink: 0;
|
||||
overflow: scroll;
|
||||
|
||||
div {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// When forwarding messages from encrypted rooms, EventTile will complain
|
||||
// that our preview is unencrypted, which doesn't actually matter
|
||||
.mx_EventTile_e2eIcon_unencrypted {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// We also hide download links to not encourage users to try interacting
|
||||
.mx_MFileBody_download {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> hr {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 1px solid $input-border-color;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
> .mx_ForwardList {
|
||||
display: contents;
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.mx_ForwardList_content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_ForwardList_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_ForwardList_results {
|
||||
&:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_ForwardList_entry {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
}
|
||||
|
||||
.mx_ForwardList_roomButton {
|
||||
display: flex;
|
||||
margin-right: 12px;
|
||||
min-width: 0;
|
||||
|
||||
.mx_DecoratedRoomAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_ForwardList_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ForwardList_sendButton {
|
||||
position: relative;
|
||||
|
||||
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
|
||||
// Hide the "Send" label while preserving button size
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_ForwardList_sendIcon, .mx_NotificationBadge {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge {
|
||||
// Match the failed to send indicator's color with the disabled button
|
||||
background-color: $button-danger-disabled-fg-color;
|
||||
}
|
||||
|
||||
&.mx_ForwardList_sending .mx_ForwardList_sendIcon {
|
||||
background-color: $button-primary-bg-color;
|
||||
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&.mx_ForwardList_sent .mx_ForwardList_sendIcon {
|
||||
background-color: $button-primary-bg-color;
|
||||
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,9 @@ limitations under the License.
|
|||
.mx_InviteDialog_addressBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
|
||||
// for the user section gets weird.
|
||||
margin: 8px 45px 0 0;
|
||||
|
||||
.mx_InviteDialog_editor {
|
||||
flex: 1;
|
||||
|
|
@ -73,7 +76,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_InviteDialog_section {
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
h3 {
|
||||
font-size: $font-12px;
|
||||
|
|
@ -82,6 +85,14 @@ limitations under the License.
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_subname {
|
||||
margin-bottom: 10px;
|
||||
margin-top: -10px; // HACK: Positioning with margins is bad
|
||||
|
|
@ -90,6 +101,63 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
|
||||
padding: 8px 0 16px 0;
|
||||
font-size: $font-14px;
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_footer {
|
||||
border-top: 1px solid $input-border-color;
|
||||
|
||||
> h3 {
|
||||
margin: 12px 0;
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_footer_link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
border: solid 1px $light-fg-color;
|
||||
padding: 8px;
|
||||
|
||||
> a {
|
||||
text-decoration: none;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_footer_link_copy {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
display: inherit;
|
||||
|
||||
> div {
|
||||
mask-image: url($copy-button-url);
|
||||
background-color: $message-action-bar-fg-color;
|
||||
margin-left: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -142,6 +210,7 @@ limitations under the License.
|
|||
|
||||
.mx_InviteDialog_roomTile_nameStack {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_name {
|
||||
|
|
@ -157,6 +226,13 @@ limitations under the License.
|
|||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_name,
|
||||
.mx_InviteDialog_roomTile_userId {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_time {
|
||||
text-align: right;
|
||||
font-size: $font-12px;
|
||||
|
|
@ -212,22 +288,29 @@ limitations under the License.
|
|||
|
||||
.mx_InviteDialog {
|
||||
// Prevent the dialog from jumping around randomly when elements change.
|
||||
height: 590px;
|
||||
height: 600px;
|
||||
padding-left: 20px; // the design wants some padding on the left
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_InviteDialog_content {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userSections {
|
||||
margin-top: 10px;
|
||||
margin-top: 4px;
|
||||
overflow-y: auto;
|
||||
padding-right: 45px;
|
||||
height: 455px; // mx_InviteDialog's height minus some for the upper elements
|
||||
padding: 0 45px 4px 0;
|
||||
height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
|
||||
}
|
||||
|
||||
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
|
||||
// for the user section gets weird.
|
||||
.mx_InviteDialog_helpText,
|
||||
.mx_InviteDialog_addressBar {
|
||||
margin-right: 45px;
|
||||
.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
|
||||
height: calc(100% - 175px);
|
||||
}
|
||||
|
||||
.mx_InviteDialog_helpText {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@ limitations under the License.
|
|||
margin-left: 20px;
|
||||
display: inherit;
|
||||
}
|
||||
.mx_ShareDialog_matrixto_copy > div {
|
||||
.mx_ShareDialog_matrixto_copy::after {
|
||||
content: "";
|
||||
mask-image: url($copy-button-url);
|
||||
background-color: $message-action-bar-fg-color;
|
||||
margin-left: 5px;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_image_wrapper {
|
||||
pointer-events: initial;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -30,7 +31,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_image {
|
||||
pointer-events: all;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_info_wrapper {
|
||||
pointer-events: all;
|
||||
pointer-events: initial;
|
||||
padding-left: 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -63,7 +63,7 @@ limitations under the License.
|
|||
|
||||
.mx_ImageView_toolbar {
|
||||
padding-right: 16px;
|
||||
pointer-events: all;
|
||||
pointer-events: initial;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,11 @@ limitations under the License.
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.mx_InlineSpinner_spin img {
|
||||
.mx_InlineSpinner img, .mx_InlineSpinner_icon {
|
||||
margin: 0px 6px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
.mx_InlineSpinner_icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@ limitations under the License.
|
|||
top: 0;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
.mx_MiniAvatarUploader_indicator {
|
||||
position: absolute;
|
||||
|
||||
height: 26px;
|
||||
|
|
@ -37,27 +36,22 @@ limitations under the License.
|
|||
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $primary-bg-color;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $secondary-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/element-icons/camera.svg');
|
||||
mask-size: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
.mx_MiniAvatarUploader_cameraIcon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.mx_MiniAvatarUploader_busy::after {
|
||||
background: url("$(res)/img/spinner.gif") no-repeat center;
|
||||
background-size: 80%;
|
||||
mask: unset;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/element-icons/camera.svg');
|
||||
mask-size: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,3 +26,19 @@ limitations under the License.
|
|||
.mx_MatrixChat_middlePanel .mx_Spinner {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Spinner_icon {
|
||||
background-color: $primary-fg-color;
|
||||
mask: url('$(res)/img/spinner.svg');
|
||||
mask-size: contain;
|
||||
animation: 1.1s steps(12, end) infinite spin;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,11 +20,12 @@ limitations under the License.
|
|||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
height: 32px;
|
||||
line-height: $font-24px;
|
||||
border-radius: 4px;
|
||||
background: $message-action-bar-bg-color;
|
||||
top: -26px;
|
||||
border-radius: 8px;
|
||||
background: $primary-bg-color;
|
||||
border: 1px solid $input-border-color;
|
||||
top: -32px;
|
||||
right: 8px;
|
||||
user-select: none;
|
||||
// Ensure the action bar appears above over things, like the read marker.
|
||||
|
|
@ -51,31 +52,19 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid $message-action-bar-border-color;
|
||||
margin-left: -1px;
|
||||
margin: 2px;
|
||||
|
||||
&:hover {
|
||||
border-color: $message-action-bar-hover-border-color;
|
||||
background: $roomlist-button-bg-color;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mx_MessageActionBar_maskButton {
|
||||
width: 27px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_maskButton::after {
|
||||
|
|
@ -88,7 +77,11 @@ limitations under the License.
|
|||
mask-size: 18px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $message-action-bar-fg-color;
|
||||
background-color: $secondary-fg-color;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_maskButton:hover::after {
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_reactButton::after {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SenderProfile_name {
|
||||
.mx_SenderProfile_displayName {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_SenderProfile_mxid {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin-left: 5px;
|
||||
opacity: 0.5; // Match mx_TextualEvent
|
||||
}
|
||||
|
|
|
|||
90
res/css/views/right_panel/_PinnedMessagesCard.scss
Normal file
90
res/css/views/right_panel/_PinnedMessagesCard.scss
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/*
|
||||
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_PinnedMessagesCard {
|
||||
padding-top: 0;
|
||||
|
||||
.mx_BaseCard_header {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid $menu-border-color;
|
||||
|
||||
> h2 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-18px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.mx_BaseCard_close {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessagesCard_empty {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
margin: auto 40px;
|
||||
|
||||
.mx_PinnedMessagesCard_MessageActionBar {
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
line-height: $font-24px;
|
||||
border-radius: 8px;
|
||||
background: $primary-bg-color;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 1px;
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mx_MessageActionBar_maskButton {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_optionsButton {
|
||||
background: $roomlist-button-bg-color;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -36,6 +36,7 @@ limitations under the License.
|
|||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_avatar {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
$left-gutter: 64px;
|
||||
$hover-select-border: 4px;
|
||||
|
||||
.mx_EventTile {
|
||||
max-width: 100%;
|
||||
|
|
@ -85,12 +86,11 @@ $left-gutter: 64px;
|
|||
}
|
||||
|
||||
.mx_EventTile_isEditing .mx_MessageTimestamp {
|
||||
visibility: hidden !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_MessageTimestamp {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
left: 0px;
|
||||
text-align: center;
|
||||
|
|
@ -104,7 +104,7 @@ $left-gutter: 64px;
|
|||
.mx_EventTile_line, .mx_EventTile_reply {
|
||||
position: relative;
|
||||
padding-left: $left-gutter;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomView_timeline_rr_enabled,
|
||||
|
|
@ -142,27 +142,8 @@ $left-gutter: 64px;
|
|||
line-height: 57px !important;
|
||||
}
|
||||
|
||||
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
|
||||
left: 3px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
// The first set is to handle the 'group layout' (default) and the second for the IRC layout
|
||||
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
|
||||
.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
|
||||
visibility: visible;
|
||||
left: calc(-$hover-select-border);
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_MessageActionBar,
|
||||
|
|
@ -177,7 +158,7 @@ $left-gutter: 64px;
|
|||
*/
|
||||
.mx_EventTile_selected > .mx_EventTile_line {
|
||||
border-left: $accent-color 4px solid;
|
||||
padding-left: 60px;
|
||||
padding-left: calc($left-gutter - $hover-select-border);
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
|
|
@ -190,8 +171,12 @@ $left-gutter: 64px;
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: calc($left-gutter + 18px);
|
||||
}
|
||||
|
||||
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: 78px;
|
||||
padding-left: calc($left-gutter + 18px - $hover-select-border);
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_line,
|
||||
|
|
@ -280,6 +265,7 @@ $left-gutter: 64px;
|
|||
height: $font-14px;
|
||||
width: $font-14px;
|
||||
|
||||
will-change: left, top;
|
||||
transition:
|
||||
left var(--transition-short) ease-out,
|
||||
top var(--transition-standard) ease-out;
|
||||
|
|
@ -426,7 +412,7 @@ $left-gutter: 64px;
|
|||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
|
||||
padding-left: 60px;
|
||||
padding-left: calc($left-gutter - $hover-select-border);
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
|
||||
|
|
@ -444,7 +430,7 @@ $left-gutter: 64px;
|
|||
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: 78px;
|
||||
padding-left: calc($left-gutter + 18px - $hover-select-border);
|
||||
}
|
||||
|
||||
/* End to end encryption stuff */
|
||||
|
|
@ -456,7 +442,7 @@ $left-gutter: 64px;
|
|||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
|
||||
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
|
||||
width: $MessageTimestamp_width_hover;
|
||||
left: calc(-$hover-select-border);
|
||||
}
|
||||
|
||||
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@ $left-gutter: 64px;
|
|||
margin-left: $left-gutter;
|
||||
}
|
||||
|
||||
> .mx_EventTile_line {
|
||||
padding-left: $left-gutter;
|
||||
}
|
||||
|
||||
> .mx_EventTile_avatar {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -43,10 +39,6 @@ $left-gutter: 64px;
|
|||
line-height: $font-22px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_info .mx_EventTile_line {
|
||||
padding-left: calc($left-gutter + 18px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact layout overrides */
|
||||
|
|
|
|||
|
|
@ -115,8 +115,7 @@ $irc-line-height: $font-18px;
|
|||
.mx_EventTile_line {
|
||||
.mx_EventTile_e2eIcon,
|
||||
.mx_TextualEvent,
|
||||
.mx_MTextBody,
|
||||
.mx_ReplyThread_wrapper_empty {
|
||||
.mx_MTextBody {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -177,16 +176,13 @@ $irc-line-height: $font-18px;
|
|||
.mx_SenderProfile_hover {
|
||||
background-color: $primary-bg-color;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
|
||||
> .mx_SenderProfile_name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: var(--name-width);
|
||||
text-align: end;
|
||||
}
|
||||
> .mx_SenderProfile_displayName {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: var(--name-width);
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -211,7 +207,7 @@ $irc-line-height: $font-18px;
|
|||
background: transparent;
|
||||
|
||||
> span {
|
||||
> .mx_SenderProfile_name {
|
||||
> .mx_SenderProfile_displayName {
|
||||
min-width: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ limitations under the License.
|
|||
|
||||
.mx_JumpToBottomButton_scrollDown {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ limitations under the License.
|
|||
margin: 40px 0 48px 64px;
|
||||
|
||||
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
|
||||
&::before, &::after {
|
||||
content: unset;
|
||||
.mx_MiniAvatarUploader_indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,62 +16,91 @@ limitations under the License.
|
|||
|
||||
.mx_PinnedEventTile {
|
||||
min-height: 40px;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
border-radius: 5px; // for the hover
|
||||
}
|
||||
padding: 0 4px 12px;
|
||||
|
||||
.mx_PinnedEventTile:hover {
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"avatar name remove"
|
||||
"content content content"
|
||||
"footer footer footer";
|
||||
grid-template-rows: max-content auto max-content;
|
||||
grid-template-columns: 24px auto 24px;
|
||||
grid-row-gap: 12px;
|
||||
grid-column-gap: 8px;
|
||||
|
||||
.mx_PinnedEventTile .mx_PinnedEventTile_sender,
|
||||
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
|
||||
color: #868686;
|
||||
font-size: 0.8em;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
& + .mx_PinnedEventTile {
|
||||
padding: 12px 4px;
|
||||
border-top: 1px solid $menu-border-color;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
|
||||
padding-left: 15px;
|
||||
display: none;
|
||||
}
|
||||
.mx_PinnedEventTile_senderAvatar {
|
||||
grid-area: avatar;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mx_PinnedEventTile_sender {
|
||||
grid-area: name;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_actions {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
display: none;
|
||||
}
|
||||
.mx_PinnedEventTile_unpinButton {
|
||||
visibility: hidden;
|
||||
grid-area: remove;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 8px;
|
||||
|
||||
.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
|
||||
display: block;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
//top: 0;
|
||||
//left: 0;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background: $secondary-fg-color;
|
||||
mask-position: center;
|
||||
mask-size: 8px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/image-view/close.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_unpinButton {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mx_PinnedEventTile_message {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_gotoButton {
|
||||
display: inline-block;
|
||||
font-size: 0.7em; // Smaller text to avoid conflicting with the layout
|
||||
}
|
||||
.mx_PinnedEventTile_footer {
|
||||
grid-area: footer;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
|
||||
.mx_PinnedEventTile_message {
|
||||
margin-left: 50px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.mx_PinnedEventTile_timestamp {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: $secondary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
margin-left: 12px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mx_PinnedEventTile_unpinButton {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
/*
|
||||
Copyright 2017 Travis Ralston
|
||||
|
||||
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_PinnedEventsPanel {
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_PinnedEventsPanel_body {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.mx_PinnedEventsPanel_header {
|
||||
margin: 0;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.mx_PinnedEventsPanel_cancel {
|
||||
margin: 12px;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -32,14 +32,14 @@ limitations under the License.
|
|||
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
|
||||
// sliding it into view.
|
||||
&.mx_RoomBreadcrumbs-enter {
|
||||
margin-left: -40px; // 32px for the avatar, 8px for the margin
|
||||
transform: translateX(-40px); // 32px for the avatar, 8px for the margin
|
||||
}
|
||||
&.mx_RoomBreadcrumbs-enter-active {
|
||||
margin-left: 0;
|
||||
transform: translateX(0);
|
||||
|
||||
// Timing function is as-requested by design.
|
||||
// NOTE: The transition time MUST match the value passed to CSSTransition!
|
||||
transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_placeholder {
|
||||
|
|
|
|||
|
|
@ -277,24 +277,6 @@ limitations under the License.
|
|||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_pinnedButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/pin.svg');
|
||||
}
|
||||
|
||||
.mx_RoomHeader_pinsIndicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $pinned-color;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_pinsIndicatorUnread {
|
||||
background-color: $pinned-unread-color;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_RoomHeader_wrapper {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ limitations under the License.
|
|||
&.mx_RoomSublist_headerContainer_sticky {
|
||||
position: fixed;
|
||||
height: 32px; // to match the header container
|
||||
// width set by JS
|
||||
width: calc(100% - 22px);
|
||||
// width set by JS because of a compat issue between Firefox and Chrome
|
||||
width: calc(100% - 15px);
|
||||
}
|
||||
|
||||
// We don't have a top style because the top is dependent on the room list header's
|
||||
|
|
@ -198,6 +198,7 @@ limitations under the License.
|
|||
// as the box model should be top aligned. Happens in both FF and Chromium
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: stretch;
|
||||
|
||||
mask-image: linear-gradient(0deg, transparent, black 4px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ limitations under the License.
|
|||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
|
||||
contain: content; // Not strict as it will break when resizing a sublist vertically
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue