add noctalia and fuzzel
This commit is contained in:
@@ -0,0 +1,393 @@
|
||||
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];
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user