diff --git a/resources/qml/Skeleton/TopHeader.qml b/resources/qml/Skeleton/TopHeader.qml index 5013c12703..8cb568df4d 100644 --- a/resources/qml/Skeleton/TopHeader.qml +++ b/resources/qml/Skeleton/TopHeader.qml @@ -41,7 +41,6 @@ Rectangle horizontalCenter: parent.horizontalCenter leftMargin: UM.Theme.getSize("default_margin").width } - spacing: UM.Theme.getSize("default_margin").width // The topheader is dynamically filled with all available stages Repeater @@ -52,7 +51,7 @@ Rectangle delegate: Button { - text: model.name + text: model.name.toUpperCase() checkable: true checked: model.active exclusiveGroup: topheaderMenuGroup diff --git a/resources/themes/cura-light/images/logo.svg b/resources/themes/cura-light/images/logo.svg index 5fa5895443..89692f8295 100644 --- a/resources/themes/cura-light/images/logo.svg +++ b/resources/themes/cura-light/images/logo.svg @@ -1,4 +1,6 @@ + + + id="svg8" + inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" + sodipodi:docname="logo.svg"> + + + id="metadata5"> @@ -26,47 +49,124 @@ - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index b54d12e07b..ba0350fd4b 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -90,92 +90,57 @@ QtObject { } } - property Component topheader_tab: Component { - ButtonStyle { - background: Item { - implicitHeight: Theme.getSize("topheader_button").height - implicitWidth: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width + property Component topheader_tab: Component + { + ButtonStyle + { + // This property will be back-propagated when the width of the label is calculated + property var buttonWidth: 0 - Rectangle { - id: buttonFace; - anchors.fill: parent; + background: Rectangle + { + id: buttonFace + implicitHeight: control.height + implicitWidth: buttonWidth + color: control.checked ? UM.Theme.getColor("topheader_button_background_active") : UM.Theme.getColor("topheader_button_background_inactive") - color: "transparent" - Behavior on color { ColorAnimation { duration: 50; } } - - Rectangle { - id: underline; - - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - width: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width - height: 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 - } - } + Behavior on color { ColorAnimation { duration: 50 } } } label: Item { - implicitHeight: Theme.getSize("topheader_button_icon").height - implicitWidth: Theme.getSize("topheader_button").width + Theme.getSize("topheader_button_icon").width - Item + id: contents + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + height: control.height + width: buttonLabel.width + 4 * UM.Theme.getSize("default_margin").width + + Label { + id: buttonLabel + text: control.text + anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter; - width: childrenRect.width - height: Theme.getSize("topheader_button_icon").height - Label + font: UM.Theme.getFont("medium_bold") + color: { - id: button_label - text: control.text; - anchors.verticalCenter: parent.verticalCenter; - font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold") - color: + if (control.checked) { - if(control.hovered) + return UM.Theme.getColor("topheader_button_text_active") + } + else + { + if (control.hovered) { - return UM.Theme.getColor("topheader_button_text_hovered"); - } - if(control.checked) - { - return UM.Theme.getColor("topheader_button_text_active"); - } - else - { - return UM.Theme.getColor("topheader_button_text_inactive"); + return UM.Theme.getColor("topheader_button_text_hovered") } + return UM.Theme.getColor("topheader_button_text_inactive") } } - UM.RecolorImage - { - visible: control.iconSource != "" - id: icon - anchors.left: button_label.right - anchors.leftMargin: (icon.visible || overlayIcon.visible) ? Theme.getSize("default_margin").width : 0 - color: UM.Theme.getColor("text_emphasis") - opacity: !control.enabled ? 0.2 : 1.0 - source: control.iconSource - width: visible ? Theme.getSize("topheader_button_icon").width : 0 - height: Theme.getSize("topheader_button_icon").height - - sourceSize: Theme.getSize("topheader_button_icon") - } - UM.RecolorImage - { - id: overlayIcon - anchors.left: button_label.right - anchors.leftMargin: (icon.visible || overlayIcon.visible) ? Theme.getSize("default_margin").width : 0 - visible: control.overlayIconSource != "" && control.iconSource != "" - color: control.overlayColor - opacity: !control.enabled ? 0.2 : 1.0 - source: control.overlayIconSource - width: visible ? Theme.getSize("topheader_button_icon").width : 0 - height: Theme.getSize("topheader_button_icon").height - - sourceSize: Theme.getSize("topheader_button_icon") - } + } + Component.onCompleted: + { + buttonWidth = width } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index f5372bbb0f..e49824ae74 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -79,11 +79,13 @@ "border": [127, 127, 127, 255], "secondary": [245, 245, 245, 255], - "topheader_background": [255, 255, 255, 255], + "topheader_background": [12, 169, 227, 255], - "topheader_button_text_active": [0, 0, 0, 255], - "topheader_button_text_inactive": [128, 128, 128, 255], + "topheader_button_text_active": [12, 169, 227, 255], + "topheader_button_text_inactive": [255, 255, 255, 255], "topheader_button_text_hovered": [0, 0, 0, 255], + "topheader_button_background_active": [255, 255, 255, 255], + "topheader_button_background_inactive": [255, 255, 255, 0], "text": [0, 0, 0, 255], "text_detail": [174, 174, 174, 128], @@ -335,7 +337,7 @@ "sizes": { "window_minimum_size": [70, 50], - "topheader": [0.0, 4.0], + "topheader": [0.0, 4.5], "topheader_button": [8, 4], "topheader_button_icon": [1.2, 1.2], @@ -343,7 +345,7 @@ "default_lining": [0.08, 0.08], "default_arrow": [0.8, 0.8], - "logo": [7.6, 1.6], + "logo": [8, 2.4], "default_margin": [1.0, 1.0], "wide_margin": [2.0, 2.0],