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.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
            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
                //% "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: 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
            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
            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.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
            //% "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
                //% "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)
                    }
                }
            }
        }
    }
}