diff options
author | Jens Bache-Wiig <jens.bache-wiig@digia.com> | 2014-03-06 14:53:30 +0100 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2014-03-12 11:58:17 +0100 |
commit | 4569ed127c290bea8d165e15dc2eca525825c627 (patch) | |
tree | ea44b1d873f78c46c608c504df083d3c9e137bf1 /src/controls | |
parent | 15b85b154ea1d958c893e35b4d9d2d164c7e0b66 (diff) | |
download | qtquickcontrols-4569ed127c290bea8d165e15dc2eca525825c627.tar.gz |
Styling improvements for Calendar
Also
- added the property Calendar::frameVisible.
- moved the gridVisible property to CalendarStyle
Change-Id: I57da65af130098ac5d0b858c9f964e52e3ba6922
Reviewed-by: Mitch Curtis <mitch.curtis@digia.com>
Diffstat (limited to 'src/controls')
-rw-r--r-- | src/controls/Calendar.qml | 5 | ||||
-rw-r--r-- | src/controls/Private/HoverButton.qml | 79 | ||||
-rw-r--r-- | src/controls/Private/private.pri | 1 | ||||
-rw-r--r-- | src/controls/Private/qmldir | 1 | ||||
-rw-r--r-- | src/controls/Styles/Base/CalendarStyle.qml | 120 | ||||
-rw-r--r-- | src/controls/Styles/Base/images/leftanglearrow.png | bin | 0 -> 2864 bytes | |||
-rw-r--r-- | src/controls/Styles/Base/images/rightanglearrow.png | bin | 0 -> 2886 bytes | |||
-rw-r--r-- | src/controls/Styles/styles.pri | 2 |
8 files changed, 163 insertions, 45 deletions
diff --git a/src/controls/Calendar.qml b/src/controls/Calendar.qml index 07e9b4ad..1fa5d72d 100644 --- a/src/controls/Calendar.qml +++ b/src/controls/Calendar.qml @@ -156,11 +156,12 @@ Control { } /*! - This property determines the visibility of the grid. + This property determines the visibility of the frame + surrounding the calendar. The default value is \c true. */ - property bool gridVisible: true + property bool frameVisible: true /*! This property determines the visibility of week numbers. diff --git a/src/controls/Private/HoverButton.qml b/src/controls/Private/HoverButton.qml new file mode 100644 index 00000000..9d3ca713 --- /dev/null +++ b/src/controls/Private/HoverButton.qml @@ -0,0 +1,79 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the Qt Quick Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.2 + +Item { + id: button + property alias source: image.source + signal clicked + + Rectangle { + id: fillRect + anchors.fill: parent + color: "black" + opacity: mouse.pressed ? 0.07 : mouse.containsMouse ? 0.02 : 0.0 + } + + Rectangle { + border.color: gridColor + anchors.fill: parent + anchors.margins: -1 + color: "transparent" + opacity: fillRect.opacity * 10 + } + + Image { + id: image + width: implicitWidth/2 + height: implicitHeight/2 + anchors.centerIn: parent + anchors.alignWhenCentered: true + source: "images/leftanglearrow.png" + opacity: 0.6 + } + + MouseArea { + id: mouse + anchors.fill: parent + onClicked: button.clicked() + hoverEnabled: true + } +} diff --git a/src/controls/Private/private.pri b/src/controls/Private/private.pri index 49227c9d..f9446854 100644 --- a/src/controls/Private/private.pri +++ b/src/controls/Private/private.pri @@ -53,6 +53,7 @@ PRIVATE_QML_FILES += \ $$PWD/MenuContentItem.qml \ $$PWD/MenuContentScroller.qml \ $$PWD/ContentItem.qml \ + $$PWD/HoverButton.qml \ $$PWD/qmldir QML_FILES += $$PRIVATE_QML_FILES diff --git a/src/controls/Private/qmldir b/src/controls/Private/qmldir index 99740190..d31483e3 100644 --- a/src/controls/Private/qmldir +++ b/src/controls/Private/qmldir @@ -23,4 +23,5 @@ MenuContentItem 1.0 MenuContentItem.qml MenuContentScroller 1.0 MenuContentScroller.qml ColumnMenuContent 1.0 ColumnMenuContent.qml ContentItem 1.0 ContentItem.qml +HoverButton 1.0 HoverButton.qml singleton TextSingleton 1.0 TextSingleton.qml diff --git a/src/controls/Styles/Base/CalendarStyle.qml b/src/controls/Styles/Base/CalendarStyle.qml index 40d03636..78a0eb9f 100644 --- a/src/controls/Styles/Base/CalendarStyle.qml +++ b/src/controls/Styles/Base/CalendarStyle.qml @@ -77,9 +77,9 @@ import QtQuick.Controls.Private 1.0 \qml Calendar { anchors.centerIn: parent - gridVisible: false style: CalendarStyle { + gridVisible: false dayDelegate: Rectangle { gradient: Gradient { GradientStop { @@ -132,7 +132,14 @@ Style { /*! The color of the grid lines. */ - property color gridColor: "#f0f0f0" + property color gridColor: "#d3d3d3" + + /*! + This property determines the visibility of the grid. + + The default value is \c true. + */ + property bool gridVisible: true /*! \internal @@ -165,18 +172,28 @@ Style { Styles the bar at the top of the calendar that contains the next month/previous month buttons and the selected date label. */ - property Component navigationBar: Item { - height: 50 + property Component navigationBar: Rectangle { + height: 41 + color: "#f9f9f9" + + Rectangle { + color: Qt.rgba(1,1,1,0.6) + height: 1 + width: parent.width + } - Button { + Rectangle { + anchors.bottom: parent.bottom + height: 1 + width: parent.width + color: "#ddd" + } + HoverButton { id: previousMonth - width: parent.height * 0.6 - height: width anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: (parent.height - height) / 2 - iconSource: "images/arrow-left.png" - + width: parent.height + height: parent.height + source: "images/leftanglearrow.png" onClicked: control.showPreviousMonth() } Label { @@ -192,15 +209,13 @@ Style { anchors.right: nextMonth.left anchors.rightMargin: 2 } - Button { + HoverButton { id: nextMonth - width: parent.height * 0.6 + width: parent.height height: width - anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: (parent.height - height) / 2 - iconSource: "images/arrow-right.png" - + anchors.right: parent.right + source: "images/rightanglearrow.png" onClicked: control.showNextMonth() } } @@ -232,18 +247,20 @@ Style { \endtable */ property Component dayDelegate: Rectangle { - color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "white"/*"transparent"*/ - readonly property color sameMonthDateTextColor: "black" - readonly property color selectedDateColor: __syspal.highlight + anchors.fill: parent + anchors.margins: styleData.selected ? -1 : 0 + color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent" + readonly property color sameMonthDateTextColor: "#444" + readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : __syspal.highlight readonly property color selectedDateTextColor: "white" - readonly property color differentMonthDateTextColor: Qt.darker("darkgrey", 1.4); + readonly property color differentMonthDateTextColor: "#bbb" readonly property color invalidDateColor: "#dddddd" - Label { id: dayDelegateText text: styleData.date.getDate() anchors.centerIn: parent horizontalAlignment: Text.AlignRight + font.pixelSize: Math.min(parent.height/3, parent.width/3) color: { var theColor = invalidDateColor; if (styleData.valid) { @@ -261,7 +278,7 @@ Style { The delegate that styles each weekday. */ property Component dayOfWeekDelegate: Rectangle { - color: "white" + color: gridVisible ? "#fcfcfc" : "transparent" Label { text: control.__locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat) anchors.centerIn: parent @@ -272,10 +289,10 @@ Style { The delegate that styles each week number. */ property Component weekNumberDelegate: Rectangle { - color: "white" Label { text: styleData.weekNumber anchors.centerIn: parent + color: "#444" } } @@ -295,8 +312,8 @@ Style { readonly property int columns: CalendarUtils.daysInAWeek // The combined available width and height to be shared amongst each cell. - readonly property real availableWidth: (viewContainer.width - (control.gridVisible ? __gridLineWidth : 0)) - readonly property real availableHeight: (viewContainer.height - (control.gridVisible ? __gridLineWidth : 0)) + readonly property real availableWidth: (viewContainer.width - (control.frameVisible ? 2 * __gridLineWidth : 0)) + readonly property real availableHeight: (viewContainer.height - (control.frameVisible ? 2 * __gridLineWidth : 0)) property int hoveredCellIndex: -1 property int pressedCellIndex: -1 @@ -312,6 +329,7 @@ Style { anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top + anchors.margins: control.frameVisible ? 1 : 0 sourceComponent: navigationBar property QtObject styleData: QtObject { @@ -322,10 +340,9 @@ Style { Row { id: dayOfWeekHeaderRow - spacing: (control.gridVisible ? __gridLineWidth : 0) anchors.top: navigationBarLoader.bottom anchors.left: parent.left - anchors.leftMargin: (control.weekNumbersVisible ? weekNumbersItem.width : 0) + (control.gridVisible ? __gridLineWidth : 0) + anchors.leftMargin: (control.weekNumbersVisible ? weekNumbersItem.width : 0) anchors.right: parent.right height: dayOfWeekHeaderRowHeight @@ -337,7 +354,7 @@ Style { Loader { id: dayOfWeekDelegateLoader sourceComponent: dayOfWeekDelegate - width: __cellRectAt(index).width - (control.gridVisible ? __gridLineWidth : 0) + width: __cellRectAt(index).width height: dayOfWeekHeaderRow.height readonly property var __dayOfWeek: dayOfWeek @@ -360,16 +377,15 @@ Style { visible: control.weekNumbersVisible width: 30 height: viewContainer.height - Repeater { id: weekNumberRepeater model: panelItem.weeksToShow Loader { id: weekNumberDelegateLoader - y: __cellRectAt(index * panelItem.columns).y + (control.gridVisible ? __gridLineWidth : 0) + y: __cellRectAt(index * panelItem.columns).y + (gridVisible ? __gridLineWidth : 0) width: weekNumbersItem.width - height: __cellRectAt(index * panelItem.columns).height - (control.gridVisible ? __gridLineWidth : 0) + height: __cellRectAt(index * panelItem.columns).height - (control.frameVisible ? __gridLineWidth : 0) sourceComponent: weekNumberDelegate readonly property int __index: index @@ -392,6 +408,17 @@ Style { } } } + Rectangle { + anchors.topMargin: - navigationBarLoader.height + anchors.top: parent.top + anchors.bottom: parent.bottom + + width: 1 + anchors.rightMargin: -1 + anchors.right: parent.right + color: gridColor + } + } // Contains the grid lines and the grid itself. @@ -402,23 +429,23 @@ Style { Repeater { id: verticalGridLineRepeater - model: panelItem.columns + 1 + model: panelItem.columns - 1 delegate: Rectangle { // The last line will be an invalid index, so we must handle it x: index < panelItem.columns - ? __cellRectAt(index).x - : __cellRectAt(panelItem.columns - 1).x + __cellRectAt(panelItem.columns - 1).width + ? __cellRectAt(index + 1).x + : __cellRectAt(panelItem.columns).x + __cellRectAt(panelItem.columns).width y: 0 width: __gridLineWidth height: viewContainer.height color: gridColor - visible: control.gridVisible + visible: gridVisible } } Repeater { id: horizontalGridLineRepeater - model: panelItem.rows + 1 + model: panelItem.rows delegate: Rectangle { x: 0 // The last line will be an invalid index, so we must handle it @@ -428,7 +455,7 @@ Style { width: viewContainer.width height: __gridLineWidth color: gridColor - visible: control.gridVisible + visible: gridVisible } } @@ -549,11 +576,11 @@ Style { delegate: Loader { id: delegateLoader - x: __cellRectAt(index).x + (control.gridVisible ? __gridLineWidth : 0) - y: __cellRectAt(index).y + (control.gridVisible ? __gridLineWidth : 0) - width: __cellRectAt(index).width - (control.gridVisible ? __gridLineWidth : 0) - height: __cellRectAt(index).height - (control.gridVisible ? __gridLineWidth : 0) - + x: __cellRectAt(index).x + (gridVisible ? __gridLineWidth : 0) + y: __cellRectAt(index).y + (gridVisible ? __gridLineWidth : 0) + width: __cellRectAt(index).width - (gridVisible ? __gridLineWidth : 0) + height: __cellRectAt(index).height - (gridVisible ? __gridLineWidth : 0) + z: styleData.selected ? 1 : 0 sourceComponent: dayDelegate readonly property int __index: index @@ -579,5 +606,12 @@ Style { } } } + Rectangle { + anchors.fill: parent + color: "transparent" + border.color: gridColor + visible: control.frameVisible + } + } } diff --git a/src/controls/Styles/Base/images/leftanglearrow.png b/src/controls/Styles/Base/images/leftanglearrow.png Binary files differnew file mode 100644 index 00000000..d4e85ae0 --- /dev/null +++ b/src/controls/Styles/Base/images/leftanglearrow.png diff --git a/src/controls/Styles/Base/images/rightanglearrow.png b/src/controls/Styles/Base/images/rightanglearrow.png Binary files differnew file mode 100644 index 00000000..a8157538 --- /dev/null +++ b/src/controls/Styles/Base/images/rightanglearrow.png diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri index 9199dfc5..ddc867a5 100644 --- a/src/controls/Styles/styles.pri +++ b/src/controls/Styles/styles.pri @@ -75,6 +75,8 @@ STYLES_QML_FILES += \ $$PWD/Base/images/arrow-left@2x.png \ $$PWD/Base/images/arrow-right.png \ $$PWD/Base/images/arrow-right@2x.png \ + $$PWD/Base/images/leftanglearrow.png \ + $$PWD/Base/images/rightanglearrow.png \ $$PWD/Base/images/spinner_small.png \ $$PWD/Base/images/spinner_medium.png \ $$PWD/Base/images/spinner_large.png \ |