mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-06 22:47:29 -06:00
Add the RoundedRectangle as background to the ExpandableComponent
This way the expandable components can have rounded corners only on one side, thus preventing the need to do add backgrounds to the rows that they are in. CURA-5785
This commit is contained in:
Jaime van Kessel
parent
e25a61d4d6
commit
b826a42026
5 changed files with 181 additions and 158 deletions
|
|
@ -24,77 +24,66 @@ Item
|
|||
Item
|
||||
{
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: openFileButtonBackground.width + itemRowBackground.width
|
||||
width: openFileButtonBackground.width + itemRow.width + UM.Theme.getSize("default_margin").width
|
||||
height: parent.height
|
||||
|
||||
Rectangle
|
||||
RowLayout
|
||||
{
|
||||
id: itemRowBackground
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
|
||||
color: UM.Theme.getColor("toolbar_background")
|
||||
|
||||
width: itemRow.width + UM.Theme.getSize("default_margin").width
|
||||
height: parent.height
|
||||
id: itemRow
|
||||
|
||||
anchors.left: openFileButtonBackground.right
|
||||
anchors.leftMargin: UM.Theme.getSize("default_margin").width
|
||||
|
||||
RowLayout
|
||||
width: 0.9 * prepareMenu.width
|
||||
height: parent.height
|
||||
spacing: 0
|
||||
|
||||
Cura.MachineSelector
|
||||
{
|
||||
id: itemRow
|
||||
id: machineSelection
|
||||
z: openFileButtonBackground.z - 1 //Ensure that the tooltip of the open file button stays above the item row.
|
||||
headerCornerSide: 2 // Show corners on the left.
|
||||
Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
|
||||
Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
width: 0.9 * prepareMenu.width
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
spacing: 0
|
||||
width: UM.Theme.getSize("default_lining").width
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
|
||||
Cura.MachineSelector
|
||||
{
|
||||
id: machineSelection
|
||||
z: openFileButtonBackground.z - 1 //Ensure that the tooltip of the open file button stays above the item row.
|
||||
Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
|
||||
Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
Cura.QuickConfigurationSelector
|
||||
{
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredWidth: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width
|
||||
}
|
||||
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
width: UM.Theme.getSize("default_lining").width
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
width: UM.Theme.getSize("default_lining").width
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
|
||||
Cura.QuickConfigurationSelector
|
||||
{
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredWidth: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width
|
||||
}
|
||||
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
width: UM.Theme.getSize("default_lining").width
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
|
||||
Item
|
||||
{
|
||||
id: printSetupSelectorItem
|
||||
// This is a work around to prevent the printSetupSelector from having to be re-loaded every time
|
||||
// a stage switch is done.
|
||||
children: [printSetupSelector]
|
||||
height: childrenRect.height
|
||||
width: childrenRect.width
|
||||
}
|
||||
Item
|
||||
{
|
||||
id: printSetupSelectorItem
|
||||
// This is a work around to prevent the printSetupSelector from having to be re-loaded every time
|
||||
// a stage switch is done.
|
||||
children: [printSetupSelector]
|
||||
height: childrenRect.height
|
||||
width: childrenRect.width
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id: openFileButtonBackground
|
||||
|
|
|
|||
|
|
@ -22,135 +22,122 @@ Item
|
|||
name: "cura"
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
anchors.fill: stageMenu
|
||||
anchors.leftMargin: -radius
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
color: UM.Theme.getColor("toolbar_background")
|
||||
}
|
||||
|
||||
Item
|
||||
Row
|
||||
{
|
||||
id: stageMenu
|
||||
id: stageMenuRow
|
||||
anchors.centerIn: parent
|
||||
height: parent.height
|
||||
width: stageMenuRow.width + UM.Theme.getSize("default_margin").width
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
Row
|
||||
|
||||
Cura.ExpandableComponent
|
||||
{
|
||||
id: stageMenuRow
|
||||
anchors.centerIn: parent
|
||||
id: viewSelector
|
||||
iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
|
||||
height: parent.height
|
||||
headerCornerSide: 2 // Show corners on the left side
|
||||
|
||||
Cura.ExpandableComponent
|
||||
property var viewModel: UM.ViewModel { }
|
||||
|
||||
property var activeView:
|
||||
{
|
||||
id: viewSelector
|
||||
iconSource: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
|
||||
height: parent.height
|
||||
|
||||
property var viewModel: UM.ViewModel { }
|
||||
|
||||
property var activeView:
|
||||
for (var i = 0; i < viewModel.rowCount(); i++)
|
||||
{
|
||||
for (var i = 0; i < viewModel.rowCount(); i++)
|
||||
if (viewModel.items[i].active)
|
||||
{
|
||||
if (viewModel.items[i].active)
|
||||
{
|
||||
return viewModel.items[i]
|
||||
}
|
||||
return viewModel.items[i]
|
||||
}
|
||||
return null
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
Component.onCompleted:
|
||||
{
|
||||
// Nothing was active, so just return the first one (the list is sorted by priority, so the most
|
||||
// important one should be returned)
|
||||
if(activeView == null)
|
||||
{
|
||||
UM.Controller.setActiveView(viewModel.getItem(0).id)
|
||||
}
|
||||
}
|
||||
|
||||
headerItem: Label
|
||||
{
|
||||
text: viewSelector.activeView ? viewSelector.activeView.name : ""
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
height: parent.height
|
||||
elide: Text.ElideRight
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
}
|
||||
|
||||
popupItem: Column
|
||||
{
|
||||
id: viewSelectorPopup
|
||||
width: viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
|
||||
|
||||
// For some reason the height/width of the column gets set to 0 if this is not set...
|
||||
Component.onCompleted:
|
||||
{
|
||||
// Nothing was active, so just return the first one (the list is sorted by priority, so the most
|
||||
// important one should be returned)
|
||||
if(activeView == null)
|
||||
{
|
||||
UM.Controller.setActiveView(viewModel.getItem(0).id)
|
||||
}
|
||||
height = implicitHeight
|
||||
width = viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
|
||||
}
|
||||
|
||||
headerItem: Label
|
||||
Repeater
|
||||
{
|
||||
text: viewSelector.activeView ? viewSelector.activeView.name : ""
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
height: parent.height
|
||||
elide: Text.ElideRight
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
}
|
||||
|
||||
popupItem: Column
|
||||
{
|
||||
id: viewSelectorPopup
|
||||
width: viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
|
||||
|
||||
// For some reason the height/width of the column gets set to 0 if this is not set...
|
||||
Component.onCompleted:
|
||||
id: viewsList
|
||||
model: viewSelector.viewModel
|
||||
RoundButton
|
||||
{
|
||||
height = implicitHeight
|
||||
width = viewSelector.width - 2 * UM.Theme.getSize("default_margin").width
|
||||
}
|
||||
|
||||
Repeater
|
||||
{
|
||||
id: viewsList
|
||||
model: viewSelector.viewModel
|
||||
RoundButton
|
||||
text: name
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
checkable: true
|
||||
checked: viewSelector.activeView != null ? viewSelector.activeView.id == id : false
|
||||
onClicked:
|
||||
{
|
||||
text: name
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
checkable: true
|
||||
checked: viewSelector.activeView != null ? viewSelector.activeView.id == id : false
|
||||
onClicked:
|
||||
{
|
||||
viewSelector.togglePopup()
|
||||
UM.Controller.setActiveView(id)
|
||||
}
|
||||
viewSelector.togglePopup()
|
||||
UM.Controller.setActiveView(id)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
// If there is no viewPanel, we only need a single spacer, so hide this one.
|
||||
visible: viewPanel.source != ""
|
||||
width: visible ? UM.Theme.getSize("default_lining").width : 0
|
||||
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
}
|
||||
|
||||
Loader
|
||||
{
|
||||
id: viewPanel
|
||||
height: parent.height
|
||||
width: childrenRect.width
|
||||
source: UM.Controller.activeView != null && UM.Controller.activeView.stageMenuComponent != null ? UM.Controller.activeView.stageMenuComponent : ""
|
||||
}
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
// If there is no viewPanel, we only need a single spacer, so hide this one.
|
||||
visible: viewPanel.source != ""
|
||||
width: visible ? UM.Theme.getSize("default_lining").width : 0
|
||||
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
width: UM.Theme.getSize("default_lining").width
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
|
||||
Item
|
||||
{
|
||||
id: printSetupSelectorItem
|
||||
// This is a work around to prevent the printSetupSelector from having to be re-loaded every time
|
||||
// a stage switch is done.
|
||||
children: [printSetupSelector]
|
||||
height: childrenRect.height
|
||||
width: childrenRect.width
|
||||
}
|
||||
Loader
|
||||
{
|
||||
id: viewPanel
|
||||
height: parent.height
|
||||
width: childrenRect.width
|
||||
source: UM.Controller.activeView != null && UM.Controller.activeView.stageMenuComponent != null ? UM.Controller.activeView.stageMenuComponent : ""
|
||||
}
|
||||
|
||||
// Separator line
|
||||
Rectangle
|
||||
{
|
||||
height: parent.height
|
||||
width: UM.Theme.getSize("default_lining").width
|
||||
color: UM.Theme.getColor("lining")
|
||||
}
|
||||
|
||||
Item
|
||||
{
|
||||
id: printSetupSelectorItem
|
||||
// This is a work around to prevent the printSetupSelector from having to be re-loaded every time
|
||||
// a stage switch is done.
|
||||
children: [printSetupSelector]
|
||||
height: childrenRect.height
|
||||
width: childrenRect.width
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -259,6 +259,7 @@ UM.MainWindow
|
|||
onHideTooltip: base.hideTooltip()
|
||||
width: UM.Theme.getSize("print_setup_widget").width
|
||||
height: UM.Theme.getSize("stage_menu").height
|
||||
headerCornerSide: 4 // Show corners on the right side
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,12 @@ Item
|
|||
|
||||
property alias expandedHighlightColor: expandedHighlight.color
|
||||
|
||||
// What should the radius of the header be. This is also influenced by the headerCornerSide
|
||||
property alias headerRadius: background.radius
|
||||
|
||||
// On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right.
|
||||
property alias headerCornerSide: background.cornerSide
|
||||
|
||||
function togglePopup()
|
||||
{
|
||||
if(popup.visible)
|
||||
|
|
@ -71,7 +77,8 @@ Item
|
|||
|
||||
implicitHeight: 100 * screenScaleFactor
|
||||
implicitWidth: 400 * screenScaleFactor
|
||||
Rectangle
|
||||
|
||||
RoundedRectangle
|
||||
{
|
||||
id: background
|
||||
property real padding: UM.Theme.getSize("default_margin").width
|
||||
|
|
|
|||
39
resources/qml/RoundedRectangle.qml
Normal file
39
resources/qml/RoundedRectangle.qml
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import QtQuick 2.0
|
||||
|
||||
import UM 1.2 as UM
|
||||
|
||||
// The rounded rectangle works mostly like a regular rectangle, but provides the option to have rounded corners on only one side of the rectangle.
|
||||
Item
|
||||
{
|
||||
// As per the regular rectangle
|
||||
property color color: "transparent"
|
||||
|
||||
// As per regular rectangle
|
||||
property int radius: UM.Theme.getSize("default_radius").width
|
||||
|
||||
// On what side should the corners be shown 0 can be used if no radius is needed.
|
||||
// 1 is down, 2 is left, 3 is up and 4 is right.
|
||||
property int cornerSide: 0
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
radius: cornerSide != 0 ? parent.radius : 0
|
||||
color: parent.color
|
||||
}
|
||||
|
||||
// The item that covers 2 of the corners to make them not rounded.
|
||||
Rectangle
|
||||
{
|
||||
visible: cornerSide != 0
|
||||
height: cornerSide % 2 ? parent.radius: parent.height
|
||||
width: cornerSide % 2 ? parent.width : parent.radius
|
||||
color: parent.color
|
||||
anchors
|
||||
{
|
||||
right: cornerSide == 2 ? parent.right: undefined
|
||||
bottom: cornerSide == 3 ? parent.bottom: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue