use MouseListener for showing and positioning the EditBubble, basically works, needs polishing

This commit is contained in:
Sebastian Kügler 2011-11-25 05:07:13 +01:00
parent 2565770d2d
commit 296300085a
3 changed files with 54 additions and 8 deletions

View File

@ -25,14 +25,19 @@ PlasmaCore.FrameSvgItem {
id: editBubble id: editBubble
objectName: "editBubble" objectName: "editBubble"
property int iconSize: 32; property int iconSize: 32;
//property alias cursorPosition: textInput.cursorPosition;
property variant cursorPosition: "0,0"
imagePath: "dialogs/background" imagePath: "dialogs/background"
width: (iconSize*2) + iconSize width: (iconSize*2) + iconSize
height: iconSize*2 height: iconSize*2
z: 1 z: 1
anchors { top: parent.bottom; right: parent.right; topMargin: -(iconSize/4); } //anchors { top: parent.bottom; right: parent.right; topMargin: -(iconSize/4); }
state: (textInput.activeFocus && (textInput.selectedText != "" || textInput.canPaste)) ? "expanded" : "collapsed"; // fully dynamic show / hide
//state: (textInput.activeFocus && (textInput.selectedText != "" || textInput.canPaste)) ? "expanded" : "collapsed";
// state controlled externally
state: "collapsed"
Row { Row {
id: buttonRow id: buttonRow
@ -74,6 +79,12 @@ PlasmaCore.FrameSvgItem {
} }
} }
} }
onCursorPositionChanged: {
//if (typeof(cursorPosition == "undefined")) return;
//print(" new cursorPosition: " + cursorPosition.x + "," + cursorPosition.y);
x = cursorPosition.x - parent.width/2
y = cursorPosition.y - parent.height
}
states: [ states: [
State { State {
id: expanded id: expanded

View File

@ -139,12 +139,14 @@ Item {
font.underline: theme.defaultFont.underline font.underline: theme.defaultFont.underline
font.weight: theme.defaultFont.weight font.weight: theme.defaultFont.weight
font.wordSpacing: theme.defaultFont.wordSpacing font.wordSpacing: theme.defaultFont.wordSpacing
} }
EditBubble { iconSize: 32 } EditBubble { id: editBubble; iconSize: 32 }
TextInput { TextInput {
id: textInput id: textInput
parent: mouseEventListener
anchors { anchors {
left: parent.left left: parent.left
@ -166,6 +168,7 @@ Item {
} }
PlasmaCore.SvgItem { PlasmaCore.SvgItem {
parent: mouseEventListener // reparent to the MouseFilter for MouseArea to work
svg: PlasmaCore.Svg {imagePath: "widgets/lineedit"} svg: PlasmaCore.Svg {imagePath: "widgets/lineedit"}
elementId: "clearbutton" elementId: "clearbutton"
width: textInput.height width: textInput.height
@ -180,14 +183,44 @@ Item {
anchors { anchors {
right: parent.right right: parent.right
rightMargin: y rightMargin: y
verticalCenter: textInput.verticalCenter verticalCenter: parent.verticalCenter
} }
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
textInput.text = "" print("clear button clicked");
textInput.forceActiveFocus() textInput.text = "";
textInput.forceActiveFocus();
editBubble.state = "collapsed"
} }
//Rectangle { anchors.fill: parent; color: "green"; opacity: 0.3; }
}
}
MouseEventListener {
id: mouseEventListener
anchors.fill: parent
//onPressed: print(" MouseEventListener Pressed");
onPressAndHold: {
print(" *** MouseEventListener PressAndHold");
editBubble.cursorPosition = mouse;
editBubble.x = mouse.x-(editBubble.width/2)
editBubble.y = mouse.y-editBubble.height-8
editBubble.state = (textInput.activeFocus && (textInput.selectedText != "" || textInput.canPaste)) ? "expanded" : "collapsed";
//editBubble.state = "expanded"
}
onPositionChanged: {
//print(" positionChanged: " + mouse.x + "," + mouse.y);
//if (typeof(mouse) == "undefined") return;
editBubble.cursorPosition = mouse;
editBubble.x = mouse.x-(editBubble.width/2)
editBubble.y = mouse.y-editBubble.height-8
}
}
onActiveFocusChanged: {
if (!activeFocus) {
editBubble.state = "collapsed";
print("Hiding...");
} }
} }
} }

View File

@ -23,6 +23,7 @@ import org.kde.plasma.components 0.1 as PlasmaComponents
PlasmaComponents.Page { PlasmaComponents.Page {
height: editThing.height height: editThing.height
property int implicitHeight: childrenRect.height property int implicitHeight: childrenRect.height
//scale: 1.25
tools: PlasmaComponents.ToolBarLayout { tools: PlasmaComponents.ToolBarLayout {
spacing: 5 spacing: 5
@ -39,7 +40,6 @@ PlasmaComponents.Page {
text: "Text fields page" text: "Text fields page"
} }
} }
MouseArea { MouseArea {
anchors.fill: editThing anchors.fill: editThing
onClicked: editThing.forceActiveFocus(); onClicked: editThing.forceActiveFocus();
@ -53,9 +53,11 @@ PlasmaComponents.Page {
spacing: 12 spacing: 12
Item { height: 60; width: parent.width; } Item { height: 60; width: parent.width; }
PlasmaComponents.TextField { PlasmaComponents.TextField {
placeholderText: "Try copy & paste" placeholderText: "Try copy & paste"
text: "The cat bites into the socks"
width: parent.width
clearButtonShown: true
} }
PlasmaComponents.TextArea { PlasmaComponents.TextArea {
width: parent.width width: parent.width