openkylin
/
ukui-menu
mirror of https://gitee.com/openkylin/ukui-menu.git
9
0
Fork 1
Code Issues Projects Releases Wiki Activity

feat(NormalUI):添加字母导航菜单区域的按键导航功能(#I79O1H)

This commit is contained in:
qiqi 2023-08-14 11:15:54 +08:00 committed by He Sir
parent cb1e8016e7
commit d27f56270a
7 changed files with 151 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
qml/AppControls2/AppItem.qml
View File

@ -11,7 +11,8 @@ MouseArea {
when: control.activeFocus
PropertyChanges {
target: controlBase
alpha: 0.55
borderColor: Palette.Highlight
border.width: 2
}
}
StyleBackground {

3
qml/AppControls2/FolderItem.qml
View File

@ -17,7 +17,8 @@ MouseArea {
when: control.activeFocus
PropertyChanges {
target: controlBase
alpha: 0.55
borderColor: Palette.Highlight
border.width: 2
}
}

4
qml/AppControls2/LabelItem.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
MouseArea {
id: control
@ -12,7 +13,8 @@ MouseArea {
when: control.activeFocus
PropertyChanges {
target: controlBase
alpha: 0.55
borderColor: Palette.Highlight
border.width: 2
}
}
StyleBackground {

8
qml/AppUI/AppList.qml
View File

@ -31,7 +31,8 @@ Item {
signal labelItemClicked()
signal openFolderPageSignal(string folderId, string folderName)
function labelSelection(labelId) {
appListView.view.positionViewAtIndex(appListView.model.getLabelIndex(labelId), ListView.Beginning)
appListView.view.positionViewAtIndex(appListView.model.getLabelIndex(labelId), ListView.Beginning);
appListView.view.currentIndex = appListView.model.getLabelIndex(labelId);
}
function resetListFocus() {
@ -148,6 +149,11 @@ Item {
AppControls2.LabelItem {
focus: true;
onClicked: labelItemClicked();
Keys.onPressed: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
labelItemClicked();
}
}
}
}

9
qml/AppUI/AppListView.qml
View File

@ -57,16 +57,17 @@ MouseArea {
highlightMoveDuration: 0
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: listViewScrollBar
keyNavigationWraps: true
// 焦点切换后，listView按键导航重新开始
onActiveFocusChanged: currentIndex = 0
onCountChanged: currentIndex = 0
keyNavigationWraps: true
onCountChanged: resetCurrentIndex()
function resetCurrentIndex() { currentIndex = 0 }
Component.onCompleted: mainWindow.visibleChanged.connect(resetCurrentIndex)
Component.onDestruction: mainWindow.visibleChanged.disconnect(resetCurrentIndex)
}
AppControls2.ScrollBar {
id: listViewScrollBar
Layout.fillHeight: true
Layout.preferredWidth: 14
visual: root.containsMouse

7
qml/AppUI/AppPageContent.qml
View File

@ -29,9 +29,14 @@ SwipeView {
// required property AppPageHeader appPageHeader
// 5.12
property AppPageHeader appPageHeader: null
property bool isAppListShow: appList.visible
function resetFocus() {
appList.resetListFocus();
if (appList.visible) {
appList.resetListFocus();
} else {
selectionPage.viewFocusEnable();
}
}
Item {

134
qml/AppUI/SelectionPage.qml
View File

@ -1,4 +1,4 @@
/*
/*
* Copyright (C) 2023, KylinSoft Co., Ltd.
*
* This program is free software: you can redistribute it and/or modify
@ -30,10 +30,19 @@ Item {
viewShow.start();
}
function viewFocusEnable() {
selectionArea.focus = true;
}
Component.onCompleted: mainWindow.visibleChanged.connect(viewHideFinished)
ParallelAnimation {
id: viewShow
NumberAnimation { target: selectionArea; property: "scale"; easing.type: Easing.InOutCubic; from: 1.5; to: 1.0; duration: 300}
NumberAnimation { target: selectionArea; property: "opacity"; easing.type: Easing.InOutCubic; from: 0; to: 1.0; duration: 300}
onFinished: {
viewFocusEnable();
}
}
ParallelAnimation {
@ -41,6 +50,7 @@ Item {
NumberAnimation { target: selectionArea; property: "scale"; easing.type: Easing.InOutCubic; from: 1.0; to: 1.5 ;duration: 300}
NumberAnimation { target: selectionArea; property: "opacity"; easing.type: Easing.InOutCubic; from: 1.0; to: 0 ;duration: 300}
onFinished: {
selectionArea.focus = false;
viewHideFinished();
}
}
@ -56,8 +66,100 @@ Item {
interactive: false
property int itemWidth: 0
property int itemHeight: 40
property int column: width / itemWidth
cellWidth: itemWidth; cellHeight: itemHeight
onCountChanged: {
if (count === 0) {
viewHide.start();
}
}
function itemAtIndex(index) {
if (index < 0 || index > count - 1) {
return;
} else {
for (var i = 0; i <= count; i++) {
var item;
item = selectionArea.children[0].children[i];
if (item.index === index) {
return item;
}
}
}
}
function skipDisableItem() {
while (itemAtIndex(currentIndex).isDisable) {
if (currentIndex === count - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
}
}
onActiveFocusChanged: {
if (activeFocus) {
currentIndex = 0;
skipDisableItem();
}
}
Keys.onRightPressed: {
if(currentIndex === count - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
skipDisableItem();
}
Keys.onLeftPressed: {
if(currentIndex === 0) {
currentIndex = count - 1;
} else {
currentIndex--;
}
while (itemAtIndex(currentIndex).isDisable) {
if (currentIndex === 0) {
currentIndex = count - 1;
} else {
currentIndex--;
}
}
}
Keys.onDownPressed: {
if(currentIndex > count - 1 - column) {
return;
} else {
currentIndex = currentIndex + column;
}
while (itemAtIndex(currentIndex).isDisable) {
if (currentIndex > count - 1 - column) {
currentIndex = currentIndex - column;
} else {
currentIndex = currentIndex + column;
}
}
}
Keys.onUpPressed: {
if(currentIndex < column) {
return;
} else {
currentIndex = currentIndex - column;
}
while (itemAtIndex(currentIndex).isDisable) {
if (currentIndex < column) {
currentIndex = currentIndex + column;
} else {
currentIndex = currentIndex - column;
}
}
}
state: count < 20 ? "functionArea" : "AlphabetArea"
states: [
State {
@ -71,18 +173,31 @@ Item {
]
model: modelManager.getLabelModel()
onCountChanged: {
if (count === 0) {
viewHide.start();
}
}
delegate: AppControls2.StyleBackground {
id: labelItem
height: selectionArea.itemHeight; width: selectionArea.itemWidth
property int index: model.index
property bool isDisable: model.isDisable
property string displayName: model.displayName
property string id: model.id
alpha: (itemMouseArea.containsPress && !model.isDisable) ? 0.82 : (itemMouseArea.containsMouse && !model.isDisable) ? 0.55 : 0.00
useStyleTransparent: false
radius: 8
focus: true
Keys.onPressed: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
viewHide.start();
root.labelSelected(selectionArea.itemAtIndex(selectionArea.currentIndex).id)
}
}
states: State {
when: labelItem.activeFocus
PropertyChanges {
target: labelItem
borderColor: Palette.Highlight
border.width: 2
}
}
AppControls2.StyleText {
anchors.fill: parent
text: model.displayName
@ -102,6 +217,9 @@ Item {
root.labelSelected(model.id);
}
}
onEntered: {
selectionArea.focus = false;
}
}
}
}