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

Merge branch 'develop' into foldleft/better-errors

Browse source
This commit is contained in:
Zoe 2020-04-17 14:11:05 +01:00
commit e3d784816d
135 changed files with 4076 additions and 1774 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -94,6 +94,7 @@
@import "./views/elements/_AccessibleButton.scss";
@import "./views/elements/_AddressSelector.scss";
@import "./views/elements/_AddressTile.scss";
@import "./views/elements/_ButtonPlaceholder.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@ -133,6 +134,7 @@
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MVideoBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_MjolnirBody.scss";

81
res/css/structures/_HomePage.scss
View file

@ -23,3 +23,84 @@ limitations under the License.
margin-left: auto;
margin-right: auto;
}
.mx_HomePage_default {
text-align: center;
.mx_HomePage_default_wrapper {
padding: 25vh 0 12px;
}
img {
height: 48px;
}
h1 {
font-weight: 600;
font-size: $font-32px;
line-height: $font-44px;
margin-bottom: 4px;
}
h4 {
margin-top: 4px;
font-weight: 600;
font-size: $font-18px;
line-height: $font-25px;
color: $muted-fg-color;
}
.mx_HomePage_default_buttons {
margin: 80px auto 0;
width: fit-content;
.mx_AccessibleButton {
padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
width: 104px; // 120px - 2* 8px
margin: 0 39px; // 55px - 2* 8px
position: relative;
display: inline-block;
border-radius: 8px;
vertical-align: top;
word-break: break-word;
font-weight: 600;
font-size: $font-15px;
line-height: $font-20px;
color: $muted-fg-color;
&:hover {
color: $accent-color;
background: rgba(#03b381, 0.06);
&::before {
background-color: $accent-color;
}
}
&::before {
top: 20px;
left: 40px; // (120px-40px)/2
width: 40px;
height: 40px;
content: '';
position: absolute;
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
}
&.mx_HomePage_button_sendDm::before {
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
}
&.mx_HomePage_button_explore::before {
mask-image: url('$(res)/img/feather-customised/explore.svg');
}
&.mx_HomePage_button_createGroup::before {
mask-image: url('$(res)/img/feather-customised/group.svg');
}
}
}
}

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

@ -44,6 +44,7 @@ limitations under the License.
.mx_CompleteSecurity_actionRow {
display: flex;
justify-content: flex-end;
margin-top: $font-28px;
.mx_AccessibleButton {
margin-inline-start: 18px;

10
res/css/structures/auth/_Login.scss
View file

@ -89,3 +89,13 @@ limitations under the License.
.mx_Login_underlinedServerName {
border-bottom: 1px dashed $accent-color;
}
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
// style it as a link
font-size: inherit;
padding: 0;
&.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
}

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

@ -119,6 +119,24 @@ limitations under the License.
margin-right: 0;
}
.mx_AuthBody_paddedFooter {
height: 80px; // height of the submit button + register link
padding-top: 28px;
text-align: center;
.mx_AuthBody_paddedFooter_title {
margin-top: 16px;
font-size: $font-15px;
line-height: $font-24px;
}
.mx_AuthBody_paddedFooter_subtitle {
margin-top: 8px;
font-size: $font-10px;
line-height: $font-14px;
}
}
.mx_AuthBody_changeFlow {
display: block;
text-align: center;

1
res/css/views/context_menus/_MessageContextMenu.scss
View file

@ -19,6 +19,7 @@ limitations under the License.
}
.mx_MessageContextMenu_field {
display: block;
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;

25
res/css/views/dialogs/_CreateRoomDialog.scss
View file

@ -15,6 +15,8 @@ limitations under the License.
*/
.mx_CreateRoomDialog_details {
margin-top: 15px;
.mx_CreateRoomDialog_details_summary {
outline: none;
list-style: none;
@ -71,11 +73,19 @@ limitations under the License.
}
.mx_CreateRoomDialog {
&.mx_Dialog_fixedWidth {
width: 450px;
}
.mx_Dialog_content {
margin-bottom: 40px;
}
p,
.mx_Field_input label {
color: $muted-fg-color;
}
.mx_SettingsFlag {
display: flex;
}
@ -90,5 +100,18 @@ limitations under the License.
flex: 0 0 auto;
margin-left: 30px;
}
.mx_CreateRoomDialog_topic {
margin-bottom: 36px;
}
.mx_Dialog_content > .mx_SettingsFlag {
margin-top: 24px;
}
p {
margin: 0 85px 0 0;
font-size: $font-12px;
}
}

2
res/css/views/directory/_NetworkDropdown.scss
View file

@ -35,6 +35,8 @@ limitations under the License.
border-radius: 4px;
border: 1px solid $dialog-close-fg-color;
background-color: $primary-bg-color;
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
overflow-y: auto;
}
.mx_NetworkDropdown_menu_network {

24
res/css/views/elements/_ButtonPlaceholder.scss Normal file
View file

@ -0,0 +1,24 @@
/*
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_ButtonPlaceholder {
font-size: $font-14px;
font-weight: 600;
padding: 7px 18px;
display: inline-block;
text-align: center;
color: $authpage-secondary-color;
}

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

@ -33,6 +33,10 @@ limitations under the License.
user-select: none;
}
.mx_Dropdown_input.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
.mx_Dropdown_input:focus {
border-color: $input-focused-border-color;
}

7
res/css/views/elements/_RichText.scss
View file

@ -14,8 +14,11 @@
}
a.mx_Pill {
word-break: break-all;
display: inline;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: text-bottom;
max-width: calc(100% - 1ch);
}
/* More specific to override `.markdown-body a` text-decoration */

22
res/css/views/messages/_MVideoBody.scss Normal file
View file

@ -0,0 +1,22 @@
/*
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.
*/
span.mx_MVideoBody {
video.mx_MVideoBody {
max-width: 100%;
height: auto;
}
}

19
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -34,12 +34,17 @@ limitations under the License.
background-color: $reaction-row-button-selected-bg-color;
border-color: $reaction-row-button-selected-border-color;
}
}
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
// ignore mouse events for all children, treat it as one entire hoverable entity
* {
pointer-events: none;
}
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}
}

