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

370 lines
12 KiB
QML
Raw Normal View History

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
2021-02-18 16:36:05 +00:00
//% "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"
2021-02-18 16:36:05 +00:00
//% "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
2020-11-30 17:03:52 +00:00
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
2021-02-18 16:36:05 +00:00
//% "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
2021-02-18 16:36:05 +00:00
//% "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
from: 0
to: 5
stepSize: 1
value: localAccountSensitiveSettings.fontSize
onValueChanged: {
localAccountSensitiveSettings.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
StatusBaseText {
font.pixelSize: 15
2021-02-18 16:36:05 +00:00
//% "XS"
text: qsTrId("xs")
Layout.preferredWidth: fontSizeSlider.width/6
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
2021-02-18 16:36:05 +00:00
//% "S"
text: qsTrId("s")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
2021-02-18 16:36:05 +00:00
//% "M"
text: qsTrId("m")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
2021-02-18 16:36:05 +00:00
//% "L"
text: qsTrId("l")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 2
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
2021-02-18 16:36:05 +00:00
//% "XL"
text: qsTrId("xl")
Layout.preferredWidth: fontSizeSlider.width/6
Layout.leftMargin: 0
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 15
2021-02-18 16:36:05 +00:00
//% "XXL"
text: qsTrId("xxl")
Layout.alignment: Qt.AlignRight
Layout.leftMargin: -Style.current.smallPadding
color: Theme.palette.directColor1
}
}
StatusBaseText {
id: labelZoom
anchors.top: fontSizeSliderLegend.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
2021-09-02 09:57:32 +00:00
readonly property int initialValue: {
let scaleFactorStr = root.store.readTextFile(uiScaleFilePath)
2021-09-02 09:57:32 +00:00
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
from: 50
to: 200
stepSize: 50
2021-09-02 09:57:32 +00:00
value: initialValue
onValueChanged: {
if (value !== initialValue) {
root.store.writeTextFile(uiScaleFilePath, value / 100.0)
2021-09-02 06:54:02 +00:00
}
}
2021-09-02 09:57:32 +00:00
onPressedChanged: {
if (!pressed && value !== initialValue) {
confirmAppRestartModal.open()
}
}
ConfirmAppRestartModal {
id: confirmAppRestartModal
2021-09-02 12:39:50 +00:00
onClosed: {
zoomSlider.value = zoomSlider.initialValue
}
}
}
RowLayout {
id: zoomSliderLegend
anchors.top: zoomSlider.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
2021-02-18 16:36:05 +00:00
//% "Appearance"
text: qsTrId("appearance")
// anchors.top: chatModeSection.bottom
anchors.top: zoomSliderLegend.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
2021-02-18 16:36:05 +00:00
//% "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
2021-02-18 16:36:05 +00:00
//% "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
2021-02-18 16:36:05 +00:00
//% "System"
control.text: qsTrId("system")
control.checked: localAppSettings.theme === Universal.System
onRadioCheckedChanged: {
if (checked) {
root.updateTheme(Universal.System)
}
}
}
}
}
}