diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index e24d929ed7..e7cb0788c5 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -14,6 +14,23 @@ Item { width: buttons.width; height: buttons.height + panel.height; + Rectangle { + id: activeItemBackground; + + anchors.bottom: parent.bottom; + + width: UM.Theme.sizes.button.width; + height: UM.Theme.sizes.button.height * 2; + + opacity: panelBackground.opacity; + + color: UM.Theme.colors.tool_panel_background + + function setActive(new_x) { + x = new_x; + } + } + RowLayout { id: buttons; @@ -34,6 +51,7 @@ Item { checkable: true; checked: model.active; + onCheckedChanged: if (checked) activeItemBackground.setActive(x); style: UM.Theme.styles.tool_button; @@ -42,21 +60,35 @@ Item { MouseArea { anchors.fill: parent; onClicked: parent.checked ? UM.Controller.setActiveTool(null) : UM.Controller.setActiveTool(model.id); + } - } + } } } - Loader { - id: panel + UM.AngledCornerRectangle { + id: panelBackground; anchors.left: parent.left; - anchors.right: parent.right; anchors.bottom: buttons.top; anchors.bottomMargin: UM.Theme.sizes.default_margin.height; - height: childrenRect.height; + width: panel.item ? panel.width + 2 * UM.Theme.sizes.default_margin.width : 0; + height: panel.item ? panel.height + 2 * UM.Theme.sizes.default_margin.height : 0; - source: UM.ActiveTool.valid ? UM.ActiveTool.activeToolPanel : ""; + opacity: panel.item ? 1 : 0 + Behavior on opacity { NumberAnimation { duration: 100 } } + + color: UM.Theme.colors.tool_panel_background; + cornerSize: width > 0 ? UM.Theme.sizes.default_margin.width : 0; + + Loader { + id: panel + + x: UM.Theme.sizes.default_margin.width; + y: UM.Theme.sizes.default_margin.height; + + source: UM.ActiveTool.valid ? UM.ActiveTool.activeToolPanel : ""; + } } } diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index a79636aece..eda2badd71 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -110,7 +110,9 @@ "save_button_text": [35, 35, 35, 255], "message": [205, 202, 201, 255], - "message_text": [35, 35, 35, 255] + "message_text": [35, 35, 35, 255], + + "tool_panel_background": [255, 255, 255, 255] }, "sizes": {