添加文件夹重命名功能

qml/AppControls2/FolderItem.qml

@@ -1,13 +1,15 @@
 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
 
 MouseArea {
     id: control
+    property bool editStatus: false
     hoverEnabled: true
-    // ToolTip.visible: content.textTruncated && control.containsMouse
+    ToolTip.visible: textShow.truncated && textShow.visible && control.containsMouse
-    // ToolTip.text: name
+    ToolTip.text: name
 
     StyleBackground {
         anchors.fill: parent
@@ -19,6 +21,7 @@ MouseArea {
             anchors.fill: parent
             anchors.leftMargin: 12
             spacing: 12
+
             FolderIcon {
                 rows: 2; columns: 2
                 spacing: 2; padding: 2
@@ -28,14 +31,98 @@ MouseArea {
                 Layout.preferredHeight: 32
             }
 
-            Text {
+            Item {
+                id: renameArea
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                verticalAlignment: Text.AlignVCenter
+
-                horizontalAlignment: Text.AlignLeft
+                StyleText {
-                elide: Text.ElideRight
+                    id: textShow
-                text: name
+                    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
+                        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);
+                        }
+
+                        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
+
+                        ThemeIcon {
+                            anchors.centerIn: parent
+                            width: 16; height: width
+                            source: "image://appicon/edit-clear-symbolic"
+                        }
+
+                        onClicked: {
+                            textChange.text = name;
+                            control.editStatus = false;
+                        }
+                    }
+
+                }
+
             }
         }
     }
+    onEditStatusChanged: {
+        if (editStatus) {
+            textChange.forceActiveFocus();
+            textChange.focus = true;
+        }
+        else {
+            textChange.focus = false
+        }
+    }
 }

qml/AppUI/AppList.qml

@@ -98,6 +98,18 @@ Item {
                     return;
                 }
             }
+            Component.onCompleted: {
+                appListView.model.renameText.connect(toEditText);
+            }
+            Component.onDestruction: {
+                appListView.model.renameText.disconnect(toEditText);
+            }
+
+            function toEditText(idOfIndex){
+                if (id === idOfIndex) {
+                    editStatus = true;
+                }
+            }
         }
     }
 }

qml/AppUI/AppPageContent.qml

@@ -123,83 +123,106 @@ SwipeView {
                     }
                 }
 
