OnboardBanner.qml 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. // Copyright (c) 2021 Ultimaker B.V.
  2. // Cura is released under the terms of the LGPLv3 or higher.
  3. import QtQuick 2.15
  4. import QtQuick.Controls 2.15
  5. import QtQuick.Layouts 1.1
  6. import UM 1.6 as UM
  7. import Cura 1.6 as Cura
  8. // Onboarding banner.
  9. Rectangle
  10. {
  11. property alias icon: onboardingIcon.source
  12. property alias text: infoText.text
  13. property var onRemove
  14. property string readMoreUrl
  15. Layout.preferredHeight: childrenRect.height + 2 * UM.Theme.getSize("default_margin").height
  16. anchors
  17. {
  18. margins: UM.Theme.getSize("default_margin").width
  19. left: parent.left
  20. right: parent.right
  21. }
  22. color: UM.Theme.getColor("action_panel_secondary")
  23. // Icon
  24. UM.RecolorImage
  25. {
  26. id: onboardingIcon
  27. anchors
  28. {
  29. top: parent.top
  30. left: parent.left
  31. margins: UM.Theme.getSize("default_margin").width
  32. }
  33. width: UM.Theme.getSize("button_icon").width
  34. height: UM.Theme.getSize("button_icon").height
  35. }
  36. // Close button
  37. UM.SimpleButton
  38. {
  39. id: onboardingClose
  40. anchors
  41. {
  42. top: parent.top
  43. right: parent.right
  44. margins: UM.Theme.getSize("default_margin").width
  45. }
  46. width: UM.Theme.getSize("message_close").width
  47. height: UM.Theme.getSize("message_close").height
  48. color: UM.Theme.getColor("primary_text")
  49. hoverColor: UM.Theme.getColor("primary_text_hover")
  50. iconSource: UM.Theme.getIcon("Cancel")
  51. onClicked: onRemove()
  52. }
  53. // Body
  54. Label {
  55. id: infoText
  56. anchors
  57. {
  58. top: parent.top
  59. left: onboardingIcon.right
  60. right: onboardingClose.left
  61. margins: UM.Theme.getSize("default_margin").width
  62. }
  63. font: UM.Theme.getFont("default")
  64. renderType: Text.NativeRendering
  65. color: UM.Theme.getColor("primary_text")
  66. wrapMode: Text.Wrap
  67. elide: Text.ElideRight
  68. onLineLaidOut:
  69. {
  70. if(line.isLast)
  71. {
  72. // Check if read more button still fits after the body text
  73. if (line.implicitWidth + readMoreButton.width + UM.Theme.getSize("default_margin").width > width)
  74. {
  75. // If it does place it after the body text
  76. readMoreButton.anchors.bottomMargin = -(fontMetrics.height + UM.Theme.getSize("thin_margin").height);
  77. readMoreButton.anchors.leftMargin = 0;
  78. }
  79. else
  80. {
  81. // Otherwise place it under the text
  82. readMoreButton.anchors.leftMargin = line.implicitWidth + UM.Theme.getSize("default_margin").width;
  83. readMoreButton.anchors.bottomMargin = 0;
  84. }
  85. }
  86. }
  87. }
  88. FontMetrics
  89. {
  90. id: fontMetrics
  91. font: UM.Theme.getFont("default")
  92. }
  93. Cura.TertiaryButton
  94. {
  95. visible: readMoreUrl !== ""
  96. id: readMoreButton
  97. anchors.left: infoText.left
  98. anchors.bottom: infoText.bottom
  99. text: "Learn More"
  100. textFont: UM.Theme.getFont("default")
  101. textColor: infoText.color
  102. leftPadding: 0
  103. rightPadding: 0
  104. iconSource: UM.Theme.getIcon("LinkExternal")
  105. isIconOnRightSide: true
  106. height: fontMetrics.height
  107. onClicked: Qt.openUrlExternally(readMoreUrl)
  108. }
  109. }