Add drop down with disable to the ui

ui/emulator/elements/ProbeButton.qml

@@ -6,7 +6,6 @@ import "qrc:/theme"
 import "qrc:/const"
 import "qrc:/emulator/components"
 
-
 import de.skycoder42.QtMvvm.Core 1.0
 import de.skycoder42.QtMvvm.Quick 1.0
 import com.example.consoleemulator 1.0
@@ -14,6 +13,10 @@ import com.example.consoleemulator 1.0
 Button {
     id: button
 
+    width: Const.macroButton
+    height: Const.macroButton * 2
+    implicitWidth: width
+    implicitHeight: height
     //=========================================
     property var name
     property var nameLed: name + "Led"
@@ -30,9 +33,8 @@ Button {
         viewProperty: "colorMode"
         viewModelProperty: nameLed
     }
-    //=========================================
-
 
+    //=========================================
     property var image: ""
     property var radius: Math.min(width / 2, height / 2)
     property var timeToPress: 100
@@ -45,41 +47,47 @@ Button {
     signal pressed
     signal released
 
-    implicitWidth: width
+    onPressed: {
-    implicitHeight: height
+        button.down = true
-
+    }
-    onPressed: { button.down = true }
+    onReleased: {
-    onReleased: { button.down = false }
+        button.down = false
+    }
 
     function getColor() {
         switch (colorMode) {
-        case(0): return Theme.current.none
+        case (0):
-        case(1): return Theme.current.white
+            return Theme.current.none
-        case(2): return Theme.current.green
+        case (1):
-        case(3): return Theme.current.yellow
+            return Theme.current.white
+        case (2):
+            return Theme.current.green
+        case (3):
+            return Theme.current.yellow
         }
     }
 
     function getColorGlow() {
         switch (colorMode) {
-        case(0): return Theme.current.noneGlow
+        case (0):
-        case(1): return Theme.current.whiteGlow
+            return Theme.current.noneGlow
-        case(2): return Theme.current.greenGlow
+        case (1):
-        case(3): return Theme.current.yellowGlow
+            return Theme.current.whiteGlow
+        case (2):
+            return Theme.current.greenGlow
+        case (3):
+            return Theme.current.yellowGlow
         }
     }
 
-    width: Const.macroButton
-    height: Const.macroButton*2
-
     contentItem: Item {
         id: content
         anchors.fill: parent
         z: 1
 
         Item {
-            property var factor: button.state == "Pressed" ?
+            property var factor: button.state
-                                     Const.imageScalePressed : Const.imageScale
+                                 == "Pressed" ? Const.imageScalePressed : Const.imageScale
             property var elevator: button.state == "Pressed" ? 3 : 0
 
             anchors.horizontalCenter: parent.horizontalCenter
@@ -164,13 +172,23 @@ Button {
                 RadialGradient {
                     anchors.fill: parent
                     gradient: Gradient {
-                        GradientStop { position: 0.0; color: lightGlow }
                         GradientStop {
-                            position: 0.5 * (backLight.width - backLightGlow.diffusion / backLightGlow.width)
+                            position: 0.0
                             color: lightGlow
                         }
-                        GradientStop { position: 0.5; color: "transparent" }
+                        GradientStop {
-                        GradientStop { position: 1.0; color: "transparent" }
+                            position: 0.5 * (backLight.width - backLightGlow.diffusion
+                                             / backLightGlow.width)
+                            color: lightGlow
+                        }
+                        GradientStop {
+                            position: 0.5
+                            color: "transparent"
+                        }
+                        GradientStop {
+                            position: 1.0
+                            color: "transparent"
+                        }
                     }
                 }
             }
@@ -224,8 +242,7 @@ Button {
                 anchors.fill: parent
 
                 layer.enabled: true
-                layer.effect:
+                layer.effect: OpacityMask {
-                    OpacityMask {
                     maskSource: lightRing
                 }
 
@@ -349,7 +366,8 @@ Button {
 
     transitions: [
         Transition {
-            from: ""; to: "Hovering"
+            from: ""
+            to: "Hovering"
             NumberAnimation {
                 properties: "x"
                 duration: 500
@@ -358,4 +376,3 @@ Button {
         }
     ]
 }
-

ui/emulator/items/DropDownWithDisable.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.12
+import de.skycoder42.QtMvvm.Core 1.0
+import de.skycoder42.QtMvvm.Quick 1.0
+import com.example.consoleemulator 1.0
+
+import "qrc:/emulator/elements"
+import "qrc:/emulator/components"
+import "qrc:/const"
+import "qrc:/qtmvvm/views"
+
+Item {
+    id: root
+    implicitWidth: width
+    implicitHeight: 25
+    property var isDisable: false
+    property var viewModelProperty
+    property var isProbeEnableProperty
+    property alias model: idComobBox.model
+    ComboBox {
+        id: idComobBox
+        visible: isDisable
+        model: probeList
+        width: parent.width
+        implicitWidth: width
+        implicitHeight: parent.height
+        MvvmBinding {
+            viewModel: mainView.viewModel
+            viewProperty: "currentIndex"
+            viewModelProperty: root.viewModelProperty
+        }
+    }
+    Text {
+        visible: !isDisable
+        text: idComobBox.currentText
+        anchors.fill: parent
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewProperty: "isDisable"
+        viewModelProperty: isProbeEnableProperty
+    }
+}

ui/emulator/items/TopLeftTop.qml

@@ -11,77 +11,84 @@ import "qrc:/const"
 import "qrc:/qtmvvm/views"
 
 GridLayout {
-    x: 70
+    x: 20
     y: 50
-    rowSpacing: 36
+    rowSpacing: 30
     columns: 4
 
+    property var widthOfBtns: 130
+    property var probeList: []
+
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: Const.macroButton * 2
         ProbeButton {
-        name: "slot1"
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot4"
             image: "qrc:/icons/topLeft/probe.png"
         }
+    }
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: Const.macroButton * 2
         ProbeButton {
-        name: "slot2"
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot3"
             image: "qrc:/icons/topLeft/probe.png"
         }
+    }
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: Const.macroButton * 2
         ProbeButton {
-        name: "slot3"
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot2"
             image: "qrc:/icons/topLeft/probe.png"
         }
+    }
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: Const.macroButton * 2
         ProbeButton {
-        name: "slot4"
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot1"
             image: "qrc:/icons/topLeft/probe.png"
         }
-    property var widthOfBtns: 130
+    }
-    property var probeList: []
 
     MvvmBinding {
         viewModel: mainView.viewModel
         viewProperty: "probeList"
         viewModelProperty: "probeList"
     }
-    ComboBox {
+
+    DropDownWithDisable {
+        viewModelProperty: "currentSelectedProbe4"
         model: probeList
         width: widthOfBtns
-        implicitWidth: width
+        isProbeEnableProperty: "isProbeSelectionEnable4"
-        implicitHeight: 25
-        MvvmBinding {
-            viewModel: mainView.viewModel
-            viewProperty: "currentIndex"
-            viewModelProperty: "currentSelectedProbe1"
-        }
     }
-    ComboBox {
+
+    DropDownWithDisable {
+        viewModelProperty: "currentSelectedProbe3"
         model: probeList
         width: widthOfBtns
-        implicitWidth: width
+        isProbeEnableProperty: "isProbeSelectionEnable3"
-        implicitHeight: 25
-        MvvmBinding {
-            viewModel: mainView.viewModel
-            viewProperty: "currentIndex"
-            viewModelProperty: "currentSelectedProbe2"
     }
-    }
+    DropDownWithDisable {
-    ComboBox {
+        viewModelProperty: "currentSelectedProbe2"
         model: probeList
         width: widthOfBtns
-        implicitWidth: width
+        isProbeEnableProperty: "isProbeSelectionEnable2"
-        implicitHeight: 25
-        MvvmBinding {
-            viewModel: mainView.viewModel
-            viewProperty: "currentIndex"
-            viewModelProperty: "currentSelectedProbe3"
     }
-    }
+    DropDownWithDisable {
-    ComboBox {
+        viewModelProperty: "currentSelectedProbe1"
         model: probeList
         width: widthOfBtns
-        implicitWidth: width
+        isProbeEnableProperty: "isProbeSelectionEnable1"
-        implicitHeight: 25
-        MvvmBinding {
-            viewModel: mainView.viewModel
-            viewProperty: "currentIndex"
-            viewModelProperty: "currentSelectedProbe4"
-        }
     }
 }

ui/ui.qrc

@@ -97,6 +97,7 @@
         <file>emulator/items/Setting.qml</file>
         <file>emulator/items/TopLeftTop.qml</file>
         <file>emulator/elements/ProbeButton.qml</file>
+        <file>emulator/items/DropDownWithDisable.qml</file>
     </qresource>
     <qresource prefix="/qtmvvm/views">
         <file>MainView.qml</file>