diff --git a/qml/AppControls2/StyleBackground.qml b/qml/AppControls2/StyleBackground.qml
index 3651b75..29c7a73 100644
--- a/qml/AppControls2/StyleBackground.qml
+++ b/qml/AppControls2/StyleBackground.qml
@@ -6,12 +6,12 @@ Rectangle {
property int paletteRole: Palette.Base
property int paletteGroup: Palette.Active
property real alpha: 1.0
+ property bool isFocus: false
clip: true
border.width: 0
function updateColor() {
- border.color = themePalette.paletteColor(Palette.Highlight)
if (useStyleTransparent) {
color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup)
} else {
@@ -19,12 +19,23 @@ Rectangle {
}
}
+ function updateBorderColor() {
+ if (isFocus) {
+ border.color = themePalette.paletteColor(Palette.Highlight)
+ } else {
+ border.color = themePalette.paletteColorWithCustomTransparency(Palette.Base, Palette.Active, 0.1)
+ }
+ }
+
Component.onCompleted: {
updateColor()
+ updateBorderColor()
themePalette.styleColorChanged.connect(updateColor)
+ themePalette.styleColorChanged.connect(updateBorderColor)
}
Component.onDestruction: {
themePalette.styleColorChanged.disconnect(updateColor)
+ themePalette.styleColorChanged.disconnect(updateBorderColor)
}
onUseStyleTransparentChanged: {
@@ -39,5 +50,8 @@ Rectangle {
onAlphaChanged: {
updateColor()
}
+ onIsFocusChanged: {
+ updateBorderColor()
+ }
}
diff --git a/qml/AppUI/AppPageHeader.qml b/qml/AppUI/AppPageHeader.qml
index 938bde6..e8eb6a6 100644
--- a/qml/AppUI/AppPageHeader.qml
+++ b/qml/AppUI/AppPageHeader.qml
@@ -77,7 +77,6 @@ Item {
Layout.fillWidth: true
Layout.fillHeight: true
radius: 16
- useStyleTransparent: false
onTextChanged: {
if (text === "") {
pluginSelectMenu.model.reactivateProvider();
diff --git a/qml/AppUI/FullScreenContent.qml b/qml/AppUI/FullScreenContent.qml
index c335f37..ae5e921 100644
--- a/qml/AppUI/FullScreenContent.qml
+++ b/qml/AppUI/FullScreenContent.qml
@@ -1,12 +1,31 @@
+/*
+ * Copyright (C) 2023, KylinSoft Co., Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ *
+ */
+
import QtQuick 2.12
import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.12
import QtQml.Models 2.12
+import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2
RowLayout {
clip: true
+ spacing: 0
Item {
Layout.preferredWidth: 90
@@ -110,6 +129,7 @@ RowLayout {
cellWidth: contentViewBase.cellWidth
cellHeight: contentViewBase.cellHeight
model: modelManager.getAppModel()
+
delegate: Loader {
width: GridView.view.cellWidth
height: width
@@ -282,14 +302,34 @@ RowLayout {
}
Item {
- Layout.preferredWidth: 90
+ Layout.preferredWidth: 48
Layout.fillHeight: true
- AppControls2.ScrollBar {
+ ScrollBar {
id: fullScreenScrollBar
- anchors.horizontalCenter: parent.horizontalCenter
- height: parent.height
- width: 20
+ anchors.centerIn: parent
+ height: 200
+ width: (hovered || pressed) ? 8 : 4
+ padding: 0
+ opacity: fullScreenScrollBar.size < 1.0 ? 1.0 : 0.0
+
+ Behavior on width {
+ NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
+ }
+
+ background: AppControls2.StyleBackground {
+ useStyleTransparent: false
+ paletteRole: Palette.Dark
+ alpha: 0.25
+ radius: width / 2
+ }
+
+ contentItem: AppControls2.StyleBackground {
+ radius: width / 2
+ useStyleTransparent: false
+ paletteRole: Palette.Light
+ alpha: fullScreenScrollBar.pressed ? 0.90 : fullScreenScrollBar.hovered ? 0.78 : 0.60
+ }
}
}
}
diff --git a/qml/AppUI/FullScreenFooter.qml b/qml/AppUI/FullScreenFooter.qml
index e7aa824..ab6bd95 100644
--- a/qml/AppUI/FullScreenFooter.qml
+++ b/qml/AppUI/FullScreenFooter.qml
@@ -1,8 +1,62 @@
-import QtQuick 2.0
+/*
+ * Copyright (C) 2023, KylinSoft Co., Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ *
+ */
-Item {
- Text {
- anchors.fill: parent
- text: qsTr("FullScreenFooter.qml")
+import QtQuick 2.0
+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
+
+Row {
+ Layout.fillWidth: true
+ Layout.preferredHeight: 48
+ layoutDirection: Qt.RightToLeft
+
+ AppControls2.StyleBackground {
+ width: 48; height: width
+ useStyleTransparent: false
+ paletteRole: Palette.Light
+ alpha: powerButtonArea.containsPress ? 0.25 : powerButtonArea.containsMouse ? 0.12 : 0
+ radius: height / 2
+
+ PowerButton {
+ id: powerButtonBase
+ }
+
+ Image {
+ anchors.centerIn: parent
+ width: Math.floor(parent.width / 2)
+ height: width
+ source: powerButtonBase.icon
+ }
+
+ MouseArea {
+ id: powerButtonArea
+ anchors.fill: parent
+ hoverEnabled: true
+ ToolTip.visible: containsMouse
+ ToolTip.text: powerButtonBase.toolTip
+ onClicked: {
+ powerButtonBase.clicked()
+ }
+ }
}
}
+
diff --git a/qml/AppUI/FullScreenHeader.qml b/qml/AppUI/FullScreenHeader.qml
index b80028e..2b644ab 100644
--- a/qml/AppUI/FullScreenHeader.qml
+++ b/qml/AppUI/FullScreenHeader.qml
@@ -3,26 +3,56 @@ import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0
+import org.ukui.menu.utils 1.0
Item {
clip: true
+ SearchInputBar {
+ width: 372; height: 36
+ anchors.centerIn: parent
+ radius: height / 2
+
+ onTextChanged: {
+ if (text === "") {
+ pluginSelectMenu.model.reactivateProvider();
+ } else {
+ appPageHeaderUtils.model(PluginGroup.Button).reactivateProvider();
+ appPageHeaderUtils.startSearch(text);
+ }
+ }
+ }
PluginSelectMenu {
+ id: pluginSelectMenu
anchors.right: parent.right
anchors.rightMargin: 72 // 48+24
anchors.verticalCenter: parent.verticalCenter
- width: 80
- height: 48
+ height: 48; width: 72 // 48+16+8
spacing: 8
}
- AppControls2.RoundButton {
+ AppControls2.StyleBackground {
+ width: 48; height: width
+ radius: 4
+ useStyleTransparent: false
+ paletteRole: Palette.Light
+ alpha: buttonMouseArea.containsPress ? 0.30 : buttonMouseArea.containsMouse ? 0.20 : 0.00
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
- width: 48
- height: 48
- buttonIcon: "image://appicon/view-restore-symbolic"
- onClicked: mainWindow.exitFullScreen()
+
+ ThemeIcon {
+ anchors.centerIn: parent
+ width: parent.width / 2; height: width
+ source: "image://appicon/view-restore-symbolic"
+ highLight: true
+ autoHighLight: false
+ }
+ MouseArea {
+ id: buttonMouseArea
+ hoverEnabled: true
+ anchors.fill: parent
+ onClicked: mainWindow.exitFullScreen()
+ }
}
}
diff --git a/qml/AppUI/PluginSelectMenu.qml b/qml/AppUI/PluginSelectMenu.qml
index acc5afe..4a930c8 100644
--- a/qml/AppUI/PluginSelectMenu.qml
+++ b/qml/AppUI/PluginSelectMenu.qml
@@ -122,14 +122,14 @@ RowLayout {
clip: true
spacing: 4
model: pluginSelectMenuRoot.model
+
delegate: AppControls2.StyleBackground {
width: ListView.view ? ListView.view.width : 0
height: 32
radius: 4
- alpha: mouseArea.containsMouse ? 0.2 : 1
- paletteRole: mouseArea.containsMouse ? Palette.Text : Palette.Window
+ alpha: mouseArea.containsMouse ? 0.2 : 0
+ paletteRole: Palette.Text
useStyleTransparent: false
- opacity: sortMenu.opacity
Item {
anchors.fill: parent
diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml
index 011b084..0cd483e 100644
--- a/qml/AppUI/SearchInputBar.qml
+++ b/qml/AppUI/SearchInputBar.qml
@@ -16,7 +16,7 @@
*
*/
-import QtQuick 2.0
+import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import org.ukui.menu.core 1.0
@@ -30,49 +30,95 @@ AppControls2.StyleBackground {
alpha: 0.04
useStyleTransparent: false
paletteRole: Palette.Text
- border.width: textInput.activeFocus ? 1 : 0
+ border.width: 1
+ isFocus: textInput.activeFocus
- RowLayout {
- anchors.fill: parent
- anchors.rightMargin: parent.radius
+ Item {
+ id: defaultSearch
+ width: searchIcon.width + defaultText.contentWidth; height: parent.height
+ anchors.horizontalCenter: mainWindow.isFullScreen ? parent.horizontalCenter : undefined
+ anchors.verticalCenter: parent.verticalCenter
Item {
- Layout.fillWidth: true
- Layout.fillHeight: true
- Layout.margins: 2
- Layout.maximumWidth: parent.height - 2*Layout.margins
- Layout.maximumHeight: parent.height
- Layout.alignment: Qt.AlignVCenter
+ id: searchIcon
+ width: 32; height: 32
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.leftMargin: (parent.height - height) / 2
- Image {
+ ThemeIcon {
anchors.centerIn: parent
- width:16; height: 16
+ width: parent.height / 2; height: width
source: "image://appicon/search-symbolic"
+ highLight: mainWindow.isFullScreen
}
}
- Item {
- Layout.fillWidth: true
- Layout.fillHeight: true
- TextInput {
- id: textInput
- clip: true
- anchors.fill: parent
- selectByMouse: true
- 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)
+ AppControls2.StyleText {
+ id: defaultText
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: searchIcon.right
+ text: qsTr("Search App")
+ visible: textInput.contentWidth === 0
+ font.pixelSize: 14
+ paletteRole: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text
+ verticalAlignment: TextInput.AlignVCenter
+ alpha: 0.25
+ }
+
+ states: State {
+ when: textInput.activeFocus || !mainWindow.isFullScreen
+ AnchorChanges {
+ target: defaultSearch
+ anchors.left: parent.left
+ anchors.horizontalCenter: undefined
}
}
+
+ transitions: Transition {
+ AnchorAnimation { duration: 300; easing.type: Easing.InOutCubic }
+ }
+ }
+
+ TextInput {
+ id: textInput
+ clip: true
+ anchors.right: parent.right
+ width: parent.width - searchIcon.width
+ height: parent.height
+ selectByMouse: true
+ verticalAlignment: TextInput.AlignVCenter
+ font.pixelSize: 14
+ focus: parent.visible || mainWindow.isFullScreen
+ onActiveFocusChanged: clear()
+
+ property int textColor: mainWindow.isFullScreen ? Palette.HighlightedText : Palette.Text
+
+ function updateTextInputColor() {
+ color = themePalette.paletteColor(textColor)
+ selectionColor = themePalette.paletteColor(Palette.Highlight)
+ }
+
+ Component.onCompleted: {
+ updateTextInputColor();
+ themePalette.styleColorChanged.connect(updateTextInputColor);
+ }
+
+ onTextColorChanged: updateTextInputColor()
+ Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor)
+ }
+
+ AppControls2.RoundButton {
+ id: clearButton
+ width: 18; height: width
+ anchors.right: parent.right
+ anchors.rightMargin: (parent.height - height) / 2
+ anchors.verticalCenter: parent.verticalCenter
+ visible: mainWindow.isFullScreen && textInput.activeFocus
+ buttonIcon: "image://appicon/edit-clear-symbolic"
+ highlight: true
+
+ onClicked: textInput.clear();
}
}
diff --git a/qml/AppUI/Sidebar.qml b/qml/AppUI/Sidebar.qml
index b573fc3..7802084 100644
--- a/qml/AppUI/Sidebar.qml
+++ b/qml/AppUI/Sidebar.qml
@@ -63,7 +63,7 @@ Item {
radius: 4
useStyleTransparent: false
alpha: buttonMouseArea.containsPress ? 0.65 : buttonMouseArea.containsMouse ? 0.40 : 0.00
- Image {
+ ThemeIcon {
anchors.centerIn: parent
width: parent.width / 2; height: width
source: "image://appicon/view-fullscreen-symbolic"
diff --git a/qml/main.qml b/qml/main.qml
index 74be2f8..4fb96cd 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -74,8 +74,10 @@ Item {
anchors.left: parent.left
anchors.bottom: parent.bottom
radius: 12
- state: "normalScreen"
+ Component.onCompleted: {
+ state = mainWindow.isFullScreen ? "fullScreen" : "normalScreen"
+ }
onHeightChanged: {
if (root.transparency <= 0.6 && root.onComlpeted) {
mainWindow.changeWindowBlurRegion(0, root.height - height, width, height)
@@ -159,15 +161,24 @@ Item {
sourceComponent: normalComponent
NumberAnimation { id: normalShow; target: normalScreenLoader; properties: "opacity"; from: 0; to: 1; duration: root.animationDuration; easing.type: Easing.InQuint }
NumberAnimation { id: normalHide; target: normalScreenLoader; properties: "opacity"; from: 1; to: 0; duration: root.animationDuration; easing.type: Easing.OutQuint }
+
+ Component.onCompleted: {
+ active = mainWindow.isFullScreen ? false : true;
+ opacity = mainWindow.isFullScreen ? 0 : 1;
+ }
}
Loader {
id: fullScreenLoader
anchors.fill: parent
sourceComponent: fullSceenComponent
- opacity: 0
NumberAnimation { id: fullShow; target: fullScreenLoader; properties: "opacity"; from: 0; to: 1; duration: root.animationDuration; easing.type: Easing.InQuint }
NumberAnimation { id: fullHide; target: fullScreenLoader; properties: "opacity"; from: 1; to: 0; duration: root.animationDuration; easing.type: Easing.OutQuint }
+
+ Component.onCompleted: {
+ active = mainWindow.isFullScreen ? true : false;
+ opacity = mainWindow.isFullScreen ? 1 : 0;
+ }
}
Component {