mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-26 14:54:55 +00:00
JohnDoe6345789
58a94d0489
feat(styles): create global styles entry point and organize global styles feat(styles): implement base HTML element styles and utility classes for flexbox feat(styles): establish layout, position, spacing, and text utility classes feat(styles): introduce mixins for animations, cards, dialogs, flexbox, grid, and responsive design test(quick_guide): add component and metadata validation tests for quick_guide package test(ui_level6): implement metadata validation tests for ui_level6 package
72 lines
2.1 KiB
QML
72 lines
2.1 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import QtQuick.Effects
|
|
|
|
/**
|
|
* CCard.qml - Card container component (mirrors _card.scss)
|
|
* Uses StyleVariables for consistent styling
|
|
*/
|
|
Rectangle {
|
|
id: card
|
|
|
|
property string title: ""
|
|
property string subtitle: ""
|
|
property bool elevated: false
|
|
property bool hoverable: false
|
|
property bool clickable: false
|
|
property string variant: "default" // default, outlined, elevated
|
|
|
|
signal clicked()
|
|
|
|
default property alias cardContent: contentColumn.data
|
|
|
|
color: Theme.paper
|
|
radius: StyleVariables.radiusMd
|
|
border.width: 1
|
|
border.color: {
|
|
if (hoverable && mouseArea.containsMouse) return Theme.primary
|
|
return variant === "outlined" ? Theme.border : Theme.border
|
|
}
|
|
|
|
implicitHeight: contentColumn.implicitHeight
|
|
implicitWidth: 300
|
|
|
|
Behavior on border.color { ColorAnimation { duration: StyleVariables.transitionFast } }
|
|
Behavior on color { ColorAnimation { duration: StyleVariables.transitionFast } }
|
|
|
|
// Hover effect for clickable cards
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: parent.radius
|
|
color: (card.hoverable || card.clickable) && mouseArea.containsMouse
|
|
? StyleMixins.hoverBg(Theme.mode === "dark")
|
|
: "transparent"
|
|
|
|
Behavior on color { ColorAnimation { duration: StyleVariables.transitionFast } }
|
|
}
|
|
|
|
layer.enabled: elevated || variant === "elevated"
|
|
layer.effect: MultiEffect {
|
|
shadowEnabled: true
|
|
shadowColor: StyleVariables.shadowMd.color
|
|
shadowBlur: StyleVariables.shadowMd.blur
|
|
shadowVerticalOffset: StyleVariables.shadowMd.offset
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouseArea
|
|
anchors.fill: parent
|
|
hoverEnabled: card.hoverable || card.clickable
|
|
cursorShape: card.clickable ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
onClicked: if (card.clickable) card.clicked()
|
|
}
|
|
|
|
// Simple content column - children are placed here
|
|
ColumnLayout {
|
|
id: contentColumn
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
}
|
|
}
|