add focus in qml

[mdictionary] / src / mdictionary / qml / Button.qml

diff --git a/src/mdictionary/qml/Button.qml b/src/mdictionary/qml/Button.qml
index a21cf2f..953fdbc 100644 (file)
--- a/src/mdictionary/qml/Button.qml
+++ b/src/mdictionary/qml/Button.qml
@@ -1,13 +1,27 @@
 import Qt 4.7
 
-BorderImage {
+Rectangle {
     id: button
     property alias textInButton: buttonText.text
-    signal clicked
-    opacity: 1
+    property bool checkable: false
+    property bool checked: false
 
-    function setText(string) { textInButton = string; }
-    border { left: 10; top: 10; right: 10; bottom: 10 }
+    height: 20;
+    width: 60;
+
+    signal clicked;
+    signal changeCheck;
+
+    function setText(string) { textInButton = qsTr(string); }
+    function press() { mouseArea.pressed }
+
+    Keys.onReturnPressed: {
+        button.clicked();
+        if(checkable){
+            button.checked=!button.checked;
+            button.changeCheck();
+        }
+    }
 
     MouseArea {
         id: mouseArea
@@ -16,50 +30,52 @@ BorderImage {
         height: parent.height;
         onClicked: {
             button.clicked();
+            if(checkable){
+                button.checked=!button.checked;
+                button.changeCheck();
+            }
         }
     }
 
     Text {
         z:1
         id: buttonText
+        width: parent.width;
         anchors.centerIn: parent;
+        horizontalAlignment: Text.AlignHCenter
         font.pixelSize: parent.height * .5
+        elide: Text.ElideRight;
         style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
     }
 
-    Rectangle {
-        id: shade
-        anchors.centerIn: parent;
-        radius: parent.height*.4;
-        color: "black";
-        opacity: 0
-        width:  parent.width;
-        height: parent.height;
-    }
-
     Image {
         id: image1
-        width: (35*parent.height)/107 +1
+        width:  (image1.sourceSize.width*parent.height)/image1.sourceSize.height +1
         height: parent.height
         anchors.left: parent.left
         source: "qrc:/button/buttonLeft.png"
+        smooth: true
         fillMode:Image.Stretch
     }
 
     Image {
         id: image3
         smooth: true
-        width: parent.width - ((70*parent.height)/107) +1;
         height: parent.height
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.right: image2.left
+        anchors.rightMargin: -1
+        anchors.left: image1.right
+        anchors.leftMargin: -1
         source: "qrc:/button/buttonCenter.png"
-        fillMode:Image.Stretch
+        //fillMode:Image.Stretch
+        fillMode: Image.TileHorizontally
+
     }
 
     Image {
         id: image2
         smooth: true
-        width: (35*parent.height)/107 +1
+        width: (image1.sourceSize.width*parent.height)/image1.sourceSize.height +1
         height: parent.height
         anchors.right: parent.right
         source: "qrc:/button/buttonR.png"
@@ -68,84 +84,29 @@ BorderImage {
 
     states: [
         State {
-            name: "pressed"; when: mouseArea.pressed == true
-            PropertyChanges { target: shade; opacity: 0.4 }
-            PropertyChanges { target: image1; opacity: 0.5 }
-            PropertyChanges { target: image3; opacity: 0.5 }
-            PropertyChanges { target: image2; opacity: 0.5 }
-        }
-    ]
+            name: "pressed";
+            when: ((button.enabled) && (mouseArea.pressed || (button.checkable && button.checked) ) )
 
+            PropertyChanges { target: image1; source: "qrc:/button/buttonLeftPushed.png" }
+            PropertyChanges { target: image3; source: "qrc:/button/buttonCenterPushed.png" }
+            PropertyChanges { target: image2; source: "qrc:/button/buttonRightPushed.png" }
+        },
+        State {
+            name: "disabled";
+            when: (button.enabled == false);
 
+            PropertyChanges { target: image1; source: "qrc:/button/buttonLeftDisabled.png" }
+            PropertyChanges { target: image3; source: "qrc:/button/buttonCenterDisabled.png" }
+            PropertyChanges { target: image2; source: "qrc:/button/buttonRightDisabled.png" }
+        },
+        State {
+            name: "focused";
+            when: (button.enabled && !mouseArea.pressed && button.focus)
 
-/*    MouseArea {
-        id: mouseArea
-        anchors.centerIn: parent;
-        width:  ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)) - ((70*parent.height)/107)
-        height: parent.height
-        onClicked: {
-            button.clicked();
+            PropertyChanges { target: image1; source: "qrc:/button/buttonLeftFocus.png" }
+            PropertyChanges { target: image3; source: "qrc:/button/buttonCenterFocus.png" }
+            PropertyChanges { target: image2; source: "qrc:/button/buttonRFocus.png" }
         }
-    }
 
-    Text {
-        z:1
-        id: buttonText
-        anchors.centerIn: parent;
-        font.pixelSize: parent.height * .5
-        style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
-        PropertyChanges {
-            target: button;
-            width: (button.width> buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.8)
-        }
-    }
-
-    Rectangle {
-        id: shade
-        anchors.centerIn: parent;
-        radius: parent.height*.4;
-        color: "black";
-        opacity: 0
-        width:  ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60))
-        height: parent.height
-    }
-
-    Image {
-        id: image1
-        width: (35*parent.height)/107 +1
-        height: parent.height
-        anchors.left: parent.left
-        anchors.leftMargin: (parent.width - ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)))/2
-        source: "qrc:/button/buttonLeft.png"
-    }
-
-    Image {
-        id: image3
-        smooth: true
-        width: (((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)) - ((70*parent.height)/107))+1
-        height: parent.height
-        anchors.horizontalCenter: parent.horizontalCenter
-        source: "qrc:/button/buttonCenter.png"
-    }
-
-    Image {
-        id: image2
-        smooth: true
-        width: (35*parent.height)/107 +1
-        height: parent.height
-        anchors.right: parent.right
-        anchors.rightMargin: (parent.width - ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)))/2
-        source: "qrc:/button/buttonR.png"
-    }
-
-    states: [
-        State {
-            name: "pressed"; when: mouseArea.pressed == true
-            PropertyChanges { target: shade; opacity: 0.4 }
-            PropertyChanges { target: image1; opacity: 0.5 }
-            PropertyChanges { target: image3; opacity: 0.5 }
-            PropertyChanges { target: image2; opacity: 0.5 }
-        }
     ]
-    */
 }