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

JorikSchellekens · web-flow · commit cf05beb4b856 · 2020-04-28T13:47:50.000+01:00
Fix scaling issues
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
diff --git a/src/utils/rem.js b/src/utils/rem.js
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ limitations under the License.`
`17`	`17`	`.mx_MessageComposer_avatar .mx_BaseAvatar {`
`18`	`18`	`padding: 2px;`
`19`	`19`	`border: 1px solid transparent;`
`20`		`- border-radius: 15px;`
	`20`	`+ border-radius: 100%;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.mx_MessageComposer_avatar .mx_BaseAvatar_initial {`
Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,8 @@ limitations under the License.`
`67`	`67`	`text-overflow: ellipsis;`
`68`	`68`	`white-space: nowrap;`
`69`	`69`	`flex: 1;`
	`70`	`+ display: inline-flex;`
	`71`	`+ align-items: center;`
`70`	`72`	`}`
`71`	`73`
`72`	`74`	`.mx_Dropdown_option div {`
Original file line number	Diff line number	Diff line change
`@@ -31,9 +31,10 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.mx_Autocomplete_Completion_pill {`
`34`		`- border-radius: 17px;`
`35`		`- height: 34px;`
`36`		`- padding: 0px 5px;`
	`34`	`+ box-sizing: border-box;`
	`35`	`+ border-radius: 2rem;`
	`36`	`+ height: $font-34px;`
	`37`	`+ padding: 0.4rem;`
`37`	`38`	`display: flex;`
`38`	`39`	`user-select: none;`
`39`	`40`	`cursor: pointer;`
`@@ -42,7 +43,7 @@`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`.mx_Autocomplete_Completion_pill > * {`
`45`		`- margin: 0 3px;`
	`46`	`+ margin-right: 0.3rem;`
`46`	`47`	`}`
`47`	`48`
`48`	`49`	`/* styling for common completion elements */`