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/Styles/Base/CalendarStyle.qml | |
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/Styles/Base/CalendarStyle.qml')
-rw-r--r-- | src/controls/Styles/Base/CalendarStyle.qml | 120 |
1 files changed, 77 insertions, 43 deletions
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 + } + } } |