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

Merge remote-tracking branch 'origin/develop' into hs/bridge-info-pretty

Browse source
This commit is contained in:
Half-Shot 2020-01-28 11:22:02 +00:00
commit 7c0a461cbb
124 changed files with 4572 additions and 1159 deletions
Download patch file Download diff file Expand all files Collapse all files

31
res/css/_common.scss
View file

@ -338,6 +338,14 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
margin-bottom: 10px;
}
.mx_Dialog_titleImage {
vertical-align: middle;
width: 25px;
height: 25px;
margin-left: -2px;
margin-right: 4px;
}
.mx_Dialog_title {
font-size: 22px;
line-height: 36px;
@ -378,7 +386,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
text-align: right;
}
.mx_Dialog button, .mx_Dialog input[type="submit"] {
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
* We should go through and have one consistent set of styles for buttons throughout the app.
* For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
*/
.mx_Dialog button, .mx_Dialog input[type="submit"], .mx_Dialog_buttons button, .mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton;
margin-left: 0px;
margin-right: 8px;
@ -394,27 +408,32 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
margin-right: 0px;
}
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover, .mx_Dialog_buttons button:hover, .mx_Dialog_buttons input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:focus, .mx_Dialog_buttons input[type="submit"]:focus {
filter: brightness($focus-brightness);
}
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: $accent-fg-color;
background-color: $accent-color;
min-width: 156px;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger {
background-color: $warning-color;
border: solid 1px $warning-color;
color: $accent-fg-color;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
.mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning {
border: solid 1px $warning-color;
color: $warning-color;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:disabled, .mx_Dialog_buttons input[type="submit"]:disabled {
background-color: $light-fg-color;
border: solid 1px $light-fg-color;
opacity: 0.7;

2
res/css/_components.scss
View file

@ -36,6 +36,7 @@
@import "./views/auth/_AuthHeader.scss";
@import "./views/auth/_AuthHeaderLogo.scss";
@import "./views/auth/_AuthPage.scss";
@import "./views/auth/_CompleteSecurityBody.scss";
@import "./views/auth/_CountryDropdown.scss";
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_LanguageSelector.scss";
@ -152,6 +153,7 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_InviteOnlyIcon.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberDeviceInfo.scss";

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

@ -63,7 +63,7 @@ limitations under the License.
}
.mx_GroupHeader_editButton::before {
mask-image: url('$(res)/img/icons-settings-room.svg');
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_GroupHeader_shareButton::before {

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

@ -51,8 +51,8 @@ limitations under the License.
&.mx_Toast_hasIcon {
&::after {
content: "";
width: 21px;
height: 20px;
width: 22px;
height: 22px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;

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

@ -22,7 +22,7 @@ limitations under the License.
.mx_CompleteSecurity_headerIcon {
width: 24px;
height: 24px;
margin: 0 4px;
margin-right: 4px;
position: relative;
}

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

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
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.
@ -16,12 +17,12 @@ limitations under the License.
.mx_AuthBody {
width: 500px;
font-size: 12px;
color: $authpage-secondary-color;
background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0;
padding: 25px 60px;
box-sizing: border-box;
font-size: 12px;
color: $authpage-secondary-color;
h2 {
font-size: 24px;

42
res/css/views/auth/_CompleteSecurityBody.scss Normal file
View file

@ -0,0 +1,42 @@
/*
Copyright 2019 New Vector Ltd
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_CompleteSecurityBody {
width: 600px;
color: $authpage-primary-color;
background-color: $authpage-body-bg-color;
border-radius: 4px;
padding: 20px;
box-sizing: border-box;
h2 {
font-size: 24px;
font-weight: 600;
margin-top: 0;
}
h3 {
font-size: 14px;
font-weight: 600;
}
a:link,
a:hover,
a:visited {
@mixin mx_Dialog_link;
}
}

15
res/css/views/dialogs/_InviteDialog.scss
View file

@ -210,4 +210,19 @@ limitations under the License.
.mx_InviteDialog {
// Prevent the dialog from jumping around randomly when elements change.
height: 590px;
padding-left: 20px; // the design wants some padding on the left
}
.mx_InviteDialog_userSections {
margin-top: 10px;
overflow-y: auto;
padding-right: 45px;
height: 455px; // mx_InviteDialog's height minus some for the upper 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;
}

24
res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
View file

@ -1,6 +1,6 @@
/*
Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2019, 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.
@ -22,7 +22,7 @@ limitations under the License.
.mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
padding-top: 20px;
}
.mx_CreateSecretStorageDialog_primaryContainer::after {
@ -36,9 +36,13 @@ limitations under the License.
align-items: flex-start;
}
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
margin-top: 0px;
}
.mx_CreateSecretStorageDialog_passPhraseHelp {
flex: 1;
height: 85px;
height: 64px;
margin-left: 20px;
font-size: 80%;
}
@ -47,16 +51,8 @@ limitations under the License.
width: 100%;
}
.mx_CreateSecretStorageDialog_passPhraseInput {
flex: none;
width: 250px;
border: 1px solid $accent-color;
border-radius: 5px;
padding: 10px;
margin-bottom: 1em;
}
.mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px;
}
@ -82,6 +78,10 @@ limitations under the License.
align-items: center;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
margin-right: 10px;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
flex: 1;
white-space: nowrap;

24
res/css/views/right_panel/_UserInfo.scss
View file

@ -23,15 +23,23 @@ limitations under the License.
font-size: 12px;
.mx_UserInfo_cancel {
height: 16px;
width: 16px;
padding: 10px 0 10px 10px;
cursor: pointer;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: 16px center;
background-color: $rightpanel-button-color;
position: absolute;
top: 0;
border-radius: 4px;
background-color: $dark-panel-bg-color;
margin: 9px;
z-index: 1; // render on top of the right panel
div {
height: 16px;
width: 16px;
padding: 4px;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: 7px center;
background-color: $rightpanel-button-color;
}
}
h2 {
@ -95,7 +103,7 @@ limitations under the License.
justify-content: center;
// override the calculated sizes so that the letter isn't HUGE
font-size: 26px !important;
font-size: 56px !important;
width: 100% !important;
}

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

@ -367,6 +367,11 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
opacity: 1;
}
.mx_EventTile_e2eIcon_unknown {
background-image: url('$(res)/img/e2e/warning.svg');
opacity: 1;
}
.mx_EventTile_e2eIcon_unencrypted {
background-image: url('$(res)/img/e2e/warning.svg');
opacity: 1;
@ -415,7 +420,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: 60px;
}
@ -427,8 +433,13 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
border-left: $e2e-unverified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color 5px solid;
}
.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_unverified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
@ -439,14 +450,16 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.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_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
display: block;
left: 41px;
}

38
res/css/views/rooms/_InviteOnlyIcon.scss Normal file
View file

@ -0,0 +1,38 @@
/*
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_InviteOnlyIcon {
width: 12px;
height: 12px;
position: relative;
display: block !important;
// Align the padlock with unencrypted room names
margin-left: 6px;
&::before {
background-color: $roomtile-name-color;
mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

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

@ -76,6 +76,8 @@ limitations under the License.
left: 60px;
margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class
width: 12px;
height: 12px;
}
.mx_MessageComposer_noperm_error {

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

@ -19,7 +19,12 @@ limitations under the License.
border-bottom: 1px solid $primary-hairline-color;
.mx_E2EIcon {
margin: 0 5px;
margin: 0;
position: absolute;
bottom: -1px;
right: -2px;
height: 10px;
width: 10px;
}
}
@ -171,6 +176,7 @@ limitations under the License.
width: 28px;
height: 28px;
margin: 0 7px;
position: relative;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {
@ -263,24 +269,3 @@ limitations under the License.
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
.mx_RoomHeader_PrivateIcon.mx_RoomHeader_isPrivate {
width: 12px;
height: 12px;
position: relative;
display: block !important;
&::before {
background-color: $roomtile-name-color;
mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}

7
res/css/views/rooms/_RoomPreviewBar.scss
View file

@ -117,12 +117,17 @@ limitations under the License.
.mx_RoomPreviewBar_actions {
flex-direction: column-reverse;
.mx_AccessibleButton {
padding: 7px 50px;//extra wide
padding: 7px 50px; //extra wide
}
& > * {
margin-top: 12px;
}
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
// to account for the padding of the primary button which causes inconsistent look between
// subsequent secondary (text) buttons
margin-bottom: 7px;
}
}
}

43
res/css/views/rooms/_RoomTile.scss
View file

@ -98,6 +98,19 @@ limitations under the License.
z-index: 2;
}
// Note we match .mx_E2EIcon to make sure this matches more tightly than just
// .mx_E2EIcon on its own
.mx_RoomTile_e2eIcon.mx_E2EIcon {
height: 10px;
width: 10px;
display: block;
position: absolute;
bottom: -1px;
right: -2px;
z-index: 1;
margin: 0;
}
.mx_RoomTile_name {
font-size: 14px;
padding: 0 6px;
@ -142,10 +155,11 @@ limitations under the License.
}
}
// toggle menuButton and badge on hover/menu displayed
// toggle menuButton and badge on menu displayed
.mx_RoomTile_menuDisplayed,
// or on keyboard focus of room tile
.mx_RoomTile.focus-visible:focus-within,
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within,
// or on pointer hover
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
.mx_RoomTile_menuButton {
display: block;
@ -201,30 +215,7 @@ limitations under the License.
flex: 1;
}
.mx_RoomTile.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_name {
.mx_InviteOnlyIcon + .mx_RoomTile_nameContainer .mx_RoomTile_name {
// Scoot the padding in a bit from 6px to make it look better
padding-left: 3px;
}
.mx_RoomTile.mx_RoomTile_isPrivate .mx_RoomTile_PrivateIcon {
width: 12px;
height: 12px;
position: relative;
display: block !important;
// Align the padlock with unencrypted room names
margin-left: 6px;
&::before {
background-color: $roomtile-name-color;
mask-image: url('$(res)/img/feather-customised/lock-solid.svg');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}