Modify the styles to match the requirements.

Contributes to CURA-5784.
This commit is contained in:
Diego Prado Gesto 2018-10-24 09:55:51 +02:00
parent dbb62f2490
commit bf1c23243e
6 changed files with 61 additions and 43 deletions

View file

@ -20,6 +20,9 @@ Button
property var textColor: UM.Theme.getColor("button_text")
property var textHoverColor: UM.Theme.getColor("button_text_hover")
property var textDisabledColor: textColor
property var outlineColor: color
property var outlineHoverColor: hoverColor
property var outlineDisabledColor: outlineColor
contentItem: Row
{
@ -34,6 +37,7 @@ Button
color: button.hovered ? button.textHoverColor : button.textColor
visible: source != ""
anchors.verticalCenter: parent.verticalCenter
Behavior on color { ColorAnimation { duration: 50 } }
}
Label
@ -53,6 +57,9 @@ Button
id: backgroundRect
color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
radius: UM.Theme.getSize("action_button_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
Behavior on color { ColorAnimation { duration: 50 } }
}
MouseArea

View file

@ -36,10 +36,12 @@ Rectangle
Row
{
id: stagesListContainer
spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
anchors
{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
leftMargin: UM.Theme.getSize("default_margin").width
}
@ -55,9 +57,10 @@ Rectangle
text: model.name.toUpperCase()
checkable: true
checked: model.active
anchors.verticalCenter: parent.verticalCenter
exclusiveGroup: mainWindowHeaderMenuGroup
style: UM.Theme.styles.main_window_header_tab
height: UM.Theme.getSize("main_window_header").height
height: Math.round(0.56 * UM.Theme.getSize("main_window_header").height)
onClicked: UM.Controller.setActiveStage(model.id)
iconSource: model.stage.iconSource
@ -78,11 +81,16 @@ Rectangle
rightMargin: UM.Theme.getSize("default_margin").width
verticalCenter: parent.verticalCenter
}
leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("default_margin").width
text: catalog.i18nc("@action:button", "Toolbox")
color: UM.Theme.getColor("main_window_header_button_background_active")
hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("main_window_header_button_text_active")
textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
color: UM.Theme.getColor("main_window_header_secondary_button_background_active")
hoverColor: UM.Theme.getColor("main_window_header_secondary_button_background_hovered")
outlineColor: UM.Theme.getColor("main_window_header_secondary_button_outline_active")
outlineHoverColor: UM.Theme.getColor("main_window_header_secondary_button_outline_hovered")
textColor: UM.Theme.getColor("main_window_header_secondary_button_text_active")
textHoverColor: UM.Theme.getColor("main_window_header_secondary_button_text_hovered")
onClicked: Cura.Actions.browsePackages.trigger()
}

View file

@ -15,8 +15,6 @@
"border": [127, 127, 127, 255],
"secondary": [241, 242, 242, 255],
"main_window_header_background": [31, 36, 39, 255],
"main_window_header_button_text_active": [31, 36, 39, 255],
"main_window_header_button_text_inactive": [128, 128, 128, 255],
"main_window_header_button_text_hovered": [255, 255, 255, 255],

View file

@ -25,11 +25,11 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-64.285714"
inkscape:cy="560"
inkscape:zoom="1.979899"
inkscape:cx="97.165681"
inkscape:cy="69.313647"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:current-layer="g4570"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1137"
@ -45,7 +45,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@ -61,7 +61,7 @@
id="polygon4506"
points="741.8,410.8 781.7,410.8 801.9,390.6 801.9,350.7 762,350.7 741.8,370.9 "
class="st0"
style="fill:#333333" />
style="fill:#3282ff;fill-opacity:1" />
<path
id="path4508"
d="m 40,334.7 c 0,44.3 28.1,76.1 74.4,76.1 h 70.3 V 371 H 114.4 C 91,370.9 79.5,354.4 79.5,334.7 79.5,315 91,298.8 114.4,298.6 h 70.3 V 258.9 H 114.4 C 68.1,258.9 40,290.4 40,334.7 Z"

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

View file

@ -106,35 +106,32 @@ QtObject
background: Item
{
implicitHeight: control.height
implicitWidth: buttonWidth + 2 * UM.Theme.getSize("default_lining").width
Rectangle
{
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
implicitHeight: parent.height - 2 * UM.Theme.getSize("default_margin").width
implicitWidth: UM.Theme.getSize("default_lining").width
color: UM.Theme.getColor("main_window_header_button_background_active")
visible: !control.checked
}
implicitWidth: buttonWidth
Rectangle
{
id: buttonFace
implicitHeight: parent.height
implicitWidth: parent.width
color: control.checked ? UM.Theme.getColor("main_window_header_button_background_active") : UM.Theme.getColor("main_window_header_button_background_inactive")
radius: UM.Theme.getSize("action_button_radius").width
color:
{
if (control.checked)
{
return UM.Theme.getColor("main_window_header_button_background_active")
}
else
{
if (control.hovered)
{
return UM.Theme.getColor("main_window_header_button_background_hovered")
}
return UM.Theme.getColor("main_window_header_button_background_inactive")
}
}
Behavior on color { ColorAnimation { duration: 50 } }
}
Rectangle
{
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
implicitHeight: parent.height - 2 * UM.Theme.getSize("default_margin").width
implicitWidth: UM.Theme.getSize("default_lining").width
color: UM.Theme.getColor("main_window_header_button_background_active")
visible: !control.checked
}
}
label: Item
@ -156,21 +153,21 @@ QtObject
{
if (control.checked)
{
return UM.Theme.getColor("main_window_header_button_text_active");
return UM.Theme.getColor("main_window_header_button_text_active")
}
else
{
if (control.hovered)
{
return UM.Theme.getColor("main_window_header_button_text_hovered");
return UM.Theme.getColor("main_window_header_button_text_hovered")
}
return UM.Theme.getColor("main_window_header_button_text_inactive");
return UM.Theme.getColor("main_window_header_button_text_inactive")
}
}
}
Component.onCompleted:
{
buttonWidth = width;
buttonWidth = width
}
}
}

View file

@ -79,14 +79,22 @@
"border": [127, 127, 127, 255],
"secondary": [245, 245, 245, 255],
"main_window_header_background": [12, 169, 227, 255],
"main_window_header_button_text_active": [12, 169, 227, 255],
"main_window_header_background": [10, 8, 80, 255],
"main_window_header_button_text_active": [10, 8, 80, 255],
"main_window_header_button_text_inactive": [255, 255, 255, 255],
"main_window_header_button_text_hovered": [0, 0, 0, 255],
"main_window_header_button_text_hovered": [255, 255, 255, 255],
"main_window_header_button_background_active": [255, 255, 255, 255],
"main_window_header_button_background_inactive": [255, 255, 255, 0],
"main_window_header_button_background_hovered": [255, 255, 255, 102],
"account_widget_outline_active": [9, 140, 188, 255],
"main_window_header_secondary_button_text_active": [255, 255, 255, 255],
"main_window_header_secondary_button_text_hovered": [10, 8, 80, 255],
"main_window_header_secondary_button_background_active": [255, 255, 255, 0],
"main_window_header_secondary_button_background_hovered": [255, 255, 255, 255],
"main_window_header_secondary_button_outline_active": [255, 255, 255, 255],
"main_window_header_secondary_button_outline_hovered": [255, 255, 255, 255],
"account_widget_outline_active": [70, 66, 126, 255],
"account_widget_outline_inactive": [229, 229, 229, 255],
"text": [0, 0, 0, 255],
@ -491,7 +499,7 @@
"avatar_image": [6.8, 6.8],
"action_button_radius": [0.25, 0.25],
"action_button_radius": [0.15, 0.15],
"drop_shadow_radius": [1.0, 1.0]
}