diff --git a/src/RatingStar.qml b/src/RatingStar.qml index 63b012c5..b835bb14 100644 --- a/src/RatingStar.qml +++ b/src/RatingStar.qml @@ -1,244 +1,92 @@ /* * Copyright 2016 Matthieu Gallien * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Library General Public * License as published by the Free Software Foundation; either * version 3 of the License, or (at your option) any later version. * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Library General Public License for more details. * * You should have received a copy of the GNU Library General Public License * along with this library; see the file COPYING.LIB. If not, write to * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, * Boston, MA 02110-1301, USA. */ -import QtQuick 2.5 -import QtQuick.Layouts 1.1 +import QtQuick 2.7 +import QtQuick.Layouts 1.2 import QtGraphicalEffects 1.0 RowLayout { property int starSize property int starRating property bool readOnly: true property double hoverBrightness: 0.5 property double hoverContrast: 0.5 + property int hoveredRating: 0 + spacing: 0 - Item { - Layout.preferredHeight: starSize * 1.5 - Layout.preferredWidth: starSize * 1.5 - Layout.maximumHeight: starSize * 1.5 - Layout.maximumWidth: starSize * 1.5 - Layout.minimumHeight: starSize * 1.5 - Layout.minimumWidth: starSize * 1.5 - - Image { - width: starSize * 1.5 - height: starSize * 1.5 - anchors.centerIn: parent - sourceSize.width: starSize * 1.5 - sourceSize.height: starSize * 1.5 - fillMode: Image.PreserveAspectFit - - layer.enabled: (mouseAreaOne.containsMouse && starRating !== 2) || (mouseAreaTwo.containsMouse && starRating !== 4) || (mouseAreaThree.containsMouse && starRating !== 6) || - (mouseAreaFour.containsMouse && starRating !== 8) || (mouseAreaFive.containsMouse && starRating !== 10) - layer.effect: BrightnessContrast { - brightness: hoverBrightness - contrast: hoverContrast + Repeater { + model: 5 + + Item { + property int ratingThreshold: 2 + index * 2 + Layout.preferredHeight: starSize + Layout.preferredWidth: starSize + Layout.maximumHeight: starSize + Layout.maximumWidth: starSize + Layout.minimumHeight: starSize + Layout.minimumWidth: starSize + + Image { + width: starSize + height: starSize + anchors.centerIn: parent + sourceSize.width: starSize + sourceSize.height: starSize + fillMode: Image.PreserveAspectFit + + layer.enabled: hoveredRating >= ratingThreshold + + layer.effect: BrightnessContrast { + brightness: hoverBrightness + contrast: hoverContrast + } + + source: if (starRating >= ratingThreshold || hoveredRating >= ratingThreshold) + Qt.resolvedUrl(elisaTheme.ratingIcon) + else + Qt.resolvedUrl(elisaTheme.ratingUnratedIcon) + opacity: if (starRating >= ratingThreshold || hoveredRating >= ratingThreshold) + 1 + else + 0.7 } - source: if (starRating >= 2 || mouseAreaOne.containsMouse || mouseAreaTwo.containsMouse || mouseAreaThree.containsMouse || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - Qt.resolvedUrl(elisaTheme.ratingIcon) - else - Qt.resolvedUrl(elisaTheme.ratingUnratedIcon) - opacity: if (starRating >= 2 || mouseAreaOne.containsMouse || mouseAreaTwo.containsMouse || mouseAreaThree.containsMouse || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - 1 - else - 0.7 - } - - MouseArea { - id: mouseAreaOne - enabled: !readOnly - hoverEnabled: true - anchors.fill: parent - onClicked: if (starRating !== 2) { - starRating = 2 - } else { - starRating = 0 - } - } - } - Item { - Layout.preferredHeight: starSize * 1.5 - Layout.preferredWidth: starSize * 1.5 - Layout.maximumHeight: starSize * 1.5 - Layout.maximumWidth: starSize * 1.5 - Layout.minimumHeight: starSize * 1.5 - Layout.minimumWidth: starSize * 1.5 - - Image { - width: starSize * 1.5 - height: starSize * 1.5 - anchors.centerIn: parent - sourceSize.width: starSize * 1.5 - sourceSize.height: starSize * 1.5 - fillMode: Image.PreserveAspectFit - - layer.enabled: (mouseAreaTwo.containsMouse && starRating !== 4) || (mouseAreaThree.containsMouse && starRating !== 6) || - (mouseAreaFour.containsMouse && starRating !== 8) || (mouseAreaFive.containsMouse && starRating !== 10) - layer.effect: BrightnessContrast { - brightness: hoverBrightness - contrast: hoverContrast - } + MouseArea { + anchors.fill: parent - source: if (starRating >= 4 || mouseAreaTwo.containsMouse || mouseAreaThree.containsMouse || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - Qt.resolvedUrl(elisaTheme.ratingIcon) - else - Qt.resolvedUrl(elisaTheme.ratingUnratedIcon) - opacity: if (starRating >= 4 || mouseAreaTwo.containsMouse || mouseAreaThree.containsMouse || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - 1 - else - 0.7 - } + enabled: !readOnly - MouseArea { - id: mouseAreaTwo - enabled: !readOnly - hoverEnabled: true - anchors.fill: parent - onClicked: starRating = 4 - } - } - Item { - Layout.preferredHeight: starSize * 1.5 - Layout.preferredWidth: starSize * 1.5 - Layout.maximumHeight: starSize * 1.5 - Layout.maximumWidth: starSize * 1.5 - Layout.minimumHeight: starSize * 1.5 - Layout.minimumWidth: starSize * 1.5 - - Image { - width: starSize * 1.5 - height: starSize * 1.5 - anchors.centerIn: parent - sourceSize.width: starSize * 1.5 - sourceSize.height: starSize * 1.5 - fillMode: Image.PreserveAspectFit - - layer.enabled: (mouseAreaThree.containsMouse && starRating !== 6) || (mouseAreaFour.containsMouse && starRating !== 8) || (mouseAreaFive.containsMouse && starRating !== 10) - layer.effect: BrightnessContrast { - brightness: hoverBrightness - contrast: hoverContrast - } + acceptedButtons: Qt.LeftButton + hoverEnabled: true - source: if (starRating >= 6 || mouseAreaThree.containsMouse || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - Qt.resolvedUrl(elisaTheme.ratingIcon) - else - Qt.resolvedUrl(elisaTheme.ratingUnratedIcon) - opacity: if (starRating >= 6 || mouseAreaThree.containsMouse || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - 1 - else - 0.7 - } + onClicked: if (starRating !== ratingThreshold) { + starRating = ratingThreshold + } else { + starRating = 0 + } - MouseArea { - id: mouseAreaThree - enabled: !readOnly - hoverEnabled: true - anchors.fill: parent - onClicked: starRating = 6 - } - } - Item { - Layout.preferredHeight: starSize * 1.5 - Layout.preferredWidth: starSize * 1.5 - Layout.maximumHeight: starSize * 1.5 - Layout.maximumWidth: starSize * 1.5 - Layout.minimumHeight: starSize * 1.5 - Layout.minimumWidth: starSize * 1.5 - - Image { - width: starSize * 1.5 - height: starSize * 1.5 - anchors.centerIn: parent - sourceSize.width: starSize * 1.5 - sourceSize.height: starSize * 1.5 - fillMode: Image.PreserveAspectFit - - layer.enabled: (mouseAreaFour.containsMouse && starRating !== 8) || (mouseAreaFive.containsMouse && starRating !== 10) - layer.effect: BrightnessContrast { - brightness: hoverBrightness - contrast: hoverContrast + onEntered: hoveredRating = ratingThreshold + onExited: hoveredRating = 0 } - - source: if (starRating >= 8 || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - Qt.resolvedUrl(elisaTheme.ratingIcon) - else - Qt.resolvedUrl(elisaTheme.ratingUnratedIcon) - opacity: if (starRating >= 8 || mouseAreaFour.containsMouse || mouseAreaFive.containsMouse) - 1 - else - 0.7 - } - - MouseArea { - id: mouseAreaFour - enabled: !readOnly - hoverEnabled: true - anchors.fill: parent - onClicked: starRating = 8 - } - } - Item { - Layout.preferredHeight: starSize * 1.5 - Layout.preferredWidth: starSize * 1.5 - Layout.maximumHeight: starSize * 1.5 - Layout.maximumWidth: starSize * 1.5 - Layout.minimumHeight: starSize * 1.5 - Layout.minimumWidth: starSize * 1.5 - - Layout.rightMargin: !LayoutMirroring.enabled ? (starSize * 0.5) : 0 - Layout.leftMargin: LayoutMirroring.enabled ? (starSize * 0.5) : 0 - - Image { - width: starSize * 1.5 - height: starSize * 1.5 - anchors.centerIn: parent - sourceSize.width: starSize * 1.5 - sourceSize.height: starSize * 1.5 - fillMode: Image.PreserveAspectFit - - layer.enabled: mouseAreaFive.containsMouse && starRating !== 10 - layer.effect: BrightnessContrast { - brightness: hoverBrightness - contrast: hoverContrast - } - - source: if (starRating === 10 || mouseAreaFive.containsMouse) - Qt.resolvedUrl(elisaTheme.ratingIcon) - else - Qt.resolvedUrl(elisaTheme.ratingUnratedIcon) - opacity: if (starRating === 10 || mouseAreaFive.containsMouse) - 1 - else - 0.7 - } - - MouseArea { - id: mouseAreaFive - enabled: !readOnly - hoverEnabled: true - anchors.fill: parent - onClicked: starRating = 10 } } } - diff --git a/src/Theme.qml b/src/Theme.qml index 3d480df3..f3431d3b 100644 --- a/src/Theme.qml +++ b/src/Theme.qml @@ -1,76 +1,76 @@ /* * Copyright 2017 Matthieu Gallien * * This library is free software; you can redistribute it and/or * modify it under the terms of the GNU Library General Public * License as published by the Free Software Foundation; either * version 3 of the License, or (at your option) any later version. * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Library General Public License for more details. * * You should have received a copy of the GNU Library General Public License * along with this library; see the file COPYING.LIB. If not, write to * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, * Boston, MA 02110-1301, USA. */ import QtQuick 2.7 import QtQuick.Controls 1.4 Item { property string albumCover: 'image://icon/media-optical-audio' property string artistImage: 'image://icon/view-media-artist' property string clearIcon: 'image://icon/edit-clear' property string skipBackwardIcon: 'image://icon/media-skip-backward' property string pauseIcon: 'image://icon/media-playback-pause' property string playIcon: 'image://icon/media-playback-start' property string skipForwardIcon: 'image://icon/media-skip-forward' property string playerVolumeMutedIcon: 'image://icon/player-volume-muted' property string playerVolumeIcon: 'image://icon/player-volume' property string ratingIcon: 'image://icon/rating' property string ratingUnratedIcon: 'image://icon/rating-unrated' property string errorIcon: 'image://icon/error' property int layoutHorizontalMargin: 8 property int layoutVerticalMargin: 6 property int delegateHeight: 28 property int delegateWithHeaderHeight: 68 property int trackDelegateHeight: 45 property int coverImageSize: 180 property int smallImageSize: 32 property int tooltipRadius: 3 property int shadowOffset: 2 property int delegateToolButtonSize: 34 property int smallDelegateToolButtonSize: 20 - property int ratingStarSize: 10 + property int ratingStarSize: 15 property int mediaPlayerControlHeight: 48 property int smallControlButtonHeight: 32 property int bigControlButtonHeight: 44 property int volumeSliderWidth: 140 property int dragDropPlaceholderHeight: 28 property int navigationBarHeight: 100 property int gridDelegateHeight: 168 property int gridDelegateWidth: 112 property int viewSelectorDelegateHeight: 32 property int filterClearButtonMargin: layoutVerticalMargin property alias defaultFontPixelSize: fontSize.font.pixelSize Label { id: fontSize } }