Rework parts of camera button

The new button should be consistent with the looks of the tool buttons. I've given it the same size as the inner part of the tool buttons, reworked the background so that it matches. I'm also giving it the 'secondary button' style which is also used for one other button. But that other detail button should get the same style anyway so that's fine too.

I've also turned this icon into an actual button. That way it can get focus when using keyboard navigation and works better with tools for blind and such.

Contributes to issue CURA-8202.
This commit is contained in:
Ghostkeeper 2021-07-07 11:27:07 +02:00
parent 52018a6048
commit ba6e79c81f
No known key found for this signature in database
GPG Key ID: D2A8871EE34EC59A
2 changed files with 23 additions and 29 deletions

View File

@ -1,23 +1,26 @@
// Copyright (c) 2019 Ultimaker B.V.
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.3
import QtQuick.Controls 1.4
import QtQuick.Controls 2.4
import QtQuick.Controls.Styles 1.3
import UM 1.3 as UM
import Cura 1.0 as Cura
Rectangle
Button
{
id: base
property var enabled: true
property var iconSource: null
color: enabled ? UM.Theme.getColor("monitor_icon_primary") : UM.Theme.getColor("monitor_icon_disabled")
height: width
radius: Math.round(0.5 * width)
width: 24 * screenScaleFactor
width: UM.Theme.getSize("button").width * 0.75 //Matching the size of the content of tool buttons.
height: UM.Theme.getSize("button").height * 0.75
hoverEnabled: true
background: Rectangle
{
anchors.fill: parent
radius: 0.5 * width
color: parent.enabled ? (parent.hovered ? UM.Theme.getColor("monitor_secondary_button_hover") : "transparent") : UM.Theme.getColor("monitor_icon_disabled")
}
UM.RecolorImage
{
@ -27,20 +30,13 @@ Rectangle
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
color: UM.Theme.getColor("monitor_icon_accent")
color: UM.Theme.getColor("primary")
height: width
source: iconSource
width: Math.round(parent.width / 2)
}
MouseArea
{
id: clickArea
anchors.fill: parent
hoverEnabled: base.enabled
onClicked:
{
if (base.enabled)
{
if (OutputDevice.activeCameraUrl != "")
{
@ -52,5 +48,3 @@ Rectangle
}
}
}
}
}

View File

@ -437,7 +437,7 @@
"monitor_icon_accent": [255, 255, 255, 255],
"monitor_icon_disabled": [238, 238, 238, 255],
"monitor_secondary_button_hover": [228, 228, 228, 255],
"monitor_secondary_button_hover": [232, 242, 252, 255],
"monitor_secondary_button": [240, 240, 240, 255],
"monitor_secondary_button_text": [30, 102, 215, 255],
"monitor_secondary_button_shadow": [216, 216, 216, 255],