From 43b1fb18e2034ac8166f6de632f89c179e53047b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20=C3=81ngel=20San=20Mart=C3=ADn?= Date: Sat, 9 Apr 2016 11:40:50 +0200 Subject: [PATCH] Added a new style for the scrollbar in GridComicsView. YACReaderScrollViewStyle is needed because YACReaderScrollView is used instead of ScrollView. --- YACReaderLibrary/qml/GridComicsView.qml | 30 +- .../qml/YACReaderScrollViewStyle.qml | 403 ++++++++++++++++++ 2 files changed, 431 insertions(+), 2 deletions(-) create mode 100644 YACReaderLibrary/qml/YACReaderScrollViewStyle.qml diff --git a/YACReaderLibrary/qml/GridComicsView.qml b/YACReaderLibrary/qml/GridComicsView.qml index 83d81fbf..475d4d25 100644 --- a/YACReaderLibrary/qml/GridComicsView.qml +++ b/YACReaderLibrary/qml/GridComicsView.qml @@ -2,6 +2,7 @@ import QtQuick 2.3 import QtQuick.Controls 1.2 import QtGraphicalEffects 1.0 +import QtQuick.Controls.Styles 1.4 import com.yacreader.ComicModel 1.0 @@ -370,6 +371,32 @@ Rectangle { id: scrollView anchors.fill: parent anchors.margins: 0 + + style: YACReaderScrollViewStyle { + transientScrollBars: false + incrementControl: Item {} + decrementControl: Item {} + handle: Item { + implicitWidth: 16 + implicitHeight: 26 + Rectangle { + color: "#88424242" + anchors.fill: parent + anchors.topMargin: 6 + anchors.leftMargin: 4 + anchors.rightMargin: 4 + anchors.bottomMargin: 6 + border.color: "#AA313131" + border.width: 1 + radius: 8 + } + } + scrollBarBackground: Item { + implicitWidth: 16 + implicitHeight: 26 + } + } + //QTBUG-39453 //Another fu%$ยท#& bug in Qt //https://bugreports.qt.io/browse/QTBUG-39453 @@ -540,7 +567,6 @@ Rectangle { height: 64 enabled: (dummyValue || !dummyValue) }*/ + } } - - diff --git a/YACReaderLibrary/qml/YACReaderScrollViewStyle.qml b/YACReaderLibrary/qml/YACReaderScrollViewStyle.qml new file mode 100644 index 00000000..e9a0e787 --- /dev/null +++ b/YACReaderLibrary/qml/YACReaderScrollViewStyle.qml @@ -0,0 +1,403 @@ +/**************************************************************************** +** +** Copyright (C) 2015 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.2 +import QtQuick.Controls 1.2 +import QtQuick.Controls.Private 1.0 + +/*! + \qmltype ScrollViewStyle + \inqmlmodule QtQuick.Controls.Styles + \since 5.1 + \ingroup viewsstyling + \ingroup controlsstyling + \brief Provides custom styling for ScrollView +*/ +Style { + id: root + + /*! The \l ScrollView this style is attached to. */ + readonly property YACReaderScrollView control: __control + + /*! This property controls the frame border padding of the scrollView. */ + padding {left: 1; top: 1; right: 1; bottom: 1} + + /*! This Component paints the corner area between scroll bars */ + property Component corner: Rectangle { color: "#ccc" } + + /*! This component determines if the flickable should reposition itself at the + mouse location when clicked. */ + property bool scrollToClickedPosition: true + + /*! This property holds whether the scroll bars are transient. Transient scroll bars + appear when the content is scrolled and disappear when they are no longer needed. + + The default value is platform dependent. */ + property bool transientScrollBars: Settings.isMobile && Settings.hasTouchScreen + + /*! This Component paints the frame around scroll bars. */ + property Component frame: Rectangle { + color: control["backgroundVisible"] ? "white": "transparent" + border.color: "#999" + border.width: 1 + radius: 1 + visible: control.frameVisible + } + + /*! This is the minimum extent of the scroll bar handle. + + The default value is \c 30. + */ + + property int minimumHandleLength: 30 + + /*! This property controls the edge overlap + between the handle and the increment/decrement buttons. + + The default value is \c 30. + */ + + property int handleOverlap: 1 + + /*! This component controls the appearance of the + scroll bar background. + + You can access the following state properties: + + \table + \row \li property bool \b styleData.hovered + \row \li property bool \b styleData.horizontal + \endtable + */ + + property Component scrollBarBackground: Item { + property bool sticky: false + property bool hovered: styleData.hovered + implicitWidth: Math.round(TextSingleton.implicitHeight) + implicitHeight: Math.round(TextSingleton.implicitHeight) + clip: true + opacity: transientScrollBars ? 0.5 : 1.0 + visible: !Settings.hasTouchScreen && (!transientScrollBars || sticky) + Rectangle { + anchors.fill: parent + color: "#ddd" + border.color: "#aaa" + anchors.rightMargin: styleData.horizontal ? -2 : -1 + anchors.leftMargin: styleData.horizontal ? -2 : 0 + anchors.topMargin: styleData.horizontal ? 0 : -2 + anchors.bottomMargin: styleData.horizontal ? -1 : -2 + } + onHoveredChanged: if (hovered) sticky = true + onVisibleChanged: if (!visible) sticky = false + } + + /*! This component controls the appearance of the + scroll bar handle. + + You can access the following state properties: + + \table + \row \li property bool \b styleData.hovered + \row \li property bool \b styleData.pressed + \row \li property bool \b styleData.horizontal + \endtable + */ + + property Component handle: Item { + property bool sticky: false + property bool hovered: __activeControl !== "none" + implicitWidth: Math.round(TextSingleton.implicitHeight) + 1 + implicitHeight: Math.round(TextSingleton.implicitHeight) + 1 + BorderImage { + id: img + opacity: styleData.pressed && !transientScrollBars ? 0.5 : styleData.hovered ? 1 : 0.8 + source: "images/scrollbar-handle-" + (transientScrollBars ? "transient" : styleData.horizontal ? "horizontal" : "vertical") + ".png" + border.left: transientScrollBars ? 5 : 2 + border.top: transientScrollBars ? 5 : 2 + border.right: transientScrollBars ? 5 : 2 + border.bottom: transientScrollBars ? 5 : 2 + anchors.top: !styleData.horizontal ? parent.top : undefined + anchors.margins: transientScrollBars ? 2 : 0 + anchors.bottom: parent.bottom + anchors.right: parent.right + anchors.left: styleData.horizontal ? parent.left : undefined + width: !styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : parent.width + height: styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : parent.height + Behavior on width { enabled: !styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } } + Behavior on height { enabled: styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } } + } + onHoveredChanged: if (hovered) sticky = true + onVisibleChanged: if (!visible) sticky = false + } + + /*! This component controls the appearance of the + scroll bar increment button. + + You can access the following state properties: + + \table + \row \li property bool \b styleData.hovered + \row \li property bool \b styleData.pressed + \row \li property bool \b styleData.horizontal + \endtable + */ + property Component incrementControl: Rectangle { + visible: !transientScrollBars + implicitWidth: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight) + implicitHeight: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight) + Rectangle { + anchors.fill: parent + anchors.bottomMargin: -1 + anchors.rightMargin: -1 + border.color: "#aaa" + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + border.color: "#44ffffff" + } + Image { + source: styleData.horizontal ? "images/arrow-right.png" : "images/arrow-down.png" + anchors.centerIn: parent + opacity: control.enabled ? 0.6 : 0.5 + } + gradient: Gradient { + GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0} + GradientStop {color: styleData.pressed ? "lightgray" : "lightgray" ; position: 1} + } + } + } + + /*! This component controls the appearance of the + scroll bar decrement button. + + You can access the following state properties: + + \table + \row \li property bool \b styleData.hovered + \row \li property bool \b styleData.pressed + \row \li property bool \b styleData.horizontal + \endtable + */ + property Component decrementControl: Rectangle { + visible: !transientScrollBars + implicitWidth: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight) + implicitHeight: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight) + Rectangle { + anchors.fill: parent + anchors.topMargin: styleData.horizontal ? 0 : -1 + anchors.leftMargin: styleData.horizontal ? -1 : 0 + anchors.bottomMargin: styleData.horizontal ? -1 : 0 + anchors.rightMargin: styleData.horizontal ? 0 : -1 + color: "lightgray" + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + border.color: "#44ffffff" + } + Image { + source: styleData.horizontal ? "images/arrow-left.png" : "images/arrow-up.png" + anchors.centerIn: parent + anchors.verticalCenterOffset: styleData.horizontal ? 0 : -1 + anchors.horizontalCenterOffset: styleData.horizontal ? -1 : 0 + opacity: control.enabled ? 0.6 : 0.5 + } + gradient: Gradient { + GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0} + GradientStop {color: styleData.pressed ? "lightgray" : "lightgray" ; position: 1} + } + border.color: "#aaa" + } + } + + /*! \internal */ + property Component __scrollbar: Item { + id: panel + property string activeControl: "none" + property bool scrollToClickPosition: true + property bool isTransient: transientScrollBars + + property bool on: false + property bool raised: false + property bool sunken: __styleData.upPressed | __styleData.downPressed | __styleData.handlePressed + + states: State { + name: "out" + when: isTransient + && (!__stickyScrollbars || !flickableItem.moving) + && panel.activeControl === "none" + && !panel.on + && !panel.raised + PropertyChanges { target: panel; opacity: 0 } + } + + transitions: Transition { + to: "out" + SequentialAnimation { + PauseAnimation { duration: root.__scrollBarFadeDelay } + NumberAnimation { properties: "opacity"; duration: root.__scrollBarFadeDuration } + PropertyAction { target: panel; property: "visible"; value: false } + } + } + + implicitWidth: __styleData.horizontal ? 200 : bg.implicitWidth + implicitHeight: __styleData.horizontal ? bg.implicitHeight : 200 + + function pixelMetric(arg) { + if (arg === "scrollbarExtent") + return (__styleData.horizontal ? bg.height : bg.width); + return 0; + } + + function styleHint(arg) { + return false; + } + + function hitTest(argX, argY) { + if (itemIsHit(handleControl, argX, argY)) + return "handle" + else if (itemIsHit(incrementLoader, argX, argY)) + return "up"; + else if (itemIsHit(decrementLoader, argX, argY)) + return "down"; + else if (itemIsHit(bg, argX, argY)) { + if (__styleData.horizontal && argX < handleControl.x || !__styleData.horizontal && argY < handleControl.y) + return "upPage" + else + return "downPage" + } + + return "none"; + } + + function subControlRect(arg) { + if (arg === "handle") { + return Qt.rect(handleControl.x, handleControl.y, handleControl.width, handleControl.height); + } else if (arg === "groove") { + if (__styleData.horizontal) { + return Qt.rect(incrementLoader.width - handleOverlap, + 0, + __control.width - (incrementLoader.width + decrementLoader.width - handleOverlap * 2), + __control.height); + } else { + return Qt.rect(0, + incrementLoader.height - handleOverlap, + __control.width, + __control.height - (incrementLoader.height + decrementLoader.height - handleOverlap * 2)); + } + } + return Qt.rect(0,0,0,0); + } + + function itemIsHit(argItem, argX, argY) { + var pos = argItem.mapFromItem(__control, argX, argY); + return (pos.x >= 0 && pos.x <= argItem.width && pos.y >= 0 && pos.y <= argItem.height); + } + + Loader { + id: incrementLoader + anchors.top: parent.top + anchors.left: parent.left + sourceComponent: decrementControl + property QtObject styleData: QtObject { + readonly property bool hovered: activeControl === "up" + readonly property bool pressed: __styleData.upPressed + readonly property bool horizontal: __styleData.horizontal + } + } + + Loader { + id: bg + anchors.top: __styleData.horizontal ? undefined : incrementLoader.bottom + anchors.bottom: __styleData.horizontal ? undefined : decrementLoader.top + anchors.left: __styleData.horizontal ? incrementLoader.right : undefined + anchors.right: __styleData.horizontal ? decrementLoader.left : undefined + sourceComponent: scrollBarBackground + property QtObject styleData: QtObject { + readonly property bool horizontal: __styleData.horizontal + readonly property bool hovered: activeControl !== "none" + } + } + + Loader { + id: decrementLoader + anchors.bottom: __styleData.horizontal ? undefined : parent.bottom + anchors.right: __styleData.horizontal ? parent.right : undefined + sourceComponent: incrementControl + property QtObject styleData: QtObject { + readonly property bool hovered: activeControl === "down" + readonly property bool pressed: __styleData.downPressed + readonly property bool horizontal: __styleData.horizontal + } + } + + property var flickableItem: control.flickableItem + property int extent: Math.max(minimumHandleLength, __styleData.horizontal ? + (flickableItem ? flickableItem.width/flickableItem.contentWidth : 0 ) * bg.width : + (flickableItem ? flickableItem.height/flickableItem.contentHeight : 0) * bg.height) + readonly property real range: __control.maximumValue - __control.minimumValue + readonly property real begin: __control.value - __control.minimumValue + + Loader { + id: handleControl + height: __styleData.horizontal ? implicitHeight : extent + width: __styleData.horizontal ? extent : implicitWidth + anchors.top: bg.top + anchors.left: bg.left + anchors.topMargin: __styleData.horizontal || range === 0 ? 0 : -handleOverlap + (2 * begin * (bg.height + (2 * handleOverlap) - extent) + range) / (2 * range) + anchors.leftMargin: __styleData.horizontal && range !== 0 ? -handleOverlap + (2 * begin * (bg.width + (2 * handleOverlap) - extent) + range) / (2 * range) : 0 + sourceComponent: handle + property QtObject styleData: QtObject { + readonly property bool hovered: activeControl === "handle" + readonly property bool pressed: __styleData.handlePressed + readonly property bool horizontal: __styleData.horizontal + } + readonly property alias __activeControl: panel.activeControl + } + } + + /*! \internal */ + property bool __externalScrollBars: false + /*! \internal */ + property int __scrollBarSpacing: 4 + /*! \internal */ + property int __scrollBarFadeDelay: 450 + /*! \internal */ + property int __scrollBarFadeDuration: 200 + /*! \internal */ + property bool __stickyScrollbars: false +}