status-desktop/ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml

290 lines
9.6 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Controls.Universal 2.12
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../../Chat/ChatColumn"
ScrollView {
height: parent.height
width: parent.width
id: root
contentHeight: appearanceContainer.height
clip: true
enum Theme {
Light,
Dark,
System
}
function updateTheme(theme) {
let themeStr = Universal.theme === Universal.Dark ? "dark" : "light"
if (theme === AppearanceContainer.Theme.Light) {
themeStr = "light"
} else if (theme === AppearanceContainer.Theme.Dark) {
themeStr = "dark"
}
profileModel.changeTheme(theme)
Style.changeTheme(themeStr)
}
function updateFontSize(fontSize) {
Style.changeFontSize(fontSize)
}
Item {
id: appearanceContainer
anchors.right: parent.right
anchors.rightMargin: contentMargin
anchors.left: parent.left
anchors.leftMargin: contentMargin
height: this.childrenRect.height + 100
ButtonGroup {
id: chatModeSetting
}
ButtonGroup {
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: fontSizeSliderLegend.bottom
anchors.topMargin: Style.current.padding*2
anchors.left: parent.left
anchors.right: parent.right
}
RowLayout {
id: chatModeSection
anchors.top: sectionHeadlineChatMode.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
StatusImageRadioButton {
padding: Style.current.padding
image.source: "../../../img/appearance-normal-light.svg"
image.height: 186
control.text: qsTr("Normal")
control.checked: !appSettings.compactMode
control.onCheckedChanged: {
if (control.checked) {
appSettings.compactMode = false
}
}
}
StatusImageRadioButton {
padding: Style.current.padding
image.source: "../../../img/appearance-compact-light.svg"
image.height: 186
control.text: qsTr("Compact")
control.checked: appSettings.compactMode
control.onCheckedChanged: {
if (control.checked) {
appSettings.compactMode = true
}
}
}
}
StatusSectionHeadline {
id: sectionHeadlineAppearance
text: qsTr("Appearance")
anchors.top: chatModeSection.bottom
anchors.topMargin: Style.current.padding*3
anchors.left: parent.left
anchors.right: parent.right
}
RowLayout {
id: appearanceSection
anchors.top: sectionHeadlineAppearance.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
StatusImageRadioButton {
padding: Style.current.smallPadding
width: 208
height: 184
image.source: "../../../img/appearance-normal-light.svg"
image.height: 128
control.text: qsTr("Light")
control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.Light
control.onClicked: {
if (control.checked) {
root.updateTheme(AppearanceContainer.Theme.Light)
}
}
}
StatusImageRadioButton {
padding: Style.current.smallPadding
width: 208
height: 184
image.source: "../../../img/appearance-normal-dark.svg"
image.height: 128
control.text: qsTr("Dark")
control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.Dark
control.onClicked: {
if (control.checked) {
root.updateTheme(AppearanceContainer.Theme.Dark)
}
}
}
StatusImageRadioButton {
padding: Style.current.smallPadding
width: 208
height: 184
image.source: "../../../img/appearance-normal-system.png"
image.height: 128
control.text: qsTr("System")
control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.System
control.onClicked: {
if (control.checked) {
root.updateTheme(AppearanceContainer.Theme.System)
}
}
}
// For the case where the theme was finally loaded by status-go in init(),
// update the theme in qml
Connections {
target: profileModel
onProfileChanged: {
root.updateTheme(profileModel.profile.appearance)
}
}
}
}
}