Commit 4ebf130e authored by Kai Uwe Broulik's avatar Kai Uwe Broulik 🍇
Browse files

[Calendar] Add proper back/forward buttons and a "Today" button

This removes the custom label-based triangles and replaces them with proper ToolButtons
using proper icons. It also adds a "Today" button to return to the current day.
The tooltips on the buttons reflect the actual action ("Previous Month", "Previous Year",
"Previous Decade", depending on the zoom level).

Furthermore, the day names and week numbers now use the regular font size but they're still
visually disconnected. The day names row is hidden in the zoom levels now.

REVIEW: 126960
BUG: 336124
BUG: 348362
BUG: 358536
parent 13dc0399
......@@ -103,13 +103,17 @@ MouseArea {
Components.Label {
id: label
anchors.fill: todayRect
anchors {
fill: todayRect
margins: units.smallSpacing
}
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: model.label || dayNumber
opacity: isCurrent ? 1.0 : 0.5
wrapMode: Text.NoWrap
elide: Text.ElideRight
fontSizeMode: Text.HorizontalFit
font.pixelSize: Math.max(theme.smallestFont.pixelSize, Math.floor(daysCalendar.cellHeight / 3))
// This is to avoid the "Both point size and
// pixel size set. Using pixel size" warnings
......
/*
* Copyright 2013 Heena Mahour <heena393@gmail.com>
* Copyright 2013 Sebastian Kügler <sebas@kde.org>
* Copyright 2015 Kai Uwe Broulik <kde@privat.broulik.de>
* Copyright 2015, 2016 Kai Uwe Broulik <kde@privat.broulik.de>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
......@@ -16,7 +16,9 @@
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
import org.kde.plasma.calendar 2.0
......@@ -38,6 +40,9 @@ Item {
readonly property int gridColumns: showWeekNumbers ? calendarGrid.columns + 1 : calendarGrid.columns
property alias previousLabel: previousButton.tooltip
property alias nextLabel: nextButton.tooltip
property int rows
property int columns
......@@ -56,7 +61,7 @@ Item {
// Take the calendar width, subtract the inner and outer spacings and divide by number of columns (==days in week)
readonly property int cellWidth: Math.floor((stack.width - (daysCalendar.columns + 1) * root.borderWidth) / (daysCalendar.columns + (showWeekNumbers ? 1 : 0)))
// Take the calendar height, subtract the inner spacings and divide by number of rows (root.weeks + one row for day names)
readonly property int cellHeight: Math.floor((stack.height - heading.height - (daysCalendar.rows + 1) * root.borderWidth) / (daysCalendar.rows + 1))
readonly property int cellHeight: Math.floor((stack.height - heading.height - calendarGrid.rows * root.borderWidth) / calendarGrid.rows)
property real transformScale: 1
property point transformOrigin: Qt.point(width / 2, height / 2)
......@@ -82,90 +87,79 @@ Item {
}
}
PlasmaExtras.Heading {
id: heading
RowLayout {
anchors {
top: parent.top
left: parent.left
right: parent.right
}
spacing: units.smallSpacing
level: 1
elide: Text.ElideRight
font.capitalization: Font.Capitalize
PlasmaExtras.Heading {
id: heading
MouseArea {
id: monthMouse
property int previousPixelDelta
Layout.fillWidth: true
anchors.fill: parent
onClicked: {
if (!stack.busy) {
daysCalendar.headerClicked()
}
}
onExited: previousPixelDelta = 0
onWheel: {
var delta = wheel.angleDelta.y || wheel.angleDelta.x
var pixelDelta = wheel.pixelDelta.y || wheel.pixelDelta.x
// For high-precision touchpad scrolling, we get a wheel event for basically every slightest
// finger movement. To prevent the view from suddenly ending up in the next century, we
// cumulate all the pixel deltas until they're larger than the label and then only change
// the month. Standard mouse wheel scrolling is unaffected since it's fine.
if (pixelDelta) {
if (Math.abs(previousPixelDelta) < monthMouse.height) {
previousPixelDelta += pixelDelta
return
level: 1
elide: Text.ElideRight
font.capitalization: Font.Capitalize
MouseArea {
id: monthMouse
property int previousPixelDelta
anchors.fill: parent
onClicked: {
if (!stack.busy) {
daysCalendar.headerClicked()
}
}
onExited: previousPixelDelta = 0
onWheel: {
var delta = wheel.angleDelta.y || wheel.angleDelta.x
var pixelDelta = wheel.pixelDelta.y || wheel.pixelDelta.x
// For high-precision touchpad scrolling, we get a wheel event for basically every slightest
// finger movement. To prevent the view from suddenly ending up in the next century, we
// cumulate all the pixel deltas until they're larger than the label and then only change
// the month. Standard mouse wheel scrolling is unaffected since it's fine.
if (pixelDelta) {
if (Math.abs(previousPixelDelta) < monthMouse.height) {
previousPixelDelta += pixelDelta
return
}
}
if (delta >= 15) {
daysCalendar.previous()
} else if (delta <= -15) {
daysCalendar.next()
if (delta >= 15) {
daysCalendar.previous()
} else if (delta <= -15) {
daysCalendar.next()
}
previousPixelDelta = 0
}
previousPixelDelta = 0
}
}
}
Components.Label {
anchors {
top: heading.bottom
left: parent.left
leftMargin: Math.floor(units.largeSpacing / 2)
}
text: ""
opacity: leftmouse.containsMouse ? 1 : 0.4
Behavior on opacity { NumberAnimation {} }
MouseArea {
id: leftmouse
anchors.fill: parent
anchors.margins: -units.largeSpacing / 3
hoverEnabled: true
Components.ToolButton {
id: previousButton
iconName: "go-previous"
onClicked: daysCalendar.previous()
Accessible.name: tooltip
}
}
Components.Label {
anchors {
top: heading.bottom
right: parent.right
rightMargin: Math.floor(units.largeSpacing / 2)
Components.ToolButton {
iconName: "go-jump-today"
onClicked: root.resetToToday()
tooltip: i18ndc("libplasma5", "Reset calendar to today", "Today")
Accessible.name: tooltip
Accessible.description: i18nd("libplasma5", "Reset calendar to today")
}
text: ""
opacity: rightmouse.containsMouse ? 1 : 0.4
Behavior on opacity { NumberAnimation {} }
MouseArea {
id: rightmouse
anchors.fill: parent
anchors.margins: -units.largeSpacing / 3
hoverEnabled: true
Components.ToolButton {
id: nextButton
iconName: "go-next"
onClicked: daysCalendar.next()
Accessible.name: tooltip
}
}
......@@ -221,7 +215,7 @@ Item {
// Draw the outer vertical lines in full height so that it closes
// the outer rectangle
if (i == 0 || i == gridColumns) {
if (i == 0 || i == gridColumns || !daysCalendar.headerModel) {
ctx.moveTo(lineX, 0);
} else {
ctx.moveTo(lineX, root.borderWidth + daysCalendar.cellHeight);
......@@ -266,7 +260,7 @@ Item {
verticalAlignment: Text.AlignVCenter
opacity: 0.4
text: modelData
font.pixelSize: Math.max(theme.smallestFont.pixelSize, daysCalendar.cellHeight / 6)
font.pixelSize: Math.max(theme.smallestFont.pixelSize, daysCalendar.cellHeight / 3)
}
}
}
......@@ -282,7 +276,7 @@ Item {
}
columns: daysCalendar.columns
rows: daysCalendar.rows + 1
rows: daysCalendar.rows + (daysCalendar.headerModel ? 1 : 0)
spacing: root.borderWidth
property Item selectedItem
......@@ -300,19 +294,14 @@ Item {
Repeater {
id: days
Item {
Components.Label {
width: daysCalendar.cellWidth
height: daysCalendar.cellHeight
Components.Label {
text: Qt.locale().dayName(calendarBackend.firstDayOfWeek + index, Locale.ShortFormat)
font.pixelSize: Math.max(theme.smallestFont.pixelSize, daysCalendar.cellHeight / 6)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignBottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: units.smallSpacing
}
text: Qt.locale().dayName(calendarBackend.firstDayOfWeek + index, Locale.ShortFormat)
font.pixelSize: Math.max(theme.smallestFont.pixelSize, daysCalendar.cellHeight / 3)
opacity: 0.4
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
......
......@@ -232,13 +232,16 @@ PinchArea {
dateMatchingPrecision: Calendar.MatchYearMonthAndDay
previousLabel: i18nd("libplasma5", "Previous Month")
nextLabel: i18nd("libplasma5", "Next Month")
onPrevious: calendarBackend.previousMonth()
onNext: calendarBackend.nextMonth()
onHeaderClicked: {
stack.push(yearOverview)
}
onActivated: {
var rowNumber = Math.floor(index / 7);
var rowNumber = Math.floor(index / columns);
week = 1 + calendarBackend.weeksModel[rowNumber];
root.date = date
root.currentDate = new Date(date.yearNumber, date.monthNumber - 1, date.dayNumber)
......@@ -258,6 +261,9 @@ PinchArea {
gridModel: monthModel
previousLabel: i18nd("libplasma5", "Previous Year")
nextLabel: i18nd("libplasma5", "Next Year")
onPrevious: calendarBackend.previousYear()
onNext: calendarBackend.nextYear()
onHeaderClicked: {
......@@ -288,6 +294,9 @@ PinchArea {
gridModel: yearModel
previousLabel: i18nd("libplasma5", "Previous Decade")
nextLabel: i18nd("libplasma5", "Next Decade")
onPrevious: calendarBackend.previousDecade()
onNext: calendarBackend.nextDecade()
onActivated: {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment