mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-08 22:45:38 -05:00
Force circular image cropping on avatars
This commit is contained in:
purian23
@@ -104,33 +104,46 @@ PanelWindow {
|
|||||||
width: 64
|
width: 64
|
||||||
height: 64
|
height: 64
|
||||||
|
|
||||||
|
property bool hasImage: Prefs.profileImage !== "" && profileImage.status !== Image.Error
|
||||||
|
|
||||||
// Background circle for fallback icon
|
// Background circle for fallback icon
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: 32
|
radius: 32
|
||||||
color: Theme.primary
|
color: Theme.primary
|
||||||
visible: Prefs.profileImage === "" || profileImage.status === Image.Error
|
visible: !parent.hasImage
|
||||||
}
|
}
|
||||||
|
|
||||||
// Profile image (working version)
|
// Circular clipping container for profile image
|
||||||
Image {
|
ClippingRectangle {
|
||||||
id: profileImage
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
source: {
|
anchors.margins: 1
|
||||||
if (Prefs.profileImage === "") return ""
|
radius: 31
|
||||||
// Add file:// prefix if it's a local path (starts with /)
|
antialiasing: true
|
||||||
if (Prefs.profileImage.startsWith("/")) {
|
visible: parent.hasImage
|
||||||
return "file://" + Prefs.profileImage
|
|
||||||
|
Image {
|
||||||
|
id: profileImage
|
||||||
|
anchors.fill: parent
|
||||||
|
source: {
|
||||||
|
if (Prefs.profileImage === "") return ""
|
||||||
|
// Add file:// prefix if it's a local path (starts with /)
|
||||||
|
if (Prefs.profileImage.startsWith("/")) {
|
||||||
|
return "file://" + Prefs.profileImage
|
||||||
|
}
|
||||||
|
// Return as-is if it already has a protocol or is a web URL
|
||||||
|
return Prefs.profileImage
|
||||||
|
}
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
|
smooth: true
|
||||||
|
asynchronous: true
|
||||||
|
mipmap: true
|
||||||
|
cache: false
|
||||||
|
|
||||||
|
onStatusChanged: {
|
||||||
|
console.log("Control Center profile image status:", status, "source:", source)
|
||||||
}
|
}
|
||||||
// Return as-is if it already has a protocol or is a web URL
|
|
||||||
return Prefs.profileImage
|
|
||||||
}
|
}
|
||||||
fillMode: Image.PreserveAspectCrop
|
|
||||||
visible: Prefs.profileImage !== "" && status !== Image.Error
|
|
||||||
smooth: true
|
|
||||||
asynchronous: true
|
|
||||||
mipmap: true
|
|
||||||
cache: false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Subtle circular outline for images
|
// Subtle circular outline for images
|
||||||
@@ -140,7 +153,7 @@ PanelWindow {
|
|||||||
color: "transparent"
|
color: "transparent"
|
||||||
border.color: Qt.rgba(0, 0, 0, 0.15) // Subtle dark outline
|
border.color: Qt.rgba(0, 0, 0, 0.15) // Subtle dark outline
|
||||||
border.width: 1
|
border.width: 1
|
||||||
visible: Prefs.profileImage !== "" && profileImage.status !== Image.Error
|
visible: hasImage
|
||||||
}
|
}
|
||||||
|
|
||||||
// Highlight ring to make it pop
|
// Highlight ring to make it pop
|
||||||
@@ -151,7 +164,7 @@ PanelWindow {
|
|||||||
color: "transparent"
|
color: "transparent"
|
||||||
border.color: Qt.rgba(255, 255, 255, 0.1) // Subtle light ring
|
border.color: Qt.rgba(255, 255, 255, 0.1) // Subtle light ring
|
||||||
border.width: 1
|
border.width: 1
|
||||||
visible: Prefs.profileImage !== "" && profileImage.status !== Image.Error
|
visible: hasImage
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback icon for no profile picture (generic person)
|
// Fallback icon for no profile picture (generic person)
|
||||||
|
|||||||
@@ -148,10 +148,10 @@ PanelWindow {
|
|||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingM
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
// Profile Image URL Input
|
// Profile Image Preview and Input
|
||||||
Column {
|
Column {
|
||||||
width: parent.width
|
width: parent.width
|
||||||
spacing: Theme.spacingS
|
spacing: Theme.spacingM
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
text: "Profile Image"
|
text: "Profile Image"
|
||||||
@@ -160,45 +160,133 @@ PanelWindow {
|
|||||||
font.weight: Font.Medium
|
font.weight: Font.Medium
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
// Profile Image Preview with circular crop
|
||||||
|
Row {
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: 48
|
spacing: Theme.spacingM
|
||||||
radius: Theme.cornerRadius
|
|
||||||
color: Theme.surfaceVariant
|
|
||||||
border.color: profileImageInput.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
|
||||||
border.width: profileImageInput.activeFocus ? 2 : 1
|
|
||||||
|
|
||||||
TextInput {
|
// Circular profile image preview
|
||||||
id: profileImageInput
|
Item {
|
||||||
anchors.fill: parent
|
id: avatarBox
|
||||||
anchors.margins: Theme.spacingM
|
width: 54
|
||||||
verticalAlignment: TextInput.AlignVCenter
|
height: 54
|
||||||
color: Theme.surfaceText
|
property bool hasImage: profileImageInput.text !== "" && avatarImage.status !== Image.Error
|
||||||
font.pixelSize: Theme.fontSizeMedium
|
|
||||||
text: Prefs.profileImage
|
/* 1 px inner padding; change both "1" values to "2" for 2 px */
|
||||||
selectByMouse: true
|
ClippingRectangle {
|
||||||
|
id: avatarClip
|
||||||
onEditingFinished: {
|
anchors.fill: parent
|
||||||
Prefs.setProfileImage(text)
|
anchors.margins: 1 // ← inner gap between photo & ring
|
||||||
|
radius: width / 2 // = perfect circle
|
||||||
|
antialiasing: true // smooth edge
|
||||||
|
color: "transparent"
|
||||||
|
visible: avatarBox.hasImage // show only when we have a real photo
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: avatarImage
|
||||||
|
anchors.fill: parent
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
|
source: profileImageInput.text.startsWith("/")
|
||||||
|
? "file://" + profileImageInput.text
|
||||||
|
: profileImageInput.text
|
||||||
|
smooth: true
|
||||||
|
asynchronous: true
|
||||||
|
mipmap: true
|
||||||
|
cache: false
|
||||||
|
|
||||||
|
onStatusChanged: {
|
||||||
|
console.log("Profile image status:", status, "source:", source)
|
||||||
|
if (status === Image.Ready) {
|
||||||
|
console.log("Image loaded successfully, size:", sourceSize.width + "x" + sourceSize.height)
|
||||||
|
} else if (status === Image.Error) {
|
||||||
|
console.log("Image failed to load")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback / error icon */
|
||||||
|
Rectangle {
|
||||||
|
anchors.fill: parent
|
||||||
|
radius: width / 2
|
||||||
|
color: Theme.primary
|
||||||
|
visible: !avatarBox.hasImage
|
||||||
}
|
}
|
||||||
|
|
||||||
// Placeholder text
|
|
||||||
Text {
|
Text {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.centerIn: parent
|
||||||
text: "Enter image path (e.g., /home/user/picture.png)"
|
text: profileImageInput.text === "" ? "person" : "warning"
|
||||||
color: Theme.surfaceVariantText
|
font.family: Theme.iconFont
|
||||||
font.pixelSize: Theme.fontSizeMedium
|
font.pixelSize: Theme.iconSize + 8
|
||||||
visible: profileImageInput.text.length === 0 && !profileImageInput.activeFocus
|
color: Theme.onPrimary
|
||||||
|
visible: !avatarBox.hasImage
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Decorative rings (drawn only when a real image is shown) */
|
||||||
|
Rectangle { // dark outline
|
||||||
|
anchors.fill: parent
|
||||||
|
radius: width / 2
|
||||||
|
border.color: Qt.rgba(0, 0, 0, 0.15)
|
||||||
|
border.width: 1
|
||||||
|
color: "transparent"
|
||||||
|
visible: avatarBox.hasImage
|
||||||
|
}
|
||||||
|
Rectangle { // light highlight
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: -1 // hugs just outside the dark outline
|
||||||
|
radius: width / 2 + 1
|
||||||
|
border.color: Qt.rgba(255, 255, 255, 0.1)
|
||||||
|
border.width: 1
|
||||||
|
color: "transparent"
|
||||||
|
visible: avatarBox.hasImage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input field
|
||||||
|
Column {
|
||||||
|
width: parent.width - 80 - Theme.spacingM
|
||||||
|
spacing: Theme.spacingS
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
width: parent.width
|
||||||
|
height: 48
|
||||||
|
radius: Theme.cornerRadius
|
||||||
|
color: Theme.surfaceVariant
|
||||||
|
border.color: profileImageInput.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
|
||||||
|
border.width: profileImageInput.activeFocus ? 2 : 1
|
||||||
|
|
||||||
|
TextInput {
|
||||||
|
id: profileImageInput
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: Theme.spacingM
|
||||||
|
verticalAlignment: TextInput.AlignVCenter
|
||||||
|
color: Theme.surfaceText
|
||||||
|
font.pixelSize: Theme.fontSizeMedium
|
||||||
|
text: Prefs.profileImage
|
||||||
|
selectByMouse: true
|
||||||
|
|
||||||
|
onEditingFinished: {
|
||||||
|
Prefs.setProfileImage(text)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Placeholder text
|
||||||
|
Text {
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
text: "Enter image path or URL"
|
||||||
|
color: Theme.surfaceVariantText
|
||||||
|
font.pixelSize: Theme.fontSizeMedium
|
||||||
|
visible: profileImageInput.text.length === 0 && !profileImageInput.activeFocus
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "Image will be automatically cropped to a circle"
|
||||||
|
font.pixelSize: Theme.fontSizeSmall
|
||||||
|
color: Theme.surfaceVariantText
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
width: parent.width
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: "Enter a file path or web URL for your profile picture"
|
|
||||||
font.pixelSize: Theme.fontSizeSmall
|
|
||||||
color: Theme.surfaceVariantText
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
width: parent.width
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user