From f556b108f5b7fd4af1ff0b759d1d11f1d6d00900 Mon Sep 17 00:00:00 2001 From: miladS Date: Wed, 7 Feb 2024 09:12:56 +0330 Subject: [PATCH] Add drop down with disable to the ui --- ui/emulator/elements/ProbeButton.qml | 89 +++++++++++-------- ui/emulator/items/DropDownWithDisable.qml | 46 ++++++++++ ui/emulator/items/TopLeftTop.qml | 103 ++++++++++++---------- ui/ui.qrc | 1 + 4 files changed, 155 insertions(+), 84 deletions(-) create mode 100644 ui/emulator/items/DropDownWithDisable.qml diff --git a/ui/emulator/elements/ProbeButton.qml b/ui/emulator/elements/ProbeButton.qml index aa84609..0ea74f5 100644 --- a/ui/emulator/elements/ProbeButton.qml +++ b/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 - implicitHeight: height - - onPressed: { button.down = true } - onReleased: { button.down = false } + onPressed: { + button.down = true + } + onReleased: { + button.down = false + } function getColor() { - switch(colorMode) { - case(0): return Theme.current.none - case(1): return Theme.current.white - case(2): return Theme.current.green - case(3): return Theme.current.yellow + switch (colorMode) { + case (0): + return Theme.current.none + case (1): + 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(1): return Theme.current.whiteGlow - case(2): return Theme.current.greenGlow - case(3): return Theme.current.yellowGlow + switch (colorMode) { + case (0): + return Theme.current.noneGlow + case (1): + 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" ? - Const.imageScalePressed : Const.imageScale + property var factor: button.state + == "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 { position: 1.0; color: "transparent" } + GradientStop { + 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: - OpacityMask { + layer.effect: 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 { } ] } - diff --git a/ui/emulator/items/DropDownWithDisable.qml b/ui/emulator/items/DropDownWithDisable.qml new file mode 100644 index 0000000..fe88386 --- /dev/null +++ b/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 + } +} diff --git a/ui/emulator/items/TopLeftTop.qml b/ui/emulator/items/TopLeftTop.qml index 381d15d..56a55b9 100644 --- a/ui/emulator/items/TopLeftTop.qml +++ b/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 { - name: "slot1" - image: "qrc:/icons/topLeft/probe.png" + property var widthOfBtns: 130 + property var probeList: [] + + 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 { - name: "slot2" - image: "qrc:/icons/topLeft/probe.png" + Item { + Layout.fillWidth: true + implicitHeight: Const.macroButton * 2 + ProbeButton { + anchors.centerIn: parent + implicitWidth: width * 1.25 + name: "slot3" + image: "qrc:/icons/topLeft/probe.png" + } } - ProbeButton { - name: "slot3" - image: "qrc:/icons/topLeft/probe.png" + Item { + Layout.fillWidth: true + implicitHeight: Const.macroButton * 2 + ProbeButton { + anchors.centerIn: parent + implicitWidth: width * 1.25 + name: "slot2" + image: "qrc:/icons/topLeft/probe.png" + } } - ProbeButton { - name: "slot4" - image: "qrc:/icons/topLeft/probe.png" + Item { + Layout.fillWidth: true + 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 - implicitHeight: 25 - MvvmBinding { - viewModel: mainView.viewModel - viewProperty: "currentIndex" - viewModelProperty: "currentSelectedProbe1" - } + isProbeEnableProperty: "isProbeSelectionEnable4" } - ComboBox { + + DropDownWithDisable { + viewModelProperty: "currentSelectedProbe3" model: probeList width: widthOfBtns - implicitWidth: width - implicitHeight: 25 - MvvmBinding { - viewModel: mainView.viewModel - viewProperty: "currentIndex" - viewModelProperty: "currentSelectedProbe2" - } + isProbeEnableProperty: "isProbeSelectionEnable3" } - ComboBox { + DropDownWithDisable { + viewModelProperty: "currentSelectedProbe2" model: probeList width: widthOfBtns - implicitWidth: width - implicitHeight: 25 - MvvmBinding { - viewModel: mainView.viewModel - viewProperty: "currentIndex" - viewModelProperty: "currentSelectedProbe3" - } + isProbeEnableProperty: "isProbeSelectionEnable2" } - ComboBox { + DropDownWithDisable { + viewModelProperty: "currentSelectedProbe1" model: probeList width: widthOfBtns - implicitWidth: width - implicitHeight: 25 - MvvmBinding { - viewModel: mainView.viewModel - viewProperty: "currentIndex" - viewModelProperty: "currentSelectedProbe4" - } + isProbeEnableProperty: "isProbeSelectionEnable1" } } diff --git a/ui/ui.qrc b/ui/ui.qrc index d7f0fdb..cd95bb2 100644 --- a/ui/ui.qrc +++ b/ui/ui.qrc @@ -97,6 +97,7 @@ emulator/items/Setting.qml emulator/items/TopLeftTop.qml emulator/elements/ProbeButton.qml + emulator/items/DropDownWithDisable.qml MainView.qml