From af4077b47c2c5f1ba1ab08f861742f2c728ad5c7 Mon Sep 17 00:00:00 2001 From: gjq Date: Sat, 8 Apr 2023 14:12:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E9=87=8D=E5=91=BD=E5=90=8D?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qml/AppControls2/FolderItem.qml | 150 ++++++++++++++++---------------- qml/AppUI/AppPageContent.qml | 101 +-------------------- qml/AppUI/EditText.qml | 125 ++++++++++++++++++++++++++ qml/qml.qrc | 1 + 4 files changed, 203 insertions(+), 174 deletions(-) create mode 100644 qml/AppUI/EditText.qml diff --git a/qml/AppControls2/FolderItem.qml b/qml/AppControls2/FolderItem.qml index 869f4be..85a2957 100644 --- a/qml/AppControls2/FolderItem.qml +++ b/qml/AppControls2/FolderItem.qml @@ -7,8 +7,9 @@ import org.ukui.menu.core 1.0 MouseArea { id: control property bool editStatus: false + property bool truncate: false hoverEnabled: true - ToolTip.visible: textShow.truncated && textShow.visible && control.containsMouse + ToolTip.visible: editStatus && truncate && control.containsMouse ToolTip.text: name StyleBackground { @@ -36,93 +37,94 @@ MouseArea { Layout.fillWidth: true Layout.fillHeight: true - StyleText { - id: textShow - anchors.fill: parent - visible: !control.editStatus - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - elide: Text.ElideRight - text: name - } - - AppControls2.StyleBackground { - anchors.fill: parent - radius: 6 - useStyleTransparent: false - alpha: textChange.activeFocus ? 0.04 : 0 - paletteRole: Palette.Text - border.width: 2 - borderAlpha: textChange.activeFocus ? 1 : 0 - borderColor: Palette.Highlight - - TextInput { - id: textChange - text: name - visible: control.editStatus - focus: false - clip: true - anchors.left: parent.left - anchors.leftMargin: 8 - anchors.right: buttonMouseArea.left - anchors.rightMargin: 8 - anchors.verticalCenter: parent.verticalCenter - activeFocusOnPress: false + Component { + id: unEditText + StyleText { + id: textShow verticalAlignment: Text.AlignVCenter - selectByMouse: true - maximumLength: 14 - - onEditingFinished: { - modelManager.getAppModel().renameFolder(id, text); - control.editStatus = false; - } - - function updateTextInputColor() { - color = themePalette.paletteColor(Palette.Text); - selectionColor = themePalette.paletteColor(Palette.Highlight); - } - + horizontalAlignment: Text.AlignLeft + elide: Text.ElideRight + text: name Component.onCompleted: { - updateTextInputColor(); - themePalette.styleColorChanged.connect(updateTextInputColor); + control.truncate = textShow.truncated } - - 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: textChange.activeFocus + Component { + id: editText + AppControls2.StyleBackground { + radius: 6 + useStyleTransparent: false + alpha: textChange.activeFocus ? 0.04 : 0 + paletteRole: Palette.Text + border.width: 2 + borderAlpha: textChange.activeFocus ? 1 : 0 + borderColor: Palette.Highlight - ThemeIcon { - anchors.centerIn: parent + TextInput { + id: textChange + text: name + clip: true + anchors.left: parent.left + anchors.leftMargin: 8 + anchors.right: buttonMouseArea.left + anchors.rightMargin: 8 + anchors.verticalCenter: parent.verticalCenter + verticalAlignment: Text.AlignVCenter + selectByMouse: true + maximumLength: 14 + + onEditingFinished: { + modelManager.getAppModel().renameFolder(id, text); + control.editStatus = false; + } + + function updateTextInputColor() { + color = themePalette.paletteColor(Palette.Text); + 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 - source: "image://appicon/edit-clear-symbolic" + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + visible: textChange.activeFocus + + ThemeIcon { + anchors.centerIn: parent + width: 16; height: width + source: "image://appicon/edit-clear-symbolic" + } + + onClicked: { + textChange.text = name; + control.editStatus = false; + } } - onClicked: { - textChange.text = name; - control.editStatus = false; - } } } + Loader { + id: editLoader + anchors.fill: parent + sourceComponent: editStatus ? editText : unEditText + } } } } - onEditStatusChanged: { - if (editStatus) { - textChange.forceActiveFocus(); - textChange.focus = true; - } - else { - textChange.focus = false - } - } } diff --git a/qml/AppUI/AppPageContent.qml b/qml/AppUI/AppPageContent.qml index d805d9b..3239804 100644 --- a/qml/AppUI/AppPageContent.qml +++ b/qml/AppUI/AppPageContent.qml @@ -123,108 +123,9 @@ SwipeView { } } - Item { - id: contain - property bool editStatus: false + EditText { Layout.fillWidth: true Layout.fillHeight: true - - AppControls2.StyleText { - id: textShow - visible: !contain.editStatus - anchors.fill: parent - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - elide: Text.ElideRight - text: title - } - - AppControls2.StyleBackground { - anchors.fill: parent - 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 - visible: contain.editStatus - clip: true - focus: false - anchors.left: parent.left - anchors.leftMargin: 8 - anchors.right: buttonMouseArea.left - anchors.rightMargin: 8 - anchors.verticalCenter: parent.verticalCenter - activeFocusOnPress: false - verticalAlignment: Text.AlignVCenter - text: title - selectByMouse: true - maximumLength: 14 - - onEditingFinished: { - modelManager.getFolderModel().renameFolder(text); - textShow.text = text; - contain.editStatus = false; - } - - function updateTextInputColor() { - color = themePalette.paletteColor(Palette.Text); - selectionColor = themePalette.paletteColor(Palette.Highlight); - } - - Component.onCompleted: { - updateTextInputColor(); - themePalette.styleColorChanged.connect(updateTextInputColor); - } - - Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor); - - } - - MouseArea { - id: textArea - anchors.fill: textEdit - onDoubleClicked: { - contain.editStatus = true; - } - } - - 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" - } - - onClicked: { - textEdit.text = title; - contain.editStatus = false; - } - } - } - onEditStatusChanged: { - if (editStatus) { - textEdit.z = 2; - textEdit.forceActiveFocus(); - textEdit.focus = true; - } - else { - textEdit.z = 0; - textEdit.focus = false; - } - } } } } diff --git a/qml/AppUI/EditText.qml b/qml/AppUI/EditText.qml new file mode 100644 index 0000000..d1aa022 --- /dev/null +++ b/qml/AppUI/EditText.qml @@ -0,0 +1,125 @@ +/* + * 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 . + * + */ + +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 + + Component { + id: unEditText + AppControls2.StyleText { + id: textShow + verticalAlignment: Text.AlignVCenter + horizontalAlignment: contain.textCenterIn ? Text.AlignHCenter : Text.AlignLeft + elide: Text.ElideRight + text: contain.textEdited + + MouseArea { + id: textArea + anchors.fill: parent + onDoubleClicked: { + contain.editStatus = true; + } + } + } + + } + + 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 + + onEditingFinished: { + modelManager.getFolderModel().renameFolder(text); + contain.textEdited = text; + contain.editStatus = false; + } + + function updateTextInputColor() { + color = themePalette.paletteColor(Palette.Text); + 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" + } + + onClicked: { + textEdit.text = title; + contain.editStatus = false; + } + } + } + } + + Loader { + id: editLoader + anchors.fill: parent + sourceComponent: contain.editStatus ? editText : unEditText + } +} diff --git a/qml/qml.qrc b/qml/qml.qrc index 653990c..fe98c4a 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -33,5 +33,6 @@ AppUI/SelectionPage.qml AppUI/AppPageContent.qml AppUI/PluginSelectMenu.qml + AppUI/EditText.qml