LedDisplay/app/ressources/qml/Chip.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()
}
}