Merge pull request #11328 from Ultimaker/CURA-8378_improve_checkbox_visibility

Cura 8378 improve checkbox visibility
This commit is contained in:
Evangelos Trantos 2022-02-02 19:54:34 +02:00 committed by GitHub
commit d7c3495509
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 85 additions and 217 deletions

View file

@ -1,63 +0,0 @@
// Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7
import QtQuick.Controls 2.1
import UM 1.3 as UM
CheckBox
{
id: checkbox
hoverEnabled: true
property alias tooltip: tooltip.text
indicator: Rectangle
{
implicitWidth: UM.Theme.getSize("checkbox").width
implicitHeight: UM.Theme.getSize("checkbox").height
x: 0
anchors.verticalCenter: parent.verticalCenter
color: UM.Theme.getColor("main_background")
radius: UM.Theme.getSize("checkbox_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color: checkbox.hovered ? UM.Theme.getColor("checkbox_border_hover") : UM.Theme.getColor("checkbox_border")
UM.RecolorImage
{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: Math.round(parent.width / 2.5)
height: Math.round(parent.height / 2.5)
sourceSize.height: width
color: UM.Theme.getColor("checkbox_mark")
source: UM.Theme.getIcon("Check")
opacity: checkbox.checked
Behavior on opacity { NumberAnimation { duration: 100; } }
}
}
contentItem: Label
{
anchors
{
left: checkbox.indicator.right
leftMargin: UM.Theme.getSize("narrow_margin").width
}
text: checkbox.text
color: UM.Theme.getColor("checkbox_text")
font: UM.Theme.getFont("default")
renderType: Text.NativeRendering
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
ToolTip
{
id: tooltip
text: ""
delay: 500
visible: text != "" && checkbox.hovered
}
}

View file

@ -8,7 +8,7 @@ import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.1
import UM 1.3 as UM
import UM 1.5 as UM
import Cura 1.0 as Cura
@ -92,17 +92,11 @@ UM.Dialog
wrapMode: Text.WordWrap
}
CheckBox
UM.CheckBox
{
id: rememberChoiceCheckBox
text: catalog.i18nc("@text:window", "Remember my choice")
checked: UM.Preferences.getValue("cura/choice_on_open_project") != "always_ask"
style: CheckBoxStyle {
label: Label {
text: control.text
font: UM.Theme.getFont("default")
}
}
}
// Buttons

View file

@ -7,7 +7,7 @@ import QtQuick.Controls 2.0 as Controls2
import QtQuick.Layouts 1.3
import QtQuick.Window 2.2
import UM 1.2 as UM
import UM 1.5 as UM
import Cura 1.0 as Cura
UM.Dialog
@ -275,7 +275,7 @@ UM.Dialog
width: parent.width
height: childrenRect.height
anchors.bottom: parent.bottom
CheckBox
UM.CheckBox
{
id: dontShowAgainCheckbox
anchors.left: parent.left

View file

@ -5,7 +5,7 @@ import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import UM 1.3 as UM
import UM 1.5 as UM
import Cura 1.1 as Cura
@ -20,7 +20,7 @@ UM.TooltipArea
property int controlHeight: UM.Theme.getSize("setting_control").height
height: childrenRect.height
height: controlHeight
width: childrenRect.width
text: tooltip
@ -57,13 +57,16 @@ UM.TooltipArea
renderType: Text.NativeRendering
}
Cura.CheckBox
UM.CheckBox
{
id: checkBox
anchors.left: fieldLabel.right
anchors.leftMargin: UM.Theme.getSize("default_margin").width
anchors {
left: fieldLabel.right
leftMargin: UM.Theme.getSize("default_margin").width
verticalCenter: parent.verticalCenter
}
checked: String(propertyProvider.properties.value).toLowerCase() != 'false'
height: simpleCheckBox.controlHeight
height: UM.Theme.getSize("checkbox").height
text: ""
onClicked:
{

View file

@ -8,7 +8,7 @@ import QtQuick.Controls.Styles 1.1
import QtQuick.Controls 2.3 as NewControls
import UM 1.1 as UM
import UM 1.5 as UM
import Cura 1.1 as Cura
UM.PreferencesPage
@ -304,7 +304,7 @@ UM.PreferencesPage
text: catalog.i18nc("@info:tooltip", "Slice automatically when changing settings.")
CheckBox
UM.CheckBox
{
id: autoSliceCheckbox
checked: boolCheck(UM.Preferences.getValue("general/auto_slice"))
@ -334,7 +334,7 @@ UM.PreferencesPage
text: catalog.i18nc("@info:tooltip", "Highlight unsupported areas of the model in red. Without support these areas will not print properly.")
CheckBox
UM.CheckBox
{
id: showOverhangCheckbox
@ -353,7 +353,7 @@ UM.PreferencesPage
text: catalog.i18nc("@info:tooltip", "Highlight missing or extraneous surfaces of the model using warning signs. The toolpaths will often be missing parts of the intended geometry.")
CheckBox
UM.CheckBox
{
id: showXrayErrorCheckbox
@ -370,7 +370,7 @@ UM.PreferencesPage
height: childrenRect.height;
text: catalog.i18nc("@info:tooltip", "Moves the camera so the model is in the center of the view when a model is selected")
CheckBox
UM.CheckBox
{
id: centerOnSelectCheckbox
text: catalog.i18nc("@action:button","Center camera when item is selected");
@ -385,7 +385,7 @@ UM.PreferencesPage
height: childrenRect.height;
text: catalog.i18nc("@info:tooltip", "Should the default zoom behavior of cura be inverted?")
CheckBox
UM.CheckBox
{
id: invertZoomCheckbox
text: catalog.i18nc("@action:button", "Invert the direction of camera zoom.");
@ -406,7 +406,7 @@ UM.PreferencesPage
height: childrenRect.height;
text: zoomToMouseCheckbox.enabled ? catalog.i18nc("@info:tooltip", "Should zooming move in the direction of the mouse?") : catalog.i18nc("@info:tooltip", "Zooming towards the mouse is not supported in the orthographic perspective.")
CheckBox
UM.CheckBox
{
id: zoomToMouseCheckbox
text: catalog.i18nc("@action:button", "Zoom toward mouse direction")
@ -437,7 +437,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip", "Should models on the platform be moved so that they no longer intersect?")
CheckBox
UM.CheckBox
{
id: pushFreeCheckbox
text: catalog.i18nc("@option:check", "Ensure models are kept apart")
@ -451,7 +451,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip", "Should models on the platform be moved down to touch the build plate?")
CheckBox
UM.CheckBox
{
id: dropDownCheckbox
text: catalog.i18nc("@option:check", "Automatically drop models to the build plate")
@ -468,7 +468,7 @@ UM.PreferencesPage
text: catalog.i18nc("@info:tooltip","Show caution message in g-code reader.")
CheckBox
UM.CheckBox
{
id: gcodeShowCautionCheckbox
@ -485,7 +485,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip", "Should layer be forced into compatibility mode?")
CheckBox
UM.CheckBox
{
id: forceLayerViewCompatibilityModeCheckbox
text: catalog.i18nc("@option:check", "Force layer view compatibility mode (restart required)")
@ -500,7 +500,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip", "Should Cura open at the location it was closed?")
CheckBox
UM.CheckBox
{
id: restoreWindowPositionCheckbox
text: catalog.i18nc("@option:check", "Restore window position on start")
@ -575,7 +575,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip","Should opening files from the desktop or external applications open in the same instance of Cura?")
CheckBox
UM.CheckBox
{
id: singleInstanceCheckbox
text: catalog.i18nc("@option:check","Use a single instance of Cura")
@ -591,7 +591,7 @@ UM.PreferencesPage
text: catalog.i18nc("@info:tooltip","Should the build plate be cleared before loading a new model in the single instance of Cura?")
enabled: singleInstanceCheckbox.checked
CheckBox
UM.CheckBox
{
id: singleInstanceClearBeforeLoadCheckbox
text: catalog.i18nc("@option:check","Clear buildplate before loading model into the single instance")
@ -606,7 +606,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip","Should models be scaled to the build volume if they are too large?")
CheckBox
UM.CheckBox
{
id: scaleToFitCheckbox
text: catalog.i18nc("@option:check","Scale large models")
@ -621,7 +621,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip","An model may appear extremely small if its unit is for example in meters rather than millimeters. Should these models be scaled up?")
CheckBox
UM.CheckBox
{
id: scaleTinyCheckbox
text: catalog.i18nc("@option:check","Scale extremely small models")
@ -636,7 +636,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip","Should models be selected after they are loaded?")
CheckBox
UM.CheckBox
{
id: selectModelsOnLoadCheckbox
text: catalog.i18nc("@option:check","Select models when loaded")
@ -651,7 +651,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip", "Should a prefix based on the printer name be added to the print job name automatically?")
CheckBox
UM.CheckBox
{
id: prefixJobNameCheckbox
text: catalog.i18nc("@option:check", "Add machine prefix to job name")
@ -666,7 +666,7 @@ UM.PreferencesPage
height: childrenRect.height
text: catalog.i18nc("@info:tooltip", "Should a summary be shown when saving a project file?")
CheckBox
UM.CheckBox
{
text: catalog.i18nc("@option:check", "Show summary dialog when saving project")
checked: boolCheck(UM.Preferences.getValue("cura/dialog_on_project_save"))
@ -811,7 +811,7 @@ UM.PreferencesPage
height: visible ? childrenRect.height : 0
text: catalog.i18nc("@info:tooltip", "Should anonymous data about your print be sent to Ultimaker? Note, no models, IP addresses or other personally identifiable information is sent or stored.")
CheckBox
UM.CheckBox
{
id: sendDataCheckbox
text: catalog.i18nc("@option:check","Send (anonymous) print information")
@ -850,7 +850,7 @@ UM.PreferencesPage
height: visible ? childrenRect.height : 0
text: catalog.i18nc("@info:tooltip", "Should Cura check for updates when the program is started?")
CheckBox
UM.CheckBox
{
id: checkUpdatesCheckbox
text: catalog.i18nc("@option:check","Check for updates on start")
@ -898,7 +898,7 @@ UM.PreferencesPage
height: visible ? childrenRect.height : 0
text: catalog.i18nc("@info:tooltip", "Should an automatic check for new plugins be done every time Cura is started? It is highly recommended that you do not disable this!")
CheckBox
UM.CheckBox
{
id: pluginNotificationsUpdateCheckbox
text: catalog.i18nc("@option:check", "Get notifications for plugin updates")

View file

@ -7,7 +7,7 @@ import QtQuick.Controls.Styles 1.1
import QtQuick.Controls 2.3 as NewControls
import UM 1.2 as UM
import UM 1.5 as UM
import Cura 1.0 as Cura
@ -36,7 +36,7 @@ UM.PreferencesPage
id: base;
anchors.fill: parent;
CheckBox
UM.CheckBox
{
id: toggleVisibleSettings
anchors
@ -46,7 +46,7 @@ UM.PreferencesPage
leftMargin: UM.Theme.getSize("default_margin").width
}
text: catalog.i18nc("@label:textbox", "Check all")
checkedState:
checkState:
{
if(definitionsModel.visibleCount == definitionsModel.categoryCount)
{
@ -61,14 +61,13 @@ UM.PreferencesPage
return Qt.PartiallyChecked
}
}
partiallyCheckedEnabled: true
MouseArea
{
anchors.fill: parent;
onClicked:
{
if(parent.checkedState == Qt.Unchecked || parent.checkedState == Qt.PartiallyChecked)
if(parent.checkState == Qt.Unchecked || parent.checkState == Qt.PartiallyChecked)
{
definitionsModel.setAllExpandedVisible(true)
}

View file

@ -85,11 +85,11 @@ SettingItem
{
anchors
{
top: parent.top
bottom: parent.bottom
verticalCenter: parent.verticalCenter
left: parent.left
}
width: height
width: UM.Theme.getSize("checkbox").width
height: width
radius: UM.Theme.getSize("setting_control_radius").width
border.width: UM.Theme.getSize("default_lining").width
@ -147,11 +147,11 @@ SettingItem
{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: Math.round(parent.width / 2.5)
height: Math.round(parent.height / 2.5)
height: UM.Theme.getSize("checkbox_mark").height
width: UM.Theme.getSize("checkbox_mark").width
sourceSize.height: width
color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text");
source: UM.Theme.getIcon("Check")
source: UM.Theme.getIcon("Check", "low")
opacity: control.checked ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100; } }
}

View file

@ -1,77 +0,0 @@
// Copyright (c) 2020 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.10
import QtQuick.Controls 2.3
import UM 1.3 as UM
import Cura 1.1 as Cura
//
// Checkbox with Cura styling.
//
CheckBox
{
id: control
hoverEnabled: true
indicator: Rectangle
{
width: control.height
height: control.height
color:
{
if (!control.enabled)
{
return UM.Theme.getColor("setting_control_disabled")
}
if (control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_highlight")
}
return UM.Theme.getColor("setting_control")
}
radius: UM.Theme.getSize("setting_control_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color:
{
if (!enabled)
{
return UM.Theme.getColor("setting_control_disabled_border")
}
if (control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_border_highlight")
}
return UM.Theme.getColor("setting_control_border")
}
UM.RecolorImage
{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: Math.round(parent.width / 2.5)
height: Math.round(parent.height / 2.5)
sourceSize.height: width
color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text")
source: UM.Theme.getIcon("Check")
opacity: control.checked ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100; } }
}
}
contentItem: Label
{
id: textLabel
leftPadding: control.indicator.width + control.spacing
text: control.text
font: control.font
color: UM.Theme.getColor("text")
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
}
}

View file

@ -37,7 +37,7 @@ MenuItem
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: UM.Theme.getSize("default_margin").width
source: UM.Theme.getIcon("Check")
source: UM.Theme.getIcon("Check", "low")
color: UM.Theme.getColor("setting_control_text")
}

View file

@ -16,7 +16,6 @@ ViewsSelector 1.0 ViewsSelector.qml
ToolbarButton 1.0 ToolbarButton.qml
SettingView 1.0 SettingView.qml
ProfileMenu 1.0 ProfileMenu.qml
CheckBoxWithTooltip 1.0 CheckBoxWithTooltip.qml
ToolTip 1.0 ToolTip.qml
@ -28,7 +27,6 @@ WizardDialog 1.0 WizardDialog.qml
# Cura/Widgets
CheckBox 1.0 CheckBox.qml
ComboBox 1.0 ComboBox.qml
NotificationIcon 1.0 NotificationIcon.qml
RadioButton 1.0 RadioButton.qml

View file

@ -152,6 +152,7 @@
"checkbox_border": [255, 255, 255, 38],
"checkbox_border_hover": [255, 255, 255, 38],
"checkbox_mark": [255, 255, 255, 181],
"checkbox_square": [118, 118, 118, 255],
"checkbox_text": [255, 255, 255, 181],
"tooltip": [39, 44, 48, 255],

View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7 13.3L7.4 10L6 11.4L10.7 16.1L17.4 9.4L16 8L10.7 13.3Z"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 9.41397L2.293 6.70697L3.707 5.29297L5 6.58597L8.293 3.29297L9.707 4.70697L5 9.41397Z" fill="#000E1A"/>
</svg>

Before

Width:  |  Height:  |  Size: 163 B

After

Width:  |  Height:  |  Size: 218 B

Before After
Before After

View file

@ -0,0 +1,4 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="12" height="12" fill="white"/>
<rect x="1" y="1" width="10" height="10" fill="#B4B4B4"/>
</svg>

After

Width:  |  Height:  |  Size: 205 B

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7 13.3L7.4 10L6 11.4L10.7 16.1L17.4 9.4L16 8L10.7 13.3Z"/>
</svg>

After

Width:  |  Height:  |  Size: 163 B

View file

@ -408,7 +408,7 @@ QtObject
color: (control.hovered || control._hovered) ? UM.Theme.getColor("checkbox_hover") : (control.enabled ? UM.Theme.getColor("checkbox") : UM.Theme.getColor("checkbox_disabled"))
Behavior on color { ColorAnimation { duration: 50; } }
anchors.verticalCenter: parent.verticalCenter
radius: control.exclusiveGroup ? Math.round(UM.Theme.getSize("checkbox").width / 2) : UM.Theme.getSize("checkbox_radius").width
border.width: UM.Theme.getSize("default_lining").width
@ -418,11 +418,11 @@ QtObject
{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: Math.round(parent.width / 2.5)
height: Math.round(parent.height / 2.5)
height: UM.Theme.getSize("checkbox_mark").height
width: UM.Theme.getSize("checkbox_mark").width
sourceSize.height: width
color: UM.Theme.getColor("checkbox_mark")
source: control.exclusiveGroup ? UM.Theme.getIcon("Dot") : UM.Theme.getIcon("Check")
source: control.exclusiveGroup ? UM.Theme.getIcon("Dot") : UM.Theme.getIcon("Check", "low")
opacity: control.checked
Behavior on opacity { NumberAnimation { duration: 100; } }
}
@ -460,8 +460,8 @@ QtObject
{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: Math.round(parent.width / 2.5)
height: Math.round(parent.height / 2.5)
height: UM.Theme.getSize("checkbox_mark").height
width: UM.Theme.getSize("checkbox_mark").width
sourceSize.height: width
color: UM.Theme.getColor("checkbox_mark")
source:
@ -472,7 +472,7 @@ QtObject
}
else
{
return control.exclusiveGroup ? UM.Theme.getIcon("Dot", "low") : UM.Theme.getIcon("Check");
return control.exclusiveGroup ? UM.Theme.getIcon("Dot", "low") : UM.Theme.getIcon("Check", "low");
}
}
opacity: control.checked

View file

@ -350,11 +350,12 @@
"checkbox": [255, 255, 255, 255],
"checkbox_hover": [255, 255, 255, 255],
"checkbox_border": [199, 199, 199, 255],
"checkbox_border_hover": [50, 130, 255, 255],
"checkbox_border": [180, 180, 180, 255],
"checkbox_border_hover": [25, 110, 240, 255],
"checkbox_mark": [35, 35, 35, 255],
"checkbox_square": [180, 180, 180, 255],
"checkbox_disabled": [223, 223, 223, 255],
"checkbox_text": [35, 35, 35, 255],
"checkbox_text": [0, 12, 26, 255],
"tooltip": [25, 25, 25, 255],
"tooltip_text": [255, 255, 255, 255],
@ -607,8 +608,11 @@
"layerview_row": [11.0, 1.5],
"layerview_row_spacing": [0.0, 0.5],
"checkbox": [1.5, 1.5],
"checkbox_radius": [0.08, 0.08],
"checkbox": [1.33, 1.33],
"checkbox_mark": [1, 1],
"checkbox_square": [0.83, 0.83],
"checkbox_radius": [0.25, 0.25],
"checkbox_label_padding": [0.5, 0.5],
"tooltip": [20.0, 10.0],
"tooltip_margins": [1.0, 1.0],