diff --git a/mobile/wrapperApp/sources/main.cpp b/mobile/wrapperApp/sources/main.cpp
index 7a6614abcda..fc19307f50d 100644
--- a/mobile/wrapperApp/sources/main.cpp
+++ b/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);
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml
index 2371ce74edb..eb6028c66a3 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml
+++ b/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
}
}
diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml
index 43597e42851..ca6c1fe9c1d 100644
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@@ -87,9 +87,10 @@ 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)
@@ -97,6 +98,7 @@ StatusSectionLayout {
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)
}
}
diff --git a/ui/app/AppLayouts/Profile/views/AppearanceView.qml b/ui/app/AppLayouts/Profile/views/AppearanceView.qml
index 3074c8a85bb..51dcc7f3b1b 100644
--- a/ui/app/AppLayouts/Profile/views/AppearanceView.qml
+++ b/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
diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml
index b0e532aa5f8..6292462701e 100644
--- a/ui/app/mainui/AppMain.qml
+++ b/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)
diff --git a/ui/i18n/qml_base_en.ts b/ui/i18n/qml_base_en.ts
index 674511b5ab8..8baa90c4ddd 100644
--- a/ui/i18n/qml_base_en.ts
+++ b/ui/i18n/qml_base_en.ts
@@ -2140,6 +2140,14 @@ from "%1" to "%2"
Mode
+
+ Padding factor
+
+
+
+ XXS
+
+
Light
diff --git a/ui/i18n/qml_base_lokalise_en.ts b/ui/i18n/qml_base_lokalise_en.ts
index 33faa1e845b..447f0ad60a8 100644
--- a/ui/i18n/qml_base_lokalise_en.ts
+++ b/ui/i18n/qml_base_lokalise_en.ts
@@ -2627,6 +2627,16 @@
AppearanceView
Mode
+
+ Padding factor
+ AppearanceView
+ Padding factor
+
+
+ XXS
+ AppearanceView
+ XXS
+
Light
AppearanceView
diff --git a/ui/i18n/qml_cs.ts b/ui/i18n/qml_cs.ts
index 716e3d79c7b..9b3d7098c12 100644
--- a/ui/i18n/qml_cs.ts
+++ b/ui/i18n/qml_cs.ts
@@ -2147,17 +2147,25 @@ from "%1" to "%2"
Mode
Režim
+
+ Padding factor
+
+
+
+ XXS
+
+
Light
- Světlý
+
Dark
- Tmavý
+
System
- Systémový
+ Systémový
diff --git a/ui/i18n/qml_ko.ts b/ui/i18n/qml_ko.ts
index 672a2d84f7b..a383dd742b1 100644
--- a/ui/i18n/qml_ko.ts
+++ b/ui/i18n/qml_ko.ts
@@ -2133,17 +2133,25 @@ from "%1" to "%2"
Mode
모드
+
+ Padding factor
+
+
+
+ XXS
+
+
Light
- 라이트
+
Dark
- 다크
+
System
- 시스템
+ 시스템
diff --git a/ui/main.qml b/ui/main.qml
index 80c201b6ca1..561e7bcd758 100644
--- a/ui/main.qml
+++ b/ui/main.qml
@@ -109,15 +109,6 @@ Window {
applicationWindow.visible = true
}
- function updatePaddings() {
- if (applicationWindow.width < Theme.portraitBreakpoint.width) {
- const coefficient = applicationWindow.width / Theme.portraitBreakpoint.width;
- Theme.updatePaddings(Theme.defaultPadding * coefficient);
- } else {
- Theme.updatePaddings(Theme.defaultPadding);
- }
- }
-
function restoreAppState() {
let geometry = localAppSettings.geometry;
let visibility = localAppSettings.visibility;
@@ -177,7 +168,6 @@ Window {
}
onWidthChanged: {
- updatePaddings()
Qt.callLater(storeAppState)
}
onHeightChanged: Qt.callLater(storeAppState)
@@ -407,9 +397,6 @@ Window {
Global.openMetricsEnablePopupRequested.connect(openMetricsEnablePopup)
Global.addCentralizedMetricIfEnabled.connect(metricsStore.addCentralizedMetricIfEnabled)
- // Without this the paddings are not updated correctly when launched in portrait mode
- updatePaddings()
-
nativeSafeAreaBottom = mobileUI.safeAreaBottom + mobileUI.navbarHeight
// SafeArea margins works well out of the box when app uses regular qml Window as a top level