implemented the new design for panel tabs
This commit is contained in:
parent
b1c6bff6b5
commit
a1a8ecb84d
9 changed files with 206 additions and 29 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
122
src/appshell/qml/kdab/docksystem/DockPanelTab.qml
Normal file
122
src/appshell/qml/kdab/docksystem/DockPanelTab.qml
Normal 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: []
|
||||
}
|
|
@ -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" },
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue