import QtQuick 2.0import QtGraphicalEffects 1.0import TabletScriptingInterface 1.0 Item { id: newEntityButton property var uuid; property string text: "ENTITY" property string icon: Path.resources + "icons/edit-icon.svg" property string activeText: newEntityButton.text property string activeIcon: newEntityButton.icon property bool isActive: false property bool inDebugMode: false property bool isEntered: false property double sortOrder: 100 property int stableOrder: 0 property var tabletRoot; width: 100 height: 100 signal clicked() function changeProperty(key, value) { tabletButton[key] = value; } onIsActiveChanged: { if (tabletButton.isEntered) { tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate"; } else { tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate"; } } Rectangle { id: buttonBg color: "#1c1c1c" opacity: 1 radius: 8 anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 anchors.bottom: parent.bottom anchors.bottomMargin: 0 anchors.top: parent.top anchors.topMargin: 0 } Rectangle { id: buttonOutline color: "#00000000" opacity: 0 radius: 8 z: 1 border.width: 2 border.color: "#ffffff" anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 anchors.bottom: parent.bottom anchors.bottomMargin: 0 anchors.top: parent.top anchors.topMargin: 0 } DropShadow { id: glow visible: false anchors.fill: parent horizontalOffset: 0 verticalOffset: 0 color: "#ffffff" radius: 20 z: -1 samples: 41 source: buttonOutline } Image { id: icon width: 50 height: 50 visible: false anchors.bottom: text.top anchors.bottomMargin: 5 anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.PreserveAspectFit sourceSize.width: width sourceSize.height: height source: newEntityButton.icon } ColorOverlay { id: iconColorOverlay anchors.fill: icon source: icon color: "#ffffff" } Text { id: text color: "#ffffff" text: newEntityButton.text font.bold: true font.pixelSize: 16 anchors.bottom: parent.bottom anchors.bottomMargin: 12 anchors.horizontalCenter: parent.horizontalCenter horizontalAlignment: Text.AlignHCenter } MouseArea { anchors.fill: parent hoverEnabled: true enabled: true onClicked: { Tablet.playSound(TabletEnums.ButtonClick); newEntityButton.clicked(); } onEntered: { Tablet.playSound(TabletEnums.ButtonHover); newEntityButton.state = "hover state"; } onExited: { newEntityButton.state = "base state"; } } states: [ State { name: "hover state" PropertyChanges { target: buttonOutline opacity: 1 } PropertyChanges { target: glow visible: true } }, State { name: "base state" PropertyChanges { target: glow visible: false } } ]}
import QtQuick 2.0
import QtGraphicalEffects 1.0
import TabletScriptingInterface 1.0
Item {
id: newEntityButton
property var uuid;
property string text: "ENTITY"
property string icon: Path.resources + "icons/edit-icon.svg"
property string activeText: newEntityButton.text
property string activeIcon: newEntityButton.icon
property bool isActive: false
property bool inDebugMode: false
property bool isEntered: false
property double sortOrder: 100
property int stableOrder: 0
property var tabletRoot;
width: 100
height: 100
signal clicked()
function changeProperty(key, value) {
tabletButton[key] = value;
}
onIsActiveChanged: {
if (tabletButton.isEntered) {
tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate";
} else {
tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate";
}
}
Rectangle {
id: buttonBg
color: "#1c1c1c"
opacity: 1
radius: 8
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
Rectangle {
id: buttonOutline
color: "#00000000"
opacity: 0
radius: 8
z: 1
border.width: 2
border.color: "#ffffff"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
DropShadow {
id: glow
visible: false
anchors.fill: parent
horizontalOffset: 0
verticalOffset: 0
color: "#ffffff"
radius: 20
z: -1
samples: 41
source: buttonOutline
}
Image {
id: icon
width: 50
height: 50
visible: false
anchors.bottom: text.top
anchors.bottomMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
sourceSize.width: width
sourceSize.height: height
source: newEntityButton.icon
}
ColorOverlay {
id: iconColorOverlay
anchors.fill: icon
source: icon
color: "#ffffff"
}
Text {
id: text
color: "#ffffff"
text: newEntityButton.text
font.bold: true
font.pixelSize: 16
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
enabled: true
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
newEntityButton.clicked();
}
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
newEntityButton.state = "hover state";
}
onExited: {
newEntityButton.state = "base state";
}
}
states: [
State {
name: "hover state"
PropertyChanges {
target: buttonOutline
opacity: 1
}
PropertyChanges {
target: glow
visible: true
}
},
State {
name: "base state"
PropertyChanges {
target: glow
visible: false
}
}
]
}