[vlc-devel] [PATCH 23/33] QML: style changes of GridItems
Adrien Maglo
magsoft at videolan.org
Wed Jun 12 14:01:30 CEST 2019
---
.../gui/qt/qml/mediacenter/MCVideoDisplay.qml | 4 +-
.../qt/qml/mediacenter/MusicAlbumsDisplay.qml | 2 +-
.../qt/qml/mediacenter/MusicGenresDisplay.qml | 4 +-
modules/gui/qt/qml/style/VLCStyle.qml | 1 +
modules/gui/qt/qml/utils/GridItem.qml | 278 ++++++++----------
5 files changed, 124 insertions(+), 165 deletions(-)
diff --git a/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml b/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml
index 55b1f83d0e..7f73bab118 100644
--- a/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml
@@ -42,7 +42,7 @@ Utils.NavigableFocusScope {
focus: true
image: model.thumbnail || VLCStyle.noArtCover
title: model.title || qsTr("Unknown title")
- selected: element.DelegateModel.inSelected || view.currentItem.currentIndex === index
+ selected: element.DelegateModel.inSelected
shiftX: view.currentItem.shiftX(model.index)
onItemClicked : {
@@ -113,7 +113,7 @@ Utils.NavigableFocusScope {
focus: true
cellWidth: VLCStyle.cover_normal + VLCStyle.margin_small
- cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal + VLCStyle.margin_small
+ cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal
onSelectAll: delegateModel.selectAll()
onSelectionUpdated: delegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
diff --git a/modules/gui/qt/qml/mediacenter/MusicAlbumsDisplay.qml b/modules/gui/qt/qml/mediacenter/MusicAlbumsDisplay.qml
index c99ffa4634..40dd0661c0 100644
--- a/modules/gui/qt/qml/mediacenter/MusicAlbumsDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MusicAlbumsDisplay.qml
@@ -114,7 +114,7 @@ Utils.NavigableFocusScope {
activeFocusOnTab:true
cellWidth: VLCStyle.cover_normal + VLCStyle.margin_small
- cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal * 2 + VLCStyle.margin_small
+ cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal * 2
gridDelegate: Utils.GridItem {
property variant delegateModelItem: ({
diff --git a/modules/gui/qt/qml/mediacenter/MusicGenresDisplay.qml b/modules/gui/qt/qml/mediacenter/MusicGenresDisplay.qml
index 0dcae39700..124b93d5ae 100644
--- a/modules/gui/qt/qml/mediacenter/MusicGenresDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MusicGenresDisplay.qml
@@ -163,8 +163,8 @@ Utils.NavigableFocusScope {
focus: true
- cellWidth: (VLCStyle.cover_normal) + VLCStyle.margin_small
- cellHeight: (VLCStyle.cover_normal + VLCStyle.fontHeight_normal) + VLCStyle.margin_small
+ cellWidth: VLCStyle.cover_normal + VLCStyle.margin_small
+ cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal
onSelectAll: delegateModel.selectAll()
onSelectionUpdated: delegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index 79974b5d08..de7431f9f3 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -97,6 +97,7 @@ Item {
property int widthSortBox: 150 * scale;
property int heightInput: 22 * scale;
+ property int selectedBorder: 2
//timings
property int delayToolTipAppear: 500;
diff --git a/modules/gui/qt/qml/utils/GridItem.qml b/modules/gui/qt/qml/utils/GridItem.qml
index 7245e76c97..a57791d5b2 100644
--- a/modules/gui/qt/qml/utils/GridItem.qml
+++ b/modules/gui/qt/qml/utils/GridItem.qml
@@ -29,19 +29,16 @@ import "qrc:///style/"
Item {
id: root
- width: VLCStyle.cover_normal
- height: VLCStyle.cover_normal
- + VLCStyle.fontHeight_normal
- + VLCStyle.fontHeight_small
- + VLCStyle.margin_xsmall
- property url image: VLCStyle.noArtCover
+ property url image
property string title: ""
property string subtitle: ""
property bool selected: false
property int shiftX: 0
property bool noActionButtons: false
+ property alias sourceSize: cover.sourceSize
+
signal playClicked
signal addToPlaylistClicked
signal itemClicked(int keys, int modifier)
@@ -49,206 +46,167 @@ Item {
Item {
x: shiftX
- width: parent.width
- height: parent.height
MouseArea {
-
id: mouseArea
- anchors.fill: parent
hoverEnabled: true
- onClicked: root.itemClicked(mouse.buttons, mouse.modifiers)
+ onClicked: {
+ root.itemClicked(mouse.buttons, mouse.modifiers)
+ }
onDoubleClicked: root.itemDoubleClicked(mouse.buttons, mouse.modifiers);
+ width: childrenRect.width
+ height: childrenRect.height
- Item {
- anchors.fill: parent
+ Column {
Item {
id: picture
- anchors.left: parent.left
- anchors.right: parent.right
- anchors.top: parent.top
-
width: VLCStyle.cover_normal
- height: VLCStyle.cover_normal
- property bool highlighted: selected || mouseArea.containsMouse
+ height: VLCStyle.cover_normal - VLCStyle.margin_small
+ anchors.horizontalCenter: parent.horizontalCenter
+ property bool highlighted: selected || root.activeFocus
- RectangularGlow {
- visible: picture.highlighted
- anchors.fill: cover
- cornerRadius: 25
- spread: 0.5
- glowRadius: VLCStyle.margin_xsmall
- color: VLCStyle.colors.getBgColor( selected, mouseArea.containsMouse, root.activeFocus )
- }
-
- /*
- Item {
- id: coverPlaceHolder
- x: cover.x + (cover.width - cover.paintedWidth) / 2
- y: cover.y +(cover.height - cover.paintedHeight) / 2
- width: cover.paintedWidth
- height: cover.paintedHeight
- }
- */
-
- Image {
- id: cover
+ Rectangle {
+ id: cover_bg
width: VLCStyle.cover_small
height: VLCStyle.cover_small
Behavior on width { SmoothedAnimation { velocity: 100 } }
Behavior on height { SmoothedAnimation { velocity: 100 } }
anchors.centerIn: parent
- source: image
- fillMode: Image.PreserveAspectCrop
+ color: VLCStyle.colors.banner
- Rectangle {
- id: overlay
+ Image {
+ id: cover
anchors.fill: parent
- visible: mouseArea.containsMouse
- color: "black" //darken the image below
+ source: image
+ fillMode: Image.PreserveAspectCrop
+ sourceSize: Qt.size(width, height)
- RowLayout {
+ Rectangle {
+ id: overlay
anchors.fill: parent
- visible: !noActionButtons
- Item {
- Layout.fillHeight: true
- Layout.fillWidth: true
- /* A addToPlaylist button visible when hovered */
- Text {
- property int iconSize: VLCStyle.icon_large
- Behavior on iconSize { SmoothedAnimation { velocity: 100 } }
- Binding on iconSize {
- value: VLCStyle.icon_large * 1.2
- when: mouseAreaAdd.containsMouse
- }
-
- //Layout.alignment: Qt.AlignCenter
- anchors.centerIn: parent
- text: VLCIcons.add
- font.family: VLCIcons.fontFamily
- horizontalAlignment: Text.AlignHCenter
- color: mouseAreaAdd.containsMouse ? "white" : "lightgray"
- font.pixelSize: iconSize
-
- MouseArea {
- id: mouseAreaAdd
- anchors.fill: parent
- hoverEnabled: true
- propagateComposedEvents: true
- onClicked: root.addToPlaylistClicked()
+ color: "black" //darken the image below
+
+ RowLayout {
+ anchors.fill: parent
+ visible: !noActionButtons
+ Item {
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ /* A addToPlaylist button visible when hovered */
+ Text {
+ property int iconSize: VLCStyle.icon_large
+ Behavior on iconSize { SmoothedAnimation { velocity: 100 } }
+ Binding on iconSize {
+ value: VLCStyle.icon_large * 1.2
+ when: mouseAreaAdd.containsMouse
+ }
+
+ //Layout.alignment: Qt.AlignCenter
+ anchors.centerIn: parent
+ text: VLCIcons.add
+ font.family: VLCIcons.fontFamily
+ horizontalAlignment: Text.AlignHCenter
+ color: mouseAreaAdd.containsMouse ? "white" : "lightgray"
+ font.pixelSize: iconSize
+
+ MouseArea {
+ id: mouseAreaAdd
+ anchors.fill: parent
+ hoverEnabled: true
+ propagateComposedEvents: true
+ onClicked: root.addToPlaylistClicked()
+ }
}
}
- }
- /* A play button visible when hovered */
- Item {
- Layout.fillHeight: true
- Layout.fillWidth: true
-
- Text {
- property int iconSize: VLCStyle.icon_large
- Behavior on iconSize {
- SmoothedAnimation { velocity: 100 }
- }
- Binding on iconSize {
- value: VLCStyle.icon_large * 1.2
- when: mouseAreaPlay.containsMouse
- }
-
- anchors.centerIn: parent
- text: VLCIcons.play
- font.family: VLCIcons.fontFamily
- horizontalAlignment: Text.AlignHCenter
- color: mouseAreaPlay.containsMouse ? "white" : "lightgray"
- font.pixelSize: iconSize
-
- MouseArea {
- id: mouseAreaPlay
- anchors.fill: parent
- hoverEnabled: true
- onClicked: root.playClicked()
+ /* A play button visible when hovered */
+ Item {
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ Text {
+ property int iconSize: VLCStyle.icon_large
+ Behavior on iconSize {
+ SmoothedAnimation { velocity: 100 }
+ }
+ Binding on iconSize {
+ value: VLCStyle.icon_large * 1.2
+ when: mouseAreaPlay.containsMouse
+ }
+
+ anchors.centerIn: parent
+ text: VLCIcons.play
+ font.family: VLCIcons.fontFamily
+ horizontalAlignment: Text.AlignHCenter
+ color: mouseAreaPlay.containsMouse ? "white" : "lightgray"
+ font.pixelSize: iconSize
+
+ MouseArea {
+ id: mouseAreaPlay
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: root.playClicked()
+ }
}
}
}
}
- }
- states: [
- State {
- name: "visible"
- PropertyChanges { target: overlay; visible: true }
- when: mouseArea.containsMouse
- },
- State {
- name: "hidden"
- PropertyChanges { target: overlay; visible: false }
- when: !mouseArea.containsMouse
- }
- ]
- transitions: [
- Transition {
- from: "hidden"; to: "visible"
- NumberAnimation {
- target: overlay
- properties: "opacity"
- from: 0; to: 0.8; duration: 300
+ states: [
+ State {
+ name: "visible"
+ PropertyChanges { target: overlay; visible: true }
+ when: mouseArea.containsMouse
+ },
+ State {
+ name: "hidden"
+ PropertyChanges { target: overlay; visible: false }
+ when: !mouseArea.containsMouse
}
- }
- ]
- }
+ ]
+ transitions: [
+ Transition {
+ from: "hidden"; to: "visible"
+ NumberAnimation {
+ target: overlay
+ properties: "opacity"
+ from: 0; to: 0.8; duration: 300
+ }
+ }
+ ]
+ }
- states: [
- State {
- name: "big"
- when: picture.highlighted
- PropertyChanges {
- target: cover
- width: VLCStyle.cover_normal - 2 * VLCStyle.margin_xsmall
- height: VLCStyle.cover_normal - 2 * VLCStyle.margin_xsmall
- }
- },
- State {
- name: "small"
- when: !picture.highlighted
- PropertyChanges {
- target: cover
- width: VLCStyle.cover_normal - 2 * VLCStyle.margin_small
- height: VLCStyle.cover_normal - 2 * VLCStyle.margin_small
- }
+ Rectangle {
+ visible: picture.highlighted
+ anchors.fill: parent
+ color: "transparent"
+ border.width: VLCStyle.selectedBorder
+ border.color: VLCStyle.colors.accent
}
- ]
+ }
}
Text {
id: textTitle
- anchors {
- left: parent.left
- right: parent.right
- top: picture.bottom
- rightMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- }
+ width: cover_bg.width
+ anchors.horizontalCenter: parent.horizontalCenter
text: root.title
elide: Text.ElideRight
font.pixelSize: VLCStyle.fontSize_normal
- font.bold: true
color: VLCStyle.colors.text
+ horizontalAlignment: Qt.AlignHCenter
}
Text {
- anchors {
- left: parent.left
- right: parent.right
- top: textTitle.bottom
- rightMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- }
+ width: cover_bg.width
+ anchors.horizontalCenter: parent.horizontalCenter
text : root.subtitle
elide: Text.ElideRight
font.pixelSize: VLCStyle.fontSize_small
- color: VLCStyle.colors.text
+ color: VLCStyle.colors.lightText
+ horizontalAlignment: Qt.AlignHCenter
}
}
}
--
2.20.1
More information about the vlc-devel
mailing list