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,45 +47,51 @@ 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) {
+        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) {
+        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
-            y: (parent.height * (1-factor)) / 2 + elevator
+            y: (parent.height * (1 - factor)) / 2 + elevator
             width: parent.width * factor
             height: parent.height * factor
 
@@ -127,7 +135,7 @@ Button {
         }
     }
 
-    background: Item{
+    background: Item {
         width: parent.width
         height: parent.height
 
@@ -138,7 +146,7 @@ Button {
             height: backLight.height + diffusion
             radius: width / 2
             anchors.horizontalCenter: backLight.horizontalCenter
-            y: - diffusion / 4
+            y: -diffusion / 4
             color: Theme.current.background
             border {
                 width: diffusion / 2
@@ -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 * (backLight.width - backLightGlow.diffusion
+                                             / backLightGlow.width)
                             color: lightGlow
                         }
-                        GradientStop { position: 0.5; color: "transparent" }
+                        GradientStop {
-                        GradientStop { position: 1.0; color: "transparent" }
+                            position: 0.5
+                            color: "transparent"
+                        }
+                        GradientStop {
+                            position: 1.0
+                            color: "transparent"
+                        }
                     }
                 }
             }
@@ -211,7 +229,7 @@ Button {
                 height: parent.height
                 radius: width / 2
                 color: "transparent"
-                border{
+                border {
                     color: background.color
                     width: button.border
                 }
@@ -224,8 +242,7 @@ Button {
                 anchors.fill: parent
 
                 layer.enabled: true
-                layer.effect:
+                layer.effect: OpacityMask {
-                    OpacityMask {
                     maskSource: lightRing
                 }
 
@@ -312,7 +329,7 @@ Button {
             id: hoverGlow
             width: 2 * parent.width
             height: parent.height
-            x: - 2 * parent.width
+            x: -2 * parent.width
             color: "transparent"
 
             HoverGlow {}
@@ -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
 
-    ProbeButton {
+    property var widthOfBtns: 130
-        name: "slot1"
+    property var probeList: []
-        image: "qrc:/icons/topLeft/probe.png"
+
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: Const.macroButton * 2
+        ProbeButton {
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot4"
+            image: "qrc:/icons/topLeft/probe.png"
+        }
     }
-    ProbeButton {
+    Item {
-        name: "slot2"
+        Layout.fillWidth: true
-        image: "qrc:/icons/topLeft/probe.png"
+        implicitHeight: Const.macroButton * 2
+        ProbeButton {
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot3"
+            image: "qrc:/icons/topLeft/probe.png"
+        }
     }
-    ProbeButton {
+    Item {
-        name: "slot3"
+        Layout.fillWidth: true
-        image: "qrc:/icons/topLeft/probe.png"
+        implicitHeight: Const.macroButton * 2
+        ProbeButton {
+            anchors.centerIn: parent
+            implicitWidth: width * 1.25
+            name: "slot2"
+            image: "qrc:/icons/topLeft/probe.png"
+        }
     }
-    ProbeButton {
+    Item {
-        name: "slot4"
+        Layout.fillWidth: true
-        image: "qrc:/icons/topLeft/probe.png"
+        implicitHeight: Const.macroButton * 2
+        ProbeButton {
+            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"
-        }
     }
-    ComboBox {
+    DropDownWithDisable {
+        viewModelProperty: "currentSelectedProbe2"
         model: probeList
         width: widthOfBtns
-        implicitWidth: width
+        isProbeEnableProperty: "isProbeSelectionEnable2"
-        implicitHeight: 25
-        MvvmBinding {
-            viewModel: mainView.viewModel
-            viewProperty: "currentIndex"
-            viewModelProperty: "currentSelectedProbe3"
-        }
     }
-    ComboBox {
+    DropDownWithDisable {
+        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>