mirror of
https://github.com/zoriya/noctalia-shell.git
synced 2025-12-06 06:36:15 +00:00
384 lines
11 KiB
QML
384 lines
11 KiB
QML
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)
|
|
|
|
color: Color.mSurface
|
|
border.color: Color.mOutline
|
|
border.width: Style.borderS
|
|
radius: Style.radiusM
|
|
|
|
ColumnLayout {
|
|
id: column
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginS
|
|
spacing: Style.marginS
|
|
|
|
NListView {
|
|
id: tokensList
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
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: tokensList.width
|
|
height: layout.implicitHeight + Style.marginS
|
|
radius: Style.radiusS
|
|
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.radiusS
|
|
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.radiusS
|
|
|
|
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.radiusS
|
|
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];
|
|
}
|
|
}
|
|
}
|