diff --git a/DapComboBox.qml b/DapComboBox.qml
index efc5185041fbb6d2b07820b3f5dcdd7d03ed9952..27e6e79ca8cfec3164c1902ee3f8256b4cf21844 100644
--- a/DapComboBox.qml
+++ b/DapComboBox.qml
@@ -12,6 +12,8 @@ import QtGraphicalEffects 1.0
///@fontSizeComboBox - font size for the entire widget (px).
///@widthPopupComboBoxActive and @widthPopupComboBoxNormal - width of the combo box
/// in the active state and in the normal state
+///@heightComboBoxNormal and @heightComboBoxActive - height of the combo box
+/// in the active state and in the normal state
///@sidePaddingActive and @sidePaddingNormal - padding width of the combo box in the active state
/// and in the normal state
///@sidePaddingActive and @sidePaddingNormal - sets the indent from the edge of the right and left
@@ -21,20 +23,35 @@ import QtGraphicalEffects 1.0
/// - sets the indent from the edge of the upper and lower edges of the parent in the active and normal state
///@indicatorImageNormal and @indicatorImageActive - indicator picture address for active and normal state
///@indicatorWidth and @indicatorHeight - indicator width and height
-
+///@heightListElement - List item height
+///@intervalListElement - spacing between items in a list
+///@bottomIntervalListElement - spacing from bottom to bottom
+///@topEffect - Using an effect for the top element
+///@colorTopNormalDropShadow - Color of the shadow effect of the combo box when minimized
+///@colorDropShadow - Unboxed shadow color in expanded state
+///@paddingTopItemDelegate - indent above and below from item delegate
ComboBox {
+ property string normalColorText: "#070023"
+ property string hilightColorText: "#FFFFFF"
+
property string normalColorTopText:normalColorText
property string hilightColorTopText:normalColorText
property string normalColor: "#FFFFFF"
property string hilightColor: "#330F54"
+ property string normalTopColor: normalColor
+ property string hilightTopColor: normalColor
+
property int fontSizeComboBox: 16*pt
property int widthPopupComboBoxNormal: parent.width
property int widthPopupComboBoxActive: widthPopupComboBoxNormal
+ property int heightComboBoxNormal: parent.height
+ property int heightComboBoxActive: heightComboBoxNormal
+
property int sidePaddingNormal:16 * pt
property int sidePaddingActive:sidePaddingNormal
@@ -44,47 +61,79 @@ ComboBox {
property int bottomIndentNormal:14 * pt
property int bottomIndentActive:bottomIndentNormal
+ property int paddingTopItemDelegate:8 * pt
+ property int paddingBottomItemDelegate:paddingTopItemDelegate
+
+ property int heightListElement: 32 * pt
+ property int intervalListElement: 10 * pt
+ property int bottomIntervalListElement:intervalListElement
+ property bool topEffect: true
+
property string indicatorImageNormal: "qrc:/res/icons/ic_arrow_drop_down_dark_blue.png"
property string indicatorImageActive: "qrc:/res/icons/ic_arrow_drop_up_dark_blue.png"
property int indicatorWidth: 24*pt
property int indicatorHeight: indicatorWidth
+ property string colorTopNormalDropShadow:"#00000000"
+ property string colorDropShadow:"#40ABABAB"
id: customComboBox
width: popup.visible ? widthPopupComboBoxActive : widthPopupComboBoxNormal
- height: parent.height
-
+ height: popup.visible ? heightComboBoxActive : heightComboBoxNormal
+ anchors.verticalCenter: parent.verticalCenter
delegate:ItemDelegate {
width: parent.width
+
+ ///Adjusting the height of the line, taking into account that the second element from the end may be the last.
height:{
- if(index == currentIndex) return 0
- else return 42*pt
+ if(index != currentIndex)
+ {
+ if(index == customComboBox.count - 2)
+ {
+ if(index+1 == currentIndex) return heightListElement + bottomIntervalListElement
+ else return heightListElement + intervalListElement
+ }
+ if (index == customComboBox.count - 1) return heightListElement + bottomIntervalListElement
+ return heightListElement + intervalListElement
+ }
+ else return 0
}
+ ///Text item
contentItem: Text {
id:textDelegateComboBox
anchors.fill: parent
- anchors.topMargin: 8 * pt
+ anchors.topMargin: paddingTopItemDelegate
anchors.leftMargin: popup.visible ? sidePaddingActive : sidePaddingNormal
- verticalAlignment: Qt.AlignTop
font.family: fontRobotoRegular.name
- font.pixelSize: fontSizeComboBox
- text: {if(index != currentIndex) return modelData;}
- color: hovered ? hilightColorText : normalColorText
+ font.pixelSize: fontSizeComboBox
+ text: {if(index != currentIndex) return modelData;}
+ color: hovered ? hilightColorText : normalColorText
}
+
+ //Indent from the bottom edge or the next line that will not stand out when you hover over the mouse
background: Rectangle {
anchors.fill: parent
- anchors.bottomMargin: 10 * pt
+ anchors.bottomMargin: {
+ if(index == customComboBox.count - 2)
+ {
+ if(index+1 == currentIndex) return bottomIntervalListElement
+ else return intervalListElement
+ }
+ if (index == customComboBox.count - 1) return bottomIntervalListElement
+ return intervalListElement
+ }
+
color: hovered ? hilightColor : normalColor
- }
+ //the list text
+ }
highlighted: parent.highlightedIndex === index
-
}
-
- indicator: Image {
+ //Icon icon near the text (arrow)
+ indicator: Image {
source: parent.popup.visible ? indicatorImageActive : indicatorImageNormal
width: indicatorWidth
height: indicatorHeight
@@ -93,25 +142,26 @@ ComboBox {
anchors.rightMargin: popup.visible ? sidePaddingActive : sidePaddingNormal
}
+ ///Defining the background for the main line
background: Rectangle {
anchors.fill: parent
- color: parent.popup.visible ? normalColor : "transparent"
+ color: parent.popup.visible ? hilightTopColor : normalTopColor
radius: 2 * pt
height: parent.height
}
-
+ ///Main line text settings
contentItem: Text {
anchors.fill: parent
anchors.leftMargin: popup.visible ? sidePaddingActive : sidePaddingNormal
- anchors.topMargin: popup.visible ? topIndentActive : topIndentNormal
text: parent.displayText
font.family: fontRobotoRegular.name
font.pixelSize: fontSizeComboBox
color: popup.visible ? hilightColorTopText : normalColorTopText
- verticalAlignment: Text.AlignTop
+ verticalAlignment: Text.AlignVCenter
}
+ ///Customize drop-down list with shadow effect
popup: Popup {
y: parent.height - 1
width: parent.width + 1
@@ -125,6 +175,7 @@ ComboBox {
background: Rectangle {
width: customComboBox.background.width
+ color: parent.color
Rectangle {
id: contentCorner
anchors.fill: parent
@@ -135,16 +186,17 @@ ComboBox {
source: contentCorner
verticalOffset: 9 * pt
samples: 13 * pt
- color: "#40000000"
+ color: colorDropShadow
}
}
}
+ ///Shadow effect for the top element.
DropShadow {
- anchors.fill: parent
- source: background
- verticalOffset: 9 * pt
- samples: 13 * pt
- color: "#40000000"
+ anchors.fill: if(topEffect) parent
+ source: if(topEffect) background
+ verticalOffset: if(topEffect) 9 * pt
+ samples: if(topEffect) 13 * pt
+ color: if(topEffect) customComboBox.popup.visible ? colorDropShadow : colorTopNormalDropShadow
}
}