Adding StatusComboBox

mix/qml/StatesComboBox.qml

@@ -0,0 +1,185 @@
+/*
+    This file is part of cpp-ethereum.
+
+    cpp-ethereum is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    cpp-ethereum is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with cpp-ethereum.  If not, see <http://www.gnu.org/licenses/>.
+*/
+/** @file StatesComboBox.qml
+ * @author Ali Mashatan ali@ethdev.com
+ * @date 2015
+ * Ethereum IDE client.
+ */
+
+import QtQuick 2.0
+import QtQuick.Controls 1.0
+import QtQuick.Layouts 1.1
+
+Rectangle {
+    id:statesComboBox
+
+    width:200;
+    height: 20;
+
+    Component.onCompleted:
+    {
+        var top = dropDownList;
+        while (top.parent)
+        {
+            top = top.parent
+            if (top.objectName == "debugPanel")
+                break;
+        }
+        var coordinates = dropDownList.mapToItem(top, 0, 0)
+        dropDownList.parent = top;
+        dropDownList.x = coordinates.x
+        dropDownList.y = coordinates.y
+    }
+
+    signal selectItem(real item);
+    signal editItem(real item);
+
+    property variant items;
+    property alias selectedItem: chosenItemText.text;
+    property alias selectedIndex: listView.currentRow;
+    signal comboClicked;
+
+    property variant colorItem;
+    property variant colorSelect;
+
+    smooth:true;
+    Rectangle {
+        id:chosenItem
+        width:parent.width;
+        height:statesComboBox.height;
+        color: statesComboBox.color;
+        smooth:true;
+        Text {
+            anchors.top: parent.top;
+            anchors.left: parent.left;
+            anchors.margins: 2;
+            color: statesComboBox.colorItem;
+            id:chosenItemText
+            text:statesComboBox.items.get(0).title;
+            smooth:true
+        }
+
+        MouseArea {
+            anchors.fill: parent;
+            onClicked: {
+                statesComboBox.state = statesComboBox.state==="dropDown"?"":"dropDown"
+            }
+        }
+    }
+
+    Rectangle {
+        id:dropDownList
+        width:statesComboBox.width;
+        height:0;
+        clip:true;
+        radius:4;
+        anchors.top: chosenItem.bottom;
+        anchors.margins: 2;
+        color: statesComboBox.color
+
+        TableView {
+            id:listView
+            height:500;
+            width:statesComboBox.width;
+            model: statesComboBox.items
+            currentRow: 0
+            headerVisible: false;
+            backgroundVisible: false
+            alternatingRowColors : false;
+            frameVisible: false
+
+            TableViewColumn {
+                role: "title"
+                title: ""
+                width: statesComboBox.width;
+                delegate: mainItemDelegate
+                //elideMode: Text.ElideNone
+            }
+
+            Component {
+                id: mainItemDelegate
+                Item{
+                    id: itemDelegate
+                    width:statesComboBox.width;
+                    height: statesComboBox.height;
+                    Text {
+                        id: textItemid
+                        text: styleData.value
+                        color: statesComboBox.colorItem;
+                        anchors.top: parent.top;
+                        anchors.left: parent.left;
+                        anchors.margins: 5;
+
+                    }
+                    Rectangle
+                    {
+                        id: spaceItemid
+                        anchors.top: textItemid.top;
+                        anchors.left: textItemid.right
+                        width: parent.width - textItemid.width - imageItemid.width - textItemid.anchors.margins- textItemid.anchors.margins
+                    }
+                    Image {
+                        id: imageItemid
+                        height:20
+                        width:20;
+                        visible: false;
+                        fillMode: Image.PreserveAspectFit
+                        source: "img/edit_combox.png"
+                        anchors.top: spaceItemid.top;
+                        anchors.left: spaceItemid.right;
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent;
+                        hoverEnabled : true
+
+                        onEntered: {
+                            imageItemid.visible = true;
+                            textItemid.color = statesComboBox.colorSelect;
+                        }
+                        onExited: {
+                            imageItemid.visible = false;
+                            textItemid.color = statesComboBox.colorItem;
+                        }
+                        onClicked: {
+                            if (mouseX > imageItemid.x && mouseX < imageItemid.x+ imageItemid.width
+                                    && mouseY > imageItemid.y && mouseY < imageItemid.y+ imageItemid.height)
+                              statesComboBox.editItem(styleData.row);
+                            else {
+                                statesComboBox.state = ""
+                                var prevSelection = chosenItemText.text
+                                chosenItemText.text = modelData
+                                if(chosenItemText.text != prevSelection)
+                                    statesComboBox.comboClicked();
+                                listView.currentRow = styleData.row;
+                                statesComboBox.selectItem(styleData.row);
+                            }
+                        }
+                    }
+                }//Item
+            }//Component
+        }
+    }
+    states: State {
+        name: "dropDown";
+        PropertyChanges { target: dropDownList; height:20*statesComboBox.items.count }
+    }
+
+    transitions: Transition {
+        NumberAnimation { target: dropDownList; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
+    }
+}

mix/qml/TransactionLog.qml

@@ -61,7 +61,7 @@ Item {
 				}
 			}
 
-			ComboBox {
+			/*ComboBox {
 				id: statesCombo
 				model: projectModel.stateListModel
 				width: 150
@@ -77,7 +77,24 @@ Item {
 							statesCombo.currentIndex = index;
 					}
 				}
-			}
+			}*/
+			            StatesComboBox
+            {
+                id: statesCombo
+                items:projectModel.stateListModel
+                onSelectItem: console.log("Combobox Select Item: " + item )
+                onEditItem: console.log("Combobox Edit Item: " + item )
+                colorItem: "black"
+                colorSelect: "yellow"
+                color: "gray"
+                Connections {
+                    target: projectModel.stateListModel
+                    onStateRun: {
+                        if (statesCombo.selectedIndex !== index)
+                            statesCombo.selectedIndex = index;
+                    }
+                }
+            }
 			Button
 			{
 				anchors.rightMargin: 9

mix/res.qrc

@@ -9,8 +9,10 @@
         <file>qml/ProjectList.qml</file>
         <file>qml/StateDialog.qml</file>
         <file>qml/StateList.qml</file>
+        <file>qml/StatesComboBox.qml</file>
         <file>qml/StateListModel.qml</file>
         <file>qml/img/dappProjectIcon.png</file>
+        <file>qml/img/edit_combox.png</file>	
         <file>qml/img/jumpintoback.png</file>
         <file>qml/img/jumpintoforward.png</file>
         <file>qml/img/jumpoutback.png</file>