import QtQuick import QtQuick.Controls import QtQuick.Layouts import qs.Commons Rectangle { id: root property date sampleDate: new Date() // Dec 25, 2023, 2:30:45.123 PM signal tokenClicked(string token) Layout.margins: Style.borderS color: Color.mSurface border.color: Color.mOutline border.width: Style.borderS radius: Style.iRadiusM ColumnLayout { id: column anchors.fill: parent anchors.margins: Style.marginS spacing: Style.marginS Flickable { Layout.fillWidth: true Layout.fillHeight: true contentHeight: tokensColumn.implicitHeight clip: true Column { id: tokensColumn width: parent.width Repeater { model: [ // Common format combinations { "category": "Common", "token": "h:mm AP", "description": I18n.tr("widgets.datetime-tokens.common-12hour-time-minutes"), "example": "2:30 PM" }, { "category": "Common", "token": "HH:mm", "description": I18n.tr("widgets.datetime-tokens.common-24hour-time-minutes"), "example": "14:30" }, { "category": "Common", "token": "HH:mm:ss", "description": I18n.tr("widgets.datetime-tokens.common-24hour-time-seconds"), "example": "14:30:45" }, { "category": "Common", "token": "ddd MMM d", "description": I18n.tr("widgets.datetime-tokens.common-weekday-month-day"), "example": "Mon Dec 25" }, { "category": "Common", "token": "yyyy-MM-dd", "description": I18n.tr("widgets.datetime-tokens.common-iso-date"), "example": "2023-12-25" }, { "category": "Common", "token": "MM/dd/yyyy", "description": I18n.tr("widgets.datetime-tokens.common-us-date"), "example": "12/25/2023" }, { "category": "Common", "token": "dd.MM.yyyy", "description": I18n.tr("widgets.datetime-tokens.common-european-date"), "example": "25.12.2023" }, { "category": "Common", "token": "ddd, MMM dd", "description": I18n.tr("widgets.datetime-tokens.common-weekday-date"), "example": "Fri, Dec 12" } // Hour tokens , { "category": "Hour", "token": "H", "description": I18n.tr("widgets.datetime-tokens.hour-no-leading-zero"), "example": "14" }, { "category": "Hour", "token": "HH", "description": I18n.tr("widgets.datetime-tokens.hour-leading-zero"), "example": "14" } // Minute tokens , { "category": "Minute", "token": "m", "description": I18n.tr("widgets.datetime-tokens.minute-no-leading-zero"), "example": "30" }, { "category": "Minute", "token": "mm", "description": I18n.tr("widgets.datetime-tokens.minute-leading-zero"), "example": "30" } // Second tokens , { "category": "Second", "token": "s", "description": I18n.tr("widgets.datetime-tokens.second-no-leading-zero"), "example": "45" }, { "category": "Second", "token": "ss", "description": I18n.tr("widgets.datetime-tokens.second-leading-zero"), "example": "45" } // AM/PM tokens , { "category": "AM/PM", "token": "AP", "description": I18n.tr("widgets.datetime-tokens.ampm-uppercase"), "example": "PM" }, { "category": "AM/PM", "token": "ap", "description": I18n.tr("widgets.datetime-tokens.ampm-lowercase"), "example": "pm" } // Timezone tokens , { "category": "Timezone", "token": "t", "description": I18n.tr("widgets.datetime-tokens.timezone-abbreviation"), "example": "UTC" } // Year tokens , { "category": "Year", "token": "yy", "description": I18n.tr("widgets.datetime-tokens.year-two-digit"), "example": "23" }, { "category": "Year", "token": "yyyy", "description": I18n.tr("widgets.datetime-tokens.year-four-digit"), "example": "2023" } // Month tokens , { "category": "Month", "token": "M", "description": I18n.tr("widgets.datetime-tokens.month-number-no-zero"), "example": "12" }, { "category": "Month", "token": "MM", "description": I18n.tr("widgets.datetime-tokens.month-number-leading-zero"), "example": "12" }, { "category": "Month", "token": "MMM", "description": I18n.tr("widgets.datetime-tokens.month-abbreviated"), "example": "Dec" }, { "category": "Month", "token": "MMMM", "description": I18n.tr("widgets.datetime-tokens.month-full"), "example": "December" } // Day tokens , { "category": "Day", "token": "d", "description": I18n.tr("widgets.datetime-tokens.day-no-leading-zero"), "example": "25" }, { "category": "Day", "token": "dd", "description": I18n.tr("widgets.datetime-tokens.day-leading-zero"), "example": "25" }, { "category": "Day", "token": "ddd", "description": I18n.tr("widgets.datetime-tokens.day-abbreviated"), "example": "Mon" }, { "category": "Day", "token": "dddd", "description": I18n.tr("widgets.datetime-tokens.day-full"), "example": "Monday" } ] delegate: Rectangle { id: tokenDelegate width: tokensColumn.width height: layout.implicitHeight + Style.marginS radius: Style.iRadiusS color: { if (tokenMouseArea.containsMouse) { return Qt.alpha(Color.mPrimary, 0.1); } return index % 2 === 0 ? Color.mSurfaceVariant : Qt.alpha(Color.mSurfaceVariant, 0.6); } // Mouse area for the entire delegate MouseArea { id: tokenMouseArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: { root.tokenClicked(modelData.token); clickAnimation.start(); } } // Click animation SequentialAnimation { id: clickAnimation PropertyAnimation { target: tokenDelegate property: "color" to: Qt.alpha(Color.mPrimary, 0.3) duration: 100 } PropertyAnimation { target: tokenDelegate property: "color" to: tokenMouseArea.containsMouse ? Qt.alpha(Color.mPrimary, 0.1) : (index % 2 === 0 ? Color.mSurface : Color.mSurfaceVariant) duration: 200 } } RowLayout { id: layout anchors.fill: parent anchors.margins: Style.marginXS spacing: Style.marginM // Category badge Rectangle { Layout.alignment: Qt.AlignVCenter width: 70 height: 22 color: getCategoryColor(modelData.category)[0] radius: Style.iRadiusS opacity: tokenMouseArea.containsMouse ? 0.9 : 1.0 Behavior on opacity { NumberAnimation { duration: Style.animationFast } } NText { anchors.centerIn: parent text: modelData.category color: getCategoryColor(modelData.category)[1] pointSize: Style.fontSizeXS } } // Token - Made more prominent and clickable Rectangle { id: tokenButton Layout.alignment: Qt.AlignVCenter // Added this line width: 100 height: 22 color: tokenMouseArea.containsMouse ? Color.mPrimary : Color.mOnSurface radius: Style.iRadiusS Behavior on color { ColorAnimation { duration: Style.animationFast } } NText { anchors.centerIn: parent text: modelData.token color: tokenMouseArea.containsMouse ? Color.mOnPrimary : Color.mSurface pointSize: Style.fontSizeS font.weight: Style.fontWeightBold Behavior on color { ColorAnimation { duration: Style.animationFast } } } } // Description NText { Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter // Added this line text: modelData.description color: tokenMouseArea.containsMouse ? Color.mOnSurface : Color.mOnSurfaceVariant pointSize: Style.fontSizeS wrapMode: Text.WordWrap Behavior on color { ColorAnimation { duration: Style.animationFast } } } // Live example Rectangle { Layout.alignment: Qt.AlignVCenter // Added this line width: 90 height: 22 color: tokenMouseArea.containsMouse ? Color.mPrimary : Color.mOnSurfaceVariant radius: Style.iRadiusS border.color: tokenMouseArea.containsMouse ? Color.mPrimary : Color.mOutline border.width: Style.borderS Behavior on color { ColorAnimation { duration: Style.animationFast } } Behavior on border.color { ColorAnimation { duration: Style.animationFast } } NText { anchors.centerIn: parent text: I18n.locale.toString(root.sampleDate, modelData.token) color: tokenMouseArea.containsMouse ? Color.mOnPrimary : Color.mSurfaceVariant pointSize: Style.fontSizeS Behavior on color { ColorAnimation { duration: Style.animationFast } } } } } } } } } } function getCategoryColor(category) { switch (category) { case "Year": return [Color.mPrimary, Color.mOnPrimary]; case "Month": return [Color.mSecondary, Color.mOnSecondary]; case "Day": return [Color.mTertiary, Color.mOnTertiary]; case "Hour": return [Color.mPrimary, Color.mOnPrimary]; case "Minute": return [Color.mSecondary, Color.mOnSecondary]; case "Second": return [Color.mTertiary, Color.mOnTertiary]; case "AM/PM": return [Color.mError, Color.mOnError]; case "Timezone": return [Color.mOnSurface, Color.mSurface]; case "Common": return [Color.mError, Color.mOnError]; default: return [Color.mOnSurfaceVariant, Color.mSurfaceVariant]; } } }