code clean

[mdictionary] / src / mdictionary / qml / IconButton.qml

diff --git a/src/mdictionary/qml/IconButton.qml b/src/mdictionary/qml/IconButton.qml
index 948d1b0..e6e5f37 100644 (file)
--- a/src/mdictionary/qml/IconButton.qml
+++ b/src/mdictionary/qml/IconButton.qml
@@ -4,22 +4,22 @@ Rectangle {
     id: rectangle
 
     property alias pathToIcon: image.source;
+    property int iconWidth:rectangle.width-8;
+    property int iconHeight:rectangle.height-8;
 
     signal clicked;
+    function press() { mouseArea.pressed }
 
-    Image {
-        id: image
-        z:1;
-        anchors.centerIn: parent
-        width: rectangle.width;
-        height: rectangle.height;
-    }
+    radius: 50
 
+    Keys.onReturnPressed: {
+        rectangle.clicked();
+    }
 
     MouseArea {
         id: mouseArea
         anchors.centerIn: parent;
-        width: rectangle.width + (70*parent.height)/107;
+        width: rectangle.width
         height: rectangle.height;
         onClicked: {
             rectangle.clicked();
@@ -27,62 +27,72 @@ Rectangle {
     }
 
     Image {
+        id: image
+        z:4;
+        smooth: true
+        anchors.centerIn: parent
+        width: iconWidth;
+        height: iconHeight;
+    }
+
+    Image {
         id: image1
-        width: (35*parent.height)/107
+        smooth: true
+        width:  (image1.sourceSize.width*parent.height)/image1.sourceSize.height +1 //(35*parent.height)/107 +1
         height: parent.height
         anchors.left: parent.left
-        anchors.leftMargin: - (35*parent.height)/107
         source: "qrc:/button/buttonLeft.png"
+        fillMode:Image.Stretch
     }
 
     Image {
         id: image3
-        width: parent.width
+        smooth: true
         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.TileHorizontally
+
     }
 
 
     Image {
         id: image2
-        width: (35*parent.height)/107
+        smooth: true
+        width: (image1.sourceSize.width*parent.height)/image1.sourceSize.height +1//(35*parent.height)/107 +1
         height: parent.height
         anchors.right: parent.right
-        anchors.rightMargin:  - (35*parent.height)/107
         source: "qrc:/button/buttonR.png"
+        fillMode:Image.Stretch
     }
 
-    Rectangle {
-        id: shade
-        anchors.centerIn: parent;
-        color: "black";
-        radius: 20;
-        opacity: 1;
-        width:  rectangle.width+(70*parent.height)/107;
-        height: rectangle.height;
-    }
 
     states: [
         State {
-            name: "enable";
-            when: (mouseArea.pressed == false && rectangle.enabled == true);
-            PropertyChanges { target: shade;
-                              opacity: 0; }
-        },
-        State {
             name: "disable";
             when: (rectangle.enabled == false);
-            PropertyChanges { target: shade;
-                              color: "black";
-                              opacity: .5; }
+            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: "clicked";
             when: (mouseArea.pressed == true && rectangle.enabled == true);
-            PropertyChanges { target: shade;
-                              color: "#fffead"
-                              opacity: 0.5; }
+            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: "focused";
+            when: (rectangle.enabled && !mouseArea.pressed && rectangle.focus)
+
+            PropertyChanges { target: image1; source: "qrc:/button/buttonLeftFocus.png" }
+            PropertyChanges { target: image3; source: "qrc:/button/buttonCenterFocus.png" }
+            PropertyChanges { target: image2; source: "qrc:/button/buttonRFocus.png" }
         }
     ]
 }