vlc | branch: master | Adrien Maglo <[email protected]> | Thu Apr 18 13:07:51 2019 +0200| [ee5d8c9f85de3cc930d1ebc3859d7146e5062f71] | committer: Thomas Guillem
qml: style changes of GridItems Signed-off-by: Thomas Guillem <[email protected]> > http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=ee5d8c9f85de3cc930d1ebc3859d7146e5062f71 --- modules/gui/qt/qml/mediacenter/MCVideoDisplay.qml | 4 +- .../gui/qt/qml/mediacenter/MusicAlbumsDisplay.qml | 2 +- .../gui/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 } } } _______________________________________________ vlc-commits mailing list [email protected] https://mailman.videolan.org/listinfo/vlc-commits
