Commit 6c999209 authored by Alexander Stippich's avatar Alexander Stippich
Browse files

rework sizing of the grid delegate

parent 366adde0
......@@ -89,9 +89,7 @@ Item {
property int navigationBarHeight: 100
property int navigationBarFilterHeight: 44
property real gridDelegateThumbnail: 0.85
property int gridDelegateHeight: 170 * gridDelegateThumbnail + layoutVerticalMargin
property int gridDelegateWidth: 170
property int gridDelegateSize: 170
property int viewSelectorDelegateHeight: 24
......
......@@ -140,12 +140,11 @@ FocusScope {
}
}
cellWidth: Math.floor(availableWidth / Math.max(Math.floor(availableWidth / elisaTheme.gridDelegateWidth), 2))
cellHeight: elisaTheme.gridDelegateHeight +
(secondaryLabelSize.boundingRect.height - secondaryLabelSize.boundingRect.y)
cellWidth: Math.floor(availableWidth / Math.max(Math.floor(availableWidth / elisaTheme.gridDelegateSize), 2))
cellHeight: elisaTheme.gridDelegateSize + secondaryLabelSize.boundingRect.height * 2 + elisaTheme.layoutVerticalMargin * 2
delegate: GridBrowserDelegate {
width: elisaTheme.gridDelegateWidth
width: elisaTheme.gridDelegateSize
height: contentDirectoryView.cellHeight
focus: true
......
......@@ -83,278 +83,276 @@ FocusScope {
radius: 3
}
ColumnLayout {
MouseArea {
id: hoverHandle
anchors.fill: parent
z: 2
spacing: 0
hoverEnabled: true
acceptedButtons: Qt.LeftButton
MouseArea {
id: hoverHandle
Layout.preferredHeight: gridEntry.height
Layout.fillWidth: true
hoverEnabled: true
acceptedButtons: Qt.LeftButton
onClicked: {
gridEntry.selected()
}
Layout.preferredHeight: gridEntry.height
Layout.fillWidth: true
onDoubleClicked: open()
onClicked: {
gridEntry.selected()
}
onDoubleClicked: open()
TextMetrics {
id: mainLabelSize
font: mainLabel.font
text: mainLabel.text
}
TextMetrics {
id: mainLabelSize
font: mainLabel.font
text: mainLabel.text
}
TextMetrics {
id: secondaryLabelSize
font: secondaryLabel.font
text: secondaryLabel.text
}
TextMetrics {
id: secondaryLabelSize
font: secondaryLabel.font
text: secondaryLabel.text
}
ColumnLayout {
id: mainData
ColumnLayout {
id: mainData
spacing: 0
anchors.fill: parent
spacing: 0
anchors.fill: parent
Item {
Item {
Layout.preferredHeight: gridEntry.width * elisaTheme.gridDelegateThumbnail
Layout.preferredWidth: gridEntry.width * elisaTheme.gridDelegateThumbnail
Layout.margins: 2 * elisaTheme.layoutVerticalMargin
Layout.preferredHeight: gridEntry.width - 4 * elisaTheme.layoutVerticalMargin
Layout.preferredWidth: gridEntry.width - 4 * elisaTheme.layoutVerticalMargin
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Loader {
id: hoverLoader
active: false
Loader {
id: hoverLoader
active: false
anchors {
bottom: parent.bottom
bottomMargin: 2
left: parent.left
leftMargin: 2
}
anchors {
bottom: parent.bottom
bottomMargin: 2
left: parent.left
leftMargin: 2
}
z: 1
z: 1
opacity: 0
opacity: 0
sourceComponent: Row {
spacing: 2
sourceComponent: Row {
spacing: 2
Button {
id: detailsButton
objectName: 'detailsButton'
Button {
id: detailsButton
objectName: 'detailsButton'
icon.name: 'help-about'
icon.name: 'help-about'
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Show track metadata", "View Details")
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Show track metadata", "View Details")
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: clicked()
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: clicked()
onClicked: {
if (metadataLoader.active === false) {
metadataLoader.active = true
}
else {
metadataLoader.item.close();
metadataLoader.active = false
}
onClicked: {
if (metadataLoader.active === false) {
metadataLoader.active = true
}
else {
metadataLoader.item.close();
metadataLoader.active = false
}
}
Keys.onReturnPressed: clicked()
Keys.onEnterPressed: clicked()
visible: showDetailsButton
Keys.onReturnPressed: clicked()
Keys.onEnterPressed: clicked()
visible: showDetailsButton
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
Button {
id: replaceAndPlayButton
objectName: 'replaceAndPlayButton'
Button {
id: replaceAndPlayButton
objectName: 'replaceAndPlayButton'
icon.name: 'media-playback-start'
icon.name: 'media-playback-start'
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Clear play list and add whole container to play list", "Play now, replacing current playlist")
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Clear play list and add whole container to play list", "Play now, replacing current playlist")
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: onClicked
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: onClicked
onClicked: replaceAndPlay(databaseId, mainText, fileUrl)
Keys.onReturnPressed: replaceAndPlay(databaseId, mainText, fileUrl)
Keys.onEnterPressed: replaceAndPlay(databaseId, mainText, fileUrl)
onClicked: replaceAndPlay(databaseId, mainText, fileUrl)
Keys.onReturnPressed: replaceAndPlay(databaseId, mainText, fileUrl)
Keys.onEnterPressed: replaceAndPlay(databaseId, mainText, fileUrl)
visible: showPlayButton
visible: showPlayButton
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
Button {
id: enqueueButton
objectName: 'enqueueButton'
Button {
id: enqueueButton
objectName: 'enqueueButton'
icon.name: 'list-add'
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Add whole container to play list", "Add to playlist")
icon.name: 'list-add'
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Add whole container to play list", "Add to playlist")
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: onClicked
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: onClicked
onClicked: enqueue(databaseId, mainText, fileUrl)
Keys.onReturnPressed: enqueue(databaseId, mainText, fileUrl)
Keys.onEnterPressed: enqueue(databaseId, mainText, fileUrl)
onClicked: enqueue(databaseId, mainText, fileUrl)
Keys.onReturnPressed: enqueue(databaseId, mainText, fileUrl)
Keys.onEnterPressed: enqueue(databaseId, mainText, fileUrl)
visible: showEnqueueButton
visible: showEnqueueButton
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
Button {
id: openButton
objectName: 'openButton'
Button {
id: openButton
objectName: 'openButton'
icon.name: 'go-next-view-page'
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Open view of the container", "Open")
icon.name: 'go-next-view-page'
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.delay: 1000
ToolTip.text: i18nc("Open view of the container", "Open")
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: onClicked
Accessible.role: Accessible.Button
Accessible.name: ToolTip.text
Accessible.description: ToolTip.text
Accessible.onPressAction: onClicked
onClicked: open()
onClicked: open()
visible: showOpenButton
visible: showOpenButton
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
width: elisaTheme.delegateToolButtonSize
height: elisaTheme.delegateToolButtonSize
}
}
}
Loader {
id: coverImageLoader
Loader {
id: coverImageLoader
active: !isPartial
active: !isPartial
anchors.fill: parent
anchors.fill: parent
sourceComponent: Image {
id: coverImage
sourceComponent: Image {
id: coverImage
anchors.fill: parent
anchors.fill: parent
sourceSize.width: parent.width
sourceSize.height: parent.height
fillMode: Image.PreserveAspectFit
smooth: true
sourceSize.width: parent.width
sourceSize.height: parent.height
fillMode: Image.PreserveAspectFit
smooth: true
source: (gridEntry.imageUrl !== undefined ? gridEntry.imageUrl : "")
source: (gridEntry.imageUrl !== undefined ? gridEntry.imageUrl : "")
asynchronous: true
asynchronous: true
layer.enabled: shadowForImage
layer.effect: DropShadow {
source: coverImage
layer.enabled: shadowForImage
layer.effect: DropShadow {
source: coverImage
radius: 10
spread: 0.1
samples: 21
radius: 10
spread: 0.1
samples: 21
color: myPalette.shadow
}
color: myPalette.shadow
}
}
Loader {
active: isPartial
}
Loader {
active: isPartial
anchors.centerIn: parent
height: Kirigami.Units.gridUnit * 5
width: height
anchors.centerIn: parent
height: Kirigami.Units.gridUnit * 5
width: height
sourceComponent: BusyIndicator {
anchors.centerIn: parent
sourceComponent: BusyIndicator {
anchors.centerIn: parent
running: true
}
running: true
}
}
}
LabelWithToolTip {
id: mainLabel
LabelWithToolTip {
id: mainLabel
level: 4
level: 4
color: myPalette.text
color: myPalette.text
// FIXME: Center-aligned text looks better overall, but
// sometimes results in font kerning issues
// See https://bugreports.qt.io/browse/QTBUG-49646
horizontalAlignment: Text.AlignHCenter
// FIXME: Center-aligned text looks better overall, but
// sometimes results in font kerning issues
// See https://bugreports.qt.io/browse/QTBUG-49646
horizontalAlignment: Text.AlignHCenter
Layout.topMargin: elisaTheme.layoutVerticalMargin * 0.5
Layout.maximumWidth: gridEntry.width * 0.9
Layout.minimumWidth: Layout.maximumWidth
Layout.maximumHeight: delegateDisplaySecondaryText
? (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y)
: (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y) * 2
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
Layout.bottomMargin: delegateDisplaySecondaryText ? 0 : elisaTheme.layoutVerticalMargin
Layout.maximumWidth: gridEntry.width * 0.9
Layout.minimumWidth: Layout.maximumWidth
Layout.maximumHeight: delegateDisplaySecondaryText
? (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y)
: (mainLabelSize.boundingRect.height - mainLabelSize.boundingRect.y) * 2
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
Layout.bottomMargin: delegateDisplaySecondaryText ? 0 : elisaTheme.layoutVerticalMargin
wrapMode: delegateDisplaySecondaryText ? Label.NoWrap : Label.Wrap
elide: Text.ElideRight
}
wrapMode: delegateDisplaySecondaryText ? Label.NoWrap : Label.Wrap
maximumLineCount: 2
elide: Text.ElideRight
}
LabelWithToolTip {
id: secondaryLabel
LabelWithToolTip {
id: secondaryLabel
opacity: 0.6
color: myPalette.text
opacity: 0.6
color: myPalette.text
// FIXME: Center-aligned text looks better overall, but
// sometimes results in font kerning issues
// See https://bugreports.qt.io/browse/QTBUG-49646
horizontalAlignment: Text.AlignHCenter
// FIXME: Center-aligned text looks better overall, but
// sometimes results in font kerning issues
// See https://bugreports.qt.io/browse/QTBUG-49646
horizontalAlignment: Text.AlignHCenter
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
Layout.maximumWidth: gridEntry.width * 0.9
Layout.minimumWidth: Layout.maximumWidth
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
Layout.bottomMargin: elisaTheme.layoutVerticalMargin
Layout.maximumWidth: gridEntry.width * 0.9
Layout.minimumWidth: Layout.maximumWidth
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
visible: delegateDisplaySecondaryText
visible: delegateDisplaySecondaryText
elide: Text.ElideRight
}
elide: Text.ElideRight
}
}
Item {
Layout.fillHeight: true
Item {
Layout.fillHeight: true
}
}
}
......
......@@ -125,13 +125,11 @@ FocusScope {
anchors.fill: contentDirectoryView
}
cellWidth: Math.floor(availableWidth / Math.max(Math.floor(availableWidth / elisaTheme.gridDelegateWidth), 2))
cellHeight: elisaTheme.gridDelegateHeight +
(secondaryLabelSize.boundingRect.height - secondaryLabelSize.boundingRect.y) *
(delegateDisplaySecondaryText ? 2 : 1)
cellWidth: Math.floor(availableWidth / Math.max(Math.floor(availableWidth / elisaTheme.gridDelegateSize), 2))
cellHeight: elisaTheme.gridDelegateSize + secondaryLabelSize.boundingRect.height * 2 + elisaTheme.layoutVerticalMargin * 2
delegate: GridBrowserDelegate {
width: elisaTheme.gridDelegateWidth
width: elisaTheme.gridDelegateSize
height: contentDirectoryView.cellHeight
focus: true
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment