Merge pull request #4355 from JorikSchellekens/joriks/font-scaling-fixes

Fix scaling issues

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;

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;

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 {

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 {

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;
+            width: $font-16px;
-            height: 16px;
+            height: $font-16px;
             content: "";
             top: 5px;
             left: 14px;

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 {

res/css/views/elements/_RichText.scss

@@ -6,11 +6,12 @@
 .mx_RoomPill,
 .mx_GroupPill,
 .mx_AtRoomPill {
-    border-radius: 16px;
+    display: inline-flex;
-    display: inline-block;
+    align-items: center;
-    height: 20px;
+    vertical-align: middle;
-    line-height: $font-20px;
+    border-radius: $font-16px;
-    padding-left: 5px;
+    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;
+    display: inline-flex;
-    top: 2px;
+    align-items: center;
+    border-radius: 10rem;
+    margin-right: 0.24rem;
 }
 
 .mx_Markdown_BOLD {

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;
+    width: $font-44px;
-    border-radius: 14px;
+    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: $font-20px;
-    width: 20px;
+    height: $font-20px;
-    height: 20px;
+    border-radius: $font-20px;
-    border-radius: 20px;
     background-color: $togglesw-ball-color;
-    position: absolute;
-    top: 0;
 }
 
-.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+.mx_ToggleSwitch_on {
-    left: 23px; // 48px switch - 20px ball - 5px padding = 23px
+    flex-direction: row-reverse;
-}
-
-.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
-    left: 2px;
 }

res/css/views/right_panel/_UserInfo.scss

@@ -98,8 +98,8 @@ limitations under the License.
         position: absolute;
         top: 0;
         left: 0;
-        width: 100%;
+        width: 100% !important;
-        height: 100%;
+        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;
     }

res/css/views/rooms/_Autocomplete.scss

@@ -31,9 +31,10 @@
 }
 
 .mx_Autocomplete_Completion_pill {
-    border-radius: 17px;
+    box-sizing: border-box;
-    height: 34px;
+    border-radius: 2rem;
-    padding: 0px 5px;
+    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 */

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;
+                    width: $font-16px;
-                    height: 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;
+                    background-size: $font-16px;
-                    border-radius: 8px;
+                    border-radius: $font-16px;
                     text-align: center;
                     font-weight: normal;
                     line-height: $font-16px;

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;
 }
 

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-top: 3px;
-    padding-bottom: 2px;
+    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 {

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;
 }

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;

res/css/views/settings/_AvatarSetting.scss

@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 .mx_AvatarSetting_avatar {
-    width: 88px;
+    width: $font-88px;
-    height: 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;
     }
 

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;
 }

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);
     };

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 = (
                 <span className="mx_BaseAvatar_initial" aria-hidden="true"
-                    style={{ fontSize: (width * 0.65) + "px",
+                    style={{
-                    width: width + "px",
+                        fontSize: toRem(width * 0.65),
-                    lineHeight: height + "px" }}
+                        width: toRem(width),
+                        lineHeight: toRem(height),
+                    }}
                 >
                     { initialLetter }
                 </span>
@@ -174,7 +177,11 @@ export default createReactClass({
             const imgNode = (
                 <img className="mx_BaseAvatar_image" src={imageUrl}
                     alt="" title={title} onError={this.onError}
-                    width={width} height={height} aria-hidden="true" />
+                    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} />

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 = <span className="mx_EventTile_readAvatarRemainder"
                     onClick={this.toggleAllReadAvatars}
-                    style={{ right: -(left - receiptOffset) }}>{ remainder }+
+                    style={{ right: "calc(" + toRem(-left) + " + " + receiptOffset + "px)" }}>{ remainder }+
                 </span>;
             }
         }

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',
         };

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";
+}

test/components/views/messages/TextualBody-test.js

@@ -206,7 +206,8 @@ describe("<TextualBody />", () => {
                 'Hey <span>' +
                 '<a class="mx_Pill mx_UserPill" title="@user:server">' +
                 '<img class="mx_BaseAvatar mx_BaseAvatar_image" src="mxc://avatar.url/image.png" ' +
-                'width="16" height="16" title="@member:domain.bla" alt="" aria-hidden="true">Member</a>' +
+                'style="width: 1.0666666666666667rem; height: 1.0666666666666667rem;" ' +
+                'title="@member:domain.bla" alt="" aria-hidden="true">Member</a>' +
                 '</span></span>');
         });
     });