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

feat: allow users to change font size for chat messages 

Closes #737
This commit is contained in:
Pascal Precht 2020-11-25 11:46:18 +01:00 committed by Pascal Precht
parent 1277395431
commit 8b74141b99
10 changed files with 197 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/ChatColumn/Message.qml
View File

@ -119,7 +119,7 @@ Item {
StyledText {
id: fetchMoreButton
font.weight: Font.Medium
font.pixelSize: 15
font.pixelSize: Style.current.primaryTextFontSize
color: Style.current.blue
//% "↓ Fetch more messages"
text: qsTrId("load-more-messages")

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
View File

@ -42,7 +42,7 @@ Item {
textFormat: Text.RichText
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
font.pixelSize: 15
font.pixelSize: Style.current.primaryTextFontSize
readOnly: true
selectByMouse: true
color: Style.current.textColor

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatTime.qml
View File

@ -7,7 +7,7 @@ StyledTextEdit {
visible: isMessage
color: Style.current.darkGrey
text: Utils.formatTime(timestamp)
font.pixelSize: 10
font.pixelSize: Style.current.asideTextFontSize
readOnly: true
selectByMouse: true
}

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/Retry.qml
View File

@ -8,7 +8,7 @@ StyledText {
color: Style.current.red
//% "Resend"
text: qsTrId("resend-message")
font.pixelSize: 12
font.pixelSize: Style.current.tertiaryTextFontSize
visible: isCurrentUser && (timeout || isExpired)
MouseArea {
cursorShape: Qt.PointingHandCursor

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml
View File

@ -10,7 +10,7 @@ StyledTextEdit {
text: !isCurrentUser ? Utils.removeStatusEns(userName) : qsTrId("You")
color: (userName.startsWith("@") || isCurrentUser) ? Style.current.blue : Style.current.textColor
font.bold: true
font.pixelSize: 14
font.pixelSize: Style.current.secondaryTextFontSize
readOnly: true
wrapMode: Text.WordWrap
selectByMouse: true

125
ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml
View File

@ -5,6 +5,7 @@ import QtQuick.Controls.Universal 2.12
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../../Chat/ChatColumn"
ScrollView {
height: parent.height
@ -30,6 +31,10 @@ ScrollView {
Style.changeTheme(themeStr)
}
function updateFontSize(fontSize) {
Style.changeFontSize(fontSize)
}
Item {
id: appearanceContainer
anchors.right: parent.right
@ -46,10 +51,128 @@ ScrollView {
id: appearanceSetting
}
StatusSectionHeadline {
id: sectionHeadlinePreview
text: qsTr("Preview")
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
}
Rectangle {
id: preview
anchors.top: sectionHeadlinePreview.bottom
anchors.topMargin: Style.current.smallPadding
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
height: 220
radius: Style.current.radius
border.color: Style.current.border
color: Style.current.transparent
Message {
anchors.top: parent.top
anchors.topMargin: Style.current.padding*2
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
userName: "@vitalik"
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC"
message: qsTr("Blockchains will drop search costs, causing a kind of decomposition that allows you to have markets of entities that are horizontally segregated and vertically segregated.")
contentType: Constants.messageType
}
}
StatusSectionHeadline {
id: sectionHeadlineFontSize
text: qsTr("Size")
anchors.top: preview.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
}
StyledText {
id: labelFontSize
anchors.top: sectionHeadlineFontSize.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
font.pixelSize: 15
text: qsTr("Change font size")
}
StatusSlider {
id: fontSizeSlider
anchors.top: labelFontSize.bottom
anchors.topMargin: Style.current.padding
width: parent.width
minimumValue: 0
maximumValue: 5
stepSize: 1
value: appSettings.fontSize
onValueChanged: {
appSettings.fontSize = value
root.updateFontSize(value)
}
}
RowLayout {
id: fontSizeSliderLegend
anchors.top: fontSizeSlider.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
spacing: Style.current.smallPadding
StyledText {
font.pixelSize: 15
text: qsTr("XS")
Layout.preferredWidth: fontSizeSlider.width/6
}
StyledText {
font.pixelSize: 15
text: qsTr("S")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
}
StyledText {
font.pixelSize: 15
text: qsTr("M")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
}
StyledText {
font.pixelSize: 15
text: qsTr("L")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
}
StyledText {
font.pixelSize: 15
text: qsTr("XL")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 0
}
StyledText {
font.pixelSize: 15
text: qsTr("XXL")
Layout.alignment: Qt.AlignRight
Layout.leftMargin: -Style.current.smallPadding
}
}
StatusSectionHeadline {
id: sectionHeadlineChatMode
text: qsTr("Chat mode")
anchors.top: parent.top
anchors.top: fontSizeSliderLegend.bottom
anchors.topMargin: Style.current.padding*2
anchors.left: parent.left
anchors.right: parent.right
}

7
ui/imports/Constants.qml
View File

@ -22,6 +22,13 @@ QtObject {
readonly property string node: "node"
readonly property string ui: "ui"
readonly property int fontSizeXS: 0
readonly property int fontSizeS: 1
readonly property int fontSizeM: 2
readonly property int fontSizeL: 3
readonly property int fontSizeXL: 4
readonly property int fontSizeXXL: 5
readonly property int notifyAllMessages: 0
readonly property int notifyJustMentions: 1
readonly property int notifyNone: 2

4
ui/imports/Style.qml
View File

@ -16,4 +16,8 @@ QtObject {
}
}
property var changeFontSize: function (fontSize) {
current.updateFontSize(fontSize)
}
}

52
ui/imports/Themes/Theme.qml
View File

@ -1,4 +1,5 @@
import QtQuick 2.13
import "../"
QtObject {
property QtObject fontMedium: FontLoader { id: _fontMedium; source: "../../fonts/Inter/Inter-Medium.otf"; }
@ -54,4 +55,55 @@ QtObject {
property int leftTabPrefferedSize: 340
property int leftTabMinimumWidth: 300
property int leftTabMaximumWidth: 500
property int primaryTextFontSize: 15
property int secondaryTextFontSize: 14
property int tertiaryTextFontSize: 12
property int asideTextFontSize: 10
function updateFontSize(fontSize) {
switch (fontSize) {
case Constants.fontSizeXS:
primaryTextFontSize = 13
secondaryTextFontSize = 12
tertiaryTextFontSize = 10
asideTextFontSize = 8
break;
case Constants.fontSizeS:
primaryTextFontSize = 14
secondaryTextFontSize = 13
tertiaryTextFontSize = 11
asideTextFontSize = 9
break;
case Constants.fontSizeM:
primaryTextFontSize = 15
secondaryTextFontSize = 14
tertiaryTextFontSize = 12
asideTextFontSize = 10
break;
case Constants.fontSizeL:
primaryTextFontSize = 16
secondaryTextFontSize = 15
tertiaryTextFontSize = 13
asideTextFontSize = 11
break;
case Constants.fontSizeXL:
primaryTextFontSize = 17
secondaryTextFontSize = 16
tertiaryTextFontSize = 14
asideTextFontSize = 12
break;
case Constants.fontSizeXXL:
primaryTextFontSize = 18
secondaryTextFontSize = 17
tertiaryTextFontSize = 15
asideTextFontSize = 13
break;
}
}
}

4
ui/main.qml
View File

@ -85,6 +85,8 @@ ApplicationWindow {
property var whitelistedUnfurlingSites: ({})
property bool neverAskAboutUnfurlingAgain: false
property int fontSize: Constants.fontSizeM
// Browser settings
property bool autoLoadImages: true
property bool javaScriptEnabled: true
@ -118,6 +120,8 @@ ApplicationWindow {
property var whitelistedUnfurlingSites: defaultAppSettings.whitelistedUnfurlingSites
property bool neverAskAboutUnfurlingAgain: defaultAppSettings.neverAskAboutUnfurlingAgain
property int fontSize: defaultAppSettings.fontSize
// Browser settings
property bool autoLoadImages: defaultAppSettings.autoLoadImages
property bool javaScriptEnabled: defaultAppSettings.javaScriptEnabled