1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-30 00:12:50 -05:00

Leverage DankCircularImage for profile pic

This commit is contained in:
bbedward
2025-09-21 23:45:00 -04:00
parent c43f58e1bf
commit 897f48d151
2 changed files with 115 additions and 241 deletions

View File

@@ -25,25 +25,15 @@ Rectangle {
Item { Item {
id: profileImageContainer id: profileImageContainer
property bool hasImage: profileImageSource.status === Image.Ready
width: 80 width: 80
height: 80 height: 80
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Rectangle { DankCircularImage {
id: profileImage
anchors.fill: parent anchors.fill: parent
radius: width / 2 imageSource: {
color: "transparent"
border.color: Theme.primary
border.width: 1
visible: parent.hasImage
}
Image {
id: profileImageSource
source: {
if (PortalService.profileImage === "") { if (PortalService.profileImage === "") {
return ""; return "";
} }
@@ -52,55 +42,7 @@ Rectangle {
} }
return PortalService.profileImage; return PortalService.profileImage;
} }
smooth: true fallbackIcon: "person"
asynchronous: true
mipmap: true
cache: true
visible: false
}
MultiEffect {
anchors.fill: parent
anchors.margins: 5
source: profileImageSource
maskEnabled: true
maskSource: profileCircularMask
visible: profileImageContainer.hasImage
maskThresholdMin: 0.5
maskSpreadAtMin: 1
}
Item {
id: profileCircularMask
width: 70
height: 70
layer.enabled: true
layer.smooth: true
visible: false
Rectangle {
anchors.fill: parent
radius: width / 2
color: "black"
antialiasing: true
}
}
Rectangle {
anchors.fill: parent
radius: width / 2
color: Theme.primary
visible: !parent.hasImage
DankIcon {
anchors.centerIn: parent
name: "person"
size: Theme.iconSizeLarge
color: Theme.primaryText
}
} }
Rectangle { Rectangle {
@@ -147,7 +89,7 @@ Rectangle {
height: 28 height: 28
radius: 14 radius: 14
color: Qt.rgba(255, 255, 255, 0.9) color: Qt.rgba(255, 255, 255, 0.9)
visible: profileImageContainer.hasImage visible: profileImage.hasImage
DankIcon { DankIcon {
anchors.centerIn: parent anchors.centerIn: parent

View File

@@ -123,100 +123,28 @@ DankPopout {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingL anchors.leftMargin: Theme.spacingL
anchors.rightMargin: Theme.spacingL anchors.rightMargin: Theme.spacingL
spacing: Theme.spacingL spacing: Theme.spacingM
Item { DankCircularImage {
id: avatarContainer id: avatarContainer
property bool hasImage: profileImageLoader.status === Image.Ready
width: 64 width: 64
height: 64 height: 64
imageSource: {
Rectangle {
anchors.fill: parent
radius: width / 2
color: "transparent"
border.color: Theme.primary
border.width: 1
visible: parent.hasImage
}
Image {
id: profileImageLoader
source: {
if (PortalService.profileImage === "") if (PortalService.profileImage === "")
return "" return ""
if (PortalService.profileImage.startsWith( if (PortalService.profileImage.startsWith("/"))
"/"))
return "file://" + PortalService.profileImage return "file://" + PortalService.profileImage
return PortalService.profileImage return PortalService.profileImage
} }
smooth: true fallbackIcon: "person"
asynchronous: true
mipmap: true
cache: true
visible: false
}
MultiEffect {
anchors.fill: parent
anchors.margins: 5
source: profileImageLoader
maskEnabled: true
maskSource: circularMask
visible: avatarContainer.hasImage
maskThresholdMin: 0.5
maskSpreadAtMin: 1
}
Item {
id: circularMask
width: 64 - 10
height: 64 - 10
layer.enabled: true
layer.smooth: true
visible: false
Rectangle {
anchors.fill: parent
radius: width / 2
color: "black"
antialiasing: true
}
}
Rectangle {
anchors.fill: parent
radius: width / 2
color: Theme.primary
visible: !parent.hasImage
DankIcon {
anchors.centerIn: parent
name: "person"
size: Theme.iconSize + 8
color: Theme.primaryText
}
}
DankIcon {
anchors.centerIn: parent
name: "warning"
size: Theme.iconSize + 8
color: Theme.primaryText
visible: PortalService.profileImage !== ""
&& profileImageLoader.status === Image.Error
}
} }
Column { Column {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingXS spacing: 2
StyledText { StyledText {
text: UserInfoService.fullName text: UserInfoService.fullName
@@ -236,21 +164,25 @@ DankPopout {
} }
} }
Row { Rectangle {
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: Theme.spacingL anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingS width: actionButtonsRow.implicitWidth + Theme.spacingM * 2
height: 48
radius: Theme.cornerRadius + 2
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.6)
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
border.width: 1
Rectangle { Row {
width: batteryContentRow.implicitWidth + Theme.spacingS * 2 id: actionButtonsRow
height: 40 anchors.centerIn: parent
radius: Theme.cornerRadius spacing: Theme.spacingXS
color: batteryMouseArea.containsMouse ? Qt.rgba(
Theme.primary.r, Item {
Theme.primary.g, width: batteryContentRow.implicitWidth
Theme.primary.b, height: 36
0.12) : "transparent"
visible: BatteryService.batteryAvailable visible: BatteryService.batteryAvailable
Row { Row {
@@ -260,7 +192,7 @@ DankPopout {
DankIcon { DankIcon {
name: Theme.getBatteryIcon(BatteryService.batteryLevel, BatteryService.isCharging, BatteryService.batteryAvailable) name: Theme.getBatteryIcon(BatteryService.batteryLevel, BatteryService.isCharging, BatteryService.batteryAvailable)
size: Theme.iconSize - 2 size: Theme.iconSize - 4
color: { color: {
if (batteryMouseArea.containsMouse) { if (batteryMouseArea.containsMouse) {
return Theme.primary return Theme.primary
@@ -318,9 +250,9 @@ DankPopout {
} }
DankActionButton { DankActionButton {
buttonSize: 40 buttonSize: 36
iconName: "lock" iconName: "lock"
iconSize: Theme.iconSize - 2 iconSize: Theme.iconSize - 4
iconColor: Theme.surfaceText iconColor: Theme.surfaceText
backgroundColor: "transparent" backgroundColor: "transparent"
onClicked: { onClicked: {
@@ -330,21 +262,20 @@ DankPopout {
} }
DankActionButton { DankActionButton {
buttonSize: 40 buttonSize: 36
iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new" iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
iconSize: Theme.iconSize - 2 iconSize: Theme.iconSize - 4
iconColor: Theme.surfaceText iconColor: root.powerOptionsExpanded ? Theme.primary : Theme.surfaceText
backgroundColor: "transparent" backgroundColor: "transparent"
onClicked: { onClicked: {
root.powerOptionsExpanded = !root.powerOptionsExpanded root.powerOptionsExpanded = !root.powerOptionsExpanded
} }
} }
DankActionButton { DankActionButton {
buttonSize: 40 buttonSize: 36
iconName: "settings" iconName: "settings"
iconSize: Theme.iconSize - 2 iconSize: Theme.iconSize - 4
iconColor: Theme.surfaceText iconColor: Theme.surfaceText
backgroundColor: "transparent" backgroundColor: "transparent"
onClicked: { onClicked: {
@@ -354,6 +285,7 @@ DankPopout {
} }
} }
} }
}
Item { Item {
width: parent.width width: parent.width