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

1.添加搜索框唤出隐藏动画、搜索框显示细节；2.添加按钮的基础组件；3.添加滑动区域的分割线

This commit is contained in:
qiqi 2023-03-02 13:57:13 +08:00 committed by hewenfei
parent 98050e0e2f
commit 6d4fc101b2
11 changed files with 136 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
qml/AppControls2/RoundButton.qml Normal file
View File

@ -0,0 +1,22 @@
import QtQuick 2.0
import org.ukui.menu.core 1.0
MouseArea {
id: buttonMouseArea
hoverEnabled: true
property string buttonIcon: ""
StyleBackground {
useStyleTransparent: false
paletteRole: Palette.Text
anchors.fill: parent
radius: height / 2
alpha: buttonMouseArea.containsPress ? 0.17 : buttonMouseArea.containsMouse ? 0.12 : 0.06
}
Image {
anchors.centerIn: parent
width: 16; height: width
source: buttonIcon
}
}

3
qml/AppControls2/StyleBackground.qml
View File

@ -1,5 +1,4 @@
import QtQuick 2.0
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
Rectangle {
@ -9,8 +8,10 @@ Rectangle {
property real alpha: 1.0
clip: true
border.width: 0
function updateColor() {
border.color = themePalette.paletteColor(Palette.Highlight)
if (useStyleTransparent) {
color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup)
} else {

1
qml/AppControls2/qmldir
View File

@ -6,3 +6,4 @@ AppItem 1.0 AppItem.qml
FolderItem 1.0 FolderItem.qml
LabelItem 1.0 LabelItem.qml
IconLabel 1.0 IconLabel.qml
RoundButton 1.0 RoundButton.qml

10
qml/AppUI/AppList.qml
View File

@ -31,9 +31,19 @@ Item {
hoverEnabled: true
anchors.fill: parent
AppControls2.StyleBackground {
anchors.top: parent.top
width: parent.width; height: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
visible: appListView.contentY > 0
}
RowLayout {
anchors.fill: parent
spacing: 0
anchors.leftMargin: 4
ListView {
id: appListView

3
qml/AppUI/AppPage.qml
View File

@ -29,7 +29,7 @@ AppControls2.StyleBackground {
ColumnLayout {
anchors.fill: parent
anchors.topMargin: parent.radius
spacing: 4
spacing: 0
AppPageHeader {
Layout.fillWidth: true
@ -40,7 +40,6 @@ AppControls2.StyleBackground {
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: 4
}
}
}

110
qml/AppUI/AppPageHeader.qml
View File

@ -19,7 +19,6 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0
import org.ukui.menu.utils 1.0
@ -27,30 +26,44 @@ import org.ukui.menu.utils 1.0
Item {
id: appPageHeaderRoot
property string title: ""
clip: true
state: "normal"
states: [
State {
name: "normal"
PropertyChanges { target: searchBar; visible: false }
PropertyChanges { target: pluginSelectionBar; visible: true }
StateChangeScript {
script: {
sortMenu.sortMenuModel.reactivateProvider();
}
}
PropertyChanges { target: searchBar; scale: 0.9; y: -pluginSelectionBar.height }
PropertyChanges { target: pluginSelectionBar; scale: 1.0; y: 0 }
StateChangeScript { script: sortMenu.sortMenuModel.reactivateProvider() }
},
State {
name: "search"
PropertyChanges { target: searchBar; visible: true }
PropertyChanges { target: pluginSelectionBar; visible: false }
PropertyChanges { target: searchBar; scale: 1.0; y: 0 }
PropertyChanges { target: pluginSelectionBar; scale: 0.9; y: pluginSelectionBar.height }
}
]
transitions:[
Transition {
to: "normal"
SequentialAnimation {
NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300 }
ScriptAction { script: searchBar.visible = false }
}
},
Transition {
to: "search"
SequentialAnimation {
ScriptAction { script: searchBar.visible = true }
NumberAnimation { easing.type: Easing.InOutQuad; properties: "scale,y"; duration: 300}
}
}
]
Item {
id: searchBar
width: parent.width
height: 30
width: parent.width; height: 30
RowLayout {
anchors.fill: parent
anchors.leftMargin: 15
@ -59,29 +72,31 @@ Item {
SearchInputBar {
id: searchInputBar
property string providerId: ""
Layout.fillWidth: true
Layout.fillHeight: true
radius: 16
useStyleTransparent: false
onTextChanged: appPageHeaderUtils.startSearch(text);
onTextChanged:
{
if (text === "") {
sortMenu.sortMenuModel.reactivateProvider();
} else {
appPageHeaderUtils.activateProvider(providerId);
appPageHeaderUtils.startSearch(text);
}
}
AppControls2.StyleBackground {
Layout.preferredWidth: parent.height
Layout.preferredHeight: parent.height
radius: height / 2
useStyleTransparent: false
Image {
anchors.centerIn: parent
width: 16; height: 16
source: "image://appicon/edit-clear-symbolic"
}
MouseArea {
anchors.fill: parent
AppControls2.RoundButton {
Layout.preferredWidth: parent.height; Layout.preferredHeight: parent.height
buttonIcon: "image://appicon/edit-clear-symbolic"
onClicked: {
searchInputBar.clear();
appPageHeaderRoot.state = "normal"
}
appPageHeaderRoot.state = "normal";
}
}
}
@ -99,6 +114,7 @@ Item {
Layout.fillHeight: true
verticalAlignment: Qt.AlignVCenter
text: appPageHeaderRoot.title
font.bold: true
}
ListView {
@ -112,23 +128,13 @@ Item {
orientation: ListView.Horizontal
model: appPageHeaderUtils.model(PluginGroup.Button)
delegate: AppControls2.StyleBackground {
width: height
height: ListView.view ? ListView.view.height : 0
radius: height / 2
useStyleTransparent: false
Image {
width: parent.height / 2
height: parent.height / 2
anchors.centerIn: parent
source: model.icon
}
MouseArea {
anchors.fill: parent
delegate: AppControls2.RoundButton {
width: height; height: ListView.view ? ListView.view.height : 0
buttonIcon: model.icon
onClicked: {
appPageHeaderRoot.state = "search"
appPageHeaderUtils.activateProvider(model.id);
}
appPageHeaderRoot.state = "search";
searchInputBar.providerId = model.id;
}
}
}
@ -139,25 +145,15 @@ Item {
Layout.rightMargin: 8
Layout.alignment: Qt.AlignVCenter
AppControls2.StyleBackground {
width: 32
height: width
radius: height / 2
useStyleTransparent: false
Image {
AppControls2.RoundButton {
id: providerIcon
width: parent.height / 2
height: parent.height / 2
anchors.centerIn: parent
source: "image://appicon/ukui-selected"
}
MouseArea {
anchors.fill: parent
width: 32; height: width
buttonIcon: "image://appicon/ukui-selected"
onClicked: {
sortMenu.sortMenuModel.autoSwitchProvider();
}
}
}
Image {
id: providerSelector
@ -175,7 +171,7 @@ Item {
}
function updateProviderIcon() {
providerIcon.source = sortMenu.sortMenuModel.currentProviderIcon();
providerIcon.buttonIcon = sortMenu.sortMenuModel.currentProviderIcon();
}
Component.onCompleted: {

21
qml/AppUI/SearchInputBar.qml
View File

@ -19,7 +19,7 @@
import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2
AppControls2.StyleBackground {
@ -27,6 +27,10 @@ AppControls2.StyleBackground {
function clear() {
textInput.clear();
}
alpha: 0.04
useStyleTransparent: false
paletteRole: Palette.Text
border.width: textInput.activeFocus ? 1 : 0
RowLayout {
anchors.fill: parent
@ -49,14 +53,25 @@ AppControls2.StyleBackground {
Item {
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
TextInput {
id: textInput
clip: true
anchors.fill: parent
selectByMouse: true
selectionColor: "red"
selectionColor: "lightblue"
verticalAlignment: TextInput.AlignVCenter
font.pixelSize: 14
focus: parent.visible;
}
Text {
anchors.fill: parent
text: qsTr("Search App")
visible: textInput.contentWidth === 0
font.pixelSize: textInput.font.pixelSize
verticalAlignment: TextInput.AlignVCenter
color: Qt.rgba(0,0,0,0.25)
}
}
}

8
qml/AppUI/Sidebar.qml
View File

@ -63,14 +63,6 @@ Item {
}
}
AppControls2.StyleBackground {
Layout.fillWidth: true
Layout.preferredHeight: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true

10
qml/extensions/FavoriteExtension.qml
View File

@ -33,6 +33,16 @@ UkuiMenuExtension {
anchors.fill: parent
hoverEnabled: true
AppControls2.StyleBackground {
anchors.top: parent.top
width: parent.width; height: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
visible: favoriteView.contentY > 0
z: 1
}
GridView {
id: favoriteView
anchors.fill: parent

11
qml/extensions/RecentFileExtension.qml
View File

@ -19,6 +19,7 @@
import QtQuick 2.0
import QtQuick.Controls 2.5
import org.ukui.menu.extension 1.0
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2
UkuiMenuExtension {
@ -43,6 +44,16 @@ UkuiMenuExtension {
}
}
AppControls2.StyleBackground {
anchors.top: parent.top
width: parent.width; height: 1
useStyleTransparent: false
alpha: 0.15
paletteRole: Palette.Text
visible: recentFileView.contentY > 0
z: 1
}
ListView {
id: recentFileView
anchors.fill: parent

1
qml/qml.qrc
View File

@ -24,5 +24,6 @@
<file>extensions/FolderExtension.qml</file>
<file>extensions/RecentFileExtension.qml</file>
<file>extensions/FavoriteExtension.qml</file>
<file>AppControls2/RoundButton.qml</file>
</qresource>
</RCC>