status-desktop/ui/app/AppLayouts/Profile/views/AppearanceView.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 {
    id: appearanceView

    property var systemPalette
    property var store
    property var globalStore
    property int profileContentWidth

    enum Theme {
        Light,
        Dark,
        System
    }

    function updateTheme(theme) {
        localAppSettings.theme = theme
        Style.changeTheme(theme, systemPalette.isCurrentSystemThemeDark())
    }

    function updateFontSize(fontSize) {
        Style.changeFontSize(fontSize)
    }

    height: parent.height
    width: parent.width
    contentHeight: appearanceContainer.height
    clip: true

    Item {
        id: appearanceContainer
        width: 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: appearanceView.rootStore
//                messageStore: appearanceView.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.messageContentType.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.messageContentType.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
                appearanceView.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 = appearanceView.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) {
                    appearanceView.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) {
                        appearanceView.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) {
                        appearanceView.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) {
                        appearanceView.updateTheme(Universal.System)
                    }
                }
            }
        }
    }
}