feat: animations in settings search results
This commit is contained in:
@@ -148,154 +148,200 @@ VerticalFadeFlickable {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ListView {
|
Column {
|
||||||
id: resultList
|
id: resultList
|
||||||
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
cacheBuffer: 10000
|
|
||||||
implicitHeight: contentHeight
|
|
||||||
interactive: false
|
|
||||||
spacing: Appearance.padding.large
|
spacing: Appearance.padding.large
|
||||||
|
|
||||||
delegate: ColumnLayout {
|
add: Transition {
|
||||||
id: group
|
Anim {
|
||||||
|
from: 0
|
||||||
|
property: "opacity"
|
||||||
|
to: 1
|
||||||
|
type: Anim.DefaultEffects
|
||||||
|
}
|
||||||
|
}
|
||||||
|
move: Transition {
|
||||||
|
Anim {
|
||||||
|
properties: "x,y"
|
||||||
|
}
|
||||||
|
|
||||||
required property int index
|
Anim {
|
||||||
required property var modelData
|
property: "opacity"
|
||||||
|
to: 1
|
||||||
|
type: Anim.DefaultEffects
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
spacing: Appearance.spacing.small
|
Repeater {
|
||||||
width: resultList.width
|
model: ScriptModel {
|
||||||
|
objectProp: "pageIdx"
|
||||||
RowLayout {
|
values: root.groups
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.leftMargin: Appearance.padding.small
|
|
||||||
spacing: Appearance.spacing.small
|
|
||||||
|
|
||||||
MaterialIcon {
|
|
||||||
color: DynamicColors.palette.m3primary
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
text: group.modelData.icon
|
|
||||||
}
|
|
||||||
|
|
||||||
CustomText {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
color: DynamicColors.palette.m3primary
|
|
||||||
elide: Text.ElideRight
|
|
||||||
font.pointSize: Appearance.font.size.large
|
|
||||||
text: group.modelData.page
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
Layout.fillWidth: true
|
id: group
|
||||||
spacing: Appearance.spacing.extraSmall / 2
|
|
||||||
|
|
||||||
Repeater {
|
required property int index
|
||||||
model: group.modelData.entries
|
required property var modelData
|
||||||
|
|
||||||
CustomRect {
|
spacing: Appearance.spacing.small
|
||||||
id: result
|
width: resultList.width
|
||||||
|
|
||||||
required property int index
|
RowLayout {
|
||||||
readonly property bool isFirst: index === 0
|
Layout.fillWidth: true
|
||||||
readonly property bool isLast: index === group.modelData.entries.length - 1
|
Layout.leftMargin: Appearance.padding.small
|
||||||
required property var modelData
|
spacing: Appearance.spacing.small
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
color: DynamicColors.palette.m3primary
|
||||||
|
fill: 1
|
||||||
|
font.pointSize: Appearance.font.size.large
|
||||||
|
text: group.modelData.icon
|
||||||
|
}
|
||||||
|
|
||||||
|
CustomText {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
bottomLeftRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
color: DynamicColors.palette.m3secondary
|
||||||
bottomRightRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
elide: Text.ElideRight
|
||||||
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
font.pointSize: Appearance.font.size.large
|
||||||
implicitHeight: {
|
text: group.modelData.page
|
||||||
const h = resultLayout.implicitHeight + resultLayout.anchors.margins * 2;
|
}
|
||||||
return h % 2 === 0 ? h : h + 1;
|
}
|
||||||
}
|
|
||||||
topLeftRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
|
||||||
topRightRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
|
||||||
|
|
||||||
RadiusBehavior on bottomLeftRadius {
|
Column {
|
||||||
|
id: cardList
|
||||||
|
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: Appearance.spacing.extraSmall / 2
|
||||||
|
|
||||||
|
add: Transition {
|
||||||
|
Anim {
|
||||||
|
from: 0
|
||||||
|
property: "opacity"
|
||||||
|
to: 1
|
||||||
|
type: Anim.DefaultEffects
|
||||||
}
|
}
|
||||||
RadiusBehavior on bottomRightRadius {
|
}
|
||||||
}
|
move: Transition {
|
||||||
RadiusBehavior on topLeftRadius {
|
Anim {
|
||||||
}
|
properties: "x,y"
|
||||||
RadiusBehavior on topRightRadius {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ColumnLayout {
|
Anim {
|
||||||
id: resultLayout
|
property: "opacity"
|
||||||
|
to: 1
|
||||||
|
type: Anim.DefaultEffects
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
anchors.fill: parent
|
Repeater {
|
||||||
anchors.margins: Appearance.padding.large
|
model: ScriptModel {
|
||||||
anchors.rightMargin: result.modelData.togglePath ? toggle.width + Appearance.padding.large * 2 : Appearance.padding.large
|
objectProp: "anchor"
|
||||||
spacing: Appearance.spacing.small / 2
|
values: group.modelData.entries
|
||||||
|
}
|
||||||
|
|
||||||
CustomText {
|
CustomRect {
|
||||||
Layout.fillWidth: true
|
id: result
|
||||||
color: DynamicColors.palette.m3onSurfaceVariant
|
|
||||||
elide: Text.ElideRight
|
required property int index
|
||||||
font.pointSize: Appearance.font.size.small
|
readonly property bool isFirst: index === 0
|
||||||
text: {
|
readonly property bool isLast: index === group.modelData.entries.length - 1
|
||||||
const labels = result.modelData.crumbLabels.slice(1);
|
required property var modelData
|
||||||
const section = result.modelData.section;
|
|
||||||
const parts = section && section !== labels[labels.length - 1] ? labels.concat(section) : labels;
|
bottomLeftRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
||||||
return parts.join(" \u203a ");
|
bottomRightRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
||||||
|
color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
||||||
|
implicitHeight: {
|
||||||
|
const h = resultLayout.implicitHeight + resultLayout.anchors.margins * 2;
|
||||||
|
return h % 2 === 0 ? h : h + 1;
|
||||||
|
}
|
||||||
|
topLeftRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
||||||
|
topRightRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
|
||||||
|
width: cardList.width
|
||||||
|
|
||||||
|
RadiusBehavior on bottomLeftRadius {
|
||||||
|
}
|
||||||
|
RadiusBehavior on bottomRightRadius {
|
||||||
|
}
|
||||||
|
RadiusBehavior on topLeftRadius {
|
||||||
|
}
|
||||||
|
RadiusBehavior on topRightRadius {
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: resultLayout
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: Appearance.padding.large
|
||||||
|
anchors.rightMargin: result.modelData.togglePath ? toggle.width + Appearance.padding.large * 2 : Appearance.padding.large
|
||||||
|
spacing: Appearance.spacing.small / 2
|
||||||
|
|
||||||
|
CustomText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
color: DynamicColors.palette.m3onSurfaceVariant
|
||||||
|
elide: Text.ElideRight
|
||||||
|
font.pointSize: Appearance.font.size.small
|
||||||
|
text: {
|
||||||
|
const labels = result.modelData.crumbLabels.slice(1);
|
||||||
|
const section = result.modelData.section;
|
||||||
|
const parts = section && section !== labels[labels.length - 1] ? labels.concat(section) : labels;
|
||||||
|
return parts.join(" \u203a ");
|
||||||
|
}
|
||||||
|
visible: text.length > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
CustomText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
color: DynamicColors.palette.m3onSurface
|
||||||
|
elide: Text.ElideRight
|
||||||
|
font.pointSize: Appearance.font.size.medium
|
||||||
|
text: SettingsSearcher.highlight(result.modelData.title, root.search, DynamicColors.palette.m3primary)
|
||||||
|
textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
|
||||||
|
}
|
||||||
|
|
||||||
|
CustomText {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
color: DynamicColors.palette.m3outline
|
||||||
|
elide: Text.ElideRight
|
||||||
|
font.pointSize: Appearance.font.size.small
|
||||||
|
text: SettingsSearcher.highlight(result.modelData.subtext, root.search, DynamicColors.palette.m3primary)
|
||||||
|
textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
|
||||||
|
visible: result.modelData.subtext.length > 0
|
||||||
}
|
}
|
||||||
visible: text.length > 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomText {
|
StateLayer {
|
||||||
Layout.fillWidth: true
|
id: layer
|
||||||
color: DynamicColors.palette.m3onSurface
|
|
||||||
elide: Text.ElideRight
|
z: 1
|
||||||
font.pointSize: Appearance.font.size.medium
|
|
||||||
text: SettingsSearcher.highlight(result.modelData.title, root.search, DynamicColors.palette.m3primary)
|
onClicked: {
|
||||||
textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
|
root.sState.jumpToSetting(result.modelData.pageIdx, result.modelData.subPath, result.modelData.anchor);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomText {
|
CustomSwitch {
|
||||||
Layout.fillWidth: true
|
id: toggle
|
||||||
color: DynamicColors.palette.m3outline
|
|
||||||
elide: Text.ElideRight
|
anchors.right: parent.right
|
||||||
font.pointSize: Appearance.font.size.small
|
anchors.rightMargin: Appearance.padding.large
|
||||||
text: SettingsSearcher.highlight(result.modelData.subtext, root.search, DynamicColors.palette.m3primary)
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
|
cLayer: 3
|
||||||
visible: result.modelData.subtext.length > 0
|
checked: result.modelData.toggleValue
|
||||||
|
scale: 0.85
|
||||||
|
transformOrigin: Item.Right
|
||||||
|
visible: result.modelData.togglePath
|
||||||
|
z: 2
|
||||||
|
|
||||||
|
onToggled: result.modelData.setToggle(checked)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
StateLayer {
|
|
||||||
id: layer
|
|
||||||
|
|
||||||
z: 1
|
|
||||||
|
|
||||||
onClicked: {
|
|
||||||
root.sState.jumpToSetting(result.modelData.pageIdx, result.modelData.subPath, result.modelData.anchor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
CustomSwitch {
|
|
||||||
id: toggle
|
|
||||||
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: Appearance.padding.large
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
cLayer: 3
|
|
||||||
checked: result.modelData.toggleValue
|
|
||||||
scale: 0.85
|
|
||||||
transformOrigin: Item.Right
|
|
||||||
visible: result.modelData.togglePath
|
|
||||||
z: 2
|
|
||||||
|
|
||||||
onToggled: result.modelData.setToggle(checked)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
model: ScriptModel {
|
|
||||||
objectProp: "pageIdx"
|
|
||||||
values: root.groups
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomText {
|
CustomText {
|
||||||
|
|||||||
Reference in New Issue
Block a user