status-desktop/ui/app/AppLayouts/Profile/views/AppearanceView.qml

370 lines
13 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Controls.Universal 2.12
import utils 1.0
import shared 1.0
import shared.views 1.0
import shared.status 1.0
import shared.views.chat 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 as StatusQ
import "../popups"
ScrollView {
height: parent.height
width: parent.width
id: root
contentHeight: appearanceContainer.height
clip: true
property var store
property var globalStore
enum Theme {
Light,
Dark,
System
}
function updateTheme(theme) {
localAppSettings.theme = theme
Style.changeTheme(theme, systemPalette.isCurrentSystemThemeDark())
}
function updateFontSize(fontSize) {
Style.changeFontSize(fontSize)
}
Item {
id: appearanceContainer
width: profileContainer.profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
height: this.childrenRect.height + 100
ButtonGroup {
id: chatModeSetting
}
ButtonGroup {
id: appearanceSetting
}
StatusSectionHeadline {
id: sectionHeadlinePreview
//% "Preview"
text: qsTrId("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: paceholderMessage.height + Style.current.padding*4
radius: Style.current.radius
border.color: Style.current.border
color: Style.current.transparent
MessageView {
id: paceholderMessage
anchors.top: parent.top
anchors.topMargin: Style.current.padding*2
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
rootStore: root.rootStore
messageStore: root.globalStore.messageStore
///////////TODO Remove
userName: "@vitalik"
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC"
//% "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."
message: qsTrId("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
placeholderMessage: true
Component.onCompleted: {
messageStore.userName = "@vitalik";
messageStore.identicon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC";
//% "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."
messageStore.message = qsTrId("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-");
messageStore.contentType = Constants.messageType;
//messageStore.placeholderMessage = true;
}
}
}
StatusSectionHeadline {
id: sectionHeadlineFontSize
//% "Size"
text: qsTrId("size")
anchors.top: preview.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
}
StatusBaseText {
id: labelFontSize
anchors.top: sectionHeadlineFontSize.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
font.pixelSize: 15
//% "Change font size"
text: qsTrId("change-font-size")
color: Theme.palette.directColor1
}
StatusQ.StatusSlider {
id: fontSizeSlider
anchors.top: labelFontSize.bottom
anchors.topMargin: Style.current.padding
width: parent.width
height: 40
from: 0
to: 5
stepSize: 1
value: localAccountSensitiveSettings.fontSize
onValueChanged: {
localAccountSensitiveSettings.fontSize = value
root.updateFontSize(value)
}
RowLayout {
id: fontSizeSliderLegend
anchors.bottom: parent.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
spacing: Style.current.smallPadding
StatusBaseText {
font.pixelSize: 15
//% "XS"
text: qsTrId("xs")
Layout.preferredWidth: fontSizeSlider.width/6
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
//% "S"
text: qsTrId("s")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
//% "M"
text: qsTrId("m")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
//% "L"
text: qsTrId("l")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
//% "XL"
text: qsTrId("xl")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 0
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
//% "XXL"
text: qsTrId("xxl")
Layout.alignment: Qt.AlignRight
Layout.leftMargin: -Style.current.smallPadding
color: Theme.palette.directColor1
}
}
}
StatusBaseText {
id: labelZoom
anchors.top: fontSizeSlider.bottom
anchors.topMargin: Style.current.xlPadding
anchors.left: parent.left
font.pixelSize: 15
text: qsTr("Change Zoom (requires restart)")
color: Theme.palette.directColor1
}
StatusQ.StatusSlider {
id: zoomSlider
readonly property int initialValue: {
let scaleFactorStr = root.store.readTextFile(uiScaleFilePath)
if (scaleFactorStr === "") {
return 100
}
let scaleFactor = parseFloat(scaleFactorStr)
if (isNaN(scaleFactor)) {
return 100
}
return scaleFactor * 100
}
anchors.top: labelZoom.bottom
anchors.topMargin: Style.current.padding
width: parent.width
height: 40
from: 50
to: 200
stepSize: 50
value: initialValue
onValueChanged: {
if (value !== initialValue) {
root.store.writeTextFile(uiScaleFilePath, value / 100.0)
}
}
onPressedChanged: {
if (!pressed && value !== initialValue) {
confirmAppRestartModal.open()
}
}
ConfirmAppRestartModal {
id: confirmAppRestartModal
onClosed: {
zoomSlider.value = zoomSlider.initialValue
}
}
RowLayout {
id: zoomSliderLegend
anchors.bottom: parent.bottom
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
spacing: 0
StatusBaseText {
font.pixelSize: 15
text: "50%"
color: Theme.palette.directColor1
}
Item {
Layout.fillWidth: true
}
StatusBaseText {
font.pixelSize: 15
Layout.leftMargin: width / 2
text: "100%"
color: Theme.palette.directColor1
}
Item {
Layout.fillWidth: true
}
StatusBaseText {
font.pixelSize: 15
Layout.leftMargin: width / 2
text: "150%"
color: Theme.palette.directColor1
}
Item {
Layout.fillWidth: true
}
StatusBaseText {
font.pixelSize: 15
text: "200%"
color: Theme.palette.directColor1
}
}
}
StatusSectionHeadline {
id: sectionHeadlineAppearance
//% "Appearance"
text: qsTrId("appearance")
// anchors.top: chatModeSection.bottom
anchors.top: zoomSlider.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: Style.svg("appearance-normal-light")
image.height: 128
//% "Light"
control.text: qsTrId("light")
control.checked: localAppSettings.theme === Universal.Light
onRadioCheckedChanged: {
if (checked) {
root.updateTheme(Universal.Light)
}
}
}
StatusImageRadioButton {
padding: Style.current.smallPadding
width: 208
height: 184
image.source: Style.svg("appearance-normal-dark")
image.height: 128
//% "Dark"
control.text: qsTrId("dark")
control.checked: localAppSettings.theme === Universal.Dark
onRadioCheckedChanged: {
if (checked) {
root.updateTheme(Universal.Dark)
}
}
}
StatusImageRadioButton {
padding: Style.current.smallPadding
width: 208
height: 184
image.source: Style.svg("appearance-normal-system")
image.height: 128
//% "System"
control.text: qsTrId("system")
control.checked: localAppSettings.theme === Universal.System
onRadioCheckedChanged: {
if (checked) {
root.updateTheme(Universal.System)
}
}
}
}
}
}