diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml index d4926b7d97..17a003808a 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml @@ -41,6 +41,7 @@ Item { Layout.bottomMargin: 2 // offset for the underline to stay vertically centered font.weight: Font.Medium font.underline: mouseArea.containsMouse + font.pixelSize: Theme.primaryTextFontSize wrapMode: Text.WordWrap color: Theme.palette.primaryColor1 text: root.amISender ? qsTr("You") : root.sender.displayName @@ -61,7 +62,7 @@ Item { verticalAlignment: Text.AlignVCenter visible: text color: Theme.palette.baseColor1 - font.pixelSize: 10 + font.pixelSize: Theme.asideTextFontSize text: root.messageOriginInfo } StatusContactVerificationIcons { @@ -75,13 +76,13 @@ Item { verticalAlignment: Text.AlignVCenter visible: !root.amISender && !!root.sender.secondaryName color: Theme.palette.baseColor1 - font.pixelSize: 10 + font.pixelSize: Theme.asideTextFontSize text: `(${root.sender.secondaryName})` } StatusBaseText { verticalAlignment: Text.AlignVCenter visible: secondaryDisplayName.visible && tertiaryDetailText.visible - font.pixelSize: 10 + font.pixelSize: Theme.asideTextFontSize color: Theme.palette.baseColor1 text: "•" } @@ -89,7 +90,7 @@ Item { id: tertiaryDetailText verticalAlignment: Text.AlignVCenter visible: !root.amISender && root.messageOriginInfo === "" && text - font.pixelSize: 10 + font.pixelSize: Theme.asideTextFontSize elide: Text.ElideMiddle color: Theme.palette.baseColor1 text: root.tertiaryDetail ? Utils.elideText(root.tertiaryDetail, 5, 3) : "" @@ -97,7 +98,7 @@ Item { StatusBaseText { verticalAlignment: Text.AlignVCenter visible: verificationIcons.width <= 0 || secondaryDisplayName.visible || root.amISender || tertiaryDetailText.visible - font.pixelSize: 10 + font.pixelSize: Theme.asideTextFontSize color: Theme.palette.baseColor1 text: "•" } @@ -108,7 +109,7 @@ Item { StatusBaseText { verticalAlignment: Text.AlignVCenter color: Theme.palette.dangerColor1 - font.pixelSize: 12 + font.pixelSize: Theme.tertiaryTextFontSize text: root.resendText visible: showResendButton && !!timestampText.text MouseArea { diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml index c4f28ba141..3b4cdb1e7d 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml @@ -74,7 +74,7 @@ Item { color: Theme.palette.baseColor1 selectionColor: Theme.palette.primaryColor3 selectedTextColor: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.secondaryTextFontSize font.weight: Font.Medium selectByMouse: true readOnly: true @@ -84,7 +84,7 @@ Item { StatusTextMessage { Layout.fillWidth: true textField.text: replyDetails.messageText - textField.font.pixelSize: 13 + textField.font.pixelSize: Theme.secondaryTextFontSize textField.color: Theme.palette.baseColor1 textField.height: 18 clip: true diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml index 15f74a0a34..01ab5c45ca 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml @@ -52,13 +52,13 @@ Loader { Layout.alignment: Qt.AlignVCenter Layout.leftMargin: -4 color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.secondaryTextFontSize text: pinnedMsgInfoText } StatusBaseText { Layout.alignment: Qt.AlignVCenter color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.secondaryTextFontSize font.weight: Font.Medium text: pinnedBy } diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml index 5368885c0e..e64d6b71ef 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml @@ -38,7 +38,7 @@ Item { selectionColor: Theme.palette.primaryColor3 color: Theme.palette.directColor1 font.family: Theme.palette.baseFont.name - font.pixelSize: 15 + font.pixelSize: Theme.primaryTextFontSize textFormat: Text.RichText wrapMode: Text.Wrap readOnly: true diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml b/ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml index 9a93e2321b..f3ad039b0e 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml @@ -10,14 +10,25 @@ StatusSlider { id: root property var model: [] + property string textRole: "" + property string valueRole: "" + property int fontSize: 12 property int labelMargin: 2 + readonly property string currentText: Array.isArray(root.model) + ? root.model[value] + : root.model.get(value)[root.textRole] + + readonly property var currentValue: Array.isArray(root.model) + ? root.model[value] + : root.model.get(value)[root.valueRole] + fillColor: bgColor handleColor: Theme.palette.primaryColor1 handleSize: 14 from: 0 - to: model.length - 1 + to: (Array.isArray(model) ? model.length : model.count) - 1 stepSize: 1 snapMode: Slider.SnapAlways @@ -45,7 +56,11 @@ StatusSlider { horizontalAlignment: Qt.AlignHCenter color: Theme.palette.baseColor1 font.pixelSize: root.fontSize - text: modelData + + text: root.textRole ? (Array.isArray(root.model) + ? modelData[root.textRole] + : model[root.textRole]) + : modelData } } } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml index 3c4a1dd7aa..662f0f203e 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml @@ -4,9 +4,70 @@ import QtQuick 2.13 QtObject { id: appTheme + + enum FontSize { + FontSizeXS, + FontSizeS, + FontSizeM, + FontSizeL, + FontSizeXL, + FontSizeXXL + } + property QtObject palette: StatusLightTheme {} + property int primaryTextFontSize: 15 + property int secondaryTextFontSize: 14 + property int tertiaryTextFontSize: 12 + property int asideTextFontSize: 10 + function setTheme(theme) { palette = theme } + + function updateFontSize(fontSize) { + switch (fontSize) { + case Theme.FontSizeXS: + primaryTextFontSize = 13 + secondaryTextFontSize = 12 + tertiaryTextFontSize = 10 + asideTextFontSize = 8 + break; + + case Theme.FontSizeS: + primaryTextFontSize = 14 + secondaryTextFontSize = 13 + tertiaryTextFontSize = 11 + asideTextFontSize = 9 + break; + + case Theme.FontSizeM: + primaryTextFontSize = 15 + secondaryTextFontSize = 14 + tertiaryTextFontSize = 12 + asideTextFontSize = 10 + break; + + case Theme.FontSizeL: + primaryTextFontSize = 16 + secondaryTextFontSize = 15 + tertiaryTextFontSize = 13 + asideTextFontSize = 11 + break; + + case Theme.FontSizeXL: + primaryTextFontSize = 17 + secondaryTextFontSize = 16 + tertiaryTextFontSize = 14 + asideTextFontSize = 12 + break; + + case Theme.FontSizeXXL: + primaryTextFontSize = 18 + secondaryTextFontSize = 17 + tertiaryTextFontSize = 15 + asideTextFontSize = 13 + break; + } + } } diff --git a/ui/app/AppLayouts/Profile/views/AppearanceView.qml b/ui/app/AppLayouts/Profile/views/AppearanceView.qml index 89ed5c1190..2b2ebc186d 100644 --- a/ui/app/AppLayouts/Profile/views/AppearanceView.qml +++ b/ui/app/AppLayouts/Profile/views/AppearanceView.qml @@ -30,6 +30,7 @@ SettingsContentBase { function updateFontSize(fontSize) { Style.changeFontSize(fontSize) + Theme.updateFontSize(fontSize) } Component.onCompleted: { @@ -94,12 +95,25 @@ SettingsContentBase { anchors.top: sectionHeadlineFontSize.bottom anchors.topMargin: Style.current.padding width: parent.width - model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL") ] + + textRole: "name" + valueRole: "value" + model: ListModel { + ListElement { name: qsTr("XS"); value: Theme.FontSizeXS } + ListElement { name: qsTr("S"); value: Theme.FontSizeS } + ListElement { name: qsTr("M"); value: Theme.FontSizeM } + ListElement { name: qsTr("L"); value: Theme.FontSizeL } + ListElement { name: qsTr("XL"); value: Theme.FontSizeXL } + ListElement { name: qsTr("XXL"); value: Theme.FontSizeXXL } + } + value: localAccountSensitiveSettings.fontSize - onValueChanged: { - if (localAccountSensitiveSettings.fontSize !== value) { - localAccountSensitiveSettings.fontSize = value - appearanceView.updateFontSize(value) + + onCurrentValueChanged: { + const fontSize = currentValue + if (localAccountSensitiveSettings.fontSize !== fontSize) { + localAccountSensitiveSettings.fontSize = fontSize + appearanceView.updateFontSize(fontSize) } } }