diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss
index ad9e2e7103..5cd19ce620 100644
--- a/res/css/_font-sizes.scss
+++ b/res/css/_font-sizes.scss
@@ -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;
@@ -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;
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 2e0c94263e..2c53258b08 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -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;
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 0065ffa502..4a78c8df92 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -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 {
diff --git a/res/css/views/avatars/_MemberStatusMessageAvatar.scss b/res/css/views/avatars/_MemberStatusMessageAvatar.scss
index c101a5d8a8..975b4e5ce9 100644
--- a/res/css/views/avatars/_MemberStatusMessageAvatar.scss
+++ b/res/css/views/avatars/_MemberStatusMessageAvatar.scss
@@ -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 {
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index 973c306695..e0f5dd47bd 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@@ -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;
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 32a68d5252..dd8511cc42 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -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 {
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index e01b1f8938..453cf4c7f9 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -6,11 +6,12 @@
.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 {
@@ -21,6 +22,18 @@ a.mx_Pill {
max-width: calc(100% - 1ch);
}
+.mx_Pill {
+ padding: $font-1px;
+ padding-right: 0.4em;
+}
+
+/* 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 +44,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 +57,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 +66,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 +79,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 {
diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss
index 1f4445b88c..7c65fbc90d 100644
--- a/res/css/views/elements/_ToggleSwitch.scss
+++ b/res/css/views/elements/_ToggleSwitch.scss
@@ -16,12 +16,19 @@ 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;
+
+ display: flex;
+ flex-direction: row;
+ flex: 0 0 auto;
+ align-items: center;
}
.mx_ToggleSwitch_enabled {
@@ -35,19 +42,12 @@ limitations under the License.
.mx_ToggleSwitch_ball {
transition: left 0.15s ease-out 0.1s;
- margin: 2px;
- width: 20px;
- height: 20px;
- border-radius: 20px;
+ 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;
+.mx_ToggleSwitch_on {
+ flex-direction: row-reverse;
}
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index a4d88f9882..26b81e94f3 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -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;
}
diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index e5316f5a46..a4aebdb708 100644
--- a/res/css/views/rooms/_Autocomplete.scss
+++ b/res/css/views/rooms/_Autocomplete.scss
@@ -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 */
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index e9013eb7b7..e126e523a6 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -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;
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
index 966d2c4e70..8db71f297c 100644
--- a/res/css/views/rooms/_EntityTile.scss
+++ b/res/css/views/rooms/_EntityTile.scss
@@ -69,8 +69,6 @@ limitations under the License.
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
- width: 36px;
- height: 36px;
position: relative;
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 8e4571047d..99377ee5be 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -45,7 +45,7 @@ limitations under the License.
}
.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
- top: 8px;
+ top: $font-8px;
left: 65px;
}
@@ -117,10 +117,9 @@ 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;
}
@@ -314,6 +313,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
.mx_EventTile_readAvatars .mx_BaseAvatar {
position: absolute;
display: inline-block;
+ height: $font-14px;
+ width: $font-14px;
}
.mx_EventTile_readAvatarRemainder {
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 969106c9ea..80f6c40f39 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -173,8 +173,6 @@ limitations under the License.
.mx_RoomHeader_avatar {
flex: 0;
- width: 28px;
- height: 28px;
margin: 0 7px;
position: relative;
}
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index de018bf178..5bc7d5624d 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -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;
diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss
index 35dba90f85..9fa10907b4 100644
--- a/res/css/views/settings/_AvatarSetting.scss
+++ b/res/css/views/settings/_AvatarSetting.scss
@@ -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;
}
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 1fbfb35927..e3a61e6825 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -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;
}
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 2ae2d71100..1e3e15b4ec 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -32,6 +32,7 @@ import RoomTile from "../views/rooms/RoomTile";
import LazyRenderList from "../views/elements/LazyRenderList";
import {_t} from "../../languageHandler";
import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
+import toRem from "../../utils/rem";
// turn this on for drop & drag console debugging galore
const debug = false;
@@ -383,7 +384,7 @@ export default class RoomSubList extends React.PureComponent {
setHeight = (height) => {
if (this._subList.current) {
- this._subList.current.style.height = `${height}px`;
+ this._subList.current.style.height = toRem(height);
}
this._updateLazyRenderHeight(height);
};
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js
index 3e3a2e6bd9..81fbc08c0f 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.js
@@ -24,6 +24,7 @@ import * as AvatarLogic from '../../../Avatar';
import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from '../elements/AccessibleButton';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import toRem from "../../../utils/rem";
export default createReactClass({
displayName: 'BaseAvatar',
@@ -164,9 +165,11 @@ export default createReactClass({
const initialLetter = AvatarLogic.getInitialLetter(name);
const textNode = (
{ initialLetter }
@@ -174,7 +177,11 @@ export default createReactClass({
const imgNode = (
+ aria-hidden="true"
+ style={{
+ width: toRem(width),
+ height: toRem(height)
+ }} />
);
if (onClick != null) {
return (
@@ -202,7 +209,10 @@ export default createReactClass({
src={imageUrl}
onClick={onClick}
onError={this.onError}
- width={width} height={height}
+ style={{
+ width: toRem(width),
+ height: toRem(height),
+ }}
title={title} alt=""
inputRef={inputRef}
{...otherProps} />
@@ -213,7 +223,10 @@ export default createReactClass({
className="mx_BaseAvatar mx_BaseAvatar_image"
src={imageUrl}
onError={this.onError}
- width={width} height={height}
+ style={{
+ width: toRem(width),
+ height: toRem(height),
+ }}
title={title} alt=""
ref={inputRef}
{...otherProps} />
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index f67877373e..a64fd82eb5 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -34,6 +34,7 @@ import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
import * as ObjectUtils from "../../../ObjectUtils";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {E2E_STATE} from "./E2EIcon";
+import toRem from "../../../utils/rem";
const eventTileTypes = {
'm.room.message': 'messages.MessageEvent',
@@ -473,7 +474,7 @@ export default createReactClass({
if (remainder > 0) {
remText = { remainder }+
+ style={{ right: "calc(" + toRem(-left) + " + " + receiptOffset + "px)" }}>{ remainder }+
;
}
}
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index be0ca1f8d6..85d443d55a 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -23,6 +23,7 @@ import { _t } from '../../../languageHandler';
import {formatDate} from '../../../DateUtils';
import Velociraptor from "../../../Velociraptor";
import * as sdk from "../../../index";
+import toRem from "../../../utils/rem";
let bounce = false;
try {
@@ -148,7 +149,7 @@ export default createReactClass({
// start at the old height and in the old h pos
startStyles.push({ top: startTopOffset+"px",
- left: oldInfo.left+"px" });
+ left: toRem(oldInfo.left) });
const reorderTransitionOpts = {
duration: 100,
@@ -181,7 +182,7 @@ export default createReactClass({
}
const style = {
- left: this.props.leftOffset+'px',
+ left: toRem(this.props.leftOffset),
top: '0px',
visibility: this.props.hidden ? 'hidden' : 'visible',
};
diff --git a/src/utils/rem.js b/src/utils/rem.js
new file mode 100644
index 0000000000..1f18c9de05
--- /dev/null
+++ b/src/utils/rem.js
@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+// converts a pixel value to rem.
+export default function(pixelVal) {
+ return pixelVal / 15 + "rem";
+}
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index 4ad46586ae..59671327ce 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -206,7 +206,8 @@ describe("", () => {
'Hey ' +
'' +
'
Member' +
+ 'style="width: 1.0666666666666667rem; height: 1.0666666666666667rem;" ' +
+ 'title="@member:domain.bla" alt="" aria-hidden="true">Member' +
'');
});
});