DropDownWidget.qml 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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 UM 1.3 as UM
  6. import Cura 1.1 as Cura
  7. //
  8. // This is the dropdown list widget in the welcome wizard. The dropdown list has a header bar which is always present,
  9. // and its content whose visibility can be toggled by clicking on the header bar. The content is displayed as an
  10. // expandable dropdown box that will appear below the header bar.
  11. //
  12. // The content is configurable via the property "contentComponent", which will be loaded by a Loader when set.
  13. //
  14. Item
  15. {
  16. UM.I18nCatalog { id: catalog; name: "cura" }
  17. id: base
  18. implicitWidth: 200 * screenScaleFactor
  19. height: header.contentShown ? (header.height + contentRectangle.height) : header.height
  20. property var contentComponent: null
  21. property alias contentItem: contentLoader.item
  22. property alias title: header.title
  23. property bool contentShown: false // indicates if this dropdown widget is expanded to show its content
  24. signal clicked()
  25. Connections
  26. {
  27. target: header
  28. onClicked:
  29. {
  30. base.contentShown = !base.contentShown
  31. clicked()
  32. }
  33. }
  34. DropDownHeader
  35. {
  36. id: header
  37. anchors.top: parent.top
  38. anchors.left: parent.left
  39. anchors.right: parent.right
  40. height: UM.Theme.getSize("expandable_component_content_header").height
  41. rightIconSource: contentShown ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
  42. contentShown: base.contentShown
  43. }
  44. Cura.RoundedRectangle
  45. {
  46. id: contentRectangle
  47. // Move up a bit (exaclty the width of the border) to avoid double line
  48. y: header.height - UM.Theme.getSize("default_lining").width
  49. anchors.left: header.left
  50. anchors.right: header.right
  51. // Add 2x lining, because it needs a bit of space on the top and the bottom.
  52. height: contentLoader.item.height + 2 * UM.Theme.getSize("thick_lining").height
  53. border.width: UM.Theme.getSize("default_lining").width
  54. border.color: UM.Theme.getColor("lining")
  55. color: UM.Theme.getColor("main_background")
  56. radius: UM.Theme.getSize("default_radius").width
  57. visible: base.contentShown
  58. cornerSide: Cura.RoundedRectangle.Direction.Down
  59. Loader
  60. {
  61. id: contentLoader
  62. anchors.top: parent.top
  63. anchors.left: parent.left
  64. anchors.right: parent.right
  65. // Keep a small margin with the Rectangle container so its content will not overlap with the Rectangle
  66. // border.
  67. anchors.margins: UM.Theme.getSize("default_lining").width
  68. sourceComponent: base.contentComponent != null ? base.contentComponent : emptyComponent
  69. }
  70. // This is the empty component/placeholder that will be shown when the widget gets expanded.
  71. // It contains a text line "Empty"
  72. Component
  73. {
  74. id: emptyComponent
  75. Label
  76. {
  77. text: catalog.i18nc("@label", "Empty")
  78. height: UM.Theme.getSize("action_button").height
  79. horizontalAlignment: Text.AlignHCenter
  80. verticalAlignment: Text.AlignVCenter
  81. font: UM.Theme.getFont("medium")
  82. renderType: Text.NativeRendering
  83. }
  84. }
  85. }
  86. }