ComboBoxStyle.qml 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2016 The Qt Company Ltd.
  4. ** Contact: https://www.qt.io/licensing/
  5. **
  6. ** This file is part of the Qt Quick Controls module of the Qt Toolkit.
  7. **
  8. ** $QT_BEGIN_LICENSE:LGPL$
  9. ** Commercial License Usage
  10. ** Licensees holding valid commercial Qt licenses may use this file in
  11. ** accordance with the commercial license agreement provided with the
  12. ** Software or, alternatively, in accordance with the terms contained in
  13. ** a written agreement between you and The Qt Company. For licensing terms
  14. ** and conditions see https://www.qt.io/terms-conditions. For further
  15. ** information use the contact form at https://www.qt.io/contact-us.
  16. **
  17. ** GNU Lesser General Public License Usage
  18. ** Alternatively, this file may be used under the terms of the GNU Lesser
  19. ** General Public License version 3 as published by the Free Software
  20. ** Foundation and appearing in the file LICENSE.LGPL3 included in the
  21. ** packaging of this file. Please review the following information to
  22. ** ensure the GNU Lesser General Public License version 3 requirements
  23. ** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
  24. **
  25. ** GNU General Public License Usage
  26. ** Alternatively, this file may be used under the terms of the GNU
  27. ** General Public License version 2.0 or (at your option) the GNU General
  28. ** Public license version 3 or any later version approved by the KDE Free
  29. ** Qt Foundation. The licenses are as published by the Free Software
  30. ** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
  31. ** included in the packaging of this file. Please review the following
  32. ** information to ensure the GNU General Public License requirements will
  33. ** be met: https://www.gnu.org/licenses/gpl-2.0.html and
  34. ** https://www.gnu.org/licenses/gpl-3.0.html.
  35. **
  36. ** $QT_END_LICENSE$
  37. **
  38. ****************************************************************************/
  39. import QtQuick 2.2
  40. import QtQuick.Window 2.1
  41. import QtQuick.Controls 1.2
  42. import QtQuick.Controls.Styles 1.1
  43. import QtQuick.Controls.Private 1.0
  44. /*!
  45. \qmltype ComboBoxStyle
  46. \inqmlmodule QtQuick.Controls.Styles
  47. \since 5.1
  48. \ingroup controlsstyling
  49. \brief Provides custom styling for ComboBox.
  50. */
  51. Style {
  52. id: cbStyle
  53. /*!
  54. \qmlproperty enumeration renderType
  55. \since QtQuick.Controls.Styles 1.2
  56. Override the default rendering type for the control.
  57. Supported render types are:
  58. \list
  59. \li Text.QtRendering
  60. \li Text.NativeRendering
  61. \endlist
  62. The default value is platform dependent.
  63. \sa Text::renderType
  64. */
  65. property int renderType: Settings.isMobile ? Text.QtRendering : Text.NativeRendering
  66. /*!
  67. \since QtQuick.Controls.Styles 1.3
  68. The font of the control.
  69. */
  70. property font font
  71. /*!
  72. \since QtQuick.Controls.Styles 1.3
  73. The text color.
  74. */
  75. property color textColor: SystemPaletteSingleton.text(control.enabled)
  76. /*!
  77. \since QtQuick.Controls.Styles 1.3
  78. The text highlight color, used behind selections.
  79. */
  80. property color selectionColor: SystemPaletteSingleton.highlight(control.enabled)
  81. /*!
  82. \since QtQuick.Controls.Styles 1.3
  83. The highlighted text color, used in selections.
  84. */
  85. property color selectedTextColor: SystemPaletteSingleton.highlightedText(control.enabled)
  86. /*! The \l ComboBox this style is attached to. */
  87. readonly property ComboBox control: __control
  88. /*! The padding between the background and the label components. */
  89. padding { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
  90. /*! The size of the drop down button when the combobox is editable. */
  91. property int dropDownButtonWidth: Math.round(TextSingleton.implicitHeight)
  92. /*! \internal Alias kept for backwards compatibility with a spelling mistake in 5.2.0) */
  93. property alias drowDownButtonWidth: cbStyle.dropDownButtonWidth
  94. /*! This defines the background of the button. */
  95. property Component background: Item {
  96. implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
  97. implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
  98. Rectangle {
  99. anchors.fill: parent
  100. anchors.bottomMargin: control.pressed ? 0 : -1
  101. color: "#10000000"
  102. radius: baserect.radius
  103. }
  104. Rectangle {
  105. id: baserect
  106. gradient: Gradient {
  107. GradientStop {color: control.pressed ? "#bababa" : "#fefefe" ; position: 0}
  108. GradientStop {color: control.pressed ? "#ccc" : "#e3e3e3" ; position: 1}
  109. }
  110. radius: TextSingleton.implicitHeight * 0.16
  111. anchors.fill: parent
  112. border.color: control.activeFocus ? "#47b" : "#999"
  113. Rectangle {
  114. anchors.fill: parent
  115. radius: parent.radius
  116. color: control.activeFocus ? "#47b" : "white"
  117. opacity: control.hovered || control.activeFocus ? 0.1 : 0
  118. Behavior on opacity {NumberAnimation{ duration: 100 }}
  119. }
  120. }
  121. Image {
  122. id: imageItem
  123. visible: control.menu !== null
  124. source: "images/arrow-down.png"
  125. anchors.verticalCenter: parent.verticalCenter
  126. anchors.right: parent.right
  127. anchors.rightMargin: dropDownButtonWidth / 2
  128. opacity: control.enabled ? 0.6 : 0.3
  129. }
  130. }
  131. /*! \internal */
  132. property Component __editor: Item {
  133. implicitWidth: 100
  134. implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
  135. clip: true
  136. Rectangle {
  137. anchors.fill: parent
  138. anchors.bottomMargin: 0
  139. color: "#44ffffff"
  140. radius: baserect.radius
  141. }
  142. Rectangle {
  143. id: baserect
  144. anchors.rightMargin: -radius
  145. anchors.bottomMargin: 1
  146. gradient: Gradient {
  147. GradientStop {color: "#e0e0e0" ; position: 0}
  148. GradientStop {color: "#fff" ; position: 0.1}
  149. GradientStop {color: "#fff" ; position: 1}
  150. }
  151. radius: TextSingleton.implicitHeight * 0.16
  152. anchors.fill: parent
  153. border.color: control.activeFocus ? "#47b" : "#999"
  154. }
  155. Rectangle {
  156. color: "#aaa"
  157. anchors.bottomMargin: 2
  158. anchors.topMargin: 1
  159. anchors.right: parent.right
  160. anchors.top: parent.top
  161. anchors.bottom: parent.bottom
  162. width: 1
  163. }
  164. }
  165. /*! This defines the label of the button. */
  166. property Component label: Item {
  167. implicitWidth: textitem.implicitWidth + 20
  168. baselineOffset: textitem.y + textitem.baselineOffset
  169. Text {
  170. id: textitem
  171. anchors.left: parent.left
  172. anchors.right: parent.right
  173. anchors.leftMargin: 4
  174. anchors.rightMargin: 10
  175. anchors.verticalCenter: parent.verticalCenter
  176. text: control.currentText
  177. renderType: cbStyle.renderType
  178. font: cbStyle.font
  179. color: cbStyle.textColor
  180. elide: Text.ElideRight
  181. }
  182. }
  183. /*! \internal */
  184. property Component panel: Item {
  185. property bool popup: false
  186. property font font: cbStyle.font
  187. property color textColor: cbStyle.textColor
  188. property color selectionColor: cbStyle.selectionColor
  189. property color selectedTextColor: cbStyle.selectedTextColor
  190. property int dropDownButtonWidth: cbStyle.dropDownButtonWidth
  191. anchors.centerIn: parent
  192. anchors.fill: parent
  193. implicitWidth: backgroundLoader.implicitWidth
  194. implicitHeight: Math.max(labelLoader.implicitHeight + padding.top + padding.bottom, backgroundLoader.implicitHeight)
  195. baselineOffset: labelLoader.item ? padding.top + labelLoader.item.baselineOffset: 0
  196. Loader {
  197. id: backgroundLoader
  198. anchors.fill: parent
  199. sourceComponent: background
  200. }
  201. Loader {
  202. id: editorLoader
  203. anchors.fill: parent
  204. anchors.rightMargin: dropDownButtonWidth + padding.right
  205. anchors.bottomMargin: -1
  206. sourceComponent: control.editable ? __editor : null
  207. }
  208. Loader {
  209. id: labelLoader
  210. sourceComponent: label
  211. visible: !control.editable
  212. anchors.fill: parent
  213. anchors.leftMargin: padding.left
  214. anchors.topMargin: padding.top
  215. anchors.rightMargin: padding.right
  216. anchors.bottomMargin: padding.bottom
  217. }
  218. }
  219. /*! \internal */
  220. property Component __dropDownStyle: MenuStyle {
  221. font: cbStyle.font
  222. __labelColor: cbStyle.textColor
  223. __selectedLabelColor: cbStyle.selectedTextColor
  224. __selectedBackgroundColor: cbStyle.selectionColor
  225. __maxPopupHeight: 600
  226. __menuItemType: "comboboxitem"
  227. __scrollerStyle: ScrollViewStyle { }
  228. }
  229. /*! \internal */
  230. property Component __popupStyle: Style {
  231. property int __maxPopupHeight: 400
  232. property int submenuOverlap: 0
  233. property int submenuPopupDelay: 100
  234. property Component frame: Rectangle {
  235. id: popupFrame
  236. border.color: "white"
  237. Text {
  238. text: "NOT IMPLEMENTED"
  239. color: "red"
  240. font {
  241. pixelSize: 10
  242. bold: true
  243. }
  244. anchors.centerIn: parent
  245. rotation: -Math.atan2(popupFrame.height, popupFrame.width) * 180 / Math.PI
  246. }
  247. }
  248. property Component menuItemPanel: Text {
  249. text: styleData.text
  250. }
  251. property Component __scrollerStyle: null
  252. }
  253. /*! \internal
  254. The cursor handle.
  255. \since QtQuick.Controls.Styles 1.3
  256. The parent of the handle is positioned to the top left corner of
  257. the cursor position. The interactive area is determined by the
  258. geometry of the handle delegate.
  259. The following signals and read-only properties are available within the scope
  260. of the handle delegate:
  261. \table
  262. \row \li \b {styleData.activated()} [signal] \li Emitted when the handle is activated ie. the editor is clicked.
  263. \row \li \b {styleData.pressed} : bool \li Whether the handle is pressed.
  264. \row \li \b {styleData.position} : int \li The character position of the handle.
  265. \row \li \b {styleData.lineHeight} : real \li The height of the line the handle is on.
  266. \row \li \b {styleData.hasSelection} : bool \li Whether the editor has selected text.
  267. \endtable
  268. */
  269. property Component __cursorHandle
  270. /*! \internal
  271. The selection handle.
  272. \since QtQuick.Controls.Styles 1.3
  273. The parent of the handle is positioned to the top left corner of
  274. the first selected character. The interactive area is determined
  275. by the geometry of the handle delegate.
  276. The following signals and read-only properties are available within the scope
  277. of the handle delegate:
  278. \table
  279. \row \li \b {styleData.activated()} [signal] \li Emitted when the handle is activated ie. the editor is clicked.
  280. \row \li \b {styleData.pressed} : bool \li Whether the handle is pressed.
  281. \row \li \b {styleData.position} : int \li The character position of the handle.
  282. \row \li \b {styleData.lineHeight} : real \li The height of the line the handle is on.
  283. \row \li \b {styleData.hasSelection} : bool \li Whether the editor has selected text.
  284. \endtable
  285. */
  286. property Component __selectionHandle
  287. /*! \internal
  288. The cursor delegate.
  289. \since QtQuick.Controls.Styles 1.3
  290. */
  291. property Component __cursorDelegate
  292. }