New GridView selection UI

This commit is contained in:
reionwong 2021-06-17 21:22:18 +08:00
parent b3b8a3c55c
commit eb78ab1cb6
2 changed files with 72 additions and 7 deletions

View file

@ -67,7 +67,7 @@ Window {
anchors.leftMargin: FishUI.Units.largeSpacing * 2 anchors.leftMargin: FishUI.Units.largeSpacing * 2
anchors.rightMargin: FishUI.Units.largeSpacing * 2 anchors.rightMargin: FishUI.Units.largeSpacing * 2
anchors.topMargin: FishUI.Units.largeSpacing anchors.topMargin: FishUI.Units.largeSpacing
anchors.bottomMargin: FishUI.Units.largeSpacing anchors.bottomMargin: FishUI.Units.largeSpacing * 1.5
spacing: FishUI.Units.largeSpacing spacing: FishUI.Units.largeSpacing
RowLayout { RowLayout {

View file

@ -47,10 +47,13 @@ Item {
height: _iconItem.height + _label.paintedHeight + FishUI.Units.largeSpacing height: _iconItem.height + _label.paintedHeight + FishUI.Units.largeSpacing
x: (parent.width - width) / 2 x: (parent.width - width) / 2
y: _iconItem.y y: _iconItem.y
color: selected || hovered ? FishUI.Theme.highlightColor : "transparent"
radius: FishUI.Theme.mediumRadius // (Deprecated) Rectangle rounded corner.
visible: selected || hovered //color: selected || hovered ? FishUI.Theme.highlightColor : "transparent"
opacity: selected ? 1.0 : 0.2 color: "transparent"
// radius: FishUI.Theme.mediumRadius
// visible: selected || hovered
// opacity: selected ? 1.0 : 0.2
} }
Item { Item {
@ -72,6 +75,22 @@ Item {
sourceSize: Qt.size(width, height) sourceSize: Qt.size(width, height)
source: "image://icontheme/" + model.iconName source: "image://icontheme/" + model.iconName
visible: !_image.visible visible: !_image.visible
ColorOverlay {
anchors.fill: _icon
source: _icon
color: FishUI.Theme.highlightColor
opacity: 0.5
visible: control.selected
}
ColorOverlay {
anchors.fill: _icon
source: _icon
color: Qt.lighter(FishUI.Theme.highlightColor, 1.6)
opacity: FishUI.Theme.darkMode ? 0.4 : 0.6
visible: control.hovered && !control.selected
}
} }
Image { Image {
@ -90,7 +109,24 @@ Item {
asynchronous: true asynchronous: true
cache: true cache: true
layer.enabled: true // Because of the effect of OpacityMask.
ColorOverlay {
anchors.fill: _image
source: _image
color: FishUI.Theme.highlightColor
opacity: 0.5
visible: control.selected
}
ColorOverlay {
anchors.fill: _image
source: _image
color: Qt.lighter(FishUI.Theme.highlightColor, 1.6)
opacity: FishUI.Theme.darkMode ? 0.4 : 0.6
visible: control.hovered && !control.selected
}
layer.enabled: _image.visible
layer.effect: OpacityMask { layer.effect: OpacityMask {
maskSource: Item { maskSource: Item {
width: _image.width width: _image.width
@ -105,6 +141,24 @@ Item {
} }
} }
} }
// ColorOverlay {
// id: _selectedColorOverlay
// anchors.fill: _image.visible ? _image : _icon
// source: _image.visible ? _image : _icon
// color: FishUI.Theme.highlightColor
// opacity: 0.5
// visible: control.selected
// }
// ColorOverlay {
// id: _hoveredColorOverlay
// anchors.fill: _image.visible ? _image : _icon
// source: _image.visible ? _image : _icon
// color: Qt.lighter(FishUI.Theme.highlightColor, 1.6)
// opacity: FishUI.Theme.darkMode ? 0.4 : 0.6
// visible: control.hovered && !control.selected
// }
} }
Label { Label {
@ -124,6 +178,17 @@ Item {
: selected ? FishUI.Theme.highlightedTextColor : FishUI.Theme.textColor : selected ? FishUI.Theme.highlightedTextColor : FishUI.Theme.textColor
} }
Rectangle {
z: 1
x: _label.x
y: _label.y
width: _label.width
height: _label.height
radius: 4
color: FishUI.Theme.highlightColor
opacity: control.selected ? 1.0 : 0
}
DropShadow { DropShadow {
anchors.fill: _label anchors.fill: _label
source: _label source: _label
@ -135,6 +200,6 @@ Item {
spread: 0.35 spread: 0.35
color: Qt.rgba(0, 0, 0, 0.3) color: Qt.rgba(0, 0, 0, 0.3)
opacity: model.isHidden ? 0.6 : 1 opacity: model.isHidden ? 0.6 : 1
visible: control.GridView.view.isDesktopView visible: control.GridView.view.isDesktopView && !control.selected
} }
} }