chris/harbour-sailfin
chris/harbour-sailfin
1
0
Fork 0
mirror of https://github.com/HenkKalkwater/harbour-sailfin.git synced 2024-11-22 01:05:17 +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
}
fillMode: Image.PreserveAspectCrop
fallbackColor: Utils.colorFromString(title)
}
/*Rectangle {

19
qml/components/RemoteImage.qml
View file

@ -26,23 +26,24 @@ import Sailfish.Silica 1.0
HighlightImage {
property string fallbackImage
property bool usingFallbackImage
property color fallbackColor: Theme.highlightColor
asynchronous: true
BusyIndicator {
anchors.centerIn: parent
running: parent.status == Image.Loading
}
Rectangle {
id: fallbackBackground
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: Theme.highlightColor; }
GradientStop { position: 1.0; color: Theme.highlightDimmerColor; }
GradientStop { position: 0.0; color: fallbackColor; }
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 {
id: fallbackImageItem
anchors.centerIn: parent

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

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