161 lines
5.5 KiB
QML
161 lines
5.5 KiB
QML
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
|
|
property bool truncate: false
|
|
property bool isSelect: false
|
|
hoverEnabled: true
|
|
|
|
ToolTip {
|
|
property bool isVisible: !editStatus && truncate && control.containsMouse
|
|
id: tip
|
|
x: mouseX + 15
|
|
y: mouseY + 15
|
|
text: name
|
|
visible: !editStatus && truncate && control.containsMouse
|
|
delay: 500
|
|
}
|
|
onPositionChanged: {
|
|
if (tip.isVisible) {
|
|
if (tip.visible) {
|
|
tip.hide();
|
|
} else {
|
|
tip.show(name);
|
|
}
|
|
}
|
|
}
|
|
|
|
states: State {
|
|
when: control.activeFocus
|
|
PropertyChanges {
|
|
target: controlBase
|
|
borderColor: Palette.Highlight
|
|
border.width: 2
|
|
}
|
|
}
|
|
|
|
StyleBackground {
|
|
id: controlBase
|
|
anchors.fill: parent
|
|
radius: 4
|
|
useStyleTransparent: false
|
|
alpha: isSelect ? 0.55 : control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.leftMargin: 12
|
|
spacing: 12
|
|
|
|
FolderIcon {
|
|
rows: 2; columns: 2
|
|
spacing: 2; padding: 2
|
|
icons: icon
|
|
alpha: 0.12; radius: 4
|
|
Layout.alignment: Qt.AlignVCenter
|
|
Layout.preferredWidth: 32
|
|
Layout.preferredHeight: 32
|
|
}
|
|
|
|
Item {
|
|
id: renameArea
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
Component {
|
|
id: unEditText
|
|
StyleText {
|
|
id: textShow
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignLeft
|
|
elide: Text.ElideRight
|
|
text: name
|
|
onWidthChanged: {
|
|
control.truncate = textShow.truncated
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
|
|
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
|
|
|
|
function editStatusEnd() {
|
|
control.editStatus = false;
|
|
control.focus = true;
|
|
}
|
|
|
|
function updateTextInputColor() {
|
|
color = themePalette.paletteColor(Palette.Text);
|
|
selectionColor = themePalette.paletteColor(Palette.Highlight);
|
|
}
|
|
|
|
onEditingFinished: {
|
|
modelManager.getAppModel().renameFolder(id, text);
|
|
textChange.editStatusEnd();
|
|
}
|
|
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: textChange.activeFocus
|
|
|
|
ThemeIcon {
|
|
anchors.centerIn: parent
|
|
width: 16; height: width
|
|
source: "image://appicon/edit-clear-symbolic"
|
|
}
|
|
|
|
onClicked: {
|
|
textChange.text = name;
|
|
textChange.editStatusEnd();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
id: editLoader
|
|
anchors.fill: parent
|
|
sourceComponent: editStatus ? editText : unEditText
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|