feat - UI Scaling (Padding / Font Size / Screen Scale)

mobile/wrapperApp/sources/main.cpp

@@ -11,7 +11,6 @@ int main(int argc, char* argv[])
 {
     Q_INIT_RESOURCE(resources);
     qputenv("QT_FILE_SELECTORS", "noWebEngine");
-    qputenv("QT_SCALE_FACTOR", "0.8");
 
 #if QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)
     qmlRegisterModule("Qt.labs.settings", 1, 1);

ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml

@@ -20,6 +20,14 @@ SQUtils.QObject {
         System
     }
 
+    enum PaddingFactor {
+        PaddingXXS,
+        PaddingXS,
+        PaddingS,
+        PaddingM,
+        PaddingL
+    }
+
     property ThemePalette palette: Application.styleHints.colorScheme === Qt.ColorScheme.Dark ? statusQDarkTheme : statusQLightTheme
 
     readonly property ThemePalette statusQLightTheme: StatusLightTheme {}
@@ -49,6 +57,10 @@ SQUtils.QObject {
         updateFontSize(fontSize)
     }
 
+    function changePaddingFactor(paddingFactor:int) {
+        updatePaddingFactor(paddingFactor)
+    }
+
     readonly property var baseFont: FontLoader {
         source: assetPath + "fonts/Inter/Inter-Regular.otf"
     }
@@ -179,11 +191,11 @@ SQUtils.QObject {
 
 
     // Responsive properties used for responsive components (e.g. containers)
-    property int xlPadding: defaultXlPadding
-    property int bigPadding: defaultBigPadding
-    property int padding: defaultPadding
-    property int halfPadding: defaultHalfPadding
-    property int smallPadding: defaultSmallPadding
+    property int xlPadding: defaultXlPadding * dynamicPaddingFactorUnit
+    property int bigPadding: defaultBigPadding * dynamicPaddingFactorUnit
+    property int padding: defaultPadding * dynamicPaddingFactorUnit
+    property int halfPadding: defaultHalfPadding * dynamicPaddingFactorUnit
+    property int smallPadding: defaultSmallPadding * dynamicPaddingFactorUnit
     property int radius: defaultRadius
 
     // Constant properties used for non-responsive components (e.g. buttons)
@@ -200,8 +212,10 @@ SQUtils.QObject {
     readonly property real pressedOpacity: 0.7
 
     property int dynamicFontUnits: 0
+    property real dynamicPaddingFactorUnit: 1.0
 
     readonly property int currentFontSize: d.fontSize
+    readonly property real currentPaddingFactor: d.paddingFactor
 
     function updateFontSize(fontSize:int) {
         d.fontSize = fontSize
@@ -232,12 +246,28 @@ SQUtils.QObject {
         }
     }
 
-    function updatePaddings(basePadding:int) {
-        xlPadding = basePadding * 2
-        bigPadding = basePadding * 1.5
-        padding = basePadding
-        halfPadding = basePadding / 2
-        smallPadding = basePadding * 0.625
+    function updatePaddingFactor(paddingFactor:int) {
+        d.paddingFactor = paddingFactor
+        switch (paddingFactor) {
+        case Theme.PaddingXXS:
+            dynamicPaddingFactorUnit = 0.4
+            break;
+        case Theme.PaddingXS:
+            dynamicPaddingFactorUnit = 0.6
+            break;
+
+        case Theme.PaddingS:
+            dynamicPaddingFactorUnit = 0.8
+            break;
+
+        case Theme.PaddingM:
+            dynamicPaddingFactorUnit = 1
+            break;
+
+        case Theme.PaddingL:
+            dynamicPaddingFactorUnit = 1.2
+            break;
+        }
     }
 
     enum AnimationDuration {
@@ -262,5 +292,6 @@ SQUtils.QObject {
         id: d
 
         property int fontSize: Theme.FontSizeM
+        property int paddingFactor: Theme.PaddingM
     }
 }

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -87,16 +87,18 @@ StatusSectionLayout {
 
     required property int theme // Theme.Style.xxx
     required property int fontSize // Theme.FontSize.xxx
+    required property int paddingFactor // Theme.PaddingFactor.xxx
 
     required property var whitelistedDomainsModel
-    
+
     signal addressWasShownRequested(string address)
     signal connectUsernameRequested(string ensName, string ownerAddress)
     signal registerUsernameRequested(string ensName)
     signal releaseUsernameRequested(string ensName, string senderAddress, int chainId)
 
     signal themeChangeRequested(int theme)
     signal fontSizeChangeRequested(int fontSize)
+    signal paddingFactorChangeRequested(int paddingFactor)
     signal leaveCommunityRequest(string communityId)
     signal setCommunityMutedRequest(string communityId, int mutedType)
     signal inviteFriends(var communityData)
@@ -374,8 +376,10 @@ StatusSectionLayout {
                 contentWidth: d.contentWidth
                 theme: root.theme
                 fontSize: root.fontSize
+                paddingFactor: root.paddingFactor
                 onThemeChangeRequested: (theme) => root.themeChangeRequested(theme)
                 onFontSizeChangeRequested: (fontSize) => root.fontSizeChangeRequested(fontSize)
+                onPaddingFactorChangeRequested: (paddingFactor) => root.paddingFactorChangeRequested(paddingFactor)
             }
         }
 

ui/app/AppLayouts/Profile/views/AppearanceView.qml

@@ -17,25 +17,26 @@ SettingsContentBase {
 
     required property int theme // Theme.Style.xxx
     required property int fontSize // Theme.FontSize.xxx
+    required property int paddingFactor // Theme.PaddingFactor.xxx
 
     signal themeChangeRequested(int theme)
     signal fontSizeChangeRequested(int fontSize)
+    signal paddingFactorChangeRequested(int paddingFactor)
 
-    Item {
+    content: ColumnLayout {
         id: appearanceContainer
-        anchors.left: !!parent ? parent.left : undefined
-        anchors.leftMargin: Theme.padding
+
         width: root.contentWidth - 2 * Theme.padding
-        height: childrenRect.height
+        spacing: Theme.padding
 
         Rectangle {
             id: preview
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: placeholderMessage.implicitHeight +
-                    placeholderMessage.anchors.leftMargin +
-                    placeholderMessage.anchors.rightMargin
+
+            Layout.preferredHeight: placeholderMessage.implicitHeight +
+                                    placeholderMessage.anchors.leftMargin +
+                                    placeholderMessage.anchors.rightMargin
+            Layout.fillWidth: true
+
             radius: Theme.radius
             border.color: Theme.palette.border
             color: Theme.palette.transparent
@@ -45,7 +46,8 @@ SettingsContentBase {
                 anchors.top: parent.top
                 anchors.left: parent.left
                 anchors.right: parent.right
-                anchors.margins: Theme.smallPadding
+                anchors.margins: Theme.padding
+
                 isMessage: true
                 shouldRepeatHeader: true
                 messageTimestamp: Date.now()
@@ -60,17 +62,14 @@ SettingsContentBase {
         StatusSectionHeadline {
             id: sectionHeadlineFontSize
             text: qsTr("Text size")
-            anchors.top: preview.bottom
-            anchors.topMargin: Theme.bigPadding*2
-            anchors.left: parent.left
-            anchors.right: parent.right
+            Layout.topMargin: 2 * Theme.padding
         }
 
         StatusQ.StatusLabeledSlider {
             id: fontSizeSlider
-            anchors.top: sectionHeadlineFontSize.bottom
-            anchors.topMargin: Theme.padding
-            width: parent.width
+            Layout.fillWidth: true
+            Layout.leftMargin: Theme.smallPadding
+            Layout.rightMargin: Layout.leftMargin
 
             textRole: "name"
             valueRole: "value"
@@ -88,36 +87,51 @@ SettingsContentBase {
             onMoved: root.fontSizeChangeRequested(value)
         }
 
+        StatusSectionHeadline {
+            text: qsTr("Padding factor")
+            Layout.topMargin: 2 * Theme.padding
+        }
+
+        StatusQ.StatusLabeledSlider {
+            Layout.fillWidth: true
+            Layout.leftMargin: Theme.smallPadding
+            Layout.rightMargin: Layout.leftMargin
+
+            textRole: "name"
+            valueRole: "value"
+            model: ListModel {
+                ListElement { name: qsTr("XXS"); value: Theme.PaddingFactor.PaddingXXS }
+                ListElement { name: qsTr("XS"); value: Theme.PaddingFactor.PaddingXS }
+                ListElement { name: qsTr("S"); value: Theme.PaddingFactor.PaddingS }
+                ListElement { name: qsTr("M"); value: Theme.PaddingFactor.PaddingM }
+                ListElement { name: qsTr("L"); value: Theme.PaddingFactor.PaddingL }
+            }
+
+            value: root.paddingFactor
+
+            onMoved: root.paddingFactorChangeRequested(value)
+        }
+
         Rectangle {
-            id: modeSeparator
-            anchors.top: fontSizeSlider.bottom
-            anchors.topMargin: Theme.padding*3
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: 1
+            Layout.topMargin: Theme.xlPadding
+            Layout.preferredHeight: 1
+            Layout.fillWidth: true
             color: Theme.palette.separator
         }
 
         StatusSectionHeadline {
-            id: sectionHeadlineAppearance
             text: qsTr("Mode")
-            anchors.top: modeSeparator.bottom
-            anchors.topMargin: Theme.padding*3
-            anchors.left: parent.left
-            anchors.right: parent.right
+            Layout.topMargin: Theme.xlPadding
         }
 
         RowLayout {
-            id: appearanceSection
-            anchors.top: sectionHeadlineAppearance.bottom
-            anchors.topMargin: Theme.padding
-            anchors.left: parent.left
-            anchors.right: parent.right
+            id: modeRow
+
+            Layout.fillWidth: true
             spacing: Theme.halfPadding
 
             StatusImageRadioButton {
-                Layout.preferredWidth: parent.width/3 - parent.spacing
-                Layout.preferredHeight: implicitHeight
+                Layout.fillWidth: true
                 image.source: Theme.png("appearance-light")
                 control.text: qsTr("Light")
                 control.checked: root.theme === Theme.Style.Light
@@ -129,7 +143,7 @@ SettingsContentBase {
             }
 
             StatusImageRadioButton {
-                Layout.preferredWidth: parent.width/3 - parent.spacing
+                Layout.fillWidth: true
                 image.source: Theme.png("appearance-dark")
                 control.text: qsTr("Dark")
                 control.checked: root.theme === Theme.Style.Dark
@@ -141,7 +155,7 @@ SettingsContentBase {
             }
 
             StatusImageRadioButton {
-                Layout.preferredWidth: parent.width/3 - parent.spacing
+                Layout.fillWidth: true
                 image.source: Theme.png("appearance-system")
                 control.text: qsTr("System")
                 control.checked: root.theme === Theme.Style.System

ui/app/mainui/AppMain.qml

@@ -869,11 +869,23 @@ Item {
         property var recentEmojis
         property string skinColor // NB: must be a string for the twemoji lib to work; we don't want the `#` in the name
         property int theme: Theme.Style.System
-        property int fontSize: Theme.FontSize.FontSizeM
+        property int fontSize: {
+            if (appMain.width < Theme.portraitBreakpoint.width) {
+                return Theme.FontSize.FontSizeS
+            }
+            return Theme.FontSize.FontSizeM
+        }
+        property int paddingFactor: {
+            if (appMain.width < Theme.portraitBreakpoint.width) {
+                return Theme.PaddingFactor.PaddingXXS
+            }
+            return Theme.PaddingFactor.PaddingM
+        }
 
         Component.onCompleted: {
             Theme.changeTheme(appMainLocalSettings.theme)
             Theme.changeFontSize(appMainLocalSettings.fontSize)
+            Theme.changePaddingFactor(appMainLocalSettings.paddingFactor)
         }
     }
 
@@ -2118,6 +2130,7 @@ Item {
 
                         theme: appMainLocalSettings.theme
                         fontSize: appMainLocalSettings.fontSize
+                        paddingFactor: appMainLocalSettings.paddingFactor
 
                         whitelistedDomainsModel: appMainLocalSettings.whitelistedUnfurledDomains
 
@@ -2135,6 +2148,10 @@ Item {
                             appMainLocalSettings.fontSize = fontSize
                             Theme.changeFontSize(fontSize)
                         }
+                        onPaddingFactorChangeRequested: function(paddingFactor) {
+                            appMainLocalSettings.paddingFactor = paddingFactor
+                            Theme.changePaddingFactor(paddingFactor)
+                        }
                         // Communities related settings view:
                         onLeaveCommunityRequest: appMain.communitiesStore.leaveCommunity(communityId)
                         onSetCommunityMutedRequest: appMain.communitiesStore.setCommunityMuted(communityId, mutedType)

ui/i18n/qml_base_en.ts

@@ -2140,6 +2140,14 @@ from &quot;%1&quot; to &quot;%2&quot;</source>
         <source>Mode</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Padding factor</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <source>XXS</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <source>Light</source>
         <translation type="unfinished"></translation>

ui/i18n/qml_base_lokalise_en.ts

@@ -2627,6 +2627,16 @@
       <comment>AppearanceView</comment>
       <translation>Mode</translation>
     </message>
+    <message>
+      <source>Padding factor</source>
+      <comment>AppearanceView</comment>
+      <translation>Padding factor</translation>
+    </message>
+    <message>
+      <source>XXS</source>
+      <comment>AppearanceView</comment>
+      <translation>XXS</translation>
+    </message>
     <message>
       <source>Light</source>
       <comment>AppearanceView</comment>

ui/i18n/qml_cs.ts

@@ -2147,17 +2147,25 @@ from &quot;%1&quot; to &quot;%2&quot;</source>
         <source>Mode</source>
         <translation>Režim</translation>
     </message>
+    <message>
+        <source>Padding factor</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <source>XXS</source>
+        <translation type="unfinished"></translation>
+    </message>
     <message>
         <source>Light</source>
-        <translation>Světlý</translation>
+        <translation type="unfinished"></translation>
     </message>
     <message>
         <source>Dark</source>
-        <translation>Tmavý</translation>
+        <translation type="unfinished"></translation>
     </message>
     <message>
         <source>System</source>
-        <translation>Systémový</translation>
+        <translation type="unfinished">Systémový</translation>
     </message>
 </context>
 <context>