42
res/css/views/rooms/_BasicMessageComposer.scss
View file

@ -44,27 +44,29 @@ limitations under the License.
outline: none;
overflow-x: hidden;
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
position: relative;
&.mx_BasicMessageComposer_input_shouldShowPillAvatar {
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
position: relative;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: $font-16px;
font-size: $font-10-4px;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: $font-16px;
font-size: $font-10-4px;
}
}
}
}

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

@ -111,6 +111,7 @@ limitations under the License.
}
.mx_EventTile_line, .mx_EventTile_reply {
clear: both;
position: relative;
padding-left: 65px; /* left gutter */
padding-top: 4px;

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

@ -24,6 +24,20 @@ limitations under the License.
margin: 0;
padding: 0 8px 0 10px;
position: relative;
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
.mx_UserOnlineDot {
display: block;
margin-right: 5px;
}
}
.mx_RoomTile:focus {
@ -31,15 +45,6 @@ limitations under the License.
background-color: $roomtile-focused-bg-color;
}
.mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
.mx_RoomTile_tooltip {
display: inline-block;
position: relative;
@ -151,7 +156,10 @@ limitations under the License.
}
.mx_RoomTile_menuButton {
display: none; //no design for this for now
display: none; // no design for this for now
}
.mx_UserOnlineDot {
display: none; // no design for this for now
}
}
@ -164,6 +172,9 @@ limitations under the License.
.mx_RoomTile_menuButton {
display: block;
}
.mx_UserOnlineDot {
display: none;
}
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge,

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_UserOnlineDot {
border-radius: 50%;
background-color: $accent-color;
height: 5px;
width: 5px;
height: 6px;
width: 6px;
display: inline-block;
}

18
res/css/views/verification/_VerificationShowSas.scss
View file

@ -61,3 +61,21 @@ limitations under the License.
.mx_VerificationShowSas_emojiSas_break {
flex-basis: 100%;
}
.mx_VerificationShowSas {
.mx_Dialog_buttons {
// this is more specific than the DialogButtons css so gets preference
button.mx_VerificationShowSas_matchButton {
color: $accent-color;
background-color: $accent-bg-color;
border: none;
}
// this is more specific than the DialogButtons css so gets preference
button.mx_VerificationShowSas_noMatchButton {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
border: none;
}
}
}

8
res/img/feather-customised/explore.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11.5" stroke="#2E2F32" stroke-linecap="round"/>
<circle cx="12" cy="4" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
<circle cx="12" cy="20" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
<circle cx="20" cy="12" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
<circle cx="4" cy="12" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
<path d="M10.7272 10.4443L18.3639 5.63602L13.5556 13.2728L5.636 18.3639L10.7272 10.4443Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 672 B

7
res/img/feather-customised/group.svg Normal file
View file

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7273 16.8V15.6666C14.7273 14.4148 13.7504 13.4 12.5455 13.4H8.18182C6.97683 13.4 6 14.4148 6 15.6666V16.8" stroke="#27303A" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3636 11.1333C11.5686 11.1333 12.5455 10.1185 12.5455 8.86664C12.5455 7.6148 11.5686 6.59998 10.3636 6.59998C9.15866 6.59998 8.18182 7.6148 8.18182 8.86664C8.18182 10.1185 9.15866 11.1333 10.3636 11.1333Z" stroke="#27303A" stroke-linecap="round"/>
<path d="M18 16.8V15.6666C17.9993 14.6337 17.3264 13.7319 16.3636 13.4736" stroke="#27303A" stroke-linecap="round"/>
<path d="M14.1818 6.67352C15.1472 6.93032 15.8225 7.83405 15.8225 8.86936C15.8225 9.90466 15.1472 10.8084 14.1818 11.0652" stroke="#27303A" stroke-linecap="round"/>
<circle cx="12" cy="12" r="11.5" stroke="#27303A" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 922 B

