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

fix(AppPage): change the searchbar ui

This commit is contained in:
youdiansaodongxi 2023-11-29 16:13:50 +08:00 committed by hewenfei
parent 44a453cbd9
commit 26b436d98a
7 changed files with 64 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
qml/AppUI/AppPage.qml
View File

@ -21,6 +21,7 @@ import QtQuick.Layouts 1.12
import org.ukui.menu.core 1.0
Item {
property alias search: appPageSearch
property alias header: appPageHeader
property alias content: appPageContent
@ -29,13 +30,21 @@ Item {
anchors.topMargin: 12
spacing: 0
AppPageHeader {
id: appPageHeader
AppPageSearch {
id: appPageSearch
Layout.fillWidth: true
Layout.preferredHeight: 40
focusToPageContent: appPageContent
}
AppPageHeader {
id: appPageHeader
visible: !appPageSearch.inputStatus
Layout.fillWidth: true
Layout.preferredHeight: 48
focusToPageContent: appPageContent
}
AppPageContent {
id: appPageContent
appPageHeader: appPageHeader

107
qml/AppUI/AppPageHeader.qml
View File

@ -50,78 +50,6 @@ Item {
Item {
id: root
function changeToSearchState(keyEvent) {
state = "search";
searchInputBar.text = keyEvent;
}
state: "normal"
states: [
State {
name: "normal"
PropertyChanges { target: searchBar; scale: 0.9; y: -pluginSelectionBar.height }
PropertyChanges { target: pluginSelectionBar; scale: 1.0; y: 0 }
StateChangeScript { script: pluginSelectMenu.model.reactivateProvider() }
},
State {
name: "search"
PropertyChanges { target: searchBar; scale: 1.0; y: 0 }
PropertyChanges { target: pluginSelectionBar; scale: 0.9; y: pluginSelectionBar.height }
}
]
onStateChanged: {
if (isLiteMode) {
if (state === "search") {
setPluginSelectionVisible(false);
setSearchBarVisible(true);
} else {
setPluginSelectionVisible(true);
setSearchBarVisible(false);
}
}
}
function setPluginSelectionVisible(vis) {
pluginSelectionBar.visible = vis;
pluginSelectMenu.visible = vis;
}
function setSearchBarVisible(vis) {
searchBar.visible = vis;
if (vis) {
searchInputBar.providerId = "search";
searchInputBar.textInputFocus();
}
}
transitions:[
Transition {
to: "normal"
enabled: !isLiteMode
SequentialAnimation {
ScriptAction {
script: { setPluginSelectionVisible(true); }
}
NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 }
ScriptAction { script: { setSearchBarVisible(false); } }
}
},
Transition {
to: "search"
enabled: !isLiteMode
SequentialAnimation {
ScriptAction {
script: { setSearchBarVisible(true); }
}
NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 }
ScriptAction {
script: { setPluginSelectionVisible(false); }
}
}
}
]
Item {
id: searchBar
width: parent.width; height: 30
@ -197,41 +125,6 @@ Item {
font.bold: true
}
ListView {
id: searchListView
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: 32
Layout.minimumWidth: 32
Layout.maximumWidth: 68
Layout.alignment: Qt.AlignVCenter
clip: true
spacing: 4
orientation: ListView.Horizontal
interactive: false
activeFocusOnTab: true
model: appPageHeaderUtils.model(PluginGroup.Button)
delegate: AppControls2.RoundButton {
width: height
height: ListView.view ? ListView.view.height : 0
buttonIcon: model.icon
ToolTip.text: qsTr("Search App")
ToolTip.delay: 500
ToolTip.visible: containsMouse
onClicked: {
root.state = "search";
// 后续添加需求，可以用model数据设置
// searchInputBar.providerId = model.id;
}
Keys.onPressed: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
root.state = "search";
}
}
}
}
PluginSelectMenu {
id: pluginSelectMenu
Layout.preferredWidth: childrenRect.width

39
qml/AppUI/AppPageSearch.qml Normal file
View File

@ -0,0 +1,39 @@
import QtQuick 2.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2
import org.ukui.menu.utils 1.0
Item {
property Item focusToPageContent
property bool inputStatus: false
id: appPageSearchBar
SearchInputBar {
id: searchInputBar
property string providerId: "search"
anchors.fill: parent
anchors.leftMargin: 16
anchors.rightMargin: 16
radius: 6 //change theme
changeFocusTarget: focusToPageContent
visible: true
onTextChanged: {
if (text === "") {
appPageHeaderUtils.model(PluginGroup.SortMenuItem).reactivateProvider();
inputStatus = false;
} else {
appPageHeaderUtils.activateProvider(providerId);
appPageHeaderUtils.startSearch(text);
inputStatus = true;
}
}
}
function changeToSearch(keyEvent) {
if (header.content === null) {
searchInputBar.text = keyEvent;
searchInputBar.textInputFocus();
}
}
}

2
qml/AppUI/FullScreenHeader.qml
View File

@ -13,7 +13,7 @@ Item {
id: searchInputBar
width: 372; height: 36
anchors.centerIn: parent
radius: height / 2
radius: 4 //change theme
visible: opacity
onTextChanged: {

2
qml/AppUI/NormalUI.qml
View File

@ -13,7 +13,7 @@ FocusScope {
// 任意字符键焦点切换到搜索（0-9 a-z）
if ((0x2f < event.key && event.key < 0x3a)||(0x40 < event.key && event.key < 0x5b)) {
focus = true;
appPage.header.changeToSearch(event.text);
appPage.search.changeToSearch(event.text);
// 任意方向键切换至应用列表
} else if ((0x01000011 < event.key)&&(event.key < 0x01000016)) {
focus = true;

21
qml/AppUI/SearchInputBar.qml
View File

@ -21,17 +21,18 @@ import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2
import org.ukui.quick.items 1.0 as UkuiItems
AppControls2.StyleBackground {
UkuiItems.StyleBackground {
property Item changeFocusTarget
property alias text: textInput.text;
alpha: 0.04
useStyleTransparent: false
paletteRole: Palette.Text
useStyleTransparency: false
paletteRole: UkuiItems.Theme.Text
border.width: 1
borderAlpha: textInput.activeFocus ? 1 : 0.1
borderColor: textInput.activeFocus ? Palette.Highlight : Palette.Base
borderColor: textInput.activeFocus ? UkuiItems.Theme.Highlight : UkuiItems.Theme.Base
Component.onCompleted: mainWindow.visibleChanged.connect(clear)
Component.onDestruction: mainWindow.visibleChanged.disconnect(clear)
@ -57,20 +58,20 @@ AppControls2.StyleBackground {
ThemeIcon {
anchors.centerIn: parent
width: parent.height / 2; height: width
source: "image://appicon/search-symbolic"
source: "search-symbolic"
highLight: mainWindow.isFullScreen
autoHighLight: !mainWindow.isFullScreen
}
}
AppControls2.StyleText {
UkuiItems.StyleText {
id: defaultText
anchors.verticalCenter: parent.verticalCenter
anchors.left: searchIcon.right
text: qsTr("Search App")
visible: textInput.contentWidth === 0
paletteRole: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text
paletteRole: mainWindow.isFullScreen ? UkuiItems.Theme.HighlightedText : UkuiItems.Theme.Text
verticalAlignment: TextInput.AlignVCenter
alpha: 0.25
}
@ -135,10 +136,10 @@ AppControls2.StyleBackground {
anchors.right: parent.right
anchors.rightMargin: (parent.height - height) / 2
anchors.verticalCenter: parent.verticalCenter
visible: mainWindow.isFullScreen && textInput.activeFocus
visible: textInput.activeFocus
buttonIcon: "image://appicon/edit-clear-symbolic"
highlight: true
autoHighLight: false
highlight: mainWindow.isFullScreen
autoHighLight: !mainWindow.isFullScreen
onClicked: {
textInput.clear();

1
qml/qml.qrc
View File

@ -32,5 +32,6 @@
<file>AppUI/PluginSelectMenu.qml</file>
<file>AppUI/EditText.qml</file>
<file>AppUI/FullScreenFolder.qml</file>
<file>AppUI/AppPageSearch.qml</file>
</qresource>
</RCC>