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. // Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.3 import QtQuick 2.3
import QtQuick.Controls 1.4 import QtQuick.Controls 2.4
import QtQuick.Controls.Styles 1.3 import QtQuick.Controls.Styles 1.3
import UM 1.3 as UM import UM 1.3 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
Rectangle Button
{ {
id: base
property var enabled: true
property var iconSource: null property var iconSource: null
color: enabled ? UM.Theme.getColor("monitor_icon_primary") : UM.Theme.getColor("monitor_icon_disabled") width: UM.Theme.getSize("button").width * 0.75 //Matching the size of the content of tool buttons.
height: width height: UM.Theme.getSize("button").height * 0.75
radius: Math.round(0.5 * width)
width: 24 * screenScaleFactor 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 UM.RecolorImage
{ {
@ -27,30 +30,21 @@ Rectangle
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
color: UM.Theme.getColor("monitor_icon_accent") color: UM.Theme.getColor("primary")
height: width height: width
source: iconSource source: iconSource
width: Math.round(parent.width / 2) width: Math.round(parent.width / 2)
} }
MouseArea onClicked:
{ {
id: clickArea if (OutputDevice.activeCameraUrl != "")
anchors.fill: parent
hoverEnabled: base.enabled
onClicked:
{ {
if (base.enabled) OutputDevice.setActiveCameraUrl("")
{ }
if (OutputDevice.activeCameraUrl != "") else
{ {
OutputDevice.setActiveCameraUrl("") OutputDevice.setActiveCameraUrl(modelData.cameraUrl)
}
else
{
OutputDevice.setActiveCameraUrl(modelData.cameraUrl)
}
}
} }
} }
} }

View File

@ -437,7 +437,7 @@
"monitor_icon_accent": [255, 255, 255, 255], "monitor_icon_accent": [255, 255, 255, 255],
"monitor_icon_disabled": [238, 238, 238, 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": [240, 240, 240, 255],
"monitor_secondary_button_text": [30, 102, 215, 255], "monitor_secondary_button_text": [30, 102, 215, 255],
"monitor_secondary_button_shadow": [216, 216, 216, 255], "monitor_secondary_button_shadow": [216, 216, 216, 255],