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

@ -5,7 +5,7 @@ import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import UM 1.3 as UM
import UM 1.5 as UM
import Cura 1.0 as Cura
import "../components"
@ -35,7 +35,7 @@ RowLayout
busy: CuraDrive.isCreatingBackup
}
Cura.CheckBoxWithTooltip
UM.CheckBox
{
id: autoBackupEnabled
checked: CuraDrive.autoBackupEnabled

View file

@ -6,7 +6,7 @@ import QtQuick.Controls 1.4 as OldControls // TableView doesn't exist in the QtQ
import QtQuick.Controls 2.3
import QtQuick.Controls.Styles 1.4
import UM 1.2 as UM
import UM 1.5 as UM
import Cura 1.6 as Cura
import DigitalFactory 1.0 as DF
@ -228,7 +228,7 @@ Item
width: childrenRect.width
spacing: UM.Theme.getSize("default_margin").width
Cura.CheckBox
UM.CheckBox
{
id: asProjectCheckbox
height: UM.Theme.getSize("checkbox").height
@ -238,7 +238,7 @@ Item
font: UM.Theme.getFont("medium")
}
Cura.CheckBox
UM.CheckBox
{
id: asSlicedCheckbox
height: UM.Theme.getSize("checkbox").height

View file

@ -6,7 +6,9 @@ import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import UM 1.2 as UM
import UM 1.5 as UM
import Cura 1.0 as Cura
UM.TooltipArea
{
@ -16,7 +18,7 @@ UM.TooltipArea
width: childrenRect.width;
height: childrenRect.height;
CheckBox
UM.CheckBox
{
id: check

View file

@ -2,7 +2,7 @@ import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import UM 1.2 as UM
import UM 1.5 as UM
import Cura 1.0 as Cura
import ".."
@ -57,7 +57,7 @@ UM.Dialog
onTextChanged: settingPickDialog.updateFilter()
}
CheckBox
UM.CheckBox
{
id: toggleShowAll
anchors

View file

@ -4,7 +4,7 @@
import QtQuick 2.10
import QtQuick.Controls 2.3
import UM 1.3 as UM
import UM 1.5 as UM
import Cura 1.1 as Cura
@ -33,7 +33,7 @@ Cura.MachineAction
renderType: Text.NativeRendering
}
Cura.CheckBox
UM.CheckBox
{
anchors.top: pageDescription.bottom
anchors.topMargin: UM.Theme.getSize("default_margin").height

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],