[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

src/declarativeimports/calendar/qml/DayDelegate.qml

@@ -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

src/declarativeimports/calendar/qml/DaysCalendar.qml

@@ -1,7 +1,7 @@
 /*
  * 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,14 +87,18 @@ Item {
         }
     }
 
-    PlasmaExtras.Heading {
+    RowLayout {
-        id: heading
-
         anchors {
             top: parent.top
             left: parent.left
             right: parent.right
         }
+        spacing: units.smallSpacing
+
+        PlasmaExtras.Heading {
+            id: heading
+
+            Layout.fillWidth: true
 
             level: 1
             elide: Text.ElideRight
@@ -131,41 +140,26 @@ Item {
             }
         }
 
-    Components.Label {
+        Components.ToolButton {
-        anchors {
+            id: previousButton
-            top: heading.bottom
+            iconName: "go-previous"
-            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
             onClicked: daysCalendar.previous()
-        }
+            Accessible.name: tooltip
         }
 
-    Components.Label {
+        Components.ToolButton {
-        anchors {
+            iconName: "go-jump-today"
-            top: heading.bottom
+            onClicked: root.resetToToday()
-            right: parent.right
+            tooltip: i18ndc("libplasma5", "Reset calendar to today", "Today")
-            rightMargin: Math.floor(units.largeSpacing / 2)
+            Accessible.name: tooltip
+            Accessible.description: i18nd("libplasma5", "Reset calendar to today")
         }
-        text: "▶"
-        opacity: rightmouse.containsMouse ? 1 : 0.4
-        Behavior on opacity { NumberAnimation {} }
 
-        MouseArea {
+        Components.ToolButton {
-            id: rightmouse
+            id: nextButton
-            anchors.fill: parent
+            iconName: "go-next"
-            anchors.margins: -units.largeSpacing / 3
-            hoverEnabled: true
             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)
+                font.pixelSize: Math.max(theme.smallestFont.pixelSize, daysCalendar.cellHeight / 3)
+                opacity: 0.4
                 horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignBottom
+                verticalAlignment: Text.AlignVCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: units.smallSpacing
-                }
             }
         }
 

src/declarativeimports/calendar/qml/MonthView.qml

@@ -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: {