diff --git a/qml/AppControls2/RoundButton.qml b/qml/AppControls2/RoundButton.qml
new file mode 100644
index 0000000..2815a4c
--- /dev/null
+++ b/qml/AppControls2/RoundButton.qml
@@ -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
+ }
+}
diff --git a/qml/AppControls2/StyleBackground.qml b/qml/AppControls2/StyleBackground.qml
index 57562a7..3651b75 100644
--- a/qml/AppControls2/StyleBackground.qml
+++ b/qml/AppControls2/StyleBackground.qml
@@ -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 {
diff --git a/qml/AppControls2/qmldir b/qml/AppControls2/qmldir
index 16675b3..d475ec1 100644
--- a/qml/AppControls2/qmldir
+++ b/qml/AppControls2/qmldir
@@ -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
diff --git a/qml/AppUI/AppList.qml b/qml/AppUI/AppList.qml
index d597685..bae67b8 100644
--- a/qml/AppUI/AppList.qml
+++ b/qml/AppUI/AppList.qml
@@ -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
diff --git a/qml/AppUI/AppPage.qml b/qml/AppUI/AppPage.qml
index fc148ab..d43a934 100644
--- a/qml/AppUI/AppPage.qml
+++ b/qml/AppUI/AppPage.qml
@@ -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
}
}
}
diff --git a/qml/AppUI/AppPageHeader.qml b/qml/AppUI/AppPageHeader.qml
index 15433b2..e69b3c2 100644
--- a/qml/AppUI/AppPageHeader.qml
+++ b/qml/AppUI/AppPageHeader.qml
@@ -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
- onClicked: {
- searchInputBar.clear();
- appPageHeaderRoot.state = "normal"
- }
+ AppControls2.RoundButton {
+ Layout.preferredWidth: parent.height; Layout.preferredHeight: parent.height
+ buttonIcon: "image://appicon/edit-clear-symbolic"
+
+ onClicked: {
+ searchInputBar.clear();
+ 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
- onClicked: {
- appPageHeaderRoot.state = "search"
- appPageHeaderUtils.activateProvider(model.id);
- }
+ delegate: AppControls2.RoundButton {
+ width: height; height: ListView.view ? ListView.view.height : 0
+ buttonIcon: model.icon
+
+ onClicked: {
+ appPageHeaderRoot.state = "search";
+ searchInputBar.providerId = model.id;
}
}
}
@@ -139,23 +145,13 @@ Item {
Layout.rightMargin: 8
Layout.alignment: Qt.AlignVCenter
- AppControls2.StyleBackground {
- width: 32
- height: width
- radius: height / 2
- useStyleTransparent: false
- Image {
- id: providerIcon
- width: parent.height / 2
- height: parent.height / 2
- anchors.centerIn: parent
- source: "image://appicon/ukui-selected"
- }
- MouseArea {
- anchors.fill: parent
- onClicked: {
- sortMenu.sortMenuModel.autoSwitchProvider();
- }
+ AppControls2.RoundButton {
+ id: providerIcon
+ width: 32; height: width
+ buttonIcon: "image://appicon/ukui-selected"
+
+ onClicked: {
+ sortMenu.sortMenuModel.autoSwitchProvider();
}
}
@@ -175,7 +171,7 @@ Item {
}
function updateProviderIcon() {
- providerIcon.source = sortMenu.sortMenuModel.currentProviderIcon();
+ providerIcon.buttonIcon = sortMenu.sortMenuModel.currentProviderIcon();
}
Component.onCompleted: {
diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml
index 34400f4..011b084 100644
--- a/qml/AppUI/SearchInputBar.qml
+++ b/qml/AppUI/SearchInputBar.qml
@@ -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)
}
}
}
diff --git a/qml/AppUI/Sidebar.qml b/qml/AppUI/Sidebar.qml
index 832b204..aadf7a0 100644
--- a/qml/AppUI/Sidebar.qml
+++ b/qml/AppUI/Sidebar.qml
@@ -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
diff --git a/qml/extensions/FavoriteExtension.qml b/qml/extensions/FavoriteExtension.qml
index 3ca1810..b52b1b3 100644
--- a/qml/extensions/FavoriteExtension.qml
+++ b/qml/extensions/FavoriteExtension.qml
@@ -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
diff --git a/qml/extensions/RecentFileExtension.qml b/qml/extensions/RecentFileExtension.qml
index bf62361..195a637 100644
--- a/qml/extensions/RecentFileExtension.qml
+++ b/qml/extensions/RecentFileExtension.qml
@@ -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
diff --git a/qml/qml.qrc b/qml/qml.qrc
index 6882c96..f51be11 100644
--- a/qml/qml.qrc
+++ b/qml/qml.qrc
@@ -24,5 +24,6 @@
extensions/FolderExtension.qml
extensions/RecentFileExtension.qml
extensions/FavoriteExtension.qml
+ AppControls2/RoundButton.qml