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

Merge branches 'develop' and 't3chguy/redaction_redesign' of github.com:matrix-org/matrix-react-sdk into t3chguy/redaction_redesign

Browse source
This commit is contained in:
Michael Telatynski 2020-05-07 09:56:21 +01:00
commit f0085a9feb
81 changed files with 2557 additions and 803 deletions
Download patch file Download diff file Expand all files Collapse all files

10
res/css/_font-sizes.scss
View file

@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$font-1px: 0.067rem;
$font-2px: 0.133rem;
$font-3px: 0.200rem;
$font-4px: 0.267rem;
$font-5px: 0.333rem;
$font-6px: 0.400rem;
$font-7px: 0.467rem;
$font-8px: 0.533rem;
$font-9px: 0.600rem;
$font-10px: 0.667rem;
@ -27,7 +34,7 @@ $font-16px: 1.067rem;
$font-17px: 1.133rem;
$font-18px: 1.200rem;
$font-19px: 1.267rem;
$font-20px: 1.333rem;
$font-20px: 1.3333333rem;
$font-21px: 1.400rem;
$font-22px: 1.467rem;
$font-23px: 1.533rem;
@ -60,4 +67,5 @@ $font-49px: 3.267rem;
$font-50px: 3.333rem;
$font-51px: 3.400rem;
$font-52px: 3.467rem;
$font-88px: 5.887rem;
$font-400px: 26.667rem;

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

@ -74,7 +74,7 @@ limitations under the License.
.mx_RoomSubList_badge > div {
flex: 0 0 auto;
border-radius: 8px;
border-radius: $font-16px;
font-weight: 600;
font-size: $font-12px;
padding: 0 5px;

6
res/css/structures/_TagPanel.scss
View file

@ -69,7 +69,7 @@ limitations under the License.
height: 100%;
}
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
height: 40px;
height: $font-40px;
padding: 10px 0 9px 0;
}
@ -110,13 +110,13 @@ limitations under the License.
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
height: 56px;
height: calc(100% + 16px);
background-color: $accent-color;
width: 5px;
position: absolute;
left: -15px;
border-radius: 0 3px 3px 0;
top: -8px; // (56 - 40)/2
top: -8px; // (16px / 2)
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

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

