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

添加全屏基础按键：搜索框、电源、滑动条、缩小窗口按键

This commit is contained in:
qiqi 2023-03-24 17:47:17 +08:00 committed by hewenfei
parent 71a3e79930
commit c82c70a662
9 changed files with 253 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
qml/AppControls2/StyleBackground.qml
View File

@ -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()
}
}

1
qml/AppUI/AppPageHeader.qml
View File

@ -77,7 +77,6 @@ Item {
Layout.fillWidth: true
Layout.fillHeight: true
radius: 16
useStyleTransparent: false
onTextChanged: {
if (text === "") {
pluginSelectMenu.model.reactivateProvider();

52
qml/AppUI/FullScreenContent.qml
View File

@ -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 <https://www.gnu.org/licenses/>.
*
*/
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
}
}
}
}

62
qml/AppUI/FullScreenFooter.qml
View File

@ -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 <https://www.gnu.org/licenses/>.
*
*/
Item {
Text {
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
text: qsTr("FullScreenFooter.qml")
hoverEnabled: true
ToolTip.visible: containsMouse
ToolTip.text: powerButtonBase.toolTip
onClicked: {
powerButtonBase.clicked()
}
}
}
}

42
qml/AppUI/FullScreenHeader.qml
View File

@ -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"
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()
}
}
}

6
qml/AppUI/PluginSelectMenu.qml
View File

@ -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

100
qml/AppUI/SearchInputBar.qml
View File

@ -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
RowLayout {
anchors.fill: parent
anchors.rightMargin: parent.radius
border.width: 1
isFocus: textInput.activeFocus
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: defaultSearch
width: searchIcon.width + defaultText.contentWidth; height: parent.height
anchors.horizontalCenter: mainWindow.isFullScreen ? parent.horizontalCenter : undefined
anchors.verticalCenter: parent.verticalCenter
Image {
Item {
id: searchIcon
width: 32; height: 32
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: (parent.height - height) / 2
ThemeIcon {
anchors.centerIn: parent
width:16; height: 16
width: parent.height / 2; height: width
source: "image://appicon/search-symbolic"
highLight: mainWindow.isFullScreen
}
}
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 }
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
TextInput {
id: textInput
clip: true
anchors.fill: parent
anchors.right: parent.right
width: parent.width - searchIcon.width
height: parent.height
selectByMouse: true
selectionColor: "lightblue"
verticalAlignment: TextInput.AlignVCenter
font.pixelSize: 14
focus: parent.visible;
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)
}
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)
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();
}
}

2
qml/AppUI/Sidebar.qml
View File

@ -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"

15
qml/main.qml
View File

@ -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 {