fix(chat): Connected font sizes to Theme properties

This commit is contained in:
Igor Sirotin 2022-10-03 16:39:30 +03:00 committed by Igor Sirotin
parent 1aff57abff
commit 7d08c06524
7 changed files with 109 additions and 18 deletions

View File

@ -41,6 +41,7 @@ Item {
Layout.bottomMargin: 2 // offset for the underline to stay vertically centered Layout.bottomMargin: 2 // offset for the underline to stay vertically centered
font.weight: Font.Medium font.weight: Font.Medium
font.underline: mouseArea.containsMouse font.underline: mouseArea.containsMouse
font.pixelSize: Theme.primaryTextFontSize
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
text: root.amISender ? qsTr("You") : root.sender.displayName text: root.amISender ? qsTr("You") : root.sender.displayName
@ -61,7 +62,7 @@ Item {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: text visible: text
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 10 font.pixelSize: Theme.asideTextFontSize
text: root.messageOriginInfo text: root.messageOriginInfo
} }
StatusContactVerificationIcons { StatusContactVerificationIcons {
@ -75,13 +76,13 @@ Item {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: !root.amISender && !!root.sender.secondaryName visible: !root.amISender && !!root.sender.secondaryName
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 10 font.pixelSize: Theme.asideTextFontSize
text: `(${root.sender.secondaryName})` text: `(${root.sender.secondaryName})`
} }
StatusBaseText { StatusBaseText {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: secondaryDisplayName.visible && tertiaryDetailText.visible visible: secondaryDisplayName.visible && tertiaryDetailText.visible
font.pixelSize: 10 font.pixelSize: Theme.asideTextFontSize
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: "•" text: "•"
} }
@ -89,7 +90,7 @@ Item {
id: tertiaryDetailText id: tertiaryDetailText
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: !root.amISender && root.messageOriginInfo === "" && text visible: !root.amISender && root.messageOriginInfo === "" && text
font.pixelSize: 10 font.pixelSize: Theme.asideTextFontSize
elide: Text.ElideMiddle elide: Text.ElideMiddle
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: root.tertiaryDetail ? Utils.elideText(root.tertiaryDetail, 5, 3) : "" text: root.tertiaryDetail ? Utils.elideText(root.tertiaryDetail, 5, 3) : ""
@ -97,7 +98,7 @@ Item {
StatusBaseText { StatusBaseText {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: verificationIcons.width <= 0 || secondaryDisplayName.visible || root.amISender || tertiaryDetailText.visible visible: verificationIcons.width <= 0 || secondaryDisplayName.visible || root.amISender || tertiaryDetailText.visible
font.pixelSize: 10 font.pixelSize: Theme.asideTextFontSize
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: "•" text: "•"
} }
@ -108,7 +109,7 @@ Item {
StatusBaseText { StatusBaseText {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
font.pixelSize: 12 font.pixelSize: Theme.tertiaryTextFontSize
text: root.resendText text: root.resendText
visible: showResendButton && !!timestampText.text visible: showResendButton && !!timestampText.text
MouseArea { MouseArea {

View File

@ -74,7 +74,7 @@ Item {
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
selectionColor: Theme.palette.primaryColor3 selectionColor: Theme.palette.primaryColor3
selectedTextColor: Theme.palette.directColor1 selectedTextColor: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.secondaryTextFontSize
font.weight: Font.Medium font.weight: Font.Medium
selectByMouse: true selectByMouse: true
readOnly: true readOnly: true
@ -84,7 +84,7 @@ Item {
StatusTextMessage { StatusTextMessage {
Layout.fillWidth: true Layout.fillWidth: true
textField.text: replyDetails.messageText textField.text: replyDetails.messageText
textField.font.pixelSize: 13 textField.font.pixelSize: Theme.secondaryTextFontSize
textField.color: Theme.palette.baseColor1 textField.color: Theme.palette.baseColor1
textField.height: 18 textField.height: 18
clip: true clip: true

View File

@ -52,13 +52,13 @@ Loader {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4 Layout.leftMargin: -4
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.secondaryTextFontSize
text: pinnedMsgInfoText text: pinnedMsgInfoText
} }
StatusBaseText { StatusBaseText {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.secondaryTextFontSize
font.weight: Font.Medium font.weight: Font.Medium
text: pinnedBy text: pinnedBy
} }

View File

@ -38,7 +38,7 @@ Item {
selectionColor: Theme.palette.primaryColor3 selectionColor: Theme.palette.primaryColor3
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.family: Theme.palette.baseFont.name font.family: Theme.palette.baseFont.name
font.pixelSize: 15 font.pixelSize: Theme.primaryTextFontSize
textFormat: Text.RichText textFormat: Text.RichText
wrapMode: Text.Wrap wrapMode: Text.Wrap
readOnly: true readOnly: true

View File

@ -10,14 +10,25 @@ StatusSlider {
id: root id: root
property var model: [] property var model: []
property string textRole: ""
property string valueRole: ""
property int fontSize: 12 property int fontSize: 12
property int labelMargin: 2 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 fillColor: bgColor
handleColor: Theme.palette.primaryColor1 handleColor: Theme.palette.primaryColor1
handleSize: 14 handleSize: 14
from: 0 from: 0
to: model.length - 1 to: (Array.isArray(model) ? model.length : model.count) - 1
stepSize: 1 stepSize: 1
snapMode: Slider.SnapAlways snapMode: Slider.SnapAlways
@ -45,7 +56,11 @@ StatusSlider {
horizontalAlignment: Qt.AlignHCenter horizontalAlignment: Qt.AlignHCenter
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: root.fontSize font.pixelSize: root.fontSize
text: modelData
text: root.textRole ? (Array.isArray(root.model)
? modelData[root.textRole]
: model[root.textRole])
: modelData
} }
} }
} }

View File

@ -4,9 +4,70 @@ import QtQuick 2.13
QtObject { QtObject {
id: appTheme id: appTheme
enum FontSize {
FontSizeXS,
FontSizeS,
FontSizeM,
FontSizeL,
FontSizeXL,
FontSizeXXL
}
property QtObject palette: StatusLightTheme {} property QtObject palette: StatusLightTheme {}
property int primaryTextFontSize: 15
property int secondaryTextFontSize: 14
property int tertiaryTextFontSize: 12
property int asideTextFontSize: 10
function setTheme(theme) { function setTheme(theme) {
palette = 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;
}
}
} }

View File

@ -30,6 +30,7 @@ SettingsContentBase {
function updateFontSize(fontSize) { function updateFontSize(fontSize) {
Style.changeFontSize(fontSize) Style.changeFontSize(fontSize)
Theme.updateFontSize(fontSize)
} }
Component.onCompleted: { Component.onCompleted: {
@ -94,12 +95,25 @@ SettingsContentBase {
anchors.top: sectionHeadlineFontSize.bottom anchors.top: sectionHeadlineFontSize.bottom
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
width: parent.width 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 value: localAccountSensitiveSettings.fontSize
onValueChanged: {
if (localAccountSensitiveSettings.fontSize !== value) { onCurrentValueChanged: {
localAccountSensitiveSettings.fontSize = value const fontSize = currentValue
appearanceView.updateFontSize(value) if (localAccountSensitiveSettings.fontSize !== fontSize) {
localAccountSensitiveSettings.fontSize = fontSize
appearanceView.updateFontSize(fontSize)
} }
} }
} }