RadioCheckbar.qml 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. // Copyright (c) 2019 Ultimaker B.V.
  2. // Cura is released under the terms of the LGPLv3 or higher.
  3. import QtQuick 2.10
  4. import QtQuick.Controls 2.3
  5. import QtQuick.Layouts 1.3
  6. import UM 1.1 as UM
  7. Item
  8. {
  9. id: base
  10. property ButtonGroup buttonGroup: null
  11. property color activeColor: UM.Theme.getColor("primary")
  12. property color inactiveColor: UM.Theme.getColor("slider_groove")
  13. property color defaultItemColor: UM.Theme.getColor("slider_groove_fill")
  14. property color defaultItemFillColor: UM.Theme.getColor("main_background")
  15. property int checkboxSize: Math.round(UM.Theme.getSize("radio_button").height * 0.75)
  16. property int inactiveMarkerSize: 2 * barSize
  17. property int barSize: UM.Theme.getSize("slider_groove_radius").height
  18. property var isCheckedFunction // Function that accepts the modelItem and returns if the item should be active.
  19. implicitWidth: 200 * screenScaleFactor
  20. implicitHeight: checkboxSize
  21. property var dataModel: null
  22. // The horizontal inactive bar that sits behind the buttons
  23. Rectangle
  24. {
  25. id: inactiveLine
  26. color: inactiveColor
  27. height: barSize
  28. anchors
  29. {
  30. left: buttonBar.left
  31. right: buttonBar.right
  32. leftMargin: Math.round((checkboxSize - inactiveMarkerSize) / 2)
  33. rightMargin: Math.round((checkboxSize - inactiveMarkerSize) / 2)
  34. verticalCenter: parent.verticalCenter
  35. }
  36. }
  37. RowLayout
  38. {
  39. id: buttonBar
  40. anchors.top: parent.top
  41. height: checkboxSize
  42. width: parent.width
  43. spacing: 0
  44. Repeater
  45. {
  46. id: repeater
  47. model: base.dataModel
  48. height: checkboxSize
  49. Item
  50. {
  51. Layout.fillWidth: true
  52. Layout.fillHeight: true
  53. // The last item of the repeater needs to be shorter, as we don't need another part to fit
  54. // the horizontal bar. The others should essentially not be limited.
  55. Layout.maximumWidth: index + 1 === repeater.count ? activeComponent.width : 200000000
  56. property bool isEnabled: model.available
  57. // The horizontal bar between the checkable options.
  58. // Note that the horizontal bar points towards the previous item.
  59. Rectangle
  60. {
  61. property Item previousItem: repeater.itemAt(index - 1)
  62. height: barSize
  63. width: Math.round(buttonBar.width / (repeater.count - 1) - activeComponent.width - 2)
  64. color: defaultItemColor
  65. anchors
  66. {
  67. right: activeComponent.left
  68. verticalCenter: parent.verticalCenter
  69. }
  70. visible: previousItem !== null && previousItem.isEnabled && isEnabled
  71. }
  72. Loader
  73. {
  74. id: activeComponent
  75. sourceComponent: isEnabled? checkboxComponent : disabledComponent
  76. width: checkboxSize
  77. property var modelItem: model
  78. }
  79. }
  80. }
  81. }
  82. Component
  83. {
  84. id: disabledComponent
  85. Item
  86. {
  87. height: checkboxSize
  88. width: checkboxSize
  89. Rectangle
  90. {
  91. // This can (and should) be done wiht a verticalCenter. For some reason it does work in QtCreator
  92. // but not when using the exact same QML in Cura.
  93. anchors.verticalCenter: parent ? parent.verticalCenter : undefined
  94. anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
  95. height: inactiveMarkerSize
  96. width: inactiveMarkerSize
  97. radius: Math.round(width / 2)
  98. color: inactiveColor
  99. }
  100. }
  101. }
  102. Component
  103. {
  104. id: checkboxComponent
  105. CheckBox
  106. {
  107. id: checkbox
  108. ButtonGroup.group: buttonGroup
  109. width: checkboxSize
  110. height: checkboxSize
  111. property var modelData: modelItem
  112. checked: isCheckedFunction(modelItem)
  113. indicator: Rectangle
  114. {
  115. height: checkboxSize
  116. width: checkboxSize
  117. radius: Math.round(width / 2)
  118. border.color: defaultItemColor
  119. color: defaultItemFillColor
  120. Rectangle
  121. {
  122. anchors
  123. {
  124. fill: parent
  125. }
  126. radius: Math.round(width / 2)
  127. color: activeColor
  128. visible: checkbox.checked
  129. }
  130. }
  131. }
  132. }
  133. }