ukui-menu/qml/AppUI/EditText.qml

/*
 * Copyright (C) 2023, KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0

Item {
    id: contain
    property bool textCenterIn: false
    property bool editStatus: false
    property string textEdited: title
    property bool isFullScreenFolder: false
    property real textInputSize: 14

    Component {
        id: unEditText
        AppControls2.StyleText {
            id: textShow
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: contain.textCenterIn ? Text.AlignHCenter : Text.AlignLeft
            elide: Text.ElideRight
            text: contain.textEdited
            paletteRole: isFullScreenFolder ? Palette.HighlightedText : Palette.Text
            font.bold: !isFullScreenFolder
            font.pointSize: isFullScreenFolder ? textUltra : systemFontSize

            MouseArea {
                id: textArea
                anchors.fill: parent
                onDoubleClicked: {
                    contain.editStatus = true;
                    contain.textInputSize = textShow.font.pointSize;
                }
            }
        }
    }

    Component {
        id: editText
        AppControls2.StyleBackground {
            radius: 6
            useStyleTransparent: false
            alpha: textEdit.activeFocus ? 0.04 : 0
            paletteRole: Palette.Text
            border.width: 2
            borderAlpha: textEdit.activeFocus ? 1 : 0
            borderColor: Palette.Highlight

            TextInput {
                id: textEdit
                clip: true
                anchors.left: parent.left
                anchors.leftMargin: 8
                anchors.right: buttonMouseArea.left
                anchors.rightMargin: 8
                anchors.verticalCenter: parent.verticalCenter
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: contain.textCenterIn ? Text.AlignHCenter : Text.AlignLeft
                text: contain.textEdited
                selectByMouse: true
                maximumLength: 14
                font.bold: !isFullScreenFolder
                font.pointSize: contain.textInputSize

                onEditingFinished: {
                    modelManager.getFolderModel().renameFolder(text);
                    contain.textEdited = text;
                    contain.editStatus = false;
                }

                property int textColor: isFullScreenFolder ? Palette.HighlightedText : Palette.Text
                function updateTextInputColor() {
                    color = themePalette.paletteColor(textColor);
                    selectionColor = themePalette.paletteColor(Palette.Highlight);
                }

                Component.onCompleted: {
                    updateTextInputColor();
                    themePalette.styleColorChanged.connect(updateTextInputColor);
                    forceActiveFocus();
                }

                Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor);

            }

            MouseArea {
                id: buttonMouseArea
                hoverEnabled: true
                width: 16; height: width
                anchors.right: parent.right
                anchors.rightMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                visible: textEdit.activeFocus

                ThemeIcon {
                    anchors.centerIn: parent
                    width: 16; height: width
                    source: "image://appicon/edit-clear-symbolic"
                    highLight: isFullScreenFolder
                    autoHighLight: !isFullScreenFolder
                }

                onClicked: {
                    textEdit.text = textEdited;
                    contain.editStatus = false;
                }
            }
        }
    }

    Loader {
        id: editLoader
        anchors.fill: parent
        sourceComponent: contain.editStatus ? editText : unEditText
    }
}