chris/harbour-sailfin
chris/harbour-sailfin
1
0
Fork 0
mirror of https://github.com/HenkKalkwater/harbour-sailfin.git synced 2024-05-18 12:02:41 +00:00
Code Issues Releases Wiki Activity

Give fallback images random background colours

Browse source 
[UI] Added: if an image cannot be loaded, it will have a random background colour.
This commit is contained in:
Chris Josten 2020-10-01 12:55:11 +02:00
parent 5057867ade
commit 7221fda1d5
4 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
qml/Utils.js
View file

@ -83,3 +83,15 @@ function getPageUrl(mediaType, itemType) {
} }
} }
} }
/**
* Generates a "nice" color based on a string by "hashing" it.
*/
function colorFromString(string) {
var hash = 0;
for (var i = 0; i < string.length; i++) {
hash += string.charCodeAt(i);
}
hash = (hash % 16) / 16;
return Qt.hsva(hash, 1.0, 1.0, 1.0);
}

1
qml/components/LibraryItemDelegate.qml
View file

@ -44,6 +44,7 @@ BackgroundItem {
bottom: parent.bottom bottom: parent.bottom
} }
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
fallbackColor: Utils.colorFromString(title)
} }
/*Rectangle { /*Rectangle {

19
qml/components/RemoteImage.qml
View file

@ -26,23 +26,24 @@ import Sailfish.Silica 1.0
HighlightImage { HighlightImage {
property string fallbackImage property string fallbackImage
property bool usingFallbackImage property bool usingFallbackImage
property color fallbackColor: Theme.highlightColor
asynchronous: true asynchronous: true
BusyIndicator {
anchors.centerIn: parent
running: parent.status == Image.Loading
}
Rectangle { Rectangle {
id: fallbackBackground id: fallbackBackground
anchors.fill: parent anchors.fill: parent
gradient: Gradient { gradient: Gradient {
GradientStop { position: 0.0; color: Theme.highlightColor; } GradientStop { position: 0.0; color: fallbackColor; }
GradientStop { position: 1.0; color: Theme.highlightDimmerColor; } GradientStop { position: 1.0; color: Theme.highlightDimmerFromColor(fallbackColor, Theme.colorScheme); }
} }
visible: parent.status == Image.Error || parent.status == Image.Null visible: parent.status == Image.Error || parent.status == Image.Null || parent.status == Image.Loading
} }
BusyIndicator {
anchors.centerIn: parent
running: parent.status == Image.Loading
}
HighlightImage { HighlightImage {
id: fallbackImageItem id: fallbackImageItem
anchors.centerIn: parent anchors.centerIn: parent

13
qml/pages/itemdetails/CollectionPage.qml
View file

@ -59,6 +59,7 @@ BaseDetailPage {
id: itemImage id: itemImage
anchors.fill: parent anchors.fill: parent
source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["Primary"], "Primary", {"maxWidth": width}) source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags["Primary"], "Primary", {"maxWidth": width})
fallbackColor: Utils.colorFromString(model.name)
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
clip: true clip: true
} }
@ -68,7 +69,7 @@ BaseDetailPage {
bottom: parent.bottom bottom: parent.bottom
right: parent.right right: parent.right
} }
height: itemName.height + Theme.paddingSmall * 2 height: itemName.height + Theme.paddingMedium * 2
visible: itemImage.status !== Image.Null visible: itemImage.status !== Image.Null
} }
Label { Label {
@ -86,15 +87,7 @@ BaseDetailPage {
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
} }
onClicked: { onClicked: pageStack.push(Utils.getPageUrl(model.mediaType, model.type), {"itemId": model.id})
switch(model.type) {
case "Folder":
pageStack.push(Qt.resolvedUrl("CollectionPage.qml"), {"itemId": model.id})
break;
default:
pageStack.push(Utils.getPageUrl(model.mediaType, model.type), {"itemId": model.id})
}
}
} }
ViewPlaceholder { ViewPlaceholder {