-                AppControls2.StyleBackground {
+                Item {
+                    id: contain
+                    property bool editStatus: false
                     Layout.fillWidth: true
                     Layout.fillHeight: true
 
-                    radius: 6
+                    AppControls2.StyleText {
-                    alpha: folderText.activeFocus ? 0.04 : 0
+                        id: textShow
-                    useStyleTransparent: false
+                        visible: !contain.editStatus
-                    paletteRole: Palette.Text
+                        anchors.fill: parent
-                    border.width: 2
-                    borderAlpha: folderText.activeFocus ? 1 : 0
-                    borderColor: Palette.Highlight
-
-                    TextInput {
-                        id: folderText
-                        clip: true
-                        font.pixelSize: 14
-                        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
+                        horizontalAlignment: Text.AlignLeft
+                        elide: Text.ElideRight
                         text: title
-                        selectByMouse: true
-                        maximumLength: 14
-
-                        onEditingFinished: {
-                            modelManager.getFolderModel().renameFolder(text);
-                            folderText.focus = false;
-                            folderText.z = 0;
-                        }
-
-                        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 {
+                    AppControls2.StyleBackground {
-                        id: textArea
+                        anchors.fill: parent
-                        anchors.fill: folderText
+                        radius: 6
-                        onDoubleClicked: {
+                        useStyleTransparent: false
-                            forceActiveFocus();
+                        alpha: textEdit.activeFocus ? 0.04 : 0
-                            folderText.focus = true;
+                        paletteRole: Palette.Text
-                            folderText.z = 2;
+                        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 {
+                        MouseArea {
-                        id: buttonMouseArea
+                            id: textArea
-                        hoverEnabled: true
+                            anchors.fill: textEdit
-                        width: 16; height: width
+                            onDoubleClicked: {
-                        anchors.right: parent.right
+                                contain.editStatus = true;
-                        anchors.rightMargin: 10
+                            }
-                        anchors.verticalCenter: parent.verticalCenter
+                        }
-                        visible: folderText.activeFocus
 
-                        ThemeIcon {
+                        MouseArea {
-                            anchors.centerIn: parent
+                            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: textEdit.activeFocus
 
-                        onClicked: {
+                            ThemeIcon {
-                            folderText.text = title;
+                                anchors.centerIn: parent
-                            folderText.focus = false;
+                                width: 16; height: width
-                            folderText.z = 0;
+                                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;
                         }
                     }
                 }

src/appdata/app-folder-helper.cpp

@@ -19,6 +19,8 @@
 #include "app-folder-helper.h"
 #include "menu-manager.h"
 #include "app-data-manager.h"
+#include "model-manager.h"
+#include "app-model.h"
 
 #include <QJsonDocument>
 #include <QJsonArray>
@@ -109,10 +111,10 @@ void FolderMenuProvider::folderMenuForNormal(QObject *parent, const QString &app
 
 void FolderMenuProvider::folderMenuForFolder(QObject *parent, const QString &folderId, QList<QAction *> &list)
 {
-//    list << new QAction(QObject::tr("Rename"), parent);
+    list << new QAction(QObject::tr("Rename"), parent);
-//    QObject::connect(list.last(), &QAction::triggered, parent, [folderId] {
+    QObject::connect(list.last(), &QAction::triggered, parent, [folderId] {
-//        AppFolderHelper::instance()->renameFolder(folderId.toInt(), "new name");
+        ModelManager::instance()->getAppModel()->toRenameFolder(folderId);
-//    });
+    });
 
     list << new QAction(QObject::tr("Dissolve folder"), parent);
     QObject::connect(list.last(), &QAction::triggered, parent, [folderId] {

src/model/app-model.cpp

@@ -19,6 +19,7 @@
 #include "app-model.h"
 #include "app-manager.h"
 #include "menu-manager.h"
+#include "app-folder-helper.h"
 
 #include <QObject>
 #include <QString>
@@ -110,6 +111,11 @@ void AppModel::reloadPluginData()
     resetModel(data);
 }
 
+void AppModel::toRenameFolder(QString id)
+{
+    Q_EMIT renameText(id);
+}
+
 void AppModel::onPluginDataChanged(QVector<DataEntity> data, DataUpdateMode::Mode mode, quint32 index)
 {
     switch (mode) {
@@ -180,6 +186,11 @@ void AppModel::openMenu(const int &index)
     MenuManager::instance()->showMenu(m_apps.at(index));
 }
 
+void AppModel::renameFolder(const QString &index, const QString &folderName)
+{
+    AppFolderHelper::instance()->renameFolder(index.toInt(), folderName);
+}
+
 QVariantList AppModel::getApps(int start, int end)
 {
     if (start < 0 || start >= m_apps.size() || end < 0 || end > m_apps.size()) {

src/model/app-model.h

@@ -42,6 +42,10 @@ public:
     Q_INVOKABLE QVariantList folderApps(const QString &folderName);
     Q_INVOKABLE void appClicked(const int &index);
     Q_INVOKABLE void openMenu(const int &index);
+    Q_INVOKABLE void renameFolder(const QString &index, const QString &folderName);
+
+public Q_SLOTS:
+    void toRenameFolder(QString id);
 
 private Q_SLOTS:
     void onPluginDataChanged(QVector<DataEntity> data, DataUpdateMode::Mode mode, quint32 index);
@@ -55,6 +59,9 @@ private:
 
 private:
     QVector<DataEntity> m_apps;
+
+Q_SIGNALS:
+    Q_INVOKABLE void renameText(QString id);
 };
 
 } // UkuiMenu