122 lines
3.2 KiB
QML
122 lines
3.2 KiB
QML
import QtQuick 2.12
|
|
import QtQuick.Controls 2.12
|
|
import QtGraphicalEffects 1.12
|
|
import QtQuick.Templates 2.12 as T
|
|
import QtQuick.Controls.impl 2.12
|
|
import QtQuick.Controls.Material 2.12
|
|
import QtQuick.Controls.Material.impl 2.12
|
|
|
|
Item {
|
|
id: control
|
|
|
|
property bool raised: false
|
|
property alias mouseArea: mouseArea
|
|
property string text: ""
|
|
property string color: ""
|
|
property bool isDarkColor: control.checkIsDarkColor(color)
|
|
property double glowRadius: 0.01
|
|
property double glowSpread: 0.01
|
|
property bool glowVisible: true
|
|
property double glowScale: 1
|
|
property double glowOpacity: Math.pow( control.opacity, 1000 ) * 0.3
|
|
property bool interactive: true
|
|
property int horizontalPadding: width * 0.15
|
|
property int verticalPadding: height * 0.15
|
|
property int radius: height * 0.5
|
|
|
|
signal clicked
|
|
|
|
function checkIsDarkColor(color) {
|
|
|
|
var c = color.substring(1); // strip #
|
|
var rgb = parseInt(c, 16); // convert rrggbb to decimal
|
|
var r = (rgb >> 16) & 0xff; // extract red
|
|
var g = (rgb >> 8) & 0xff; // extract green
|
|
var b = (rgb >> 0) & 0xff; // extract blue
|
|
|
|
var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
|
|
|
|
return luma < 150
|
|
}
|
|
|
|
RectangularGlow {
|
|
id: effect
|
|
glowRadius: control.glowRadius
|
|
spread: control.glowSpread
|
|
color: "black"
|
|
|
|
visible: control.glowVisible
|
|
|
|
cornerRadius: background.radius
|
|
anchors.fill: background
|
|
scale: control.glowScale
|
|
opacity: control.glowOpacity
|
|
}
|
|
|
|
Rectangle {
|
|
id: background
|
|
anchors.fill: parent
|
|
color: control.color
|
|
radius: control.radius
|
|
clip: true
|
|
|
|
Behavior on color {
|
|
ColorAnimation {}
|
|
}
|
|
|
|
|
|
Ripple {
|
|
id: ripple
|
|
clipRadius: height
|
|
clip: true
|
|
width: parent.width
|
|
height: parent.height
|
|
pressed: mouseArea.pressed
|
|
anchor: background
|
|
active: mouseArea.pressed || mouseArea.visualFocus || mouseArea.containsMouse
|
|
color: control.Material.rippleColor
|
|
|
|
layer.enabled: true
|
|
layer.effect: OpacityMask {
|
|
maskSource: Item {
|
|
width: ripple.width
|
|
height: ripple.height
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: control.radius
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ColorOverlay {
|
|
source: ripple
|
|
color: "red"
|
|
}
|
|
|
|
Text {
|
|
id: contentText
|
|
anchors.centerIn: background
|
|
|
|
width: background.width - 2 * control.horizontalPadding
|
|
height: background.height - 2 * control.verticalPadding
|
|
|
|
font.pixelSize: height
|
|
fontSizeMode: Text.Fit
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignHCenter
|
|
minimumPixelSize: 1
|
|
|
|
color: control.isDarkColor ? "white":"black"
|
|
text: control.text
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouseArea
|
|
anchors.fill: parent
|
|
enabled: control.enabled && control.interactive
|
|
onClicked: control.clicked()
|
|
}
|
|
}
|