diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index f45f3195fe..4a111e7903 100644 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -23,20 +23,6 @@ Rectangle UM.I18nCatalog { id: catalog; name:"cura"} - property string machineMonitorIcon: - { - if(!printerConnected) - { - return "tab_monitor" - } - if(Cura.MachineManager.printerOutputDevices[0].jobState == "paused") - { - return "tab_monitor_paused" - } else if (Cura.MachineManager.printerOutputDevices[0].jobState != "error") - { - return "tab_monitor_connected" - } - } function showTooltip(item, position, text) { tooltip.text = text; @@ -64,6 +50,7 @@ Rectangle var finalTime = strPadLeft(hours, "0", 2) + ':' + strPadLeft(minutes,'0',2)+ ':' + strPadLeft(seconds,'0',2); return finalTime; } + MouseArea { anchors.fill: parent @@ -76,35 +63,55 @@ Rectangle } // Mode selection buttons for changing between Setting & Monitor print mode - Row + Rectangle { - id: settingAndMonitorButtons // Really need a better name for this. - + id: sidebarHeaderBar anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("default_margin").width; anchors.right: parent.right - Button + height: childrenRect.height + color: UM.Theme.getColor("sidebar_header_bar") + + Row { - width: (parent.width - UM.Theme.getSize("default_margin").width) / 2 - height: 50 - onClicked: monitoringPrint = false - iconSource: UM.Theme.getIcon("tab_settings"); - style: UM.Theme.styles.tool_button - checkable: true - checked: true - exclusiveGroup: settingAndMonitorButtonsGroup + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("default_margin").width; + anchors.right: parent.right + Button + { + width: (parent.width - UM.Theme.getSize("default_margin").width) / 2 + height: UM.Theme.getSize("sidebar_header").height + onClicked: monitoringPrint = false + iconSource: UM.Theme.getIcon("tab_settings"); + checkable: true + checked: true + exclusiveGroup: sidebarHeaderBarGroup + + style: UM.Theme.styles.sidebar_header_tab + } + Button + { + width: (parent.width - UM.Theme.getSize("default_margin").width) / 2 + height: UM.Theme.getSize("sidebar_header").height + onClicked: monitoringPrint = true + iconSource: { + if(!printerConnected) + { + return UM.Theme.getIcon("tab_monitor") + } else if(Cura.MachineManager.printerOutputDevices[0].jobState == "paused") + { + return UM.Theme.getIcon("tab_monitor_paused") + } else if (Cura.MachineManager.printerOutputDevices[0].jobState != "error") + { + return UM.Theme.getIcon("tab_monitor_connected") + } + } + checkable: true + exclusiveGroup: sidebarHeaderBarGroup + + style: UM.Theme.styles.sidebar_header_tab + } + ExclusiveGroup { id: sidebarHeaderBarGroup } } - Button - { - width: (parent.width - UM.Theme.getSize("default_margin").width) / 2 - height: 50 - onClicked: monitoringPrint = true - iconSource: UM.Theme.getIcon(machineMonitorIcon) - style: UM.Theme.styles.tool_button - checkable: true - exclusiveGroup: settingAndMonitorButtonsGroup - } - ExclusiveGroup { id: settingAndMonitorButtonsGroup } } SidebarHeader { @@ -112,7 +119,7 @@ Rectangle width: parent.width height: totalHeightHeader - anchors.top: settingAndMonitorButtons.bottom + anchors.top: sidebarHeaderBar.bottom anchors.topMargin: UM.Theme.getSize("default_margin").height onShowTooltip: base.showTooltip(item, location, text) @@ -352,7 +359,7 @@ Rectangle height: UM.Theme.getSize("sidebar_lining").height color: UM.Theme.getColor("sidebar_lining") anchors.bottom: saveButton.top - anchors.bottomMargin: UM.Theme.getSize("default_margin").height + anchors.bottomMargin: UM.Theme.getSize("default_margin").height } SaveButton diff --git a/resources/themes/cura/icons/tab_monitor.svg b/resources/themes/cura/icons/tab_monitor.svg index 03d9e97dbf..516191b988 100644 --- a/resources/themes/cura/icons/tab_monitor.svg +++ b/resources/themes/cura/icons/tab_monitor.svg @@ -1,12 +1,75 @@ - - - Fill 1 Copy 3 - Created with Sketch. - - - - - + + + + + image/svg+xml + + Fill 1 Copy 3 + + + + + + Fill 1 Copy 3 + Created with Sketch. + + + + - \ No newline at end of file + + diff --git a/resources/themes/cura/icons/tab_settings.svg b/resources/themes/cura/icons/tab_settings.svg index 82e203a294..f181147d98 100644 --- a/resources/themes/cura/icons/tab_settings.svg +++ b/resources/themes/cura/icons/tab_settings.svg @@ -1,44 +1,75 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + image/svg+xml + + Rectangle 2365 Copy 3 + + + + + + Rectangle 2365 Copy 3 + Created with Sketch. + + + + + + diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 1428c3d40a..fa2aa0cd22 100644 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -43,6 +43,56 @@ QtObject { } } + property Component sidebar_header_tab: Component { + ButtonStyle { + background: Item { + implicitWidth: Theme.getSize("button").width; + implicitHeight: Theme.getSize("button").height; + + Rectangle { + id: buttonFace; + + anchors.fill: parent; + property bool down: control.pressed || (control.checkable && control.checked); + + color: { + if(control.pressed || (control.checkable && control.checked)) { + return Theme.getColor("sidebar_header_active"); + } else if(control.hovered) { + return Theme.getColor("sidebar_header_hover"); + } else { + return Theme.getColor("sidebar_header_bar"); + } + } + Behavior on color { ColorAnimation { duration: 50; } } + + Rectangle { + id: underline; + + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + height: UM.Theme.getSize("sidebar_header_highlight").height + color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover") + visible: control.hovered || control.checked + } + } + } + + label: Item { + Image { + anchors.centerIn: parent; + opacity: !control.enabled ? 0.2 : 1.0 + source: control.iconSource; + width: Theme.getSize("button_icon").width; + height: Theme.getSize("button_icon").height; + + sourceSize: Theme.getSize("button_icon") + } + } + } + } + property Component tool_button: Component { ButtonStyle { background: Item { diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 9c2b9f7b03..de30996289 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -56,6 +56,10 @@ "error": [255, 140, 0, 255], "sidebar_header_bar": [24, 41, 77, 255], + "sidebar_header_active": [70, 84, 113, 255], + "sidebar_header_hover": [24, 41, 77, 255], + "sidebar_header_highlight": [12, 169, 227, 255], + "sidebar_header_highlight_hover": [255, 255, 255, 255], "sidebar_lining": [245, 245, 245, 255], "button": [24, 41, 77, 255], @@ -166,6 +170,7 @@ "sidebar": [35.0, 10.0], "sidebar_header": [0.0, 4.0], + "sidebar_header_highlight": [0.5, 0.5], "sidebar_header_mode_toggle": [0.0, 2.0], "sidebar_lining": [0.5, 0.5], "sidebar_setup": [0.0, 2.0],