status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 Iuri Matias
parent 2f5bcb4d0a
commit 7ce11939b1
7 changed files with 109 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml
View File

@ -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 {

4
ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
View File

@ -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

4
ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml
View File

@ -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
}

2
ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
View File

@ -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

19
ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml
View File

@ -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
}
}
}

61
ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml
View File

@ -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;
}
}
}

24
ui/app/AppLayouts/Profile/views/AppearanceView.qml
View File

@ -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)
}
}
}