diff --git a/frontends/qt6/qmllib/Material/MaterialButton.qml b/frontends/qt6/qmllib/Material/MaterialButton.qml new file mode 100644 index 000000000..059bbe97b --- /dev/null +++ b/frontends/qt6/qmllib/Material/MaterialButton.qml @@ -0,0 +1,50 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.15 + +import "MaterialPalette.qml" as MaterialPalette + +Rectangle { + id: root + property alias text: label.text + property bool outlined: false + property bool elevated: true + property color fillColor: outlined ? "transparent" : MaterialPalette.palette.primary + property color borderColor: outlined ? MaterialPalette.palette.outline : "transparent" + property color textColor: outlined ? MaterialPalette.palette.primary : MaterialPalette.palette.onPrimary + property bool disabled: false + property real cornerRadius: 12 + signal clicked() + + implicitHeight: 48 + radius: cornerRadius + color: disabled ? MaterialPalette.palette.surfaceVariant : fillColor + border.color: disabled ? MaterialPalette.palette.surfaceVariant : borderColor + border.width: outlined ? 1 : 0 + layer.enabled: elevated && !outlined && !disabled + layer.effect: DropShadow { + anchors.fill: parent + horizontalOffset: 0 + verticalOffset: 4 + radius: 16 + samples: 16 + color: "#22000000" + } + + Text { + id: label + anchors.centerIn: parent + font.pixelSize: 15 + font.bold: true + color: disabled ? MaterialPalette.palette.surface : textColor + } + + MouseArea { + anchors.fill: parent + enabled: !disabled + hoverEnabled: true + onClicked: root.clicked() + onPressed: root.opacity = 0.7 + onReleased: root.opacity = 1 + } +} diff --git a/frontends/qt6/qmllib/Material/MaterialPalette.qml b/frontends/qt6/qmllib/Material/MaterialPalette.qml new file mode 100644 index 000000000..a5f469fbe --- /dev/null +++ b/frontends/qt6/qmllib/Material/MaterialPalette.qml @@ -0,0 +1,24 @@ +import QtQuick 2.15 + +QtObject { + id: palette + + property color primary: "#6750A4" + property color primaryContainer: "#EADDFF" + property color secondary: "#625B71" + property color secondaryContainer: "#E8DEF8" + property color background: "#121212" + property color surface: "#1E1B2D" + property color surfaceVariant: "#302B3E" + property color onPrimary: "#ffffff" + property color onSecondary: "#ffffff" + property color onSurface: "#E6E1FF" + property color outline: "#494458" + + property color focus: "#BB86FC" + property color error: "#CF6679" + + property real elevationHigh: 18 + property real elevationMedium: 12 + property real elevationLow: 6 +}