Verified Commit 692c59b2 authored by Fushan Wen's avatar Fushan Wen 💬
Browse files

applets/digital-clock: improve arrow key navigation support

1. Add Button  TabBar
2. Add Button  Event List if not empty
3. Event List → Month View
4. Event List  Switch Button if visible
5. Switch Button → Month View
6. Switch Button  Timezone List
7. Timezone List → Month View
8. TabBar  Previous Button  Today Button  Next Button
9. TabBar/Previous Button/Today Button ↑ Configure Button
10. Next Button  Pin Button
11. Configure Button  Today Button
12. TabBar/Previous Button/Today Button/Next Button ↓ Month View
13. Month View  TabBar
parent 6692060c
Pipeline #219609 passed with stage
in 12 minutes and 55 seconds
......@@ -45,6 +45,8 @@ PlasmaExtras.Representation {
property bool debug: false
Keys.onDownPressed: monthView.Keys.onDownPressed(event);
Connections {
target: Plasmoid.self
......@@ -102,15 +104,19 @@ PlasmaExtras.Representation {
elide: Text.ElideRight
}
PlasmaComponents3.ToolButton {
id: addEventButton
visible: agenda.visible && ApplicationIntegration.calendarInstalled
text: i18nc("@action:button Add event", "Add…")
Layout.rightMargin: calendar.paddings
icon.name: "list-add"
Accessible.description: i18nc("@info:tooltip", "Add a new event")
KeyNavigation.down: KeyNavigation.tab
KeyNavigation.right: tabbar
onClicked: ApplicationIntegration.launchCalendar()
KeyNavigation.tab: calendar.showAgenda ? holidaysList : clocksList
KeyNavigation.tab: calendar.showAgenda && holidaysList.count ? holidaysList : holidaysList.KeyNavigation.down
}
}
}
......@@ -138,6 +144,9 @@ PlasmaExtras.Representation {
columns: 6
rows: 2
KeyNavigation.up: configureButton
Keys.onDownPressed: monthView.Keys.onDownPressed(event);
PlasmaExtras.Heading {
Layout.row: 0
Layout.column: 0
......@@ -158,6 +167,10 @@ PlasmaExtras.Representation {
icon.name: "configure"
text: Plasmoid.action("configure").text
KeyNavigation.left: tabbar.KeyNavigation.left
KeyNavigation.right: pinButton
KeyNavigation.down: todayButton
onClicked: Plasmoid.action("configure").trigger()
PlasmaComponents3.ToolTip {
text: parent.text
......@@ -166,6 +179,7 @@ PlasmaExtras.Representation {
// Allows the user to keep the calendar open for reference
PlasmaComponents3.ToolButton {
id: pinButton
Layout.row: 0
Layout.column: 5
checkable: true
......@@ -175,6 +189,8 @@ PlasmaExtras.Representation {
icon.name: "window-pin"
text: i18n("Keep Open")
KeyNavigation.down: nextButton
onToggled: Plasmoid.configuration.pin = checked
PlasmaComponents3.ToolTip {
......@@ -192,6 +208,9 @@ PlasmaExtras.Representation {
Layout.fillWidth: true
Layout.leftMargin: PlasmaCore.Units.smallSpacing
KeyNavigation.left: addEventButton.visible ? addEventButton : addEventButton.KeyNavigation.down
KeyNavigation.right: previousButton
PlasmaComponents3.TabButton {
text: i18n("Days");
onClicked: monthView.showMonthView();
......@@ -233,6 +252,8 @@ PlasmaExtras.Representation {
}
}
KeyNavigation.right: todayButton
onClicked: monthView.previousView()
PlasmaComponents3.ToolTip {
......@@ -241,12 +262,14 @@ PlasmaExtras.Representation {
}
PlasmaComponents3.ToolButton {
id: todayButton
Layout.bottomMargin: PlasmaCore.Units.smallSpacing
Layout.row: 1
Layout.column: 4
onClicked: monthView.resetToToday()
text: i18ndc("libplasma5", "Reset calendar to today", "Today")
Accessible.description: i18nd("libplasma5", "Reset calendar to today")
KeyNavigation.right: nextButton
}
PlasmaComponents3.ToolButton {
......@@ -397,6 +420,10 @@ PlasmaExtras.Representation {
activeFocusOnTab: true
highlight: null
currentIndex: -1
KeyNavigation.down: switchTimeZoneButton.visible ? switchTimeZoneButton : clocksList
Keys.onRightPressed: switchTimeZoneButton.Keys.onRightPressed(event);
onCurrentIndexChanged: if (!activeFocus) {
currentIndex = -1;
}
......@@ -565,12 +592,16 @@ PlasmaExtras.Representation {
}
PlasmaComponents3.ToolButton {
id: switchTimeZoneButton
visible: KCMShell.authorize("kcm_clock.desktop").length > 0
text: i18n("Switch…")
Accessible.name: i18n("Switch to another timezone")
icon.name: "preferences-system-time"
Accessible.description: i18n("Switch to another timezone")
KeyNavigation.down: clocksList
Keys.onRightPressed: monthView.Keys.onDownPressed(event)
onClicked: KCMShell.openSystemSettings("kcm_clock")
......@@ -606,6 +637,7 @@ PlasmaExtras.Representation {
currentIndex = -1;
}
KeyNavigation.tab: configureButton
Keys.onRightPressed: switchTimeZoneButton.Keys.onRightPressed(event);
model: {
let timezones = [];
......@@ -690,6 +722,9 @@ PlasmaExtras.Representation {
: Qt.locale().firstDayOfWeek
showWeekNumbers: Plasmoid.configuration.showWeekNumbers
showCustomHeader: true
KeyNavigation.tab: addEventButton.visible ? addEventButton : addEventButton.KeyNavigation.down
Keys.onUpPressed: tabbar.currentItem.forceActiveFocus(Qt.BacktabFocusReason);
}
}
}
......@@ -36,6 +36,7 @@ Item {
// how precise date matching should be, 3 = day+month+year, 2 = month+year, 1 = just year
property int dateMatchingPrecision
property alias repeater: repeater
property alias headerModel: days.model
property alias gridModel: repeater.model
......@@ -122,9 +123,11 @@ Item {
height: daysCalendar.cellHeight
dayModel: repeater.model
activeFocusOnTab: selected && daysCalendar.PlasmaComponents3.SwipeView.isCurrentItem
Keys.onPressed: {
if (!daysCalendar.PlasmaComponents3.SwipeView.isCurrentItem) {
event.accepted = false;
return;
}
switch (event.key) {
case Qt.Key_Space:
case Qt.Key_Enter:
......@@ -140,11 +143,29 @@ Item {
} else {
return root.nextItemInFocusChain(false);
}
KeyNavigation.tab: daysCalendar.KeyNavigation.tab
KeyNavigation.up: if (index >= daysCalendar.columns) {
return repeater.itemAt(index - daysCalendar.columns);
} else {
return root.nextItemInFocusChain(false);
Keys.onUpPressed: {
if (!daysCalendar.PlasmaComponents3.SwipeView.isCurrentItem) {
event.accepted = false;
return;
}
if (index >= daysCalendar.columns) {
repeater.itemAt(index - daysCalendar.columns).forceActiveFocus(Qt.TabFocusReason);
} else {
event.accepted = false;
}
}
Keys.onDownPressed: {
if (!daysCalendar.PlasmaComponents3.SwipeView.isCurrentItem) {
event.accepted = false;
return;
}
if (index < (daysCalendar.rows - 1) * daysCalendar.columns) {
repeater.itemAt(index + daysCalendar.columns).forceActiveFocus(Qt.TabFocusReason);
} else {
daysCalendar.scrollDown();
}
}
Connections {
......
......@@ -14,13 +14,11 @@ import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.plasma.extras 2.0 as PlasmaExtras
PinchArea { // TODO KF6 switch to Item
Item {
id: root
anchors.fill: parent // TODO KF6 don't use anchors
enabled: false
/**
* Currently selected month name.
* \property string MonthView::selectedMonth
......@@ -71,6 +69,10 @@ PinchArea { // TODO KF6 switch to Item
property alias cellHeight: mainDaysCalendar.cellHeight
property QtObject daysModel: calendarBackend.daysModel
KeyNavigation.up: nextButton
// The view can have no highlighted item, so always highlight the first item
Keys.onDownPressed: swipeView.currentItem.repeater.itemAt(0).forceActiveFocus(Qt.TabFocusReason);
function isToday(date) {
return date.toDateString() === new Date().toDateString();
}
......@@ -247,6 +249,9 @@ PinchArea { // TODO KF6 switch to Item
RowLayout {
spacing: 0
KeyNavigation.down: tabBar.currentItem
PlasmaExtras.Heading {
id: heading
text: swipeView.currentIndex > 0 || root.selectedYear !== today.getFullYear() ? i18ndc("plasmashellprivateplugin", "Format: month year", "%1 %2", root.selectedMonth, root.selectedYear.toString()) : root.selectedMonth
......@@ -273,12 +278,17 @@ PinchArea { // TODO KF6 switch to Item
icon.name: Qt.application.layoutDirection === Qt.RightToLeft ? "go-next" : "go-previous"
onClicked: root.previousView()
Accessible.name: tooltip
KeyNavigation.right: todayButton
PlasmaComponents3.ToolTip { text: parent.tooltip }
}
PlasmaComponents3.ToolButton {
id: todayButton
text: i18ndc("plasmashellprivateplugin", "Reset calendar to today", "Today")
Accessible.description: i18nd("plasmashellprivateplugin", "Reset calendar to today")
KeyNavigation.right: nextButton
onClicked: root.resetToToday()
}
......@@ -310,6 +320,8 @@ PinchArea { // TODO KF6 switch to Item
Layout.fillWidth: true
Layout.bottomMargin: PlasmaCore.Units.smallSpacing
KeyNavigation.up: previousButton
PlasmaComponents3.TabButton {
text: i18nd("plasmashellprivateplugin", "Days");
onClicked: root.showMonthView();
......@@ -340,6 +352,14 @@ PinchArea { // TODO KF6 switch to Item
activeFocusOnTab: false
clip: true
Keys.onUpPressed: {
if (root.showCustomHeader) {
event.accepted = false;
return;
}
tabBar.currentItem.forceActiveFocus(Qt.BacktabFocusReason);
}
onCurrentIndexChanged: if (currentIndex > 1) {
updateDecadeOverview();
}
......@@ -358,6 +378,8 @@ PinchArea { // TODO KF6 switch to Item
dateMatchingPrecision: Calendar.MatchYearMonthAndDay
KeyNavigation.tab: root.showCustomHeader ? root.KeyNavigation.tab : todayButton
onActivated: {
const rowNumber = Math.floor(index / columns);
week = 1 + calendarBackend.weeksModel[rowNumber];
......@@ -380,6 +402,9 @@ PinchArea { // TODO KF6 switch to Item
dateMatchingPrecision: Calendar.MatchYearAndMonth
gridModel: monthModel
KeyNavigation.tab: root.showCustomHeader ? root.KeyNavigation.tab : todayButton
onActivated: {
calendarBackend.goToMonth(date.monthNumber);
swipeView.currentIndex = 0;
......@@ -399,6 +424,9 @@ PinchArea { // TODO KF6 switch to Item
dateMatchingPrecision: Calendar.MatchYear
gridModel: yearModel
KeyNavigation.tab: root.showCustomHeader ? root.KeyNavigation.tab : todayButton
onActivated: {
calendarBackend.goToYear(date.yearNumber);
swipeView.currentIndex = 1;
......
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