feat: new layout for 4.10.
This commit is contained in:
hewenfei
parent
a44d551311
commit
936ee9db7c
|
|
@ -7,14 +7,14 @@
|
|||
<description>Control the duration of animation</description>
|
||||
</key>
|
||||
<key type="i" name="width">
|
||||
<range min="600" max="700"/>
|
||||
<default>652</default>
|
||||
<range min="680" max="900"/>
|
||||
<default>842</default>
|
||||
<summary>width of ukui-menu</summary>
|
||||
<description>Control the width of the ukui-menu</description>
|
||||
</key>
|
||||
<key type="i" name="height">
|
||||
<range min="500" max="600"/>
|
||||
<default>540</default>
|
||||
<range min="580" max="700"/>
|
||||
<default>688</default>
|
||||
<summary>height of ukui-menu</summary>
|
||||
<description>Control the height of the ukui-menu</description>
|
||||
</key>
|
||||
|
|
|
|||
|
|
@ -18,18 +18,15 @@
|
|||
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQuick.Controls 2.12
|
||||
import AppControls2 1.0 as AppControls2
|
||||
import org.ukui.menu.core 1.0
|
||||
|
||||
AppControls2.StyleBackground {
|
||||
radius: 12
|
||||
Item {
|
||||
property alias header: appPageHeader
|
||||
property alias content: appPageContent
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: parent.radius
|
||||
anchors.topMargin: 12
|
||||
spacing: 0
|
||||
|
||||
AppPageHeader {
|
||||
|
|
|
|||
|
|
@ -42,10 +42,12 @@ Row {
|
|||
id: powerButtonBase
|
||||
}
|
||||
|
||||
Image {
|
||||
ThemeIcon {
|
||||
anchors.centerIn: parent
|
||||
width: Math.floor(parent.width / 2)
|
||||
height: width
|
||||
highLight: true
|
||||
autoHighLight: false
|
||||
source: powerButtonBase.icon
|
||||
}
|
||||
|
||||
|
|
@ -72,4 +74,3 @@ Row {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.0 as QQC2
|
||||
import AppControls2 1.0 as AppControls2
|
||||
import org.ukui.menu.core 1.0
|
||||
|
||||
import org.ukui.quick.items 1.0 as UkuiItems
|
||||
|
||||
FocusScope {
|
||||
id: normalUI
|
||||
anchors.fill: parent
|
||||
|
|
@ -28,12 +28,35 @@ FocusScope {
|
|||
anchors.fill: parent;
|
||||
AppPage {
|
||||
id: appPage
|
||||
width: 300
|
||||
width: 312
|
||||
height: parent.height;
|
||||
}
|
||||
|
||||
UkuiItems.StyleBackground {
|
||||
width: 1
|
||||
height: parent.height
|
||||
|
||||
paletteRole: UkuiItems.Theme.ButtonText
|
||||
useStyleTransparency: false
|
||||
alpha: 0.05
|
||||
}
|
||||
|
||||
WidgetPage {
|
||||
width: parent.width - 370;
|
||||
height: parent.height;
|
||||
}
|
||||
|
||||
UkuiItems.StyleBackground {
|
||||
width: 1
|
||||
height: parent.height
|
||||
|
||||
paletteRole: UkuiItems.Theme.ButtonText
|
||||
useStyleTransparency: false
|
||||
alpha: 0.05
|
||||
}
|
||||
|
||||
Sidebar {
|
||||
width: parent.width - 300;
|
||||
width: 60;
|
||||
height: parent.height;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@ 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
|
||||
import org.ukui.menu.extension 1.0
|
||||
import org.ukui.quick.items 1.0 as UkuiItems
|
||||
|
||||
Item {
|
||||
ColumnLayout {
|
||||
|
|
@ -32,179 +32,63 @@ Item {
|
|||
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
anchors.bottomMargin: 12
|
||||
spacing: 0
|
||||
|
||||
property bool liteMode: isLiteMode
|
||||
onLiteModeChanged: {
|
||||
updateSidebarLayout(extensionInfoList.currentItem.extensionOptions)
|
||||
}
|
||||
|
||||
function updateSidebarLayout(options) {
|
||||
sidebarBottomBar.visible = !options.includes(MenuExtension.HideBottomBar);
|
||||
fullScreenbutton.visible = !isLiteMode && !options.includes(MenuExtension.HideFullScreenButton);
|
||||
}
|
||||
|
||||
Item {
|
||||
id: sidebarTopBar
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 40
|
||||
Layout.rightMargin: 12
|
||||
Layout.leftMargin: 12
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 4
|
||||
|
||||
ListView {
|
||||
id: extensionInfoList
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.leftMargin: 4
|
||||
Layout.rightMargin: 4
|
||||
|
||||
clip: true
|
||||
spacing: 24
|
||||
interactive: false
|
||||
orientation: ListView.Horizontal
|
||||
model: extensionManager.extensionModel()
|
||||
delegate: extensionInfoDelegate
|
||||
|
||||
function send(data) {
|
||||
if (currentItem !== null) {
|
||||
model.send(currentIndex, data);
|
||||
}
|
||||
}
|
||||
|
||||
onCurrentIndexChanged: {
|
||||
if (currentItem !== null) {
|
||||
currentItem.select();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: extensionMenuLoader
|
||||
visible: sourceComponent !== undefined
|
||||
Layout.preferredWidth: 34
|
||||
Layout.preferredHeight: 34
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
|
||||
AppControls2.StyleBackground {
|
||||
id: fullScreenbutton
|
||||
Layout.preferredWidth: 34
|
||||
Layout.preferredHeight: 34
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
radius: 4
|
||||
useStyleTransparent: false
|
||||
alpha: buttonMouseArea.containsPress ? 0.65 : buttonMouseArea.containsMouse ? 0.40 : 0.00
|
||||
borderColor: Palette.Highlight
|
||||
border.width: buttonMouseArea.activeFocus ? 2 : 0
|
||||
ThemeIcon {
|
||||
anchors.centerIn: parent
|
||||
width: 16; height: 16
|
||||
source: "image://appicon/view-fullscreen-symbolic"
|
||||
MouseArea {
|
||||
id: buttonMouseArea
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
id: fullScreenbutton
|
||||
|
||||
Layout.preferredWidth: 36
|
||||
Layout.preferredHeight: 36
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
|
||||
|
||||
ToolTip.delay: 500
|
||||
ToolTip.text: qsTr("Expand")
|
||||
ToolTip.visible: containsMouse
|
||||
|
||||
onClicked: mainWindow.isFullScreen = true
|
||||
visible: !isLiteMode
|
||||
hoverEnabled: true
|
||||
activeFocusOnTab: true
|
||||
|
||||
onClicked: mainWindow.isFullScreen = true
|
||||
Keys.onPressed: {
|
||||
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
|
||||
mainWindow.isFullScreen = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
Loader {
|
||||
id: extensionLoader
|
||||
UkuiItems.StyleBackground {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
onLoaded: {
|
||||
item.send.connect(extensionInfoList.send);
|
||||
sidebarLayout.updateSidebarLayout(extensionInfoList.currentItem.extensionOptions);
|
||||
updateMenu();
|
||||
item.extensionMenuChanged.connect(updateMenu);
|
||||
}
|
||||
Keys.onTabPressed: {
|
||||
extensionInfoList.focus = true
|
||||
}
|
||||
radius: 4
|
||||
useStyleTransparency: false
|
||||
paletteRole: UkuiItems.Theme.Button
|
||||
alpha: parent.containsPress ? 1 : parent.containsMouse ? 0.7 : 0
|
||||
borderColor: UkuiItems.Theme.Highlight
|
||||
border.width: parent.activeFocus ? 2 : 0
|
||||
|
||||
function updateMenu() {
|
||||
if (item === null) {
|
||||
return;
|
||||
}
|
||||
if (item.extensionMenu !== null) {
|
||||
extensionMenuLoader.sourceComponent = item.extensionMenu;
|
||||
} else {
|
||||
extensionMenuLoader.sourceComponent = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: sidebarBottomBar
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 32
|
||||
Layout.topMargin: 5
|
||||
Layout.bottomMargin: 8
|
||||
Layout.leftMargin: 12
|
||||
Layout.rightMargin: 12
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
layoutDirection: Qt.RightToLeft
|
||||
spacing: 5
|
||||
|
||||
AppControls2.StyleBackground {
|
||||
Layout.preferredWidth: 32
|
||||
Layout.preferredHeight: 32
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
paletteRole: Palette.Base
|
||||
useStyleTransparent: false
|
||||
alpha: powerButtonArea.containsPress ? 0.85 : powerButtonArea.containsMouse ? 0.65 : 0
|
||||
radius: height / 2
|
||||
borderColor: Palette.Highlight
|
||||
border.width: powerButtonArea.activeFocus ? 2 : 0
|
||||
PowerButton {
|
||||
id: powerButtonBase
|
||||
}
|
||||
|
||||
Image {
|
||||
ThemeIcon {
|
||||
anchors.centerIn: parent
|
||||
width: 24
|
||||
height: 24
|
||||
source: powerButtonBase.icon
|
||||
width: 16; height: 16
|
||||
source: "view-fullscreen-symbolic"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: powerButtonArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
id: powerButton
|
||||
Layout.preferredWidth: 36
|
||||
Layout.preferredHeight: 36
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
|
||||
|
||||
ToolTip.delay: 500
|
||||
ToolTip.visible: containsMouse
|
||||
ToolTip.text: powerButtonBase.toolTip
|
||||
|
||||
hoverEnabled: true
|
||||
activeFocusOnTab: true
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
property int spacingFromMenu: 16
|
||||
|
||||
activeFocusOnTab: true
|
||||
Keys.onPressed: {
|
||||
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
|
||||
powerButtonBase.clicked(true, 0, 0, mainWindow.isFullScreen);
|
||||
|
|
@ -212,77 +96,30 @@ Item {
|
|||
}
|
||||
|
||||
onClicked: {
|
||||
var buttonPosition = powerButtonArea.mapToGlobal(width, height);
|
||||
var buttonPosition = mapToGlobal(width, height);
|
||||
powerButtonBase.clicked(mouse.button === Qt.LeftButton, buttonPosition.x + spacingFromMenu, buttonPosition.y + spacingFromMenu, mainWindow.isFullScreen);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: extensionInfoDelegate
|
||||
|
||||
AppControls2.StyleBackground {
|
||||
useStyleTransparent: false
|
||||
paletteRole: Palette.Highlight
|
||||
alpha: 0
|
||||
radius: 4
|
||||
borderColor: Palette.Highlight
|
||||
border.width: activeFocus ? 2 : 0
|
||||
|
||||
property var extensionData: model.data
|
||||
property var extensionOptions: model.options
|
||||
width: styleText.width
|
||||
height: ListView.view ? ListView.view.height : 0
|
||||
|
||||
activeFocusOnTab: true
|
||||
KeyNavigation.down: extensionLoader
|
||||
Keys.onPressed: {
|
||||
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
|
||||
ListView.view.currentIndex = model.index;
|
||||
EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
|
||||
}
|
||||
}
|
||||
|
||||
onExtensionDataChanged: {
|
||||
if (extensionLoader.source === model.url) {
|
||||
extensionLoader.item.extensionData = extensionData;
|
||||
}
|
||||
}
|
||||
|
||||
function select() {
|
||||
if (extensionLoader.source !== model.url) {
|
||||
extensionLoader.setSource(model.url, {extensionData: extensionData});
|
||||
}
|
||||
}
|
||||
|
||||
AppControls2.StyleText {
|
||||
height: parent.height
|
||||
id: styleText
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.bold: parent.ListView.isCurrentItem
|
||||
|
||||
paletteRole: parent.ListView.isCurrentItem ? Palette.Highlight: Palette.Text
|
||||
text: model.name
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
UkuiItems.StyleBackground {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
normalUI.focusToFalse();
|
||||
parent.ListView.view.currentIndex = model.index;
|
||||
EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
|
||||
}
|
||||
}
|
||||
}
|
||||
paletteRole: UkuiItems.Theme.Button
|
||||
useStyleTransparency: false
|
||||
alpha: parent.containsPress ? 1 : parent.containsMouse ? 0.7 : 0
|
||||
radius: 4
|
||||
borderColor: UkuiItems.Theme.Highlight
|
||||
border.width: parent.activeFocus ? 2 : 0
|
||||
|
||||
PowerButton {
|
||||
id: powerButtonBase
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (extensionInfoList.count > 0) {
|
||||
extensionInfoList.currentIndex = 0;
|
||||
ThemeIcon {
|
||||
anchors.centerIn: parent
|
||||
width: 16
|
||||
height: 16
|
||||
source: powerButtonBase.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
/*
|
||||
* 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 QtQml 2.12
|
||||
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
|
||||
import org.ukui.menu.extension 1.0
|
||||
|
||||
Item {
|
||||
ColumnLayout {
|
||||
id: sidebarLayout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 12
|
||||
spacing: 0
|
||||
|
||||
Item {
|
||||
id: sidebarTopBar
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 40
|
||||
Layout.rightMargin: 12
|
||||
Layout.leftMargin: 12
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 4
|
||||
|
||||
ListView {
|
||||
id: extensionInfoList
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.leftMargin: 4
|
||||
Layout.rightMargin: 4
|
||||
|
||||
clip: true
|
||||
spacing: 24
|
||||
interactive: false
|
||||
orientation: ListView.Horizontal
|
||||
model: extensionManager.extensionModel()
|
||||
delegate: extensionInfoDelegate
|
||||
|
||||
function send(data) {
|
||||
if (currentItem !== null) {
|
||||
model.send(currentIndex, data);
|
||||
}
|
||||
}
|
||||
|
||||
onCurrentIndexChanged: {
|
||||
if (currentItem !== null) {
|
||||
currentItem.select();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: extensionMenuLoader
|
||||
visible: sourceComponent !== undefined
|
||||
Layout.preferredWidth: 34
|
||||
Layout.preferredHeight: 34
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
Loader {
|
||||
id: extensionLoader
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
onLoaded: {
|
||||
item.send.connect(extensionInfoList.send);
|
||||
// sidebarLayout.updateSidebarLayout(extensionInfoList.currentItem.extensionOptions);
|
||||
updateMenu();
|
||||
item.extensionMenuChanged.connect(updateMenu);
|
||||
}
|
||||
Keys.onTabPressed: {
|
||||
extensionInfoList.focus = true
|
||||
}
|
||||
|
||||
function updateMenu() {
|
||||
if (item === null) {
|
||||
return;
|
||||
}
|
||||
if (item.extensionMenu !== null) {
|
||||
extensionMenuLoader.sourceComponent = item.extensionMenu;
|
||||
} else {
|
||||
extensionMenuLoader.sourceComponent = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: extensionInfoDelegate
|
||||
|
||||
AppControls2.StyleBackground {
|
||||
useStyleTransparent: false
|
||||
paletteRole: Palette.Highlight
|
||||
alpha: 0
|
||||
radius: 4
|
||||
borderColor: Palette.Highlight
|
||||
border.width: activeFocus ? 2 : 0
|
||||
|
||||
property var extensionData: model.data
|
||||
property var extensionOptions: model.options
|
||||
width: styleText.width
|
||||
height: ListView.view ? ListView.view.height : 0
|
||||
|
||||
activeFocusOnTab: true
|
||||
KeyNavigation.down: extensionLoader
|
||||
Keys.onPressed: {
|
||||
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
|
||||
ListView.view.currentIndex = model.index;
|
||||
EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
|
||||
}
|
||||
}
|
||||
|
||||
onExtensionDataChanged: {
|
||||
if (extensionLoader.source === model.url) {
|
||||
extensionLoader.item.extensionData = extensionData;
|
||||
}
|
||||
}
|
||||
|
||||
function select() {
|
||||
if (extensionLoader.source !== model.url) {
|
||||
extensionLoader.setSource(model.url, {extensionData: extensionData});
|
||||
}
|
||||
}
|
||||
|
||||
AppControls2.StyleText {
|
||||
height: parent.height
|
||||
id: styleText
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.bold: parent.ListView.isCurrentItem
|
||||
|
||||
paletteRole: parent.ListView.isCurrentItem ? Palette.Highlight: Palette.Text
|
||||
text: model.name
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
normalUI.focusToFalse();
|
||||
parent.ListView.view.currentIndex = model.index;
|
||||
EventTrack.sendClickEvent("switch_plugin", "Sidebar", {"plugin": model.name});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (extensionInfoList.count > 0) {
|
||||
extensionInfoList.currentIndex = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ module AppUI
|
|||
AppPage 1.0 AppPage.qml
|
||||
AppList 1.0 AppList.qml
|
||||
Sidebar 1.0 Sidebar.qml
|
||||
WidgetPage 1.0 WidgetPage.qml
|
||||
NormalUI 1.0 NormalUI.qml
|
||||
FullScreenUI 1.0 FullScreenUI.qml
|
||||
AppPageHeader 1.0 AppPageHeader.qml
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<file>AppUI/FullScreenUI.qml</file>
|
||||
<file>AppUI/AppPage.qml</file>
|
||||
<file>AppUI/Sidebar.qml</file>
|
||||
<file>AppUI/WidgetPage.qml</file>
|
||||
<file>AppUI/AppList.qml</file>
|
||||
<file>AppUI/FullScreenHeader.qml</file>
|
||||
<file>AppUI/FullScreenContent.qml</file>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ PowerButton::~PowerButton()
|
|||
|
||||
QString PowerButton::getIcon()
|
||||
{
|
||||
return {KYLIN_POWER_NORMAL_PATH_MAJOR};
|
||||
return "exit-symbolic";
|
||||
}
|
||||
|
||||
QString PowerButton::getToolTip()
|
||||
|
|
|
|||
Loading…
Reference in New Issue