[vlc-commits] qml: simplify GridItem
Pierre Lamot
git at videolan.org
Fri Jan 10 15:07:00 CET 2020
vlc | branch: master | Pierre Lamot <pierre at videolabs.io> | Tue Jan 7 16:55:59 2020 +0100| [dc9422b8f0392efc13f5f15d76bd38feadea6669] | committer: Jean-Baptiste Kempf
qml: simplify GridItem
- perform the zoom on focus within its boundaries, it is simpler to know
the total size of the elements and layout them properly
- use a vertical layout to simplify anchors
- remove unecessary nodes
- use FocusBackground and ScrollingText
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=dc9422b8f0392efc13f5f15d76bd38feadea6669
---
.../gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml | 4 +-
.../gui/qt/medialibrary/qml/MusicGenresDisplay.qml | 4 +-
modules/gui/qt/medialibrary/qml/VideoDisplay.qml | 10 +-
.../gui/qt/network/qml/NetworkBrowseDisplay.qml | 29 +-
modules/gui/qt/network/qml/NetworkGridItem.qml | 6 +-
modules/gui/qt/network/qml/NetworkHomeDisplay.qml | 4 +-
modules/gui/qt/style/VLCStyle.qml | 11 +-
modules/gui/qt/widgets/qml/GridItem.qml | 324 ++++++++-------------
8 files changed, 157 insertions(+), 235 deletions(-)
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
index 351f650264..9f45d6bb75 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
@@ -123,8 +123,8 @@ Widgets.NavigableFocusScope {
activeFocusOnTab:true
- cellWidth: VLCStyle.cover_normal + VLCStyle.margin_small
- cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal * 2
+ cellWidth: VLCStyle.gridItem_music_width
+ cellHeight: VLCStyle.gridItem_music_height
headerDelegate: root.header
diff --git a/modules/gui/qt/medialibrary/qml/MusicGenresDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicGenresDisplay.qml
index b5bc63dd9e..1bdaa3f686 100644
--- a/modules/gui/qt/medialibrary/qml/MusicGenresDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicGenresDisplay.qml
@@ -141,8 +141,8 @@ Widgets.NavigableFocusScope {
focus: true
- cellWidth: VLCStyle.cover_normal + VLCStyle.margin_small
- cellHeight: VLCStyle.cover_normal + VLCStyle.fontHeight_normal
+ cellWidth: VLCStyle.gridItem_music_width
+ cellHeight: VLCStyle.gridItem_music_height
onSelectAll: delegateModel.selectAll()
onSelectionUpdated: delegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
diff --git a/modules/gui/qt/medialibrary/qml/VideoDisplay.qml b/modules/gui/qt/medialibrary/qml/VideoDisplay.qml
index 41529bf9f3..7b91eaee6a 100644
--- a/modules/gui/qt/medialibrary/qml/VideoDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoDisplay.qml
@@ -136,7 +136,7 @@ Widgets.NavigableFocusScope {
onContextMenuButtonClicked: {
contextMenu.model = videoGridItem.model
- contextMenu.popup(menuParent)
+ contextMenu.popup()
}
onItemClicked : {
@@ -174,8 +174,8 @@ Widgets.NavigableFocusScope {
}
}
- cellWidth: (VLCStyle.video_normal_width)
- cellHeight: (VLCStyle.video_normal_height) + VLCStyle.margin_xlarge + VLCStyle.margin_normal
+ cellWidth: VLCStyle.gridItem_video_width
+ cellHeight: VLCStyle.gridItem_video_height
onSelectAll: videosGV.model.selectAll()
onSelectionUpdated: videosGV.model.updateSelection( keyModifiers, oldIndex, newIndex )
@@ -192,12 +192,12 @@ Widgets.NavigableFocusScope {
width: view.width
onContextMenuButtonClicked:{
contextMenu.model = menuModel
- contextMenu.popup(menuParent,contextMenu.width,0)
+ contextMenu.popup(menuParent)
}
onRightClick:{
contextMenu.model = menuModel
- contextMenu.popup(menuParent)
+ contextMenu.popup()
}
navigationParent: root
diff --git a/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml b/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
index 18806a5df8..62c2807260 100644
--- a/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
+++ b/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
@@ -146,34 +146,15 @@ Widgets.NavigableFocusScope {
}
}
- cellWidth: VLCStyle.network_normal + VLCStyle.margin_large
- cellHeight: VLCStyle.network_normal + VLCStyle.margin_xlarge
+ cellWidth: VLCStyle.gridItem_network_width
+ cellHeight: VLCStyle.gridItem_network_height
- delegate: Widgets.GridItem {
+ delegate: NetworkGridItem {
id: delegateGrid
+
property var model: ({})
- pictureWidth: VLCStyle.network_normal
- pictureHeight: VLCStyle.network_normal
-
- image: {
- switch (model.type){
- case NetworkMediaModel.TYPE_DISC:
- return "qrc:///type/disc.svg"
- case NetworkMediaModel.TYPE_CARD:
- return "qrc:///type/capture-card.svg"
- case NetworkMediaModel.TYPE_STREAM:
- return "qrc:///type/stream.svg"
- case NetworkMediaModel.TYPE_PLAYLIST:
- return "qrc:///type/playlist.svg"
- case NetworkMediaModel.TYPE_FILE:
- return "qrc:///type/file_black.svg"
- default:
- return "qrc:///type/directory_black.svg"
- }
- }
subtitle: model.mrl || ""
- title: model.name || i18n.qtr("Unknown share")
onItemClicked : {
delegateModel.updateSelection( modifier , delegateModel.currentIndex, index)
@@ -191,7 +172,7 @@ Widgets.NavigableFocusScope {
onContextMenuButtonClicked: {
contextMenu.model = model
contextMenu.delegateModel = delegateModel
- contextMenu.popup(menuParent)
+ contextMenu.popup()
}
}
diff --git a/modules/gui/qt/network/qml/NetworkGridItem.qml b/modules/gui/qt/network/qml/NetworkGridItem.qml
index b0cedb69fa..83c7004469 100644
--- a/modules/gui/qt/network/qml/NetworkGridItem.qml
+++ b/modules/gui/qt/network/qml/NetworkGridItem.qml
@@ -28,8 +28,12 @@ import "qrc:///style/"
Widgets.GridItem {
id: item
+ width: VLCStyle.gridItem_network_width
+ height: VLCStyle.gridItem_network_height
+
pictureWidth: VLCStyle.network_normal
pictureHeight: VLCStyle.network_normal
+
image: {
switch (model.type){
case NetworkMediaModel.TYPE_DISC:
@@ -46,6 +50,6 @@ Widgets.GridItem {
return "qrc:///type/directory_black.svg"
}
}
- subtitle: model.mrl
+ subtitle: model.mrl || ""
title: model.name || i18n.qtr("Unknown share")
}
diff --git a/modules/gui/qt/network/qml/NetworkHomeDisplay.qml b/modules/gui/qt/network/qml/NetworkHomeDisplay.qml
index aa13f613c2..ad0271d8a9 100644
--- a/modules/gui/qt/network/qml/NetworkHomeDisplay.qml
+++ b/modules/gui/qt/network/qml/NetworkHomeDisplay.qml
@@ -81,7 +81,7 @@ Widgets.NavigableFocusScope {
onVisibleChanged: topFocusScope.resetFocus()
width: flickable.width
- height: VLCStyle.gridItem_default_height
+ height: VLCStyle.gridItem_network_height
orientation: ListView.Horizontal
model: machineDM.parts.grid
@@ -109,7 +109,7 @@ Widgets.NavigableFocusScope {
focus: false
width: flickable.width
- height: VLCStyle.gridItem_default_height
+ height: VLCStyle.gridItem_network_height
orientation: ListView.Horizontal
model: lanDM.parts.grid
diff --git a/modules/gui/qt/style/VLCStyle.qml b/modules/gui/qt/style/VLCStyle.qml
index 2deed0e2f7..664d83b4dd 100644
--- a/modules/gui/qt/style/VLCStyle.qml
+++ b/modules/gui/qt/style/VLCStyle.qml
@@ -136,11 +136,14 @@ Item {
//GridItem
- property int gridItem_default_height: VLCStyle.cover_small + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxxsmall * 2
- property int gridItem_default_width: VLCStyle.cover_small + VLCStyle.margin_small * 2
+ property int gridItem_network_height: VLCStyle.network_normal + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxsmall * 4
+ property int gridItem_network_width: VLCStyle.network_normal + VLCStyle.margin_xxsmall * 4
- property int gridItem_video_height: VLCStyle.video_normal_height + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small * 2 + VLCStyle.margin_xxxsmall * 3
- property int gridItem_video_width: VLCStyle.video_normal_width + VLCStyle.margin_small * 2
+ property int gridItem_music_height: VLCStyle.cover_normal + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxsmall * 4
+ property int gridItem_music_width: VLCStyle.cover_normal + VLCStyle.margin_xxsmall * 4
+
+ property int gridItem_video_height: VLCStyle.video_normal_height + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxsmall * 4
+ property int gridItem_video_width: VLCStyle.video_normal_width + VLCStyle.margin_xxsmall * 4
//global application margin "safe area"
diff --git a/modules/gui/qt/widgets/qml/GridItem.qml b/modules/gui/qt/widgets/qml/GridItem.qml
index 8145ae23b1..9737c007e0 100644
--- a/modules/gui/qt/widgets/qml/GridItem.qml
+++ b/modules/gui/qt/widgets/qml/GridItem.qml
@@ -25,16 +25,14 @@ import org.videolan.medialib 0.1
import "qrc:///widgets/" as Widgets
import "qrc:///style/"
-Rectangle {
+Item {
id: root
- color: "transparent"
property url image
property string title: ""
property string subtitle: ""
property bool selected: false
- property alias sourceSize: cover.sourceSize
property string infoLeft: ""
property string resolution: ""
property bool isVideo: false
@@ -43,8 +41,11 @@ Rectangle {
property string channel: ""
property real pictureWidth: isVideo ? VLCStyle.video_normal_width : VLCStyle.cover_small
property real pictureHeight: isVideo ? VLCStyle.video_normal_height : VLCStyle.cover_small
- width: gridItem.width
- height: gridItem.height
+
+ //space use for zoom
+ readonly property real outterMargin: VLCStyle.margin_xxsmall
+ //margin wihtin the tile
+ readonly property real innerMargin: VLCStyle.margin_xxsmall
signal playClicked
signal addToPlaylistClicked
@@ -52,241 +53,171 @@ Rectangle {
signal itemDoubleClicked(Item menuParent, int keys, int modifier)
signal contextMenuButtonClicked(Item menuParent)
- Keys.onMenuPressed: root.contextMenuButtonClicked(cover_bg)
+ Keys.onMenuPressed: root.contextMenuButtonClicked(picture)
Accessible.role: Accessible.Cell
Accessible.name: title
- Item {
- id: gridItem
- width: childrenRect.width
- height: childrenRect.height
-
- MouseArea {
- id: mouseArea
- hoverEnabled: true
- onClicked: {
- if (mouse.button === Qt.RightButton)
- contextMenuButtonClicked(cover_bg);
- else {
- root.itemClicked(cover_bg,mouse.button, mouse.modifiers);
- }
- }
- onDoubleClicked: {
- root.itemDoubleClicked(cover_bg,mouse.buttons, mouse.modifiers)
+ implicitWidth: mouseArea.implicitWidth
+ implicitHeight: mouseArea.implicitHeight
+
+ property bool _zoomed: mouseArea.containsMouse || root.activeFocus
+ property real _picWidth: pictureWidth + (_zoomed ? 2*outterMargin : 0)
+ property real _picHeight: pictureHeight + (_zoomed ? 2*outterMargin : 0)
+
+ MouseArea {
+ id: mouseArea
+ hoverEnabled: true
+
+ anchors.fill: parent
+ implicitWidth: zoomArea.implicitWidth + (_zoomed ? 0 : 2*outterMargin)
+ implicitHeight: zoomArea.implicitHeight + (_zoomed ? 0 : 2*outterMargin)
+
+ acceptedButtons: Qt.RightButton | Qt.LeftButton
+ Keys.onMenuPressed: root.contextMenuButtonClicked(picture)
+
+ onClicked: {
+ if (mouse.button === Qt.RightButton)
+ contextMenuButtonClicked(picture);
+ else {
+ root.itemClicked(picture, mouse.button, mouse.modifiers);
}
- width: childrenRect.width
- height: childrenRect.height
- acceptedButtons: Qt.RightButton | Qt.LeftButton
- Keys.onMenuPressed: root.contextMenuButtonClicked(cover_bg)
-
- Item {
- id: picture
- width: root.pictureWidth
- height: root.pictureHeight
- anchors.top: mouseArea.top
- property bool highlighted: selected || root.activeFocus
-
- Rectangle {
- id: cover_bg
- width: picture.width
- height: picture.height
-
-
- color: VLCStyle.colors.getBgColor(
- selected, mouseArea.containsMouse,
- root.activeFocus)
-
- RoundImage {
- id: cover
- anchors.fill: parent
- anchors.margins: VLCStyle.margin_normal
- source: image
-
- Behavior on anchors.margins {
- SmoothedAnimation {
- velocity: 100
- }
- }
+ }
- VideoProgressBar {
- value: root.progress
- visible: isVideo && root.progress > 0
- anchors {
- bottom: parent.bottom
- left: parent.left
- right: parent.right
- }
- }
+ onDoubleClicked: {
+ if (mouse.button === Qt.LeftButton)
+ root.itemDoubleClicked(picture,mouse.buttons, mouse.modifiers)
+ }
+
+ FocusBackground {
+ id: zoomArea
+
+ anchors.fill: parent
+ anchors.margins: outterMargin
+
+ implicitWidth: layout.implicitWidth + 2*innerMargin
+ implicitHeight: layout.implicitHeight + 2*innerMargin
+
+ active: root.activeFocus
+ selected: root.selected || mouseArea.containsMouse
+
+ states: [
+ State {
+ name: "visiblebig"
+ PropertyChanges {
+ target: zoomArea
+ anchors.margins: 0
+ }
+ when: _zoomed
+ },
+ State {
+ name: "hiddensmall"
+ PropertyChanges {
+ target: zoomArea
+ anchors.margins: VLCStyle.margin_xxsmall
}
+ when: !_zoomed
+ }
+ ]
+
+ Behavior on anchors.margins {
+ SmoothedAnimation {
+ duration: 100
+ }
+ }
+
+ ColumnLayout {
+ id: layout
+ anchors.fill: parent
+ anchors.margins: innerMargin
+
+ spacing: 0
+
+ Widgets.RoundImage {
+ id: picture
+ width: _picWidth
+ height: _picHeight
+ Layout.preferredWidth: _picWidth
+ Layout.preferredHeight: _picHeight
+ Layout.alignment: Qt.AlignHCenter
+
+ source: image
VideoQualityLabel {
id: resolutionLabel
visible: root.resolution !== ""
anchors {
- top: cover.top
- left: cover.left
+ top: parent.top
+ left: parent.left
topMargin: VLCStyle.margin_xxsmall
leftMargin: VLCStyle.margin_xxsmall
}
text: root.resolution
}
+
VideoQualityLabel {
anchors {
- top: cover.top
+ top: parent.top
left: resolutionLabel.right
topMargin: VLCStyle.margin_xxsmall
- leftMargin: VLCStyle.margin_xxxsmall
+ leftMargin: VLCStyle.margin_xxsmall
}
visible: root.channel !== ""
text: root.channel
color: "limegreen"
}
- states: [
- State {
- name: "visiblebig"
- PropertyChanges {
- target: cover
- anchors.margins: VLCStyle.margin_xxsmall
- }
- when: mouseArea.containsMouse
- },
- State {
- name: "hiddenbig"
- PropertyChanges {
- target: cover
- anchors.margins: VLCStyle.margin_xxsmall
- }
- when: !mouseArea.containsMouse
- && picture.highlighted
- },
- State {
- name: "hiddensmall"
- PropertyChanges {
- target: cover
- anchors.margins: VLCStyle.margin_xsmall
- }
- when: !mouseArea.containsMouse
- && !picture.highlighted
+
+ VideoProgressBar {
+ value: root.progress
+ visible: isVideo && root.progress > 0
+ anchors {
+ bottom: parent.bottom
+ left: parent.left
+ right: parent.right
}
- ]
+ }
}
- }
- Rectangle {
- id: textHolderRect
- width: picture.width
- height: childrenRect.height
- anchors.top: picture.bottom
- color: "transparent"
- Rectangle {
+ Widgets.ScrollingText {
id: textTitleRect
- height: childrenRect.height
- color: "transparent"
- clip: true
- property bool showTooltip: false
- anchors {
- left: parent.left
- right: parent.right
- rightMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- }
- ToolTip {
- visible: textTitleRect.showTooltip
- x: (parent.width/2) - (width/2)
- y: (parent.height/2) - (height/2)
- text: root.title
- }
+ Layout.preferredHeight: childrenRect.height
+ Layout.fillWidth: true
+ Layout.maximumWidth: _picWidth
- Text {
- id: textTitle
- text: root.title
- color: VLCStyle.colors.text
- font.pixelSize: VLCStyle.fontSize_normal
- property bool _needsToScroll: (textTitleRect.width < textTitle.width)
-
- state: ((mouseArea.containsMouse || picture.highlighted)
- && textTitle._needsToScroll) ? "HOVERED" : "RELEASED"
-
- states: [
- State {
- name: "HOVERED"
- PropertyChanges {
- target: textTitle
- x: textTitleRect.width - textTitle.width - VLCStyle.margin_small
- }
- },
- State {
- name: "RELEASED"
- PropertyChanges {
- target: textTitle
- x: 0
- }
- }
- ]
- transitions: [
- Transition {
- from: "RELEASED"
- to: "HOVERED"
-
- SequentialAnimation {
- PauseAnimation {
- duration: 1000
- }
- SmoothedAnimation {
- property: "x"
- maximumEasingTime: 0
- velocity: 25
- }
- PauseAnimation {
- duration: 2000
- }
- ScriptAction {
- script: textTitle.state = "RELEASED"
- }
- }
- }
- ]
- }
- }
+ text: root.title
+ color: VLCStyle.colors.text
+ font.pixelSize: VLCStyle.fontSize_normal
- MouseArea {
- id: titleMouseArea
- anchors.fill: parent
- hoverEnabled: true
- onClicked: textTitleRect.showTooltip = true
- onExited: textTitleRect.showTooltip = false
+ scroll: _zoomed || selected
}
Text {
id: subtitleTxt
- anchors {
- left: parent.left
- right: parent.right
- top: textTitleRect.bottom
- rightMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- }
+
+ Layout.preferredHeight: implicitHeight
+ Layout.maximumWidth: _picWidth
+ Layout.fillWidth: true
+
+ visible: text !== ""
+
text: root.subtitle
font.weight: Font.Light
elide: Text.ElideRight
font.pixelSize: VLCStyle.fontSize_small
color: VLCStyle.colors.lightText
- horizontalAlignment: Qt.AlignHCenter
}
+
RowLayout {
visible: isVideo
- anchors {
- top: subtitleTxt.top
- left: parent.left
- right: parent.right
- rightMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- topMargin: VLCStyle.margin_xxxsmall
- }
+
+ Layout.preferredHeight: implicitHeight
+ Layout.fillWidth: true
+ Layout.maximumWidth: _picWidth
+
Text {
Layout.alignment: Qt.AlignLeft
+ Layout.fillWidth: true
font.pixelSize: VLCStyle.fontSize_small
color: VLCStyle.colors.videosGridInfoLeft
text: infoLeft
@@ -295,13 +226,16 @@ Rectangle {
visible: root.isNew
Layout.alignment: Qt.AlignRight
font.pixelSize: VLCStyle.fontSize_small
- color: VLCStyle.colors.accent
+ color: root.activeFocus ? VLCStyle.colors.lightText : VLCStyle.colors.accent
text: "NEW"
font.bold: true
}
}
- }
+ Item {
+ Layout.fillHeight: true
+ }
+ }
}
}
}
More information about the vlc-commits
mailing list