Skip to content

Commit

Permalink
New keypad button design
Browse files Browse the repository at this point in the history
Represent the button pressed state as raising/lowering the button. Hovering
is shown separately by a change in color.
  • Loading branch information
Vogtinator committed Dec 25, 2022
1 parent 55845a9 commit 2167fbb
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 36 deletions.
2 changes: 0 additions & 2 deletions qml/Keypad.qml
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ Rectangle {
text: "var"
Layout.preferredWidth: -1
Layout.fillWidth: false
border.width: 1
clip: false
keymap_id: 56
Layout.column: 2
Expand Down Expand Up @@ -324,7 +323,6 @@ Rectangle {
NBigButton {
id: nButton7
width: 33
color: "#68cce0"
text: "ctrl"
anchors.top: gridLayout1.top
anchors.topMargin: 0
Expand Down
44 changes: 26 additions & 18 deletions qml/NButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,40 @@ Rectangle {
property string back_color: "#223"
property string font_color: "#fff"
property alias text: label.text
property bool active: pressed || mouseArea.containsMouse
property bool pressed: false
// Pressing the right mouse button "locks" the button in enabled state
property bool fixed: false
property int keymap_id: 1

signal clicked()

border.width: active ? 2 : 1
border.color: "#888"
radius: 4
color: active ? active_color : back_color
color: "#888"

Rectangle {
width: parent.width
height: parent.height
x: pressed ? -0 : -1
y: pressed ? -0 : -1
radius: parent.radius
border.width: 1
border.color: parent.color
color: mouseArea.containsMouse ? active_color : back_color

Text {
id: label
text: "Foo"
anchors.fill: parent
anchors.centerIn: parent
font.pixelSize: height*0.55
color: font_color
font.bold: true
// Workaround: Text.AutoText doesn't seem to work for properties (?)
textFormat: text.indexOf(">") == -1 ? Text.PlainText : Text.RichText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}

onPressedChanged: {
if(pressed)
Expand All @@ -37,20 +59,6 @@ Rectangle {
}
}

Text {
id: label
text: "Foo"
anchors.fill: parent
anchors.centerIn: parent
font.pixelSize: height*0.55
color: font_color
font.bold: true
// Workaround: Text.AutoText doesn't seem to work for properties (?)
textFormat: text.indexOf(">") == -1 ? Text.PlainText : Text.RichText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}

// This is needed to support pressing multiple buttons at once on multitouch
MultiPointTouchArea {
id: multiMouseArea
Expand Down
21 changes: 5 additions & 16 deletions qml/NDualButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -36,31 +36,20 @@ Rectangle {
}

Rectangle {
id: rectangle1
width: 8
height: 20
color: "#222233"
radius: 0
height: 21
color: "#888"
anchors.verticalCenterOffset: 5
anchors.horizontalCenterOffset: 0
z: 0
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
border.width: 1
border.color: "#888"
anchors.centerIn: parent
}

Rectangle {
id: rectangle2
width: 8
height: 18
color: "#222233"
radius: 0
anchors.verticalCenterOffset: 5
anchors.horizontalCenterOffset: 0
anchors.verticalCenterOffset: 4
anchors.centerIn: parent
z: 1
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}

Text {
Expand Down

0 comments on commit 2167fbb

Please sign in to comment.