From a1a8ecb84d1da5dca8526d2c306ecb6ab2f46b3d Mon Sep 17 00:00:00 2001 From: Roman Pudashkin Date: Tue, 18 May 2021 12:01:59 +0200 Subject: [PATCH] implemented the new design for panel tabs --- src/appshell/appshell.qrc | 1 + .../kdab/docksystem/DockFloatingWindow.qml | 25 +--- .../qml/kdab/docksystem/DockFrame.qml | 21 ++- .../qml/kdab/docksystem/DockPanelTab.qml | 122 ++++++++++++++++++ .../qml/kdab/docksystem/DockTitleBar.qml | 14 +- .../qml/MuseScore/UiComponents/MenuButton.qml | 47 +++++++ .../qml/MuseScore/UiComponents/qmldir | 1 + src/framework/uicomponents/uicomponents.qrc | 1 + .../private/quick/QWidgetAdapter_quick.cpp | 3 +- 9 files changed, 206 insertions(+), 29 deletions(-) create mode 100644 src/appshell/qml/kdab/docksystem/DockPanelTab.qml create mode 100644 src/framework/uicomponents/qml/MuseScore/UiComponents/MenuButton.qml diff --git a/src/appshell/appshell.qrc b/src/appshell/appshell.qrc index bbc23039a5..b8e54e9c4f 100644 --- a/src/appshell/appshell.qrc +++ b/src/appshell/appshell.qrc @@ -76,6 +76,7 @@ qml/kdab/docksystem/DockTitleBar.qml qml/kdab/docksystem/DockToolBar.qml qml/kdab/docksystem/DockFrame.qml + qml/kdab/docksystem/DockPanelTab.qml qml/kdab/docksystem/DockSeparator.qml qml/kdab/docksystem/DockFloatingWindow.qml qml/kdab/AppTitleBar.qml diff --git a/src/appshell/qml/kdab/docksystem/DockFloatingWindow.qml b/src/appshell/qml/kdab/docksystem/DockFloatingWindow.qml index 8fe6175bb2..5822186ff8 100644 --- a/src/appshell/qml/kdab/docksystem/DockFloatingWindow.qml +++ b/src/appshell/qml/kdab/docksystem/DockFloatingWindow.qml @@ -32,7 +32,7 @@ Item { readonly property QtObject floatingWindowCpp: parent readonly property QtObject titleBarCpp: Boolean(floatingWindowCpp) ? floatingWindowCpp.titleBar : null readonly property QtObject dropAreaCpp: Boolean(floatingWindowCpp) ? floatingWindowCpp.dropArea : null - readonly property int titleBarHeight: titleBar.heightWhenVisible + readonly property int titleBarHeight: 34 readonly property int margins: 8 // needed for the shadow anchors.fill: parent @@ -52,31 +52,14 @@ Item { } Item { - id: content + id: dropArea anchors.fill: parent - - DockTitleBar { - id: titleBar - - anchors.top: parent ? parent.top : undefined - - titleBarCpp: root.titleBarCpp - } - - Item { - id: dropArea - - anchors.top: titleBar.bottom - anchors.bottom: parent ? parent.bottom : undefined - - width: parent ? parent.width : 0 - } } StyledDropShadow { - anchors.fill: content - source: content + anchors.fill: dropArea + source: dropArea samples: 20 } } diff --git a/src/appshell/qml/kdab/docksystem/DockFrame.qml b/src/appshell/qml/kdab/docksystem/DockFrame.qml index d0a1fc1253..6c63213a6b 100644 --- a/src/appshell/qml/kdab/docksystem/DockFrame.qml +++ b/src/appshell/qml/kdab/docksystem/DockFrame.qml @@ -33,7 +33,7 @@ Rectangle { //! NOTE: please, don't rename those properties because they are used in c++ property QtObject frameCpp - readonly property QtObject titleBarCpp: Boolean(frameCpp) ? frameCpp.titleBar : null + readonly property QtObject titleBarCpp: Boolean(frameCpp) ? frameCpp.actualTitleBar : null readonly property int nonContentsHeight: titleBar.visible ? titleBar.heightWhenVisible + tabs.height : 0 anchors.fill: parent @@ -75,7 +75,8 @@ Rectangle { z: tabs.z + 1 - hoverEnabled: true + hoverEnabled: false + propagateComposedEvents: true enabled: tabs.visible } @@ -83,9 +84,15 @@ Rectangle { id: tabs anchors.top: titleBar.visible ? titleBar.bottom : parent.top + width: parent.width + readonly property int separatorHeight: 1 + padding: 0 + bottomPadding: separatorHeight + visible: count > 1 + clip: true readonly property QtObject tabBarCpp: Boolean(root.frameCpp) ? root.frameCpp.tabWidget.tabBar : null @@ -98,12 +105,20 @@ Rectangle { } } + background: Rectangle { + height: tabs.height + tabs.separatorHeight + + color: ui.theme.backgroundSecondaryColor + } + Repeater { model: Boolean(root.frameCpp) ? root.frameCpp.tabWidget.dockWidgetModel : 0 - TabButton { + DockPanelTab { text: title + isCurrent: tabs.currentIndex === model.index + onClicked: { root.frameCpp.tabWidget.setCurrentDockWidget(model.index) } diff --git a/src/appshell/qml/kdab/docksystem/DockPanelTab.qml b/src/appshell/qml/kdab/docksystem/DockPanelTab.qml new file mode 100644 index 0000000000..c6a9ecca24 --- /dev/null +++ b/src/appshell/qml/kdab/docksystem/DockPanelTab.qml @@ -0,0 +1,122 @@ +/* + * SPDX-License-Identifier: GPL-3.0-only + * MuseScore-CLA-applies + * + * MuseScore + * Music Composition & Notation + * + * Copyright (C) 2021 MuseScore BVBA and others + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License version 3 as + * published by the Free Software Foundation. + * + * 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.15 +import QtQuick.Controls 2.15 + +import MuseScore.Ui 1.0 +import MuseScore.UiComponents 1.0 + +StyledTabButton { + id: root + + height: 36 + width: implicitWidth + + leftPadding: 10 + rightPadding: 10 + + //! TODO: only for testing + // We should get data for this model from c++ + property var menuModel: [ + { "code": "close", "title": "Close tab" }, + { "code": "undock", "title": "Undock" }, + { "code": "move", "title": "Move panel to right side" }, + ] + + contentItem: Row { + spacing: 4 + + StyledTextLabel { + anchors.verticalCenter: parent.verticalCenter + + horizontalAlignment: Qt.AlignLeft + font: root.isCurrent ? ui.theme.bodyBoldFont : ui.theme.bodyFont + + text: root.text + } + + MenuButton { + id: menuButton + + anchors.verticalCenter: parent.verticalCenter + + visible: root.isCurrent + + menuModel: root.menuModel + } + } + + background: Rectangle { + id: backgroundRect + + color: ui.theme.backgroundSecondaryColor + opacity: 1 + + SeparatorLine { + anchors.left: parent.left + + orientation: Qt.Vertical + } + + SeparatorLine { + anchors.right: parent.right + + orientation: Qt.Vertical + } + + SeparatorLine { + id: bottomLine + + anchors.bottom: parent.bottom + + visible: !root.isCurrent + } + + states: [ + State { + name: "HOVERED" + when: root.hovered && !root.isCurrent + + PropertyChanges { + target: backgroundRect + + opacity: ui.theme.buttonOpacityHover + color: ui.theme.backgroundPrimaryColor + } + }, + + State { + name: "SELECTED" + when: root.isCurrent + + PropertyChanges { + target: backgroundRect + + color: ui.theme.backgroundPrimaryColor + } + } + ] + } + + states: [] +} diff --git a/src/appshell/qml/kdab/docksystem/DockTitleBar.qml b/src/appshell/qml/kdab/docksystem/DockTitleBar.qml index c7877fbc91..abf3380284 100644 --- a/src/appshell/qml/kdab/docksystem/DockTitleBar.qml +++ b/src/appshell/qml/kdab/docksystem/DockTitleBar.qml @@ -48,6 +48,8 @@ Item { heightWhenVisible: 34 color: ui.theme.backgroundPrimaryColor + visible: parent.visible + RowLayout { anchors.fill: parent @@ -63,12 +65,16 @@ Item { text: titleBar.title } - FlatButton { + MenuButton { Layout.margins: 2 - icon: IconCode.MENU_THREE_DOTS - - normalStateColor: "transparent" + //! TODO: only for testing + // We should get data for this model from c++ + menuModel: [ + { "code": "close", "title": "Close tab" }, + { "code": "undock", "title": "Undock" }, + { "code": "move", "title": "Move panel to right side" }, + ] } } } diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/MenuButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/MenuButton.qml new file mode 100644 index 0000000000..c9db4fefc4 --- /dev/null +++ b/src/framework/uicomponents/qml/MuseScore/UiComponents/MenuButton.qml @@ -0,0 +1,47 @@ +/* + * SPDX-License-Identifier: GPL-3.0-only + * MuseScore-CLA-applies + * + * MuseScore + * Music Composition & Notation + * + * Copyright (C) 2021 MuseScore BVBA and others + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License version 3 as + * published by the Free Software Foundation. + * + * 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.15 + +import MuseScore.Ui 1.0 + +FlatButton { + id: root + + property var menuModel + + signal handleAction(string actionCode, int actionIndex) + + icon: IconCode.MENU_THREE_DOTS + normalStateColor: "transparent" + + StyledMenuLoader { + id: menuLoader + + onHandleAction: { + root.handleAction(actionCode, actionIndex) + } + } + + onClicked: { + menuLoader.toggleOpened(root.menuModel, navigation) + } +} diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/qmldir b/src/framework/uicomponents/qml/MuseScore/UiComponents/qmldir index 429487b575..97491b0cc3 100644 --- a/src/framework/uicomponents/qml/MuseScore/UiComponents/qmldir +++ b/src/framework/uicomponents/qml/MuseScore/UiComponents/qmldir @@ -42,6 +42,7 @@ StyledDialogView 1.0 StyledDialogView.qml StyledMenu 1.0 StyledMenu.qml StyledMenuItem 1.0 StyledMenuItem.qml StyledMenuLoader 1.0 StyledMenuLoader.qml +MenuButton 1.0 MenuButton.qml FilePicker 1.0 FilePicker.qml ValueList 1.0 ValueList.qml StyledDropShadow 1.0 StyledDropShadow.qml diff --git a/src/framework/uicomponents/uicomponents.qrc b/src/framework/uicomponents/uicomponents.qrc index ec65929e30..1e0d960ef5 100644 --- a/src/framework/uicomponents/uicomponents.qrc +++ b/src/framework/uicomponents/uicomponents.qrc @@ -43,6 +43,7 @@ qml/MuseScore/UiComponents/Border.qml qml/MuseScore/UiComponents/StyledMenu.qml qml/MuseScore/UiComponents/StyledMenuItem.qml + qml/MuseScore/UiComponents/MenuButton.qml qml/MuseScore/UiComponents/FilePicker.qml qml/MuseScore/UiComponents/ValueList.qml qml/MuseScore/UiComponents/internal/ValueListHeaderItem.qml diff --git a/thirdparty/KDDockWidgets/src/private/quick/QWidgetAdapter_quick.cpp b/thirdparty/KDDockWidgets/src/private/quick/QWidgetAdapter_quick.cpp index b4064d51fa..6bd7db937d 100644 --- a/thirdparty/KDDockWidgets/src/private/quick/QWidgetAdapter_quick.cpp +++ b/thirdparty/KDDockWidgets/src/private/quick/QWidgetAdapter_quick.cpp @@ -53,7 +53,8 @@ public: // Each source can only have one MouseEventRedirector - delete s_mouseEventRedirectors.value(eventSource); + auto oldRedirector = s_mouseEventRedirectors.take(eventSource); + oldRedirector->deleteLater(); s_mouseEventRedirectors.insert(eventSource, this); }