implemented the new design for panel tabs

This commit is contained in:
Roman Pudashkin 2021-05-18 12:01:59 +02:00 committed by Igor Korsukov
parent b1c6bff6b5
commit a1a8ecb84d
9 changed files with 206 additions and 29 deletions

View file

@ -76,6 +76,7 @@
<file>qml/kdab/docksystem/DockTitleBar.qml</file>
<file>qml/kdab/docksystem/DockToolBar.qml</file>
<file>qml/kdab/docksystem/DockFrame.qml</file>
<file>qml/kdab/docksystem/DockPanelTab.qml</file>
<file>qml/kdab/docksystem/DockSeparator.qml</file>
<file>qml/kdab/docksystem/DockFloatingWindow.qml</file>
<file>qml/kdab/AppTitleBar.qml</file>

View file

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

View file

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

View file

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

View file

@ -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" },
]
}
}
}

View file

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

View file

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

View file

@ -43,6 +43,7 @@
<file>qml/MuseScore/UiComponents/Border.qml</file>
<file>qml/MuseScore/UiComponents/StyledMenu.qml</file>
<file>qml/MuseScore/UiComponents/StyledMenuItem.qml</file>
<file>qml/MuseScore/UiComponents/MenuButton.qml</file>
<file>qml/MuseScore/UiComponents/FilePicker.qml</file>
<file>qml/MuseScore/UiComponents/ValueList.qml</file>
<file>qml/MuseScore/UiComponents/internal/ValueListHeaderItem.qml</file>

View file

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