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

371 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.status 1.0
//TODO remove import dependency
import "../../Chat/views"
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)
}
}
}
}
}
}