@ -91,9 +91,8 @@ limitations under the License.
}
.mx_Toast_description {
max-width: 400px;
max-width: 272px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: $font-12px;

2
res/css/views/avatars/_MemberStatusMessageAvatar.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_MessageComposer_avatar .mx_BaseAvatar {
padding: 2px;
border: 1px solid transparent;
border-radius: 15px;
border-radius: 100%;
}
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {

6
res/css/views/context_menus/_TopLeftMenu.scss
View file

@ -72,10 +72,10 @@ limitations under the License.
.mx_AccessibleButton::after {
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: 16px;
mask-size: $font-16px;
position: absolute;
width: 16px;
height: 16px;
width: $font-16px;
height: $font-16px;
content: "";
top: 5px;
left: 14px;

6
res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
View file

@ -32,3 +32,9 @@ limitations under the License.
padding: 10px;
}
.mx_RestoreKeyBackupDialog_content > div {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px; /* Empirically measured */
}

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

@ -67,6 +67,8 @@ limitations under the License.
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
display: inline-flex;
align-items: center;
}
.mx_Dropdown_option div {

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

@ -6,21 +6,35 @@
.mx_RoomPill,
.mx_GroupPill,
.mx_AtRoomPill {
border-radius: 16px;
display: inline-block;
height: 20px;
line-height: $font-20px;
padding-left: 5px;
display: inline-flex;
align-items: center;
vertical-align: middle;
border-radius: $font-16px;
line-height: $font-15px;
padding-left: 0;
}
a.mx_Pill {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: text-bottom;
max-width: calc(100% - 1ch);
}
.mx_Pill {
padding: $font-1px;
padding-right: 0.4em;
vertical-align: text-top;
line-height: $font-17px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_GroupPill,
.mx_GroupPill {
color: $accent-fg-color;
background-color: $rte-group-pill-color;
}
/* More specific to override `.markdown-body a` text-decoration */
.mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none;
@ -31,7 +45,6 @@ a.mx_Pill {
.mx_UserPill {
color: $primary-fg-color;
background-color: $other-user-pill-bg-color;
padding-right: 5px;
}
.mx_UserPill_selected {
@ -45,7 +58,6 @@ a.mx_Pill {
.mx_MessageComposer_input .mx_AtRoomPill {
color: $accent-fg-color;
background-color: $mention-user-pill-bg-color;
padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
@ -55,15 +67,6 @@ a.mx_Pill {
.mx_GroupPill {
color: $accent-fg-color;
background-color: $rte-room-pill-color;
padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_GroupPill,
.mx_GroupPill {
color: $accent-fg-color;
background-color: $rte-group-pill-color;
padding-right: 5px;
}
.mx_EventTile_body .mx_UserPill,
@ -77,8 +80,10 @@ a.mx_Pill {
.mx_GroupPill .mx_BaseAvatar,
.mx_AtRoomPill .mx_BaseAvatar {
position: relative;
left: -3px;
top: 2px;
display: inline-flex;
align-items: center;
border-radius: 10rem;
margin-right: 0.24rem;
}
.mx_Markdown_BOLD {

35
res/css/views/elements/_ToggleSwitch.scss
View file

@ -16,11 +16,13 @@ limitations under the License.
.mx_ToggleSwitch {
transition: background-color 0.20s ease-out 0.1s;
width: 48px;
height: 24px;
border-radius: 14px;
width: $font-44px;
height: $font-20px;
border-radius: 1.5rem;
padding: 2px;
background-color: $togglesw-off-color;
position: relative;
opacity: 0.5;
}
@ -31,23 +33,18 @@ limitations under the License.
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: $togglesw-on-color;
> .mx_ToggleSwitch_ball {
left: calc(100% - $font-20px);
}
}
.mx_ToggleSwitch_ball {
transition: left 0.15s ease-out 0.1s;
margin: 2px;
width: 20px;
height: 20px;
border-radius: 20px;
position: relative;
width: $font-20px;
height: $font-20px;
border-radius: $font-20px;
background-color: $togglesw-ball-color;
position: absolute;
top: 0;
}
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: 23px; // 48px switch - 20px ball - 5px padding = 23px
}
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
left: 2px;
transition: left 0.15s ease-out 0.1s;
left: 0;
}

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

@ -98,8 +98,8 @@ limitations under the License.
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100% !important;
height: 100% !important;
}
.mx_UserInfo_avatar .mx_BaseAvatar_initial {
@ -109,7 +109,7 @@ limitations under the License.
justify-content: center;
// override the calculated sizes so that the letter isn't HUGE
font-size: 56px !important;
font-size: 6rem !important;
width: 100% !important;
transition: font-size 0.5s;
}

9
res/css/views/rooms/_Autocomplete.scss
View file

@ -31,9 +31,10 @@
}
.mx_Autocomplete_Completion_pill {
border-radius: 17px;
height: 34px;
padding: 0px 5px;
box-sizing: border-box;
border-radius: 2rem;
height: $font-34px;
padding: 0.4rem;
display: flex;
user-select: none;
cursor: pointer;
@ -42,7 +43,7 @@
}
.mx_Autocomplete_Completion_pill > * {
margin: 0 3px;
margin-right: 0.3rem;
}
/* styling for common completion elements */

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

@ -46,22 +46,19 @@ limitations under the License.
&.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;
width: $font-16px;
height: $font-16px;
margin-right: 0.24rem;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
background-size: $font-16px;
border-radius: $font-16px;
text-align: center;
font-weight: normal;
line-height: $font-16px;

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

@ -69,8 +69,6 @@ limitations under the License.
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
width: 36px;
height: 36px;
position: relative;
}

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

@ -45,7 +45,7 @@ limitations under the License.
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
top: 8px;
top: $font-8px;
left: 65px;
}
@ -117,17 +117,16 @@ limitations under the License.
.mx_EventTile_line, .mx_EventTile_reply {
position: relative;
padding-left: 65px; /* left gutter */
padding-top: 4px;
padding-bottom: 2px;
padding-top: 3px;
padding-bottom: 3px;
border-radius: 4px;
min-height: 24px;
line-height: $font-22px;
}
.mx_RoomView_timeline_rr_enabled,
// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
.mx_EventListSummary {
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
}
@ -286,6 +285,8 @@ limitations under the License.
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
height: $font-14px;
width: $font-14px;
}
.mx_EventTile_readAvatarRemainder {

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

@ -173,8 +173,6 @@ limitations under the License.
.mx_RoomHeader_avatar {
flex: 0;
width: 28px;
height: 28px;
margin: 0 7px;
position: relative;
}

5
res/css/views/rooms/_RoomRecoveryReminder.scss
View file

@ -33,11 +33,6 @@ limitations under the License.
margin-bottom: 1em;
}
.mx_RoomRecoveryReminder_button {
@mixin mx_DialogButton;
margin: 0 10px;
}
.mx_RoomRecoveryReminder_secondary {
font-size: 90%;
margin-top: 1em;

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

@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
cursor: pointer;
height: 34px;
height: $font-34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;

8
res/css/views/settings/_AvatarSetting.scss
View file

@ -15,13 +15,13 @@ limitations under the License.
*/
.mx_AvatarSetting_avatar {
width: 88px;
height: 88px;
width: $font-88px;
height: $font-88px;
margin-left: 13px;
position: relative;
& > * {
width: 88px;
width: $font-88px;
box-sizing: border-box;
}
@ -63,7 +63,7 @@ limitations under the License.
& > img,
.mx_AvatarSetting_avatarPlaceholder {
display: block;
height: 88px;
height: $font-88px;
border-radius: 4px;
}

2
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -63,7 +63,7 @@ limitations under the License.
display: inline-block;
font-size: $font-14px;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;
padding-right: 10px;
}

6
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
View file

@ -23,6 +23,12 @@ limitations under the License.
margin-top: 0;
}
.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
// Move the spinner to the left side of the container (default center)
justify-content: left;
}
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,

9
res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
View file

@ -55,3 +55,12 @@ limitations under the License.
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
}
.mx_SecurityUserSettingsTab {
.mx_SettingsTab_section {
.mx_AccessibleButton_kind_link {
padding: 0;
font-size: inherit;
}
}
}

BIN
res/img/03b381.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 169 B

BIN
res/img/368bd6.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 171 B

BIN
res/img/ac3ba8.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 170 B

3
res/themes/dark/css/_dark.scss
View file

@ -147,6 +147,9 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-fg-color: $accent-color;
$button-link-bg-color: transparent;
// Toggle switch
$togglesw-off-color: $room-highlight-color;
$visual-bell-bg-color: #800;
$room-warning-bg-color: $header-panel-bg-color;

14
res/themes/light-custom/css/_custom.scss
View file

@ -17,6 +17,7 @@ limitations under the License.
//
// --accent-color
$accent-color: var(--accent-color);
$accent-bg-color: var(--accent-color-15pct);
$button-bg-color: var(--accent-color);
$button-link-fg-color: var(--accent-color);
$button-primary-bg-color: var(--accent-color);
@ -52,7 +53,6 @@ $tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct);
//
// --roomlist-background-color
$event-selected-color: var(--roomlist-background-color);
$header-panel-bg-color: var(--roomlist-background-color);
$reaction-row-button-bg-color: var(--roomlist-background-color);
$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
@ -124,3 +124,15 @@ $notice-primary-color: var(--warning-color);
$pinned-unread-color: var(--warning-color);
$warning-color: var(--warning-color);
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
$username-variant1-color: var(--username-colors_1, $username-variant1-color);
$username-variant2-color: var(--username-colors_2, $username-variant2-color);
$username-variant3-color: var(--username-colors_3, $username-variant3-color);
$username-variant4-color: var(--username-colors_4, $username-variant4-color);
$username-variant5-color: var(--username-colors_5, $username-variant5-color);
$username-variant6-color: var(--username-colors_6, $username-variant6-color);
$username-variant7-color: var(--username-colors_7, $username-variant7-color);
$username-variant8-color: var(--username-colors_8, $username-variant8-color);
$event-selected-color: var(--timeline-highlights-color);
$event-highlight-bg-color: var(--timeline-highlights-color);