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

Merge branch 'develop' into travis/mjolnir

Browse source
This commit is contained in:
Travis Ralston 2019-11-12 10:00:01 -07:00 • committed by GitHub
commit 6d0b388fa2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
67 changed files with 2146 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.scss
View file

@ -118,6 +118,7 @@
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
@import "./views/messages/_MKeyVerificationRequest.scss";
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";

9
res/css/structures/_AutoHideScrollbar.scss
View file

@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* This file has CSS for both native and non-native scrollbars in an
* order that's fairly logic to read but violates stylelints descending
* specificity rule, so turn it off for this file. It also duplicates
* a selector to separate the hiding/showing from the sizing.
/* This file has CSS for both native and non-native scrollbars in an order
* that's fairly logical to read but duplicates a selector to separate the
* hiding/showing from the sizing.
*/
/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
/* stylelint-disable no-duplicate-selectors */
/*
1. for browsers that support native overlay auto-hiding scrollbars

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

@ -18,6 +18,7 @@ limitations under the License.
order: 2;
flex: 1 1 0;
overflow-y: auto;
display: flex;
}
.mx_FilePanel .mx_RoomView_messageListWrapper {

18
res/css/structures/_GroupView.scss
View file

@ -44,21 +44,29 @@ limitations under the License.
}
.mx_GroupHeader_button {
position: relative;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_GroupHeader_editButton {
.mx_GroupHeader_editButton::before {
mask-image: url('$(res)/img/icons-settings-room.svg');
}
.mx_GroupHeader_shareButton {
.mx_GroupHeader_shareButton::before {
mask-image: url('$(res)/img/icons-share.svg');
}

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

@ -18,6 +18,7 @@ limitations under the License.
order: 2;
flex: 1 1 0;
overflow-y: auto;
display: flex;
}
.mx_NotificationPanel .mx_RoomView_messageListWrapper {

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

@ -50,18 +50,18 @@ limitations under the License.
height: 20px;
width: 20px;
position: relative;
}
.mx_RightPanel_headerButton::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_RightPanel_membersButton::before {

3
res/css/structures/_RoomSubList.scss
View file

@ -51,7 +51,7 @@ limitations under the License.
height: 36px;
}
.mx_RoomSubList_labelContainer:focus-within {
.mx_RoomSubList_labelContainer.focus-visible:focus-within {
background-color: $roomtile-focused-bg-color;
}
@ -151,6 +151,7 @@ limitations under the License.
.mx_RoomSubList_labelContainer {
margin-right: 8px;
margin-left: 2px;
padding: 0;
}
.mx_RoomSubList_addRoom {

4
res/css/views/dialogs/_DevtoolsDialog.scss
View file

@ -135,9 +135,6 @@ limitations under the License.
}
}
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_DevTools_tgl-flip {
+ .mx_DevTools_tgl-btn {
padding: 2px;
@ -192,4 +189,3 @@ limitations under the License.
}
}
}
/* stylelint-enable no-descending-specificity */

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

@ -148,9 +148,6 @@ limitations under the License.
color: $greyed-fg-color;
}
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_Field_valid {
&.mx_Field,
&.mx_Field:focus-within {
@ -174,7 +171,6 @@ limitations under the License.
color: $input-invalid-border-color;
}
}
/* stylelint-enable no-descending-specificity */
.mx_Field_tooltip {
margin-top: -12px;

93
res/css/views/messages/_MKeyVerificationRequest.scss Normal file
View file

@ -0,0 +1,93 @@
/*
Copyright 2019 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_KeyVerification {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
&.mx_KeyVerification_icon::after {
grid-column: 1;
grid-row: 1 / 3;
width: 12px;
height: 16px;
content: "";
mask: url("$(res)/img/e2e/verified.svg");
mask-repeat: no-repeat;
mask-size: 100%;
margin-top: 4px;
background-color: $primary-fg-color;
}
&.mx_KeyVerification_icon_verified::after {
background-color: $accent-color;
}
.mx_KeyVerification_title, .mx_KeyVerification_subtitle, .mx_KeyVerification_state {
overflow-wrap: break-word;
}
.mx_KeyVerification_title {
font-weight: 600;
font-size: 15px;
grid-column: 2;
grid-row: 1;
}
.mx_KeyVerification_subtitle {
grid-column: 2;
grid-row: 2;
}
.mx_KeyVerification_state, .mx_KeyVerification_subtitle {
font-size: 12px;
}
.mx_KeyVerification_state, .mx_KeyVerification_buttons {
grid-column: 3;
grid-row: 1 / 3;
}
.mx_KeyVerification_buttons {
align-items: center;
display: flex;
.mx_AccessibleButton_kind_decline {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
.mx_AccessibleButton_kind_accept {
color: $accent-color;
background-color: $accent-bg-color;
}
[role=button] {
margin: 10px;
padding: 7px 15px;
border-radius: 5px;
height: min-content;
}
}
.mx_KeyVerification_state {
width: 130px;
padding: 10px 20px;
margin: auto 0;
text-align: center;
color: $notice-secondary-color;
}
}

49
res/css/views/rooms/_EventTile.scss
View file

@ -22,6 +22,15 @@ limitations under the License.
position: relative;
}
.mx_EventTile_bubble {
background-color: $dark-panel-bg-color;
padding: 10px;
border-radius: 5px;
margin: 10px auto;
max-width: 75%;
box-sizing: border-box;
}
.mx_EventTile.mx_EventTile_info {
padding-top: 0px;
}
@ -112,6 +121,21 @@ limitations under the License.
line-height: 22px;
}
.mx_EventTile_bubbleContainer {
display: grid;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
margin-right: 0px;
grid-column: 1 / 3;
padding: 0;
}
.mx_EventTile_msgOption {
grid-column: 2;
}
}
.mx_EventTile_reply {
margin-right: 10px;
}
@ -138,12 +162,14 @@ limitations under the License.
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.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.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
visibility: visible;
}
@ -165,8 +191,13 @@ limitations under the License.
}
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
background-color: $event-selected-color;
}
@ -381,10 +412,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
padding-left: 5px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
padding-left: 60px;
@ -465,7 +492,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
}
.mx_EventTile:hover .mx_EventTile_body pre {
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
}
@ -487,6 +515,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
background-image: url($copy-button-url);
}
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
visibility: visible;
}
@ -532,9 +561,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
/* end of overrides */
/* Ordering this block by specificity would require breaking it up into several
chunks, which seems like it would be more confusing to read. */
/* stylelint-disable no-descending-specificity */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile {
padding-top: 4px;
@ -612,4 +638,3 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
}
}
/* stylelint-enable no-descending-specificity */

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

@ -180,34 +180,42 @@ limitations under the License.
}
.mx_MessageComposer_button {
position: relative;
margin-right: 12px;
cursor: pointer;
padding-top: 4px;
height: 20px;
width: 20px;
background-color: $composer-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $composer-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
}
.mx_MessageComposer_upload {
.mx_MessageComposer_upload::before {
mask-image: url('$(res)/img/feather-customised/paperclip.svg');
}
.mx_MessageComposer_hangup {
.mx_MessageComposer_hangup::before {
mask-image: url('$(res)/img/hangup.svg');
}
.mx_MessageComposer_voicecall {
.mx_MessageComposer_voicecall::before {
mask-image: url('$(res)/img/feather-customised/phone.svg');
}
.mx_MessageComposer_videocall {
.mx_MessageComposer_videocall::before {
mask-image: url('$(res)/img/feather-customised/video.svg');
}
.mx_MessageComposer_stickers {
.mx_MessageComposer_stickers::before {
mask-image: url('$(res)/img/feather-customised/face.svg');
}

13
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -40,6 +40,19 @@ limitations under the License.
&:hover {
border-color: $message-action-bar-hover-border-color;
z-index: 1;
}
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&:only-child {
border-radius: 3px;
}
}

27
res/css/views/rooms/_RoomHeader.scss
View file

@ -192,33 +192,41 @@ limitations under the License.
}
.mx_RoomHeader_button {
position: relative;
margin-left: 10px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_RoomHeader_settingsButton {
.mx_RoomHeader_settingsButton::before {
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_RoomHeader_forgetButton {
.mx_RoomHeader_forgetButton::before {
mask-image: url('$(res)/img/leave.svg');
width: 26px;
}
.mx_RoomHeader_searchButton {
.mx_RoomHeader_searchButton::before {
mask-image: url('$(res)/img/feather-customised/search.svg');
}
.mx_RoomHeader_shareButton {
.mx_RoomHeader_shareButton::before {
mask-image: url('$(res)/img/feather-customised/share.svg');
}
.mx_RoomHeader_manageIntegsButton {
.mx_RoomHeader_manageIntegsButton::before {
mask-image: url('$(res)/img/feather-customised/grid.svg');
}
@ -234,8 +242,7 @@ limitations under the License.
margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
position: relative;
.mx_RoomHeader_pinnedButton::before {
mask-image: url('$(res)/img/icons-pin.svg');
}