3
res/img/feather-customised/message-circle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.5 11.3334L23.5 11.3347C23.5043 13.0157 23.1116 14.6741 22.3537 16.1746L22.3527 16.1765C20.5186 19.8462 16.769 22.1651 12.6665 22.1667L12.6653 22.1667C10.9843 22.1711 9.32594 21.7783 7.82541 21.0204C7.70642 20.9603 7.56835 20.9502 7.44187 20.9923L1.73925 22.8932C1.34837 23.0235 0.976504 22.6516 1.1068 22.2607L3.00767 16.5581C3.04983 16.4317 3.03973 16.2936 2.97963 16.1746C2.22171 14.6741 1.82895 13.0157 1.83333 11.3347L1.83333 11.3335C1.83492 7.23102 4.15379 3.48136 7.82352 1.64729L7.82352 1.64729L7.82541 1.64634C9.32594 0.888416 10.9843 0.495653 12.6653 0.500038H12.6666H13.3194C18.8084 0.809695 23.1903 5.19159 23.5 10.6806L23.5 11.3334Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 828 B

23
res/img/icon_person.svg
View file

@ -1,23 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="13px" viewBox="0 0 11 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>815EF7DE-169A-4322-AE2A-B65CBE91DCED</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Left-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Left-menu-option-B" transform="translate(-33.000000, -223.000000)" fill="#FFFFFF" stroke="#76CFA6">
<g id="Left-panel">
<g id="Room-list" transform="translate(0.000000, 69.000000)">
<g id="Group-3" transform="translate(16.000000, 144.000000)">
<g id="icon_person" transform="translate(18.000000, 11.000000)">
<g>
<path d="M5.34291667,5.8555 C5.51425,5.86608333 5.68525,5.88091667 5.85566667,5.90108333 C5.987,5.91666667 6.118,5.93533333 6.24825,5.95783333 C6.96516667,6.08175 7.69391667,6.32633333 8.23175,6.83591667 C8.32116667,6.92058333 8.40433333,7.01166667 8.48041667,7.1085 C8.59608333,7.25566667 8.69475,7.41583333 8.77633333,7.58425 C8.92233333,7.8855 9.0125,8.21083333 9.06841667,8.54008333 C9.13758333,8.9475 9.15758333,9.36266667 9.1635,9.77533333 C9.1685,10.1279167 9.167,10.4805833 9.16725,10.8331667 L8.33333344e-05,10.8331667 C0.000250000001,10.4805833 -0.00125,10.1279167 0.00375,9.77533333 C0.00916666667,9.39616667 0.0268333333,9.01533333 0.083,8.63991667 C0.134833333,8.29291667 0.221666667,7.94891667 0.369333333,7.62966667 C0.44775,7.46033333 0.543,7.29875 0.65525,7.14958333 C0.729,7.05166667 0.809833333,6.95925 0.897,6.87308333 C1.41916667,6.35725 2.13533333,6.10216667 2.84408333,5.97125 C2.97233333,5.94758333 3.10125,5.92775 3.23058333,5.91108333 C3.39841667,5.8895 3.56683333,5.87333333 3.73558333,5.86133333 C3.95191667,5.846 4.16858333,5.8385 4.38533333,5.83458333 C4.48475,5.8335 4.58408333,5.83316667 4.6835,5.8335 C4.9035,5.83583333 5.12333333,5.84183333 5.34291667,5.8555 Z" id="Fill-1" stroke-linejoin="round"></path>
<path d="M4.99558333,0.031 C5.28133333,0.0745833333 5.55966667,0.1645 5.81691667,0.29625 C6.32075,0.554333333 6.7375,0.971 6.9955,1.47483333 C7.11691667,1.712 7.20291667,1.967 7.24975,2.22916667 C7.30216667,2.52283333 7.30583333,2.82525 7.26083333,3.12008333 C7.2205,3.38416667 7.14066667,3.642 7.02475,3.88266667 C6.88325,4.17633333 6.68833333,4.44375 6.45233333,4.66866667 C6.21591667,4.89408333 5.93891667,5.07633333 5.638,5.20358333 C5.30525,5.34433333 4.94491667,5.4165 4.58366667,5.4165 C4.22233333,5.4165 3.86208333,5.34433333 3.52925,5.20358333 C3.22833333,5.07633333 2.95133333,4.89408333 2.71491667,4.66866667 C2.479,4.44375 2.284,4.17633333 2.1425,3.88266667 C2.02658333,3.642 1.94675,3.38416667 1.90641667,3.12008333 C1.86141667,2.82525 1.86508333,2.52291667 1.91758333,2.22925 C1.96433333,1.967 2.05033333,1.712 2.17175,1.47483333 C2.42975,0.971 2.8465,0.554333333 3.35033333,0.29625 C3.60758333,0.1645 3.88591667,0.0745833333 4.17166667,0.031 C4.28525,0.0136666667 4.39916667,0.005 4.51391667,0.000666666667 C4.58391667,-0.000166666667 4.58366667,-0.000166666667 4.65333333,0.000666666667 C4.76808333,0.005 4.882,0.0136666667 4.99558333,0.031 Z" id="Fill-2"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB