Merge branch 'CURA-8012_restyle_buttons' of github.com:Ultimaker/Cura

This commit is contained in:
Jaime van Kessel 2021-07-06 16:03:38 +02:00
commit 0347bb9ce2
No known key found for this signature in database
GPG Key ID: 3710727397403C91
8 changed files with 93 additions and 67 deletions

View File

@ -1,4 +1,4 @@
// Copyright (c) 2020 Ultimaker B.V.
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7
@ -18,19 +18,16 @@ Button
property alias textFont: buttonText.font
property alias cornerRadius: backgroundRect.radius
property alias tooltip: tooltip.tooltipText
property alias cornerSide: backgroundRect.cornerSide
property color color: UM.Theme.getColor("primary")
property color hoverColor: UM.Theme.getColor("primary_hover")
property color disabledColor: color
property color textColor: UM.Theme.getColor("button_text")
property color textHoverColor: textColor
property color textDisabledColor: textColor
property color textDisabledColor: disabledColor
property color outlineColor: color
property color outlineHoverColor: hoverColor
property color outlineDisabledColor: outlineColor
property alias shadowColor: shadow.color
property alias shadowEnabled: shadow.visible
property color outlineHoverColor: outlineColor
property color outlineDisabledColor: disabledColor
property alias busy: busyIndicator.visible
property bool underlineTextOnHover: false
@ -46,6 +43,49 @@ Button
// but it can exceed a maximum, then this value have to be set.
property int maximumWidth: 0
// These properties are deprecated.
// To (maybe) prevent a major SDK upgrade, mark them as deprecated instead of just outright removing them.
// Note, if you still want rounded corners, use (something based on) Cura.RoundedRectangle.
property alias cornerSide: deprecatedProperties.cornerSide
property alias shadowColor: deprecatedProperties.shadowColor
property alias shadowEnabled: deprecatedProperties.shadowEnabled
Item
{
id: deprecatedProperties
visible: false
enabled: false
width: 0
height: 0
property var cornerSide: null
property var shadowColor: null
property var shadowEnabled: null
onCornerSideChanged:
{
if (cornerSide != null)
{
CuraApplication.writeToLog("w", "'ActionButton.cornerSide' is deprecated since 4.11. Rounded corners can still be made with 'Cura.RoundedRectangle'.");
}
}
onShadowColorChanged:
{
if (shadowColor != null)
{
CuraApplication.writeToLog("w", "'ActionButton.shadowColor' is deprecated since 4.11.")
}
}
onShadowEnabledChanged:
{
if (shadowEnabled != null)
{
CuraApplication.writeToLog("w", "'ActionButton.shadowEnabled' is deprecated since 4.11.")
}
}
}
leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("default_margin").width
height: UM.Theme.getSize("action_button").height
@ -130,24 +170,13 @@ Button
background: Cura.RoundedRectangle
{
id: backgroundRect
cornerSide: Cura.RoundedRectangle.Direction.All
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
}
DropShadow
{
id: shadow
// Don't blur the shadow
// Disable the rounded-ness of this rectangle. We can't use a normal Rectangle here yet, as the API/SDK has only just been deprecated.
radius: 0
anchors.fill: backgroundRect
source: backgroundRect
verticalOffset: 2
visible: false
// Should always be drawn behind the background.
z: backgroundRect.z - 1
cornerSide: Cura.RoundedRectangle.Direction.None
}
Cura.ToolTip
@ -189,4 +218,4 @@ Button
duration: 2500
}
}
}
}

View File

@ -1,4 +1,4 @@
// Copyright (c) 2018 Ultimaker B.V.
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7
@ -23,7 +23,6 @@ Item
id: saveToButton
height: parent.height
fixedWidthMode: true
cornerSide: deviceSelectionMenu.visible ? Cura.RoundedRectangle.Direction.Left : Cura.RoundedRectangle.Direction.All
anchors
{
@ -43,15 +42,11 @@ Item
}
}
Cura.ActionButton
Cura.PrimaryButton
{
id: deviceSelectionMenu
height: parent.height
shadowEnabled: true
shadowColor: UM.Theme.getColor("primary_shadow")
cornerSide: Cura.RoundedRectangle.Direction.Right
anchors
{
top: parent.top
@ -61,7 +56,7 @@ Item
leftPadding: UM.Theme.getSize("narrow_margin").width //Need more space than usual here for wide text.
rightPadding: UM.Theme.getSize("narrow_margin").width
iconSource: popup.opened ? UM.Theme.getIcon("ChevronSingleUp") : UM.Theme.getIcon("ChevronSingleDown")
color: UM.Theme.getColor("action_panel_secondary")
color: popup.opened ? hoverColor : UM.Theme.getColor("action_panel_secondary")
visible: (devicesModel.deviceCount > 1)
onClicked: popup.opened ? popup.close() : popup.open()
@ -70,6 +65,7 @@ Item
{
id: popup
padding: 0
spacing: 0
y: -height
x: parent.width - width
@ -78,17 +74,16 @@ Item
contentItem: ColumnLayout
{
spacing: 0
Repeater
{
model: devicesModel
delegate: Cura.ActionButton
delegate: Cura.PrimaryButton
{
text: model.description
visible: model.id != UM.OutputDeviceManager.activeDevice // Don't show the active device in the list
color: "transparent"
cornerRadius: 0
hoverColor: UM.Theme.getColor("primary")
Layout.fillWidth: true
// The total width of the popup should be defined by the largest button. By stating that each
// button should be minimally the size of it's content (aka; implicitWidth) we can ensure that.
@ -102,13 +97,6 @@ Item
}
}
}
background: Rectangle
{
opacity: visible ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100 } }
color: UM.Theme.getColor("action_panel_secondary")
}
}
}

View File

@ -429,6 +429,14 @@ UM.MainWindow
height: UM.Theme.getSize("message_action_button").height
}
}
link: Component
{
Cura.TertiaryButton
{
text: model.name
height: UM.Theme.getSize("message_action_button").height
}
}
}
}

View File

@ -1,4 +1,4 @@
// Copyright (c) 2018 Ultimaker B.V.
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.2
@ -9,8 +9,6 @@ import Cura 1.1 as Cura
Cura.ActionButton
{
shadowEnabled: true
shadowColor: enabled ? UM.Theme.getColor("primary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
color: UM.Theme.getColor("primary_button")
textColor: UM.Theme.getColor("primary_button_text")
outlineColor: "transparent"

View File

@ -1,4 +1,4 @@
// Copyright (c) 2018 Ultimaker B.V.
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.2
@ -9,11 +9,9 @@ import Cura 1.1 as Cura
Cura.ActionButton
{
shadowEnabled: true
shadowColor: enabled ? UM.Theme.getColor("secondary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
color: UM.Theme.getColor("secondary_button")
textColor: UM.Theme.getColor("secondary_button_text")
outlineColor: "transparent"
outlineColor: UM.Theme.getColor("secondary_button_text")
disabledColor: UM.Theme.getColor("action_button_disabled")
textDisabledColor: UM.Theme.getColor("action_button_disabled_text")
hoverColor: UM.Theme.getColor("secondary_button_hover")

View File

@ -1,4 +1,4 @@
// Copyright (c) 2020 Ultimaker B.V.
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.2
@ -9,8 +9,6 @@ import Cura 1.1 as Cura
Cura.ActionButton
{
shadowEnabled: true
shadowColor: enabled ? UM.Theme.getColor("secondary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
color: "transparent"
textColor: UM.Theme.getColor("text_link")
outlineColor: "transparent"

View File

@ -16,13 +16,20 @@
"primary_text": [255, 255, 255, 204],
"secondary": [95, 95, 95, 255],
"icon": [204, 204, 204, 255],
"secondary_button": [0, 0, 0, 0],
"secondary_button_hover": [85, 85, 87, 255],
"secondary_button_text": [255, 255, 255, 255],
"icon": [255, 255, 255, 255],
"toolbar_background": [39, 44, 48, 255],
"toolbar_button_active": [95, 95, 95, 255],
"toolbar_button_hover": [95, 95, 95, 255],
"toolbar_button_active_hover": [95, 95, 95, 255],
"toolbar_button_active": [57, 57, 58, 255],
"toolbar_button_hover": [57, 57, 58, 255],
"toolbar_button_active_hover": [57, 57, 58, 255],
"main_window_header_button_text_inactive": [128, 128, 128, 255],
"main_window_header_background": [14, 14, 14, 255],
"main_window_header_background_gradient": [32, 32, 32, 255],
"main_window_header_button_background_hovered": [46, 46, 46, 255],
"account_sync_state_icon": [255, 255, 255, 204],
@ -32,7 +39,7 @@
"text": [255, 255, 255, 204],
"text_detail": [255, 255, 255, 172],
"text_link": [255, 255, 255, 127],
"text_link": [25, 110, 240, 255],
"text_inactive": [255, 255, 255, 88],
"text_hover": [255, 255, 255, 204],
"text_pressed": [255, 255, 255, 204],
@ -87,8 +94,8 @@
"action_button_active": [39, 44, 48, 30],
"action_button_active_text": [255, 255, 255, 255],
"action_button_active_border": [255, 255, 255, 100],
"action_button_disabled": [19, 24, 28, 255],
"action_button_disabled_text": [200, 200, 200, 80],
"action_button_disabled": [85, 85, 87, 255],
"action_button_disabled_text": [103, 103, 104, 255],
"action_button_disabled_border": [255, 255, 255, 30],
"scrollbar_background": [39, 44, 48, 0],

View File

@ -168,15 +168,15 @@
"icon": [8, 7, 63, 255],
"primary_button": [38, 113, 231, 255],
"primary_button": [25, 110, 240, 255],
"primary_button_shadow": [27, 95, 202, 255],
"primary_button_hover": [81, 145, 247, 255],
"primary_button_hover": [16, 70, 156, 255],
"primary_button_text": [255, 255, 255, 255],
"secondary_button": [240, 240, 240, 255],
"secondary_button": [255, 255, 255, 0],
"secondary_button_shadow": [216, 216, 216, 255],
"secondary_button_hover": [228, 228, 228, 255],
"secondary_button_text": [30, 102, 215, 255],
"secondary_button_hover": [232, 240, 253, 255],
"secondary_button_text": [25, 110, 240, 255],
"main_window_header_background": [8, 7, 63, 255],
"main_window_header_background_gradient": [25, 23, 91, 255],
@ -196,7 +196,7 @@
"machine_selector_text_active": [255, 255, 255, 255],
"machine_selector_printer_icon": [8, 7, 63, 255],
"action_panel_secondary": [27, 95, 202, 255],
"action_panel_secondary": [25, 110, 240, 255],
"first_run_shadow": [50, 50, 50, 255],
@ -210,7 +210,7 @@
"text": [25, 25, 25, 255],
"text_detail": [174, 174, 174, 128],
"text_link": [50, 130, 255, 255],
"text_link": [25, 110, 240, 255],
"text_inactive": [174, 174, 174, 255],
"text_pressed": [50, 130, 255, 255],
"text_subtext": [0, 0, 0, 255],
@ -266,8 +266,8 @@
"action_button_active_text": [0, 0, 0, 255],
"action_button_active_border": [50, 130, 255, 255],
"action_button_disabled": [245, 245, 245, 255],
"action_button_disabled_text": [127, 127, 127, 255],
"action_button_disabled_border": [245, 245, 245, 255],
"action_button_disabled_text": [196, 196, 196, 255],
"action_button_disabled_border": [196, 196, 196, 255],
"action_button_shadow": [223, 223, 223, 255],
"action_button_disabled_shadow": [228, 228, 228, 255],
@ -589,7 +589,7 @@
"message": [30.0, 5.0],
"message_close": [1, 1],
"message_radius": [0.25, 0.25],
"message_action_button": [0, 2.0],
"message_action_button": [0, 2.5],
"message_image": [15.0, 5.0],
"infill_button_margin": [0.5, 